feat: fix styles

laurelin60 · Nov 29, 2024 · 6070900 · 6070900
1 parent 28398f6
commit 6070900
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 108 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;