From 6070900acd4a1d754ceade9f256ab191cab77b3e Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Fri, 29 Nov 2024 11:30:48 -0800
Subject: [PATCH] feat: fix styles

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  32 ++++
 src/components/search/Search.tsx              |   2 +-
 .../search/filter/FilterComponents.tsx        |  35 ++--
 src/components/search/filter/Filters.tsx      |   4 +-
 src/components/ui/checkbox.tsx                |  30 ++++
 tailwind.config.ts                            | 155 ++++++++----------
 7 files changed, 151 insertions(+), 108 deletions(-)
 create mode 100644 src/components/ui/checkbox.tsx

diff --git a/package.json b/package.json
index 87c8ea6..eda259e 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
         "test:watch": "jest --watch"
     },
     "dependencies": {
+        "@radix-ui/react-checkbox": "^1.1.2",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-slot": "^1.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ecb41ac..c9c34fe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@radix-ui/react-checkbox':
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-popover':
         specifier: ^1.0.7
         version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1001,6 +1004,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-checkbox@1.1.2':
+    resolution: {integrity: sha512-/i0fl686zaJbDQLNKrkCbMyDm6FQMt4jg323k7HuqitoANm9sE23Ql8yOK3Wusk34HSLKDChhMux05FnP6KUkw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.0':
     resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==}
     peerDependencies:
@@ -5423,6 +5439,22 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-checkbox@1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-collection@1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.12)(react@18.3.1)
diff --git a/src/components/search/Search.tsx b/src/components/search/Search.tsx
index e818e13..0f8fe2e 100644
--- a/src/components/search/Search.tsx
+++ b/src/components/search/Search.tsx
@@ -331,7 +331,7 @@ const Search = () => {
                     />
                 </div>
 
-                <div className="w-full xl:min-w-[65%]">
+                <div className="w-full xl:w-[65%]">
                     <div className="mb-8 flex flex-wrap items-center justify-between gap-y-4 xl:justify-end">
                         <button
                             onClick={handleFilterButtonClick}
diff --git a/src/components/search/filter/FilterComponents.tsx b/src/components/search/filter/FilterComponents.tsx
index 8bb7d6e..3a2262c 100644
--- a/src/components/search/filter/FilterComponents.tsx
+++ b/src/components/search/filter/FilterComponents.tsx
@@ -2,6 +2,7 @@
 
 import React, { ChangeEvent, Dispatch, SetStateAction, useState } from "react";
 import { Calendar } from "@/components/ui/calendar";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
     Popover,
     PopoverContent,
@@ -50,26 +51,20 @@ export const CustomFilterCheckbox = (props: FilterCheckboxProps) => {
             <div className="mb-2 text-2xl font-medium">{title}</div>
             <div className="flex flex-row flex-wrap gap-x-4 gap-y-2">
                 {categories.map((category, index) => (
-                    <label
-                        className="text-lg font-normal"
-                        key={category}
-                    >
-                        <div className="relative flex flex-row items-center gap-2">
-                            <input
-                                type="checkbox"
-                                className="h-6 w-6 appearance-none rounded-md border-[1px] border-gray bg-white checked:bg-primary"
-                                checked={categoryStates[index]}
-                                // Toggle the category state when the checkbox is clicked
-                                onChange={() => toggleCategory(index)}
-                            />
-                            <div className="absolute left-[5px] text-sm text-white">
-                                {categoryStates[index] && <CheckIcon />}
-                            </div>
-                            <div className="max-w-[85%] text-base">
-                                {category}
-                            </div>
-                        </div>
-                    </label>
+                    <div className="flex-center space-x-2">
+                        <Checkbox
+                            id={category + "label"}
+                            className="size-5 text-white"
+                            defaultChecked
+                            onClick={() => toggleCategory(index)}
+                        />
+                        <label
+                            htmlFor={category + "label"}
+                            className="text-lg"
+                        >
+                            {category}
+                        </label>
+                    </div>
                 ))}
             </div>
             <div className="mt-4 border-2 border-t border-[#D9D9D9]"></div>
diff --git a/src/components/search/filter/Filters.tsx b/src/components/search/filter/Filters.tsx
index c5d6067..ecc4dc2 100644
--- a/src/components/search/filter/Filters.tsx
+++ b/src/components/search/filter/Filters.tsx
@@ -43,9 +43,7 @@ export const SearchFilters = (props: SearchFilterProps) => {
             />
             <CustomFilterCheckbox
                 title="Available Seats"
-                categories={[
-                    "Only show courses with available seats that are open for registration or open within three days",
-                ]}
+                categories={["Only show courses with available seats"]}
                 onChange={setAvailable}
                 defaultValue={filterValues.available}
             />
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..df61a13
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index c10afaa..be432c3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -10,90 +10,77 @@ const config = {
     ],
     prefix: "",
     theme: {
-    	container: {
-    		center: true,
-    		padding: '2rem',
-    		screens: {
-    			'2xl': '1400px'
-    		}
-    	},
-    	extend: {
-    		screens: {
-    			xs: '475px'
-    		},
-    		colors: {
-    			text: '#000000',
-    			background: 'hsl(var(--background))',
-    			bg_secondary: '#E9E9E9',
-    			gray: '#00000060',
-    			primary: {
-    				DEFAULT: 'hsl(var(--primary))',
-    				foreground: 'hsl(var(--primary-foreground))'
-    			},
-    			border: 'hsl(var(--border))',
-    			input: 'hsl(var(--input))',
-    			ring: 'hsl(var(--ring))',
-    			foreground: 'hsl(var(--foreground))',
-    			secondary: {
-    				DEFAULT: 'hsl(var(--secondary))',
-    				foreground: 'hsl(var(--secondary-foreground))'
-    			},
-    			destructive: {
-    				DEFAULT: 'hsl(var(--destructive))',
-    				foreground: 'hsl(var(--destructive-foreground))'
-    			},
-    			muted: {
-    				DEFAULT: 'hsl(var(--muted))',
-    				foreground: 'hsl(var(--muted-foreground))'
-    			},
-    			accent: {
-    				DEFAULT: 'hsl(var(--accent))',
-    				foreground: 'hsl(var(--accent-foreground))'
-    			},
-    			popover: {
-    				DEFAULT: 'hsl(var(--popover))',
-    				foreground: 'hsl(var(--popover-foreground))'
-    			},
-    			card: {
-    				DEFAULT: 'hsl(var(--card))',
-    				foreground: 'hsl(var(--card-foreground))'
-    			},
-    			chart: {
-    				'1': 'hsl(var(--chart-1))',
-    				'2': 'hsl(var(--chart-2))',
-    				'3': 'hsl(var(--chart-3))',
-    				'4': 'hsl(var(--chart-4))',
-    				'5': 'hsl(var(--chart-5))'
-    			}
-    		},
-    		borderRadius: {
-    			lg: 'var(--radius)',
-    			md: 'calc(var(--radius) - 2px)',
-    			sm: 'calc(var(--radius) - 4px)'
-    		},
-    		keyframes: {
-    			'accordion-down': {
-    				from: {
-    					height: '0'
-    				},
-    				to: {
-    					height: 'var(--radix-accordion-content-height)'
-    				}
-    			},
-    			'accordion-up': {
-    				from: {
-    					height: 'var(--radix-accordion-content-height)'
-    				},
-    				to: {
-    					height: '0'
-    				}
-    			}
-    		},
-    		animation: {
-    			'accordion-down': 'accordion-down 0.2s ease-out',
-    			'accordion-up': 'accordion-up 0.2s ease-out'
-    		}
-    	}
+        container: {
+            center: true,
+            padding: "2rem",
+            screens: {
+                "2xl": "1400px",
+            },
+        },
+        extend: {
+            screens: {
+                xs: "475px",
+            },
+            colors: {
+                text: "#000000",
+                background: "#FFFFFF",
+                bg_secondary: "#E9E9E9",
+                gray: "#00000060",
+                primary: "#684BFF",
+                border: "hsl(var(--border))",
+                input: "hsl(var(--input))",
+                ring: "hsl(var(--ring))",
+                // background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                // primary: {
+                //   DEFAULT: "hsl(var(--primary))",
+                //   foreground: "hsl(var(--primary-foreground))",
+                // },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary))",
+                    foreground: "hsl(var(--secondary-foreground))",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive))",
+                    foreground: "hsl(var(--destructive-foreground))",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                popover: {
+                    DEFAULT: "hsl(var(--popover))",
+                    foreground: "hsl(var(--popover-foreground))",
+                },
+                card: {
+                    DEFAULT: "hsl(var(--card))",
+                    foreground: "hsl(var(--card-foreground))",
+                },
+            },
+            borderRadius: {
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
+            },
+            keyframes: {
+                "accordion-down": {
+                    from: { height: "0" },
+                    to: { height: "var(--radix-accordion-content-height)" },
+                },
+                "accordion-up": {
+                    from: { height: "var(--radix-accordion-content-height)" },
+                    to: { height: "0" },
+                },
+            },
+            animation: {
+                "accordion-down": "accordion-down 0.2s ease-out",
+                "accordion-up": "accordion-up 0.2s ease-out",
+            },
+        },
     },
     plugins: [require("tailwindcss-animate")],
 } satisfies Config;