more...

Author: alindt

src/components/Button.tsx

@@ -51,7 +51,7 @@ export const buttonVariants = cva(
           "dark:bg-nb-gray-900/30 dark:text-gray-400 dark:border-gray-500/40 dark:hover:text-white dark:hover:bg-zinc-800/50",
         ],
         tertiary: [
-          "bg-white hover:text-black focus:ring-zinc-200/50  hover:bg-gray-100 border-gray-200 text-gray-900",
+          "bg-black text-white focus:ring-black/50",
           "dark:focus:ring-zinc-800/50 dark:bg-white dark:text-gray-800 dark:border-gray-700/40 dark:hover:bg-neutral-200 disabled:dark:bg-nb-gray-920 disabled:dark:text-nb-gray-300",
         ],
         white: [

src/modules/peers/PeerOSCell.tsx

@@ -31,7 +31,7 @@ export function PeerOSCell({ os, serial }: Readonly<Props>) {
           >
             <div
               className={
-                "h-6 w-6 flex items-center justify-center grayscale brightness-[100%] contrast-[40%]"
+                "h-6 w-6 flex items-center justify-center"
               }
             >
               <OSLogo os={os} />
@@ -85,15 +85,15 @@ export function OSLogo({ os }: { os: string }) {
   }, [os]);
 
   if (icon === OperatingSystem.WINDOWS)
-    return <FaWindows className={"text-white text-lg"} />;
+    return <FaWindows className={"text-black dark:text-white text-lg"} />;
   if (icon === OperatingSystem.APPLE)
     return <Image src={AppleLogo} alt={""} width={14} />;
   if (icon === OperatingSystem.FREEBSD)
     return <Image src={FreeBSDLogo} alt={""} width={18} />;
   if (icon === OperatingSystem.IOS)
-    return <IOSIcon className={"fill-white"} size={20} />;
+    return <IOSIcon className={"fill-black dark:fill-white"} size={20} />;
   if (icon === OperatingSystem.ANDROID)
-    return <FcAndroidOs className={"text-white text-2xl brightness-200"} />;
+    return <FcAndroidOs className={"text-2xl"} />;
 
-  return <FcLinux className={"text-white text-2xl brightness-150"} />;
+  return <FcLinux className={"text-2xl"} />;
 }

src/modules/routes/RouteTable.tsx

@@ -133,7 +133,6 @@ export default function RouteTable({ row }: Props) {
         tableClassName={"mt-0"}
         minimal={true}
         showSearchAndFilters={false}
-        className={"bg-neutral-900/50 py-2"}
         inset={true}
         text={"Network Routes"}
         manualPagination={true}

src/modules/settings/DangerZoneTab.tsx

@@ -11,6 +11,7 @@ import React from "react";
 import SettingsIcon from "@/assets/icons/SettingsIcon";
 import { useDialog } from "@/contexts/DialogProvider";
 import { Account } from "@/interfaces/Account";
+import classNames from "classnames";
 
 type Props = {
   account: Account;
@@ -69,15 +70,17 @@ export default function DangerZoneTab({ account }: Props) {
         <h1>Danger Zone</h1>
         <div className={"gap-6 mt-6 max-w-lg"}>
           <Card
-            className={
-              "w-full flex flex-col gap-2 border-red-600 bg-red-950/50"
-            }
+            className={classNames(
+              "w-full border border-transparent mt-4 rounded-lg",
+              "bg-red-50",
+              "dark:bg-nb-gray-900/50 dark:border-nb-gray-700/50",
+            )}
           >
             <div className={"px-8 py-6"}>
-              <p className={"text-xl font-medium mb-2 !text-red-50"}>
+              <p className={"text-xl font-medium mb-2 text-red-700 dark:text-red-50"}>
                 Delete NetBird account
               </p>
-              <p className={"!text-red-50/80"}>
+              <p className={"text-red-600 dark:text-red-50/80"}>
                 Before proceeding to delete your Netbird account, please be
                 aware that this action is irreversible. Once your account is
                 deleted, you will permanently lose access to all associated