more...

Author: alindt

src/modules/common-table-rows/ActiveInactiveRow.tsx

@@ -46,10 +46,16 @@ export default function ActiveInactiveRow({
                 "font-medium flex gap-2 items-center justify-center",
               )}
             >
-              <TextWithTooltip text={text as string} maxChars={25} />
+              <TextWithTooltip
+                text={text as string}
+                maxChars={25}
+                className="text-gray-800 dark:text-white group-hover:text-white"
+              />
               {additionalInfo}
             </div>
-            {children}
+            <div className={"text-nb-gray-400 dark:text-nb-gray-300 group-hover:text-white"}>
+              {children}
+            </div>
           </div>
         </div>
       </div>

src/modules/dns-nameservers/table/NameserverNameCell.tsx

@@ -11,7 +11,7 @@ export default function NameserverNameCell({ ns }: Props) {
     <div className={"flex min-w-[270px] max-w-[270px]"}>
       <div
         className={
-          "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 transition-all hover:bg-gray-500 hover:text-white dark:hover:text-neutral-100 dark:hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
+          "group flex items-center gap-2 dark:text-neutral-300 text-neutral-500 transition-all hover:bg-gray-500 dark:hover:text-neutral-100 dark:hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
         }
       >
         <ActiveInactiveRow

src/modules/networks/misc/NetworkInformationSquare.tsx

@@ -22,7 +22,7 @@ export const NetworkInformationSquare = ({
       className={cn(
         "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:bg-gray-500 hover:text-white dark:hover:text-neutral-100 dark:hover:bg-nb-gray-910 cursor-pointer py-2 pl-3 pr-5 relative"
+          ? "hover:bg-gray-500 dark:hover:text-neutral-100 dark:hover:bg-nb-gray-910 cursor-pointer py-2 pl-3 pr-5 relative"
           : "cursor-default",
       )}
       onClick={onClick}
@@ -54,6 +54,7 @@ export const NetworkInformationSquare = ({
         <TruncatedText
           className={cn(
             "font-medium text-gray-800 dark:text-white text-left",
+            "group-hover/network:text-white",
             size == "md" ? "text-sm" : "text-xl leading-none mb-0.5",
           )}
           maxChars={24}
@@ -62,6 +63,7 @@ export const NetworkInformationSquare = ({
         <TruncatedText
           className={cn(
             "text-left text-sm text-gray-500 dark:text-nb-gray-400",
+            "group-hover/network:text-white",
             size == "lg" && "text-md mt-0.5",
           )}
           maxChars={24}

src/modules/peers/PeerNameCell.tsx

@@ -27,9 +27,9 @@ export default function PeerNameCell({ peer, linkToPeer = true }: Props) {
     <div>
       <div
         className={cn(
-          "flex items-center max-w-[300px] gap-2 dark:text-neutral-300 text-neutral-500 transition-all py-2 px-3 rounded-md ",
+          "group flex items-center max-w-[300px] gap-2 dark:text-neutral-300 text-neutral-500 transition-all py-2 px-3 rounded-md ",
           linkToPeer &&
-            "hover:bg-gray-500 hover:text-white dark:hover:text-neutral-100 dark:hover:bg-nb-gray-800/60 cursor-pointer",
+            "hover:bg-gray-500 dark:hover:text-neutral-100 dark:hover:bg-nb-gray-800/60 cursor-pointer",
         )}
         data-testid="peer-name-cell"
         aria-label={`View details of peer ${peer.name}`}