refactor: fix tailwind classes

lewxdev · Aug 26, 2024 · 2d1068f · 2d1068f
1 parent 629161e
commit 2d1068f
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 43 deletions.
diff --git a/app/components/field.tsx b/app/components/field.tsx
@@ -59,7 +59,7 @@ export function Field() {
             {Array.from({ length: 9 }, (_, index) => (
               <div
                 key={index}
-                className="bg-gray-100 dark:bg-gray-600"
+                className="bg-slate-100 dark:bg-slate-600"
                 style={{ height: `${GRID_SIZE}rem`, width: `${GRID_SIZE}rem` }}
               />
             ))}

diff --git a/app/components/plot.tsx b/app/components/plot.tsx
@@ -41,20 +41,20 @@ export function Plot({ className, index, state, ...props }: Props) {
 }
 
 const classMap = new Map<PlotState, string>([
-  [1, tw`text-gray-300 dark:text-gray-700`],
-  [2, tw`text-gray-400 dark:text-gray-600`],
-  [3, tw`text-gray-500 dark:text-gray-500`],
-  [4, tw`text-gray-600 dark:text-gray-400`],
-  [5, tw`text-gray-700 dark:text-gray-300`],
-  [6, tw`text-gray-800 dark:text-gray-200`],
-  [7, tw`text-gray-900 dark:text-gray-100`],
-  [8, tw`text-gray-950 dark:text-gray-50`],
-  ["mine", tw`bg-red-500 dark:bg-red-400 text-gray-800 dark:text-gray-950`],
+  [1, tw`text-slate-300 dark:text-slate-700`],
+  [2, tw`text-slate-400 dark:text-slate-600`],
+  [3, tw`text-slate-500 dark:text-slate-500`],
+  [4, tw`text-slate-600 dark:text-slate-400`],
+  [5, tw`text-slate-700 dark:text-slate-300`],
+  [6, tw`text-slate-800 dark:text-slate-200`],
+  [7, tw`text-slate-900 dark:text-slate-100`],
+  [8, tw`text-slate-950 dark:text-slate-50`],
+  ["mine", tw`bg-red-500 dark:bg-red-400 text-slate-800 dark:text-slate-950`],
   [
     "flagged",
-    tw`bg-gray-100 dark:bg-gray-600 text-yellow-400 dark:text-yellow-300`,
+    tw`bg-slate-100 dark:bg-slate-600 text-yellow-400 dark:text-yellow-300`,
   ],
-  ["unknown", tw`bg-gray-100 dark:bg-gray-600`],
+  ["unknown", tw`bg-slate-100 dark:bg-slate-600`],
 ]);
 
 const textMap = new Map<PlotState, string | null>([

diff --git a/app/components/tutorial-dialog.tsx b/app/components/tutorial-dialog.tsx
@@ -71,10 +71,12 @@ export function TutorialDialog() {
         <div className="flex flex-col items-center text-center py-4">
           {currentStep.icon}
           <h3 className="text-lg font-semibold mb-2">{currentStep.title}</h3>
-          <p className="text-sm text-gray-600">{currentStep.description}</p>
+          <p className="text-sm text-slate-600 dark:text-slate-300">
+            {currentStep.description}
+          </p>
         </div>
         <DialogFooter>
-          <div className="text-sm text-gray-600 text-center">
+          <div className="text-sm text-slate-600 dark:text-slate-300 text-center">
             Step {step} of {totalSteps}
           </div>
           <div className="space-x-2 flex">

diff --git a/app/components/ui/dropdown-menu.tsx b/app/components/ui/dropdown-menu.tsx
@@ -26,7 +26,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-800 dark:data-[state=open]:bg-slate-800",
       inset && "pl-8",
       className,
     )}
@@ -46,7 +46,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
       className,
     )}
     {...props}
@@ -64,7 +64,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-md dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
       inset && "pl-8",
       className,
     )}
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
       className,
     )}
     checked={!!checked}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
       className,
     )}
     {...props}
@@ -162,7 +162,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className)}
     {...props}
   />
 ));

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 export default function RootLayout(props: Readonly<React.PropsWithChildren>) {
   return (
     <html lang="en" className={GeistSans.variable}>
-      <body className="min-h-screen bg-background font-sans antialiased">
+      <body className="min-h-screen bg-white dark:bg-slate-950 font-sans antialiased">
         <main className="flex flex-col items-center h-[100dvh]">
           <ThemeProvider
             attribute="class"