fix some hardcoded dark stuff

Author: alindt

src/components/table/Table.tsx

@@ -33,7 +33,7 @@ const Table = React.forwardRef<
         ref={ref}
         className={cn(
           "caption-bottom text-sm min-w-full max-w-full w-full",
-          minimal ? "" : "border dark:border-zinc-700/40 border-l-0 border-r-0",
+          minimal ? "" : "border dark:border-zinc-700/40 border-gray-200 border-l-0 border-r-0",
           className,
         )}
         {...props}
@@ -53,7 +53,7 @@ const TableHeader = React.forwardRef<
   <thead
     ref={ref}
     className={cn(
-      !minimal && "[&_tr]:border-b dark:border-zinc-700/40",
+      !minimal && "[&_tr]:border-b dark:border-zinc-700/40 border-gray-200",
       className,
     )}
     {...props}
@@ -68,7 +68,7 @@ const TableBody = React.forwardRef<
   <tbody
     ref={ref}
     className={cn(
-      "[&_tr:last-child]:border-0 dark:border-zinc-700/40",
+      "[&_tr:last-child]:border-0 dark:border-zinc-700/40 border-gray-200",
       className,
     )}
     {...props}
@@ -101,11 +101,11 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      " transition-colors group/table-row data-[state=selected]:bg-neutral-100 dark:data-[state=selected]:bg-nb-gray-930/70",
-      "dark:data-[state=selected]:border-nb-gray-900",
+      "transition-colors group/table-row data-[state=selected]:bg-neutral-100 dark:data-[state=selected]:bg-nb-gray-930/70",
+      "data-[state=selected]:border-gray-200 dark:data-[state=selected]:border-nb-gray-900",
       minimal
-        ? "dark:hover:bg-nb-gray-900/10"
-        : "border-b dark:border-zinc-700/40 dark:hover:bg-nb-gray-940 hover:bg-neutral-100/50",
+        ? "hover:bg-gray-50 dark:hover:bg-nb-gray-900/10"
+        : "border-b dark:border-zinc-700/40 border-gray-200 dark:hover:bg-nb-gray-940 hover:bg-gray-50",
       className,
     )}
     {...props}
@@ -125,10 +125,10 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle uppercase font-medium  [&:has([role=checkbox])]:pr-0 w-auto",
+      "h-12 px-4 text-left align-middle uppercase font-medium [&:has([role=checkbox])]:pr-0 w-auto",
       minimal
         ? "px-6"
-        : "text-neutral-500 dark:text-nb-gray-400 dark:bg-nb-gray-900",
+        : "text-neutral-500 bg-gray-50 dark:text-nb-gray-400 dark:bg-nb-gray-900",
       inset && "first:pl-[52px]",
       className,
     )}

src/components/ui/GradientFadedBackground.tsx

@@ -9,7 +9,7 @@ export const GradientFadedBackground = () => {
     >
       <div
         className={
-          "bg-gradient-to-b from-nb-gray-900/20 via-transparent to-transparent w-full h-full rounded-md"
+          "bg-gradient-to-b dark:from-nb-gray-900/20 from-gray-200/50 via-transparent to-transparent w-full h-full rounded-md"
         }
       ></div>
     </div>

src/layouts/DashboardLayout.tsx

@@ -54,7 +54,7 @@ function DashboardPageContent({ children }: { children: React.ReactNode }) {
     <div className={cn("flex flex-col h-screen", mobileNavOpen && "flex")}>
       {mobileNavOpen && (
         <motion.div
-          className={"h-screen bg-nb-gray-950 w-11/12 max-w-[22rem]"}
+          className={"h-screen dark:bg-nb-gray-950 bg-gray-100 w-11/12 max-w-[22rem]"}
           layout={true}
           transition={{
             type: "spring",
@@ -105,7 +105,7 @@ function DashboardPageContent({ children }: { children: React.ReactNode }) {
           layout={"position"}
           className={cn(
             mobileNavOpen
-              ? "border border-nb-gray-900 shadow-inner overflow-hidden rounded-xl fixed scale-75"
+              ? "border dark:border-nb-gray-900 border-gray-200 shadow-inner overflow-hidden rounded-xl fixed scale-75"
               : "",
           )}
           transition={{

src/layouts/PageContainer.tsx

@@ -10,7 +10,7 @@ export default function PageContainer({ children, className }: Props) {
     <div
       className={cn(
         className,
-        "relative flex-auto overflow-auto bg-nb-gray z-1",
+        "relative flex-auto overflow-auto dark:bg-nb-gray bg-white z-1",
         "focus:outline-none",
       )}
     >