...even more

Author: alindt

src/app/(dashboard)/settings/page.tsx

@@ -59,7 +59,7 @@ export default function NetBirdSettings() {
           </VerticalTabs.Trigger>
         </VerticalTabs.List>
         <RestrictedAccess page={"Settings"}>
-          <div className={"border-l border-nb-gray-930 w-full"}>
+          <div className={"border-l border-gray-200 dark:border-nb-gray-930 w-full"}>
             {account && <AuthenticationTab account={account} />}
             {account && <PermissionsTab account={account} />}
             {account && <GroupsTab account={account} />}

src/components/Button.tsx

@@ -63,7 +63,7 @@ export const buttonVariants = cva(
           "dark:focus:ring-zinc-800/50 dark:bg-transparent dark:text-netbird dark:border-netbird dark:hover:bg-nb-gray-900/30",
         ],
         "danger-outline": [
-          "", // TODO - add danger button styles for light mode
+          "bg-transparent focus:ring-red-400/20 hover:bg-red-50 text-red-500 border-red-500",
           "enabled:dark:focus:ring-red-800/20 enabled:dark:focus:bg-red-950/40 enabled:hover:dark:bg-red-950/50 enabled:dark:hover:border-red-800/50 dark:bg-transparent dark:text-red-500",
           "",
         ],
@@ -72,7 +72,7 @@ export const buttonVariants = cva(
           "dark:bg-transparent dark:text-nb-gray-400 dark:border-transparent dark:hover:text-white dark:hover:bg-zinc-800/50 dark:hover:border-nb-gray-800/50",
         ],
         danger: [
-          "", // TODO - add danger button styles for light mode
+          "bg-red-600 text-white hover:bg-red-700 focus:ring-red-400/50",
           "dark:focus:ring-red-700/20 dark:focus:bg-red-700 hover:dark:bg-red-700 dark:hover:border-red-800/50 dark:bg-red-600 dark:text-red-100",
         ],
       },

src/components/DropdownMenu.tsx

@@ -78,9 +78,9 @@ const menuItemVariants = cva("", {
   variants: {
     variant: {
       default:
-        "dark:focus:bg-nb-gray-900 dark:focus:text-gray-50 dark:text-gray-400",
+        "focus:bg-gray-100 focus:text-gray-900 text-gray-800 dark:focus:bg-nb-gray-900 dark:focus:text-gray-50 dark:text-gray-400",
       danger:
-        "dark:focus:bg-red-900/20 dark:focus:text-red-500 dark:text-red-500",
+        "focus:bg-red-100 focus:text-red-500 text-red-500 dark:focus:bg-red-900/20 dark:focus:text-red-500 dark:text-red-500",
     },
   },
 });

src/components/Input.tsx

@@ -41,7 +41,7 @@ const inputVariants = cva("", {
         "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: [
-        "bg-red-50 dark:bg-nb-gray-900 border-red-500 text-red-500 dark:text-nb-gray-300",
+        "bg-red-50 dark:bg-nb-gray-900 border-red-500 text-red-500",
       ],
     },
   },

src/components/RadioGroup.tsx

@@ -17,19 +17,20 @@ export const RadioGroup = ({ value, onChange, children }: Props) => {
       value={value}
       onValueChange={onChange}
       className={
-        "flex bg-nb-gray-900 rounded-md  border border-nb-gray-700 text-sm items-center justify-center p-1"
+        "flex bg-gray-50 dark:bg-nb-gray-900 rounded-md border border-gray-300 dark:border-nb-gray-700 text-sm items-center justify-center p-1"
       }
     >
       {children}
     </RadixRadioGroup.Root>
   );
 };
+
 export const RadioGroupItems = ({
   children,
 }: {
   children: React.ReactNode;
 }) => {
-  return <div className={"flex w-full  bg-nb-gray-900"}>{children}</div>;
+  return <div className={"flex w-full bg-white dark:bg-nb-gray-900"}>{children}</div>;
 };
 
 export const RadioGroupItem = ({
@@ -47,11 +48,11 @@ export const RadioGroupItem = ({
         key={value}
         className={cn(
           variant === "default" &&
-            "text-nb-gray-500 hover:text-nb-gray-400 data-[state=checked]:bg-nb-gray-600 data-[state=checked]:text-nb-gray-100",
+            "text-gray-600 dark:text-nb-gray-500 hover:text-gray-700 dark:hover:text-nb-gray-400 data-[state=checked]:bg-gray-200 dark:data-[state=checked]:bg-nb-gray-600 data-[state=checked]:text-gray-800 dark:data-[state=checked]:text-nb-gray-100",
           variant === "red" &&
-            "text-nb-gray-500 hover:text-nb-gray-400 data-[state=checked]:bg-red-800 data-[state=checked]:text-red-200",
+            "text-red-500 dark:text-red-500 hover:text-red-600 dark:hover:text-red-400 data-[state=checked]:bg-red-100 dark:data-[state=checked]:bg-red-800 data-[state=checked]:text-red-600 dark:data-[state=checked]:text-red-200",
           variant === "green" &&
-            "text-nb-gray-500 hover:text-nb-gray-400 data-[state=checked]:bg-green-800 data-[state=checked]:text-green-200",
+            "text-green-500 dark:text-green-500 hover:text-green-600 dark:hover:text-green-400 data-[state=checked]:bg-green-100 dark:data-[state=checked]:bg-green-800 data-[state=checked]:text-green-600 dark:data-[state=checked]:text-green-200",
           "cursor-pointer relative transition-all w-full py-1.5 px-5 rounded-md h-full flex items-center text-sm gap-1 text-center justify-center",
         )}
       >

src/components/VerticalTabs.tsx

@@ -34,7 +34,7 @@ function VerticalTabs({ value, onChange, children }: Props) {
       >
         <Tabs.Root
           orientation={"vertical"}
-          className={"block lg:flex bg-nb-gray"}
+          className={"block lg:flex bg-white dark:bg-nb-gray"}
           value={value}
           onValueChange={(value) => onChange(value)}
         >
@@ -51,7 +51,7 @@ function List({ children }: { children: React.ReactNode }) {
     <Tabs.List
       className={cn(
         "px-4 py-4 whitespace-nowrap overflow-y-hidden shrink-0 no-scrollbar",
-        "lg:h-full items-start bg-nb-gray border-b-0 border-nb-gray-930",
+        "lg:h-full items-start bg-gray-50 dark:bg-nb-gray border-b-0 border-gray-200 dark:border-nb-gray-930",
         "flex lg:flex-col lg:gap-1",
       )}
       style={{
@@ -82,10 +82,10 @@ function Trigger({
         "py-2 text-base rounded-md w-full transition-all data-[disabled]:opacity-10",
         "lg:pl-6 lg:pr-8 pl-4 pr-4 text-center lg:text-left",
         value == currentValue
-          ? "bg-nb-gray-920"
+          ? "bg-gray-200 dark:bg-nb-gray-920"
           : disabled
           ? ""
-          : "text-nb-gray-500 hover:bg-nb-gray-900/50",
+          : "text-gray-600 dark:text-nb-gray-500 hover:bg-gray-100 dark:hover:bg-nb-gray-900/50",
       )}
       value={value}
       onClick={() => {

src/components/skeletons/SkeletonHeader.tsx

@@ -1,23 +1,23 @@
 export default function SkeletonHeader() {
   return (
-    <div className={"px-8 py-6 flex flex-col gap-6"}>
-      <div className={"h-[16px] bg-nb-gray-930 w-[100px] rounded-full"}></div>
-      <div className={"flex gap-3 flex-col mt-4"}>
-        <div className={"h-[30px] bg-nb-gray-930 w-[170px] rounded-md"}></div>
-        <div className={"h-[10px] bg-nb-gray-930 w-[540px] rounded-full"}></div>
-        <div className={"h-[10px] bg-nb-gray-930 w-[340px] rounded-full"}></div>
+    <div className={"flex flex-col gap-4 max-w-3xl"}>
+      <div className={"h-[16px] bg-gray-200 dark:bg-nb-gray-930 w-[100px] rounded-full"}></div>
+      <div className={"flex gap-2 flex-col"}>
+        <div className={"h-[30px] bg-gray-200 dark:bg-nb-gray-930 w-[170px] rounded-md"}></div>
+        <div className={"h-[10px] bg-gray-200 dark:bg-nb-gray-930 w-[540px] rounded-full"}></div>
+        <div className={"h-[10px] bg-gray-200 dark:bg-nb-gray-930 w-[340px] rounded-full"}></div>
       </div>
-      <div className={"flex gap-5"}>
+      <div className={"flex gap-2 flex-col mt-6"}>
         <div
-          className={"h-[40px] bg-nb-gray-930/50 w-[400px] rounded-md"}
+          className={"h-[40px] bg-gray-200 dark:bg-nb-gray-930/50 w-[400px] rounded-md"}
         ></div>
         <div
-          className={"h-[40px] bg-nb-gray-930/50 w-[140px] rounded-md"}
+          className={"h-[40px] bg-gray-200 dark:bg-nb-gray-930/50 w-[140px] rounded-md"}
         ></div>
         <div
-          className={"h-[40px] bg-nb-gray-930/50 w-[180px] rounded-md"}
+          className={"h-[40px] bg-gray-200 dark:bg-nb-gray-930/50 w-[180px] rounded-md"}
         ></div>
-        <div className={"h-[40px] bg-nb-gray-930/50 w-[60px] rounded-md"}></div>
+        <div className={"h-[40px] bg-gray-200 dark:bg-nb-gray-930/50 w-[60px] rounded-md"}></div>
       </div>
     </div>
   );

src/modules/access-tokens/AccessTokensTable.tsx

@@ -99,7 +99,7 @@ export default function AccessTokensTable({ user }: Props) {
               data={tokens}
             />
           ) : (
-            <div className={"bg-nb-gray-950 overflow-hidden"}>
+            <div className={"bg-white dark:bg-nb-gray-950 overflow-hidden"}>
               <NoResults
                 className={"py-3"}
                 title={"No access tokens"}

src/modules/settings/AuthenticationTab.tsx

@@ -201,10 +201,10 @@ export default function AuthenticationTab({ account }: Readonly<Props>) {
 
             <div
               className={cn(
-                "border border-nb-gray-900 border-t-0 rounded-b-md bg-nb-gray-940 px-[1.28rem] pt-3 pb-5 flex flex-col gap-4 mx-[0.25rem]",
+                "border border-gray-200 dark:border-nb-gray-900 border-t-0 rounded-b-md bg-gray-50 dark:bg-nb-gray-940 px-[1.28rem] pt-3 pb-5 flex flex-col gap-4 mx-[0.25rem]",
                 !loginExpiration
                   ? "opacity-50 pointer-events-none"
-                  : "bg-nb-gray-930/80",
+                  : "bg-gray-100 dark:bg-nb-gray-930/80",
               )}
             >
               <div className={cn("flex justify-between gap-10 mt-2")}>

src/modules/settings/GroupsTable.tsx

@@ -304,7 +304,7 @@ export default function GroupsTable({ headingTarget }: Readonly<Props>) {
           )}
         </DataTable>
       ) : (
-        <div className={"bg-nb-gray-950 overflow-hidden"}>
+        <div className={"bg-white dark:bg-nb-gray-950 overflow-hidden"}>
           <NoResults
             className={"py-3"}
             title={"No groups"}