wip

Author: hasparus

src/app/conf/2025/schedule/_components/filters.tsx

@@ -11,7 +11,7 @@ import {
 
 import { Tag } from "@/app/conf/_design-system/tag"
 import { Button } from "@/app/conf/_design-system/button"
-import { CheckboxIcon } from "@/app/conf/_design-system/checkbox-icon"
+import { CheckboxIcon } from "@/app/conf/_design-system/pixelarticons/checkbox-icon"
 
 import CloseIcon from "@/app/conf/_design-system/pixelarticons/close.svg?svgr"
 import CaretDownIcon from "@/app/conf/_design-system/pixelarticons/caret-down.svg?svgr"

src/app/conf/_design-system/pixelarticons/arrow-bar-left.svg

@@ -0,0 +1,7 @@
+export function RadioIcon() {
+  return (
+    <svg fill="currentColor" viewBox="0 0 24 24">
+      <path d="M17 3H7v2H5v2H3v10h2v2h2v2h10v-2h2v-2h2V7h-2V5h-2V3zm0 2v2h2v10h-2v2H7v-2H5V7h2V5h10zm-9 6h2v2h2v2h-2v-2H8v-2zm8-2h-2v2h-2v2h2v-2h2V9z" />
+    </svg>
+  )
+}

src/app/conf/_design-system/checkbox-icon.tsx renamed to src/app/conf/_design-system/pixelarticons/checkbox-icon.tsx

@@ -6,7 +6,6 @@ export interface CheckboxTreeItem {
   label: string
   value?: string
   count?: number
-  description?: string
   children?: CheckboxTreeItem[]
 }
 
@@ -118,23 +117,18 @@ export function CheckboxTree({
                   onChange={() => toggleValue(node.value!)}
                   className="size-4 border border-neu-400 bg-transparent [accent-color:hsl(var(--color-pri-base))]"
                 />
-                <span className="min-w-0 grow truncate text-left">
+                <span className="min-w-0 grow truncate text-left text-neu-800">
                   {node.label}
                 </span>
                 {typeof node.count === "number" && (
-                  <span className="ml-auto shrink-0 text-xs text-neu-500">
+                  <span className="ml-auto shrink-0 text-xs text-neu-600">
                     {node.count}
                   </span>
                 )}
               </label>
             ) : (
-              <div className="flex grow flex-col text-sm">
-                <span className="font-medium text-neu-600">{node.label}</span>
-                {node.description ? (
-                  <span className="text-xs text-neu-500">
-                    {node.description}
-                  </span>
-                ) : null}
+              <div className="typography-menu mt-4 text-sm text-neu-900 xl:mt-10">
+                {node.label}
               </div>
             )}
           </div>

src/app/conf/_design-system/pixelarticons/radio-icon.tsx

@@ -27,3 +27,4 @@ const RadioGroupItem = forwardRef<
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
 
 export { RadioGroup, RadioGroupItem }
+

src/components/checkbox-tree/checkbox-tree.tsx

@@ -30,6 +30,7 @@ import {
 } from "nextra-theme-docs"
 
 import { Anchor } from "../app/conf/_design-system/anchor"
+import ArrowBarLeft from "@/app/conf/_design-system/pixelarticons/arrow-bar-left.svg?svgr"
 
 const TreeState: Record<string, boolean> = Object.create(null)
 
@@ -507,9 +508,9 @@ export function Sidebar({
                   setToggleAnimation(true)
                 }}
               >
-                <ExpandIcon
-                  height="12"
+                <ArrowBarLeft
                   className={cn(
+                    "size-4",
                     !showSidebar && "first:*:_origin-[35%] first:*:_rotate-180",
                   )}
                 />

src/components/radio.tsx

@@ -279,7 +279,11 @@ export function CodePage({ allTags, data }: CodePageProps) {
         />
       </NextHead>
       <div className="container py-8 md:pt-16">
-        <h1 className="typography-h1">Code Using GraphQL</h1>
+        <h1 className="typography-h1 text-center">Tools and Libraries</h1>
+        <p className="typography-body-sm mt-8 text-center">
+          Explore tools and libraries for working with GraphQL across various
+          languages and platforms.
+        </p>
         <div className="typography-h3 my-10 flex max-w-[700px] items-center border-b border-current pb-2.5">
           <div
             className={clsx(
@@ -303,7 +307,7 @@ export function CodePage({ allTags, data }: CodePageProps) {
           />
           <MagnifyingGlassIcon className="shrink-0" />
         </div>
-        <div className="mt-8 md:grid md:grid-cols-[minmax(240px,300px)_1fr] md:gap-8 xl:grid-cols-[minmax(260px,320px)_1fr]">
+        <div className="mt-8 md:grid md:grid-cols-[minmax(240px,300px)_1fr] md:gap-8">
           <CheckboxTree
             items={filterTreeItems}
             selectedValues={selectedTags}
@@ -315,9 +319,9 @@ export function CodePage({ allTags, data }: CodePageProps) {
             <RadioGroup
               value={sort}
               onValueChange={setSort}
-              className="flex flex-wrap gap-2 md:flex-nowrap"
+              className="typography-menu flex flex-wrap gap-2 text-sm md:flex-nowrap"
             >
-              <div className="mr-4">Sort by:</div>
+              <div>Sort by:</div>
               <div className="flex items-center">
                 <RadioGroupItem value="popularity" id="r1" />
                 <label htmlFor="r1" className="cursor-pointer pl-2">
@@ -333,7 +337,7 @@ export function CodePage({ allTags, data }: CodePageProps) {
             </RadioGroup>
 
             {/* todo: add md:*:h-full when the readme opens in a modal */}
-            <div className="mt-6 grid gap-2 py-8 md:grid-cols-2 md:gap-4">
+            <div className="grid gap-2 py-8 md:grid-cols-2 md:gap-4">
               {(sort === "alphabetical"
                 ? [...newData].sort((a, b) =>
                     a.frontMatter.name.localeCompare(b.frontMatter.name),