more...

alindt · alindt · commit 503ab74ea245 · 2025-04-20T20:16:56.000+02:00
diff --git a/src/app/(dashboard)/peer/page.tsx b/src/app/(dashboard)/peer/page.tsx
@@ -179,7 +179,7 @@ function PeerOverview() {
                       <ModalTrigger>
                         <div
                           className={
-                            "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
+                            "flex items-center gap-2 text-neutral-500 dark:text-neutral-300 hover:text-neutral-700 dark:hover:text-neutral-100 transition-all hover:bg-gray-100 dark:hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
                           }
                         >
                           <PencilIcon size={16} />
@@ -241,10 +241,10 @@ function PeerOverview() {
                 {isOwnerOrAdmin && !!peer?.user_id && (
                   <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",
                     )}
                   >
                     <PeerExpirationToggle
diff --git a/src/auth/OIDCError.tsx b/src/auth/OIDCError.tsx
@@ -40,7 +40,7 @@ export const OIDCError = () => {
     >
       <div
         className={
-          "bg-nb-gray-930 mb-3 border border-nb-gray-900 h-12 w-12 rounded-md flex items-center justify-center "
+          "bg-gray-100 dark:bg-nb-gray-930 mb-3 border border-gray-200 dark:border-nb-gray-900 h-12 w-12 rounded-md flex items-center justify-center "
         }
       >
         <NetBirdIcon size={23} />
diff --git a/src/auth/SessionLost.tsx b/src/auth/SessionLost.tsx
@@ -26,7 +26,7 @@ export const SessionLost = () => {
     >
       <div
         className={
-          "bg-nb-gray-930 mb-3 border border-nb-gray-900 h-10 w-10 rounded-md flex items-center justify-center "
+          "bg-gray-100 dark:bg-nb-gray-930 mb-3 border border-gray-200 dark:border-nb-gray-900 h-10 w-10 rounded-md flex items-center justify-center "
         }
       >
         <NetBirdIcon size={20} />
diff --git a/src/components/DropdownInput.tsx b/src/components/DropdownInput.tsx
@@ -34,7 +34,7 @@ export const DropdownInput = forwardRef<HTMLInputElement, Props>(
         <div className={"absolute right-0 top-0 h-full flex items-center pr-4"}>
           <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-100 dark:bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-gray-300 dark:border-nb-gray-500"
             }
           >
             <IconArrowBack size={10} />
diff --git a/src/components/JSONFileUpload.tsx b/src/components/JSONFileUpload.tsx
@@ -71,10 +71,10 @@ export const JSONFileUpload = ({ onChange }: Props) => {
   return (
     <div
       className={cn(
-        " flex gap-5 border border-dashed hover:border-nb-gray-600/50 rounded-md border-nb-gray-600/40 items-center justify-center group/upload",
-        "bg-nb-gray-930/50 hover:bg-nb-gray-930/40 cursor-pointer transition-all px-4 pb-8 pt-6",
-        dragActive && "border-nb-gray-600/80 hover:border-nb-gray-600/60",
-        dragActive && "bg-nb-gray-900/40 hover:bg-nb-gray-930/50",
+        " flex gap-5 border border-dashed hover:border-gray-400/50 rounded-md border-gray-400/40 items-center justify-center group/upload",
+        "bg-gray-100/50 dark:bg-nb-gray-930/50 hover:bg-gray-100 dark:hover:bg-nb-gray-930/40 cursor-pointer transition-all px-4 pb-8 pt-6",
+        dragActive && "border-gray-500/80 dark:border-nb-gray-600/80 hover:border-gray-500/60 dark:hover:border-nb-gray-600/60",
+        dragActive && "bg-gray-200/60 dark:bg-nb-gray-900/40 hover:bg-gray-200 dark:hover:bg-nb-gray-930/50",
       )}
       onDragEnter={handleDrag}
       onDragOver={handleDrag}
@@ -94,20 +94,20 @@ export const JSONFileUpload = ({ onChange }: Props) => {
       />
       <div
         className={
-          "bg-nb-gray-930 p-2.5 rounded-md mt-0.5 group-hover/upload:bg-nb-gray-930/80 transition-all"
+          "bg-gray-200/50 dark:bg-nb-gray-930 p-2.5 rounded-md mt-0.5 group-hover/upload:bg-gray-200 dark:group-hover/upload:bg-nb-gray-930/80 transition-all"
         }
       >
         <FileJson2 size={20} className={"text-netbird"} />
       </div>
 
       <div>
-        <p className={"text-[14px] font-medium text-nb-gray-100 "}>
+        <p className={"text-[14px] font-medium text-gray-800 dark:text-nb-gray-100 "}>
           Upload your service account key (.json)
         </p>
-        <p className={"text-xs !text-nb-gray-300 mt-1"}>
+        <p className={"text-xs !text-gray-500 dark:!text-nb-gray-300 mt-1"}>
           <span
             className={
-              "underline underline-offset-4 group-hover/upload:text-nb-gray-200 transition-all"
+              "underline underline-offset-4 group-hover/upload:text-gray-600 dark:group-hover/upload:text-nb-gray-200 transition-all"
             }
           >
             Click to upload
diff --git a/src/components/NetworkRouteSelector.tsx b/src/components/NetworkRouteSelector.tsx
@@ -95,7 +95,7 @@ export function NetworkRouteSelector({
           className={cn(
             "min-h-[42px] w-full relative items-center group",
             "border border-neutral-200 dark:border-nb-gray-700 justify-between py-2 px-3",
-            "rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex dark:text-neutral-400/70 text-neutral-500 cursor-pointer enabled:hover:dark:bg-nb-gray-900/50",
+            "rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex text-neutral-500 dark:text-neutral-400/70 cursor-pointer enabled:hover:bg-gray-50 enabled:hover:dark:bg-nb-gray-900/50",
             "disabled:opacity-40 disabled:cursor-default",
           )}
           disabled={disabled}
@@ -183,7 +183,7 @@ export function NetworkRouteSelector({
               >
                 <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-100 dark:bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-gray-300 dark:border-nb-gray-500"
                   }
                 >
                   <IconArrowBack size={10} />
diff --git a/src/components/PortSelector.tsx b/src/components/PortSelector.tsx
@@ -71,7 +71,7 @@ export function PortSelector({
           className={cn(
             "min-h-[48px] w-full relative items-center",
             "border border-neutral-200 dark:border-nb-gray-700 justify-between py-2 px-3",
-            "rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex dark:text-neutral-400/70 text-neutral-500 cursor-pointer hover:dark:bg-nb-gray-900/50",
+            "rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex text-neutral-500 dark:text-neutral-400/70 cursor-pointer hover:bg-gray-50 hover:dark:bg-nb-gray-900/50",
           )}
           data-cy={"port-selector"}
           disabled={disabled}
@@ -162,7 +162,7 @@ export function PortSelector({
               >
                 <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-100 dark:bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-gray-300 dark:border-nb-gray-500"
                   }
                 >
                   <IconArrowBack size={10} />
diff --git a/src/components/select/SelectDropdownSearchInput.tsx b/src/components/select/SelectDropdownSearchInput.tsx
@@ -41,7 +41,7 @@ export const SelectDropdownSearchInput = forwardRef<HTMLInputElement, Props>(
         <div className={"absolute right-0 top-0 h-full flex items-center pr-4"}>
           <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-100 dark:bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-gray-300 dark:border-nb-gray-500"
             }
           >
             <IconArrowBack size={10} />
diff --git a/src/components/skeletons/SkeletonTable.tsx b/src/components/skeletons/SkeletonTable.tsx
@@ -35,7 +35,7 @@ export function TableSkeletonRow({ odd = false }: RowProps) {
   return (
     <div
       className={cn(
-        odd ? "bg-nb-gray-940/40" : "bg-nb-gray-940",
+        odd ? "bg-gray-100/40 dark:bg-nb-gray-940/40" : "bg-gray-100 dark:bg-nb-gray-940",
         "h-[55px] w-full flex items-center px-8 py-2 justify-between gap-10",
       )}
     >
diff --git a/src/components/ui/AIButton.tsx b/src/components/ui/AIButton.tsx
@@ -10,7 +10,7 @@ export const AIButton = () => {
     >
       <div
         className={
-          "flex items-center justify-center w-full h-full gap-2 bg-nb-gray-930/70 px-3 py-2.5 rounded-md"
+          "flex items-center justify-center w-full h-full gap-2 bg-gray-100/70 dark:bg-nb-gray-930/70 px-3 py-2.5 rounded-md"
         }
       >
         <Sparkles size={16} />
diff --git a/src/components/ui/AnnouncementBanner.tsx b/src/components/ui/AnnouncementBanner.tsx
@@ -11,16 +11,16 @@ const variants = cva(
     variants: {
       variant: {
         default:
-          "bg-nb-gray-900/50 border-nb-gray-800/30 border-b text-nb-gray-200",
+          "bg-gray-100 dark:bg-nb-gray-900/50 border-gray-200/30 dark:border-nb-gray-800/30 border-b text-gray-700 dark:text-nb-gray-200",
         important: "from-netbird to-netbird-400 bg-gradient-to-b text-white",
       },
       tagBadge: {
-        default: "bg-nb-gray-200/10 text-nb-gray-100 font-medium",
+        default: "bg-gray-300/50 dark:bg-nb-gray-200/10 text-gray-600 dark:text-nb-gray-100 font-medium",
         important: "bg-white text-netbird font-medium",
       },
       closeButton: {
         default:
-          "bg-nb-gray-900 rounded-md p-1 text-nb-gray-300 hover:bg-nb-gray-800",
+          "bg-gray-200 dark:bg-nb-gray-900 rounded-md p-1 text-gray-500 dark:text-nb-gray-300 hover:bg-gray-300 dark:hover:bg-nb-gray-800",
         important:
           "bg-netbird-100 rounded-md p-1 text-netbird-600 hover:bg-white",
       },
@@ -50,7 +50,7 @@ export const AnnouncementBanner = () => {
         {announcement.tag && (
           <div
             className={cn(
-              "bg-nb-gray-200/10 backdrop-blur text-nb-gray-100 font-medium tracking-wide uppercase text-[10px] py-2.5 px-2 rounded-md leading-[0]",
+              "backdrop-blur font-medium tracking-wide uppercase text-[10px] py-2.5 px-2 rounded-md leading-[0]",
               variants({ tagBadge: announcement.variant }),
             )}
           >
diff --git a/src/components/ui/Lightbox.tsx b/src/components/ui/Lightbox.tsx
@@ -16,7 +16,7 @@ export const Lightbox = ({ image }: Props) => {
         <div
           onClick={() => setOpen(true)}
           className={
-            "bg-nb-gray-900 p-2 mt-2 select-none relative rounded-lg border border-nb-gray-800 cursor-pointer group/lightbox transition-all"
+            "bg-gray-100 dark:bg-nb-gray-900 p-2 mt-2 select-none relative rounded-lg border border-gray-200 dark:border-nb-gray-800 cursor-pointer group/lightbox transition-all"
           }
         >
           <div
@@ -53,7 +53,7 @@ export const Lightbox = ({ image }: Props) => {
             <div
               onClick={() => setOpen(false)}
               className={
-                "p-2 bg-nb-gray-900/80 backdrop-blur-2xl rounded-md border border-nb-gray-500 hover:bg-nb-gray-900/90 transition-all cursor-pointer"
+                "p-2 bg-gray-200/80 dark:bg-nb-gray-900/80 backdrop-blur-2xl rounded-md border border-gray-300 dark:border-nb-gray-500 hover:bg-gray-300/90 dark:hover:bg-nb-gray-900/90 transition-all cursor-pointer"
               }
             >
               <X size={20} />
diff --git a/src/components/ui/Mark.tsx b/src/components/ui/Mark.tsx
@@ -17,9 +17,9 @@ export const Mark = ({ children, copy = false }: Props) => {
         onClick={() => copy && copyToClipBoard()}
         ref={ref}
         className={cn(
-          "inline-flex not-italic gap-2 bg-nb-gray-900 py-[2px] px-2 rounded-md text-[12px] items-center mx-[1px] -top-[1px] relative my-[2.5px]",
+          "inline-flex not-italic gap-2 bg-gray-100 dark:bg-nb-gray-900 py-[2px] px-2 rounded-md text-[12px] items-center mx-[1px] -top-[1px] relative my-[2.5px]",
           copy &&
-            "cursor-pointer hover:text-nb-gray-100 hover:bg-nb-gray-800 transition-all",
+            "cursor-pointer hover:text-gray-700 dark:hover:text-nb-gray-100 hover:bg-gray-200 dark:hover:bg-nb-gray-800 transition-all",
         )}
       >
         {children}
diff --git a/src/modules/networks/misc/NetworkInformationSquare.tsx b/src/modules/networks/misc/NetworkInformationSquare.tsx
@@ -20,16 +20,16 @@ export const NetworkInformationSquare = ({
   return (
     <button
       className={cn(
-        "flex w-full items-center max-w-[300px] gap-4 dark:text-neutral-300 text-neutral-500 transition-all group/network rounded-md",
+        "flex w-full items-center max-w-[300px] gap-4 text-neutral-500 dark:text-neutral-300 transition-all group/network rounded-md",
         onClick
-          ? "hover:text-neutral-100 hover:bg-nb-gray-910 cursor-pointer py-2 pl-3 pr-5 relative"
+          ? "hover:text-neutral-700 dark:hover:text-neutral-100 hover:bg-gray-100 dark:hover:bg-nb-gray-910 cursor-pointer py-2 pl-3 pr-5 relative"
           : "cursor-default",
       )}
       onClick={onClick}
     >
       <div
         className={cn(
-          "bg-nb-gray-800 text-nb-gray-100 rounded-md flex items-center justify-center font-medium relative",
+          "bg-gray-100 dark:bg-nb-gray-800 text-gray-600 dark:text-nb-gray-100 rounded-md flex items-center justify-center font-medium relative",
           "uppercase",
           size === "md" ? "h-10 w-10 text-md" : "h-12 w-12 text-lg",
           "shrink-0",
@@ -39,29 +39,29 @@ export const NetworkInformationSquare = ({
         <div
           className={cn(
             "h-2 w-2 rounded-full absolute bottom-0 right-0 z-10",
-            active ? "bg-green-500" : "bg-nb-gray-700",
+            active ? "bg-green-500" : "bg-gray-400 dark:bg-nb-gray-700",
           )}
         ></div>
         <div
           className={cn(
-            "h-3 w-3 bg-nb-gray-950 rounded-tl-[8px] rounded-br absolute bottom-0 right-0 transition-all",
-            onClick && "group-hover/network:bg-nb-gray-910",
-            onClick && "group-hover/table-row:bg-nb-gray-940",
+            "h-3 w-3 bg-white dark:bg-nb-gray-950 rounded-tl-[8px] rounded-br absolute bottom-0 right-0 transition-all",
+            onClick && "group-hover/network:bg-gray-100 dark:group-hover/network:bg-nb-gray-910",
+            onClick && "group-hover/table-row:bg-gray-50 dark:group-hover/table-row:bg-nb-gray-940",
           )}
         ></div>
       </div>
       <div className={"mt-[0px] flex items-center flex-wrap"}>
         <TruncatedText
           className={cn(
-            "font-medium text-white text-left",
+            "font-medium text-gray-800 dark:text-white text-left",
             size == "md" ? "text-sm" : "text-xl leading-none mb-0.5",
           )}
           maxChars={24}
           text={name}
         />
         <TruncatedText
           className={cn(
-            "text-left text-sm text-nb-gray-400",
+            "text-left text-sm text-gray-500 dark:text-nb-gray-400",
             size == "lg" && "text-md mt-0.5",
           )}
           maxChars={24}
@@ -71,7 +71,7 @@ export const NetworkInformationSquare = ({
       {onClick && (
         <div
           className={
-            "absolute right-0 top-0 h-full flex items-center pr-4 text-nb-gray-200 opacity-0 group-hover/network:opacity-100"
+            "absolute right-0 top-0 h-full flex items-center pr-4 text-gray-500 dark:text-nb-gray-200 opacity-0 group-hover/network:opacity-100"
           }
         >
           <ArrowRightIcon size={18} />
diff --git a/src/modules/networks/resources/ResourceNameCell.tsx b/src/modules/networks/resources/ResourceNameCell.tsx
@@ -23,8 +23,8 @@ export default function ResourceNameCell({ resource }: Readonly<Props>) {
     >
       <div
         className={cn(
-          "flex items-center justify-center rounded-md h-9 w-9 shrink-0 bg-nb-gray-900 transition-all",
-          "group-hover:bg-nb-gray-800",
+          "flex items-center justify-center rounded-md h-9 w-9 shrink-0 bg-gray-100 dark:bg-nb-gray-900 transition-all",
+          "group-hover:bg-gray-200 dark:group-hover:bg-nb-gray-800",
         )}
       >
         {resource.type === "host" && <WorkflowIcon size={15} />}
diff --git a/src/modules/peers/PeerAddressCell.tsx b/src/modules/peers/PeerAddressCell.tsx
@@ -23,7 +23,7 @@ export default function PeerAddressCell({ peer }: Props) {
     >
       <div
         className={
-          "flex gap-4 items-center min-w-[320px] max-w-[320px] group/cell transition-all hover:bg-nb-gray-800/10 py-2 px-3 rounded-md cursor-default"
+          "flex gap-4 items-center min-w-[320px] max-w-[320px] group/cell transition-all hover:bg-gray-100/50 dark:hover:bg-nb-gray-800/10 py-2 px-3 rounded-md cursor-default"
         }
         onClick={(e) => {
           e.stopPropagation();
@@ -32,7 +32,7 @@ export default function PeerAddressCell({ peer }: Props) {
       >
         <div
           className={cn(
-            "flex items-center justify-center rounded-full h-8 w-8 shrink-0 bg-nb-gray-920/80 transition-all",
+            "flex items-center justify-center rounded-full h-8 w-8 shrink-0 bg-gray-100 dark:bg-nb-gray-920/80 transition-all",
           )}
         >
           {isEmpty(peer.country_code) ? (
diff --git a/src/modules/settings/GroupsTab.tsx b/src/modules/settings/GroupsTab.tsx
@@ -169,7 +169,7 @@ export default function GroupsTab({ account }: Props) {
               </>
             }
             helpText={
-              "Allow group propagation from user’s auto-groups to peers, sharing membership information."
+              "Allow group propagation from user's auto-groups to peers, sharing membership information."
             }
           />
           {(!isNetBirdHosted() || isLocalDev()) && (
@@ -183,7 +183,7 @@ export default function GroupsTab({ account }: Props) {
                 </>
               }
               helpText={
-                "Extract & sync groups from JWT claims with user’s auto-groups, auto-creating groups from tokens."
+                "Extract & sync groups from JWT claims with user's auto-groups, auto-creating groups from tokens."
               }
             />
           )}
@@ -202,7 +202,7 @@ export default function GroupsTab({ account }: Props) {
                   <div
                     className={cn(
                       !jwtGroupSync && "opacity-50 pointer-events-none",
-                      "flex flex-col gap-6 bg-nb-gray-940 px-6 pt-5 pb-6 border border-nb-gray-930 rounded-b-md relative mx-3",
+                      "flex flex-col gap-6 bg-gray-50 dark:bg-nb-gray-940 px-6 pt-5 pb-6 border border-gray-200 dark:border-nb-gray-930 rounded-b-md relative mx-3",
                     )}
                   >
                     <div>

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ export const OIDCError = () => {`
`40`	`40`	`>`
`41`	`41`	`<div`
`42`	`42`	`className={`
`43`		`- "bg-nb-gray-930 mb-3 border border-nb-gray-900 h-12 w-12 rounded-md flex items-center justify-center "`
	`43`	`+ "bg-gray-100 dark:bg-nb-gray-930 mb-3 border border-gray-200 dark:border-nb-gray-900 h-12 w-12 rounded-md flex items-center justify-center "`
`44`	`44`	`}`
`45`	`45`	`>`
`46`	`46`	`<NetBirdIcon size={23} />`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ export const SessionLost = () => {`
`26`	`26`	`>`
`27`	`27`	`<div`
`28`	`28`	`className={`
`29`		`- "bg-nb-gray-930 mb-3 border border-nb-gray-900 h-10 w-10 rounded-md flex items-center justify-center "`
	`29`	`+ "bg-gray-100 dark:bg-nb-gray-930 mb-3 border border-gray-200 dark:border-nb-gray-900 h-10 w-10 rounded-md flex items-center justify-center "`
`30`	`30`	`}`
`31`	`31`	`>`
`32`	`32`	`<NetBirdIcon size={20} />`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ export const DropdownInput = forwardRef<HTMLInputElement, Props>(`
`34`	`34`	`<div className={"absolute right-0 top-0 h-full flex items-center pr-4"}>`
`35`	`35`	`<div`
`36`	`36`	`className={`
`37`		`- "flex items-center bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-nb-gray-500"`
	`37`	`+ "flex items-center bg-gray-100 dark:bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-gray-300 dark:border-nb-gray-500"`
`38`	`38`	`}`
`39`	`39`	`>`
`40`	`40`	`<IconArrowBack size={10} />`
Original file line number	Diff line number	Diff line change
`@@ -95,7 +95,7 @@ export function NetworkRouteSelector({`
`95`	`95`	`className={cn(`
`96`	`96`	`"min-h-[42px] w-full relative items-center group",`
`97`	`97`	`"border border-neutral-200 dark:border-nb-gray-700 justify-between py-2 px-3",`
`98`		`- "rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex dark:text-neutral-400/70 text-neutral-500 cursor-pointer enabled:hover:dark:bg-nb-gray-900/50",`
	`98`	`+ "rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex text-neutral-500 dark:text-neutral-400/70 cursor-pointer enabled:hover:bg-gray-50 enabled:hover:dark:bg-nb-gray-900/50",`
`99`	`99`	`"disabled:opacity-40 disabled:cursor-default",`
`100`	`100`	`)}`
`101`	`101`	`disabled={disabled}`
`@@ -183,7 +183,7 @@ export function NetworkRouteSelector({`
`183`	`183`	`>`
`184`	`184`	`<div`
`185`	`185`	`className={`
`186`		`- "flex items-center bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-nb-gray-500"`
	`186`	`+ "flex items-center bg-gray-100 dark:bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-gray-300 dark:border-nb-gray-500"`
`187`	`187`	`}`
`188`	`188`	`>`
`189`	`189`	`<IconArrowBack size={10} />`
Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,7 @@ export function PortSelector({`
`71`	`71`	`className={cn(`
`72`	`72`	`"min-h-[48px] w-full relative items-center",`
`73`	`73`	`"border border-neutral-200 dark:border-nb-gray-700 justify-between py-2 px-3",`
`74`		`- "rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex dark:text-neutral-400/70 text-neutral-500 cursor-pointer hover:dark:bg-nb-gray-900/50",`
	`74`	`+ "rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex text-neutral-500 dark:text-neutral-400/70 cursor-pointer hover:bg-gray-50 hover:dark:bg-nb-gray-900/50",`
`75`	`75`	`)}`
`76`	`76`	`data-cy={"port-selector"}`
`77`	`77`	`disabled={disabled}`
`@@ -162,7 +162,7 @@ export function PortSelector({`
`162`	`162`	`>`
`163`	`163`	`<div`
`164`	`164`	`className={`
`165`		`- "flex items-center bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-nb-gray-500"`
	`165`	`+ "flex items-center bg-gray-100 dark:bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-gray-300 dark:border-nb-gray-500"`
`166`	`166`	`}`
`167`	`167`	`>`
`168`	`168`	`<IconArrowBack size={10} />`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ export const SelectDropdownSearchInput = forwardRef<HTMLInputElement, Props>(`
`41`	`41`	`<div className={"absolute right-0 top-0 h-full flex items-center pr-4"}>`
`42`	`42`	`<div`
`43`	`43`	`className={`
`44`		`- "flex items-center bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-nb-gray-500"`
	`44`	`+ "flex items-center bg-gray-100 dark:bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-gray-300 dark:border-nb-gray-500"`
`45`	`45`	`}`
`46`	`46`	`>`
`47`	`47`	`<IconArrowBack size={10} />`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ export function TableSkeletonRow({ odd = false }: RowProps) {`
`35`	`35`	`return (`
`36`	`36`	`<div`
`37`	`37`	`className={cn(`
`38`		`- odd ? "bg-nb-gray-940/40" : "bg-nb-gray-940",`
	`38`	`+ odd ? "bg-gray-100/40 dark:bg-nb-gray-940/40" : "bg-gray-100 dark:bg-nb-gray-940",`
`39`	`39`	`"h-[55px] w-full flex items-center px-8 py-2 justify-between gap-10",`
`40`	`40`	`)}`
`41`	`41`	`>`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ export const AIButton = () => {`
`10`	`10`	`>`
`11`	`11`	`<div`
`12`	`12`	`className={`
`13`		`- "flex items-center justify-center w-full h-full gap-2 bg-nb-gray-930/70 px-3 py-2.5 rounded-md"`
	`13`	`+ "flex items-center justify-center w-full h-full gap-2 bg-gray-100/70 dark:bg-nb-gray-930/70 px-3 py-2.5 rounded-md"`
`14`	`14`	`}`
`15`	`15`	`>`
`16`	`16`	`<Sparkles size={16} />`