...more

Author: alindt

src/app/(dashboard)/team/user/page.tsx

@@ -143,7 +143,7 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
             <div className={"flex items-center gap-3"}>
               <div
                 className={
-                  "w-10 h-10 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-nb-gray-900"
+                  "w-10 h-10 rounded-full relative flex items-center justify-center text-gray-700 dark:text-white uppercase text-md font-medium bg-gray-200 dark:bg-nb-gray-900"
                 }
                 style={
                   user.is_service_user

src/components/Kbd.tsx

@@ -11,15 +11,15 @@ interface Props extends React.HTMLAttributes<HTMLDivElement>, BadgeVariants {
 const variants = cva("", {
   variants: {
     variant: {
-      default: ["bg-nb-gray-800 border-nb-gray-700 text-nb-gray-300 "],
+      default: ["bg-gray-200 border-gray-300 text-gray-700 dark:bg-nb-gray-800 dark:border-nb-gray-700 dark:text-nb-gray-300"],
       netbird: ["bg-netbird-100 text-netbird border-netbird "],
     },
     size: {
       default: ["py-2.5 px-1.5 text-xs h-[12px]"],
       small: ["py-[9px] px-2 text-[9px] h-[12px] leading-[0]"],
     },
     disabled: {
-      true: ["bg-nb-gray-800 border-nb-gray-700 text-nb-gray-300 "],
+      true: ["bg-gray-100 border-gray-200 text-gray-400 dark:bg-nb-gray-800 dark:border-nb-gray-700 dark:text-nb-gray-300"],
     },
   },
 });

src/components/PeerGroupSelector.tsx

@@ -385,7 +385,7 @@ export function PeerGroupSelector({
               >
                 <div
                   className={
-                    "flex items-center bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-nb-gray-500"
+                    "flex items-center bg-gray-200 border-gray-300 text-gray-700 dark:bg-nb-gray-800 dark:border-nb-gray-500 dark:text-nb-gray-300 py-1 px-1.5 rounded-[4px] border"
                   }
                 >
                   <IconArrowBack size={10} />

src/modules/groups/GroupSelector.tsx

@@ -126,7 +126,7 @@ export function GroupSelector({
               >
                 <div
                   className={
-                    "flex items-center bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-nb-gray-500"
+                    "flex items-center bg-gray-200 border-gray-300 text-gray-700 dark:bg-nb-gray-800 dark:border-nb-gray-500 dark:text-nb-gray-300 py-1 px-1.5 rounded-[4px] border"
                   }
                 >
                   <IconArrowBack size={10} />

src/modules/users/table-cells/ServiceUserNameCell.tsx

@@ -12,7 +12,7 @@ export default function ServiceUserNameCell({ user }: Props) {
     <div className={cn("flex gap-4 px-2 py-1 items-center")}>
       <div
         className={
-          "w-8 h-8 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-gray-500 dark:bg-nb-gray-900"
+          "w-8 h-8 rounded-full relative flex items-center justify-center text-gray-700 dark:text-white uppercase text-md font-medium bg-gray-200 dark:bg-nb-gray-900"
         }
       >
         <IconSettings2 size={14} />

src/modules/users/table-cells/UserNameCell.tsx

@@ -17,7 +17,7 @@ export default function UserNameCell({ user }: Props) {
     >
       <div
         className={
-          "w-10 h-10 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-gray-500 dark:bg-nb-gray-900"
+          "w-10 h-10 rounded-full relative flex items-center justify-center text-gray-700 dark:text-white uppercase text-md font-medium bg-gray-200 dark:bg-nb-gray-900"
         }
         style={{
           color: user?.name
@@ -30,7 +30,7 @@ export default function UserNameCell({ user }: Props) {
         {(status == "invited" || status == "blocked") && (
           <div
             className={cn(
-              "w-5 h-5 absolute -right-1 -bottom-1 bg-nb-gray-930 rounded-full flex items-center justify-center border-2 border-nb-gray-950",
+              "w-5 h-5 absolute -right-1 -bottom-1 bg-gray-100 dark:bg-nb-gray-930 rounded-full flex items-center justify-center border-2 border-gray-200 dark:border-nb-gray-950",
               status == "invited" && "bg-yellow-400 text-yellow-900",
               status == "blocked" && "bg-red-500 text-red-100",
             )}
@@ -53,7 +53,7 @@ export default function UserNameCell({ user }: Props) {
             </span>
           )}
         </span>
-        <span className={cn("text-sm text-nb-gray-400")}>{user.email}</span>
+        <span className={cn("text-sm text-gray-500 dark:text-nb-gray-400")}>{user.email}</span>
       </div>
     </div>
   );