fix more hardcoded dark stuff

alindt · alindt · commit 672b7a56629c · 2025-04-15T01:53:31.000+02:00
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
@@ -16,34 +16,34 @@ const variants = cva("", {
       blue: [
         "bg-sky-100 border-sky-500 text-sky-800 border border-transparent",
       ],
-      blueDark: ["bg-sky-900 border-sky-500 text-white border"],
-      "blue-darker": ["bg-sky-900 border-sky-500 text-white border"],
-      red: ["bg-red-950/40 border-red-500 border text-red-500"],
-      purple: ["bg-purple-950/50 border-purple-500 border text-purple-500"],
-      yellow: ["bg-yellow-950 border-yellow-500 border text-yellow-400"],
-      gray: ["bg-nb-gray-930/60 border-nb-gray-800/40 text-nb-gray-300 border"],
+      blueDark: ["bg-sky-100 border-sky-600 text-sky-800 border dark:bg-sky-900 dark:border-sky-500 dark:text-white"],
+      "blue-darker": ["bg-sky-100 border-sky-600 text-sky-800 border dark:bg-sky-900 dark:border-sky-500 dark:text-white"],
+      red: ["bg-red-100 border-red-400 text-red-600 border dark:bg-red-950/40 dark:border-red-500 dark:text-red-500"],
+      purple: ["bg-purple-100 border-purple-400 text-purple-600 border dark:bg-purple-950/50 dark:border-purple-500 dark:text-purple-500"],
+      yellow: ["bg-yellow-100 border-yellow-400 text-yellow-600 border dark:bg-yellow-950 dark:border-yellow-500 dark:text-yellow-400"],
+      gray: ["bg-gray-100 border-gray-300 text-gray-600 border dark:bg-nb-gray-930/60 dark:border-nb-gray-800/40 dark:text-nb-gray-300"],
       grayer: [
-        "bg-nb-gray-900/40 border-nb-gray-800/40 text-nb-gray-300 border",
+        "bg-gray-100 border-gray-300 text-gray-600 border dark:bg-nb-gray-900/40 dark:border-nb-gray-800/40 dark:text-nb-gray-300",
       ],
       "gray-ghost": [
-        "bg-nb-gray-900 border-nb-gray-800 text-nb-gray-300 border border-nb-gray-800/50",
+        "bg-gray-50 border-gray-200 text-gray-500 border dark:bg-nb-gray-900 dark:border-nb-gray-800 dark:text-nb-gray-300 dark:border-nb-gray-800/50",
       ],
-      green: ["bg-green-950 border-green-500 border text-green-400"],
-      netbird: ["bg-netbird-950 border-netbird-500 border text-netbird-500"],
+      green: ["bg-green-100 border-green-400 text-green-600 border dark:bg-green-950 dark:border-green-500 dark:text-green-400"],
+      netbird: ["bg-netbird-100 border-netbird-400 text-netbird-600 border dark:bg-netbird-950 dark:border-netbird-500 dark:text-netbird-500"],
     },
     hover: {
       none: [],
-      blue: ["hover:bg-sky-200"],
-      purple: ["hover:bg-purple-950/40"],
-      yellow: ["hover:bg-yellow-950/40"],
-      blueDark: ["hover:bg-sky-800"],
-      "blue-darker": ["hover:bg-sky-800"],
-      red: ["hover:bg-red-950/40"],
-      gray: ["hover:bg-nb-gray-900"],
-      grayer: ["hover:bg-nb-gray-900"],
-      "gray-ghost": ["hover:bg-nb-gray-900"],
-      green: ["hover:bg-green-950/50"],
-      netbird: ["hover:bg-netbird-950/50"],
+      blue: ["hover:bg-sky-200 dark:hover:bg-sky-800"],
+      purple: ["hover:bg-purple-200 dark:hover:bg-purple-950/40"],
+      yellow: ["hover:bg-yellow-200 dark:hover:bg-yellow-950/40"],
+      blueDark: ["hover:bg-sky-200 dark:hover:bg-sky-800"],
+      "blue-darker": ["hover:bg-sky-200 dark:hover:bg-sky-800"],
+      red: ["hover:bg-red-200 dark:hover:bg-red-950/40"],
+      gray: ["hover:bg-gray-200 dark:hover:bg-nb-gray-900"],
+      grayer: ["hover:bg-gray-200 dark:hover:bg-nb-gray-900"],
+      "gray-ghost": ["hover:bg-gray-100 dark:hover:bg-nb-gray-900"],
+      green: ["hover:bg-green-200 dark:hover:bg-green-950/50"],
+      netbird: ["hover:bg-netbird-200 dark:hover:bg-netbird-950/50"],
     },
   },
 });
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -13,7 +13,7 @@ function Card({ children, className, ...props }: Props) {
     <div
       {...props}
       className={cn(
-        "bg-nb-gray-940 rounded-md border border-nb-gray-900 w-1/2 overflow-hidden",
+        "bg-white dark:bg-nb-gray-940 rounded-md border border-gray-200 dark:border-nb-gray-900 w-1/2 overflow-hidden",
         className,
       )}
     >
@@ -48,7 +48,7 @@ function CardListItem({
   return (
     <li
       className={cn(
-        "flex justify-between px-4 border-b border-nb-gray-900 py-4 last:border-b-0 items-center h-full",
+        "flex justify-between px-4 border-b border-gray-200 dark:border-nb-gray-900 py-4 last:border-b-0 items-center h-full",
         className,
       )}
     >
@@ -95,8 +95,8 @@ const CardTextItem = ({
   return (
     <div
       className={cn(
-        "text-right text-nb-gray-400 text-sm flex items-center gap-2",
-        copy && "cursor-pointer hover:text-nb-gray-300 transition-all",
+        "text-right text-gray-500 dark:text-nb-gray-400 text-sm flex items-center gap-2",
+        copy && "cursor-pointer hover:text-gray-700 dark:hover:text-nb-gray-300 transition-all",
       )}
       onClick={() =>
         copy &&
diff --git a/src/components/Code.tsx b/src/components/Code.tsx
@@ -40,11 +40,11 @@ export default function Code({
         className={cn(
           "rounded-md text-sm  transition-all relative duration-300 border",
           dark
-            ? "bg-gray-50  border-neutral-200 dark:border-nb-gray-800 hover:dark:bg-nb-gray-900/80 dark:bg-nb-gray-930"
-            : "bg-gray-50  border-neutral-200 dark:border-nb-gray-700 hover:dark:bg-nb-gray-900/80 dark:bg-nb-gray-900",
+            ? "bg-gray-50 border-neutral-200 dark:border-nb-gray-800 hover:bg-gray-100 dark:hover:bg-nb-gray-900/80 dark:bg-nb-gray-930"
+            : "bg-gray-50 border-neutral-200 dark:border-nb-gray-700 hover:bg-gray-100 dark:hover:bg-nb-gray-900/80 dark:bg-nb-gray-900",
           dark
-            ? "text-nb-gray-300 hover:text-nb-gray-300"
-            : "dark:text-nb-gray-200 hover:dark:text-nb-gray-200",
+            ? "text-gray-700 hover:text-gray-900 dark:text-nb-gray-300 dark:hover:text-nb-gray-300"
+            : "text-gray-700 hover:text-gray-900 dark:text-nb-gray-200 dark:hover:text-nb-gray-200",
           "overflow-x-auto relative z-0 w-full",
           className,
         )}
@@ -77,7 +77,7 @@ export default function Code({
 
 function CodeComment({ children }: Props) {
   return (
-    <pre className={"text-nb-gray-400 block w-full whitespace-pre"}>
+    <pre className={"text-gray-500 dark:text-nb-gray-400 block w-full whitespace-pre"}>
       {children}
     </pre>
   );
diff --git a/src/components/DropdownInfoText.tsx b/src/components/DropdownInfoText.tsx
@@ -8,7 +8,7 @@ type Props = {
 
 export const DropdownInfoText = ({ children, className }: Props) => {
   return (
-    <div className={cn("text-center pt-2 mb-6 text-nb-gray-400", className)}>
+    <div className={cn("text-center pt-2 mb-6 text-gray-500 dark:text-nb-gray-400", className)}>
       {children}
     </div>
   );
diff --git a/src/components/HelpText.tsx b/src/components/HelpText.tsx
@@ -14,7 +14,7 @@ export default function HelpText({
   return (
     <span
       className={cn(
-        "text-[.8rem] dark:text-nb-gray-300 block font-light tracking-wide",
+        "text-[.8rem] text-gray-500 dark:text-nb-gray-300 block font-light tracking-wide",
         margin && "mb-2",
         className,
       )}
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -38,10 +38,10 @@ const inputVariants = cva("", {
     },
     prefixSuffixVariant: {
       default: [
-        "dark:bg-nb-gray-900 border-neutral-200 dark:border-nb-gray-700 text-nb-gray-300",
+        "bg-gray-100 dark:bg-nb-gray-900 border-neutral-200 dark:border-nb-gray-700 text-gray-500 dark:text-nb-gray-300",
       ],
       error: [
-        "dark:bg-nb-gray-900 border-red-500 text-nb-gray-300 text-red-500",
+        "bg-red-50 dark:bg-nb-gray-900 border-red-500 text-red-500 dark:text-nb-gray-300",
       ],
     },
   },
@@ -86,7 +86,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
           <div
             className={cn(
-              "absolute left-0 top-0 h-full flex items-center text-xs dark:text-nb-gray-300 pl-3 leading-[0]",
+              "absolute left-0 top-0 h-full flex items-center text-xs text-gray-500 dark:text-nb-gray-300 pl-3 leading-[0]",
               props.disabled && "opacity-30",
             )}
           >
@@ -112,7 +112,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
           <div
             className={cn(
-              "absolute right-0 top-0 h-full flex items-center text-xs dark:text-nb-gray-300 pr-4 leading-[0] select-none",
+              "absolute right-0 top-0 h-full flex items-center text-xs text-gray-500 dark:text-nb-gray-300 pr-4 leading-[0] select-none",
               props.disabled && "opacity-30",
             )}
           >
diff --git a/src/components/Paragraph.tsx b/src/components/Paragraph.tsx
@@ -9,7 +9,7 @@ export default function Paragraph({ children, className }: Props) {
   return (
     <p
       className={cn(
-        "dark:text-gray-400 text-nb-gray-500 text-base flex flex-wrap gap-x-1.5",
+        "text-gray-700 dark:text-gray-400 text-base flex flex-wrap gap-x-1.5",
         className,
       )}
     >
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-[42px] gap-2 w-full items-center justify-between rounded-md border dark:border-nb-gray-900 border-neutral-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-nb-gray-900/30 dark:ring-offset-neutral-950/50 dark:focus:ring-neutral-500/20  dark:placeholder:text-neutral-400 ",
+      "flex h-[42px] gap-2 w-full items-center justify-between rounded-md border border-neutral-200 dark:border-nb-gray-900 bg-white dark:bg-nb-gray-900/30 px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-neutral-300 dark:focus:ring-neutral-500/20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:ring-offset-neutral-950/50 text-neutral-800 dark:text-white",
       className,
     )}
     {...props}
@@ -39,7 +39,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-gray-200 bg-white text-neutral-950 shadow-md 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-zinc-800 dark:bg-nb-gray dark:text-neutral-50",
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-gray-200 dark:border-zinc-800 bg-white dark:bg-nb-gray text-neutral-800 dark:text-neutral-50 shadow-md 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",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,
@@ -80,7 +80,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-gray-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-nb-gray-900 dark:focus:text-neutral-50 dark:text-gray-400 cursor-pointer",
+      "relative flex w-full select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-gray-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-nb-gray-900 dark:focus:text-neutral-50 text-gray-800 dark:text-gray-400 cursor-pointer",
       className,
     )}
     {...props}
diff --git a/src/components/SmallParagraph.tsx b/src/components/SmallParagraph.tsx
@@ -9,7 +9,7 @@ export default function SmallParagraph({ children, className }: Props) {
   return (
     <p
       className={cn(
-        "text-[.85rem] text-nb-gray-400 dark:text-nb-gray-400",
+        "text-[.85rem] text-gray-500 dark:text-nb-gray-400",
         className,
       )}
     >
diff --git a/src/components/SquareIcon.tsx b/src/components/SquareIcon.tsx
@@ -11,7 +11,7 @@ const iconVariant = cva(
         blue: "bg-sky-950 border-sky-500 text-sky-100",
         "blue-darker": "bg-sky-950 border-sky-500 text-sky-500",
         red: "bg-red-950 border-red-500 text-red-500",
-        gray: "bg-nb-gray-930 border-nb-gray-800 text-gray-500",
+        gray: "bg-gray-100 border-gray-300 text-gray-500 dark:bg-nb-gray-930 dark:border-nb-gray-800 dark:text-gray-500",
         green: "bg-green-950 border-green-500 text-green-500",
         purple: "bg-purple-950 border-purple-500 text-purple-500",
         indigo: "bg-indigo-950 border-indigo-500 text-indigo-500",
diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
@@ -45,17 +45,14 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, InputProps>(
             {...props}
             className={cn(
               inputVariants({ variant: error ? "error" : variant }),
-              "flex w-full min-h-[42px] rounded-md bg-white px-3 pb-3 pt-2.5 text-sm file:bg-transparent file:text-sm file:font-medium  focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50  ",
+              "flex w-full min-h-[42px] rounded-md bg-white px-3 pb-3 pt-2.5 text-sm file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
               "file:border-0",
               "focus-visible:ring-2 focus-visible:ring-offset-2",
               "border",
               "overflow-hidden",
               className,
               resize ? "resize" : "resize-none",
             )}
-            style={{
-              height: variant === "darker" ? "42px" : "auto",
-            }}
           />
           {customElement && customElement}
         </div>
diff --git a/src/components/ui/DescriptionWithTooltip.tsx b/src/components/ui/DescriptionWithTooltip.tsx
@@ -17,7 +17,7 @@ export default function DescriptionWithTooltip({
     <TextWithTooltip
       text={text}
       maxChars={maxChars}
-      className={cn("text-sm text-nb-gray-400 whitespace-nowrap", className)}
+      className={cn("text-sm text-gray-500 dark:text-nb-gray-400 whitespace-nowrap", className)}
     />
   );
 }
diff --git a/src/components/ui/GetStarted.tsx b/src/components/ui/GetStarted.tsx
@@ -20,14 +20,14 @@ export default function GetStarted({
   return (
     <tfoot
       className={
-        "absolute w-full h-full bg-nb-gray-950/70 z-20 left-0 top-0 flex backdrop-blur-sm"
+        "absolute w-full h-full bg-gray-100/90 dark:bg-nb-gray-950/70 z-20 left-0 top-0 flex backdrop-blur-sm"
       }
     >
       <tr className={"inline-flex justify-center w-full mt-24"}>
         <td>
           <div
             className={
-              "max-w-lg relative z-50 bg-nb-gray-940  border border-nb-gray-900 rounded-lg shadow-2xl"
+              "max-w-lg relative z-50 bg-white dark:bg-nb-gray-940 border border-gray-200 dark:border-nb-gray-900 rounded-lg shadow-2xl"
             }
           >
             <div className={"text-center flex flex-col gap-2 p-8"}>
diff --git a/src/components/ui/GetStartedTest.tsx b/src/components/ui/GetStartedTest.tsx
@@ -23,7 +23,7 @@ export default function GetStartedTest({
       <Card className={"w-full relative overflow-hidden"}>
         <div
           className={
-            "absolute z-20 bg-gradient-to-b  dark:to-nb-gray-950 dark:from-nb-gray-950/40 w-full h-full"
+            "absolute z-20 bg-gradient-to-b to-white from-white/70 dark:to-nb-gray-950 dark:from-nb-gray-950/40 w-full h-full"
           }
         ></div>
         <div
diff --git a/src/components/ui/NoResults.tsx b/src/components/ui/NoResults.tsx
@@ -22,7 +22,7 @@ export default function NoResults({
     <div className={cn("relative overflow-hidden", className)}>
       <div
         className={
-          "absolute z-20 bg-gradient-to-b dark:to-nb-gray-950 dark:from-nb-gray-950/70 w-full h-full overflow-hidden top-0"
+          "absolute z-20 bg-gradient-to-b to-white from-white/70 dark:to-nb-gray-950 dark:from-nb-gray-950/70 w-full h-full overflow-hidden top-0"
         }
       ></div>
       <div
@@ -39,14 +39,14 @@ export default function NoResults({
       <div className={cn("max-w-md mx-auto relative z-20 py-6")}>
         <div
           className={
-            "mx-auto w-14 h-14 bg-nb-gray-930 flex items-center justify-center mb-3 rounded-md"
+            "mx-auto w-14 h-14 bg-gray-100 dark:bg-nb-gray-930 flex items-center justify-center mb-3 rounded-md"
           }
         >
           {icon ? icon : <FilterX size={24} />}
         </div>
         <div className={"text-center"}>
           <h1 className={"text-2xl font-medium max-w-lg mx-auto"}>{title}</h1>
-          <Paragraph className={"justify-center my-2 !text-nb-gray-400"}>
+          <Paragraph className={"justify-center my-2 text-gray-500 dark:!text-nb-gray-400"}>
             {description}
           </Paragraph>
           {children}
diff --git a/src/components/ui/NoResultsCard.tsx b/src/components/ui/NoResultsCard.tsx
@@ -21,7 +21,7 @@ export default function NoResultsCard({
       <Card className={"w-full relative overflow-hidden"}>
         <div
           className={
-            "absolute z-20 bg-gradient-to-b  dark:to-nb-gray-950 dark:from-nb-gray-950/40 w-full h-full"
+            "absolute z-20 bg-gradient-to-b to-white from-white/70 dark:to-nb-gray-950 dark:from-nb-gray-950/40 w-full h-full"
           }
         ></div>
         <div
@@ -40,14 +40,14 @@ export default function NoResultsCard({
         <div className={"max-w-md mx-auto relative z-20 py-8"}>
           <div
             className={
-              "mx-auto w-10 h-10 bg-nb-gray-930 flex items-center justify-center mb-3 rounded-md border border-nb-gray-800"
+              "mx-auto w-10 h-10 bg-gray-100 dark:bg-nb-gray-930 flex items-center justify-center mb-3 rounded-md border border-gray-200 dark:border-nb-gray-800"
             }
           >
             {icon || <FilterX size={24} />}
           </div>
           <div className={"text-center"}>
             <h1 className={"text-2xl font-medium max-w-lg mx-auto"}>{title}</h1>
-            <Paragraph className={"justify-center my-2 !text-nb-gray-400"}>
+            <Paragraph className={"justify-center my-2 text-gray-500 dark:!text-nb-gray-400"}>
               {description}
             </Paragraph>
             {children}
diff --git a/src/components/ui/RestrictedAccess.tsx b/src/components/ui/RestrictedAccess.tsx
@@ -35,7 +35,7 @@ export const RestrictedAccess = ({
         <Card className={" relative overflow-hidden"}>
           <div
             className={
-              "absolute z-20 bg-gradient-to-b  dark:to-nb-gray-950 dark:from-nb-gray-950/40 w-full h-full"
+              "absolute z-20 bg-gradient-to-b to-white from-white/70 dark:to-nb-gray-950 dark:from-nb-gray-950/40 w-full h-full"
             }
           ></div>
           <div
diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx
@@ -32,8 +32,8 @@ export const viewport: Viewport = {
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
-      <body className={cn(inter.className, "dark:bg-nb-gray bg-gray-50")}>
+    <html lang="en" suppressHydrationWarning>
+      <body className={cn(inter.className, "bg-white dark:bg-nb-gray transition-colors")}>
         <AnalyticsProvider>
           <DialogProvider>
             <GlobalThemeProvider>
diff --git a/src/modules/activity/ActivityEntryRow.tsx b/src/modules/activity/ActivityEntryRow.tsx
diff --git a/src/modules/common-table-rows/ActiveInactiveRow.tsx b/src/modules/common-table-rows/ActiveInactiveRow.tsx
diff --git a/src/modules/posture-checks/table/cells/PostureCheckChecksCell.tsx b/src/modules/posture-checks/table/cells/PostureCheckChecksCell.tsx
diff --git a/src/modules/posture-checks/table/cells/PostureCheckNameCell.tsx b/src/modules/posture-checks/table/cells/PostureCheckNameCell.tsx
diff --git a/src/modules/posture-checks/ui/PostureCheckCard.tsx b/src/modules/posture-checks/ui/PostureCheckCard.tsx
diff --git a/src/modules/posture-checks/ui/PostureCheckIcons.tsx b/src/modules/posture-checks/ui/PostureCheckIcons.tsx

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ export default function Paragraph({ children, className }: Props) {`
`9`	`9`	`return (`
`10`	`10`	`<p`
`11`	`11`	`className={cn(`
`12`		`- "dark:text-gray-400 text-nb-gray-500 text-base flex flex-wrap gap-x-1.5",`
	`12`	`+ "text-gray-700 dark:text-gray-400 text-base flex flex-wrap gap-x-1.5",`
`13`	`13`	`className,`
`14`	`14`	`)}`
`15`	`15`	`>`