more...

Author: alindt

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

@@ -89,7 +89,7 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) {
               />
               <button
                 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 interactive-cell"
                 }
                 onClick={() => setNetworkModal(true)}
               >

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

@@ -179,7 +179,7 @@ function PeerOverview() {
                       <ModalTrigger>
                         <div
                           className={
-                            "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"
+                            "flex items-center gap-2 interactive-cell"
                           }
                         >
                           <PencilIcon size={16} />

src/app/globals.css

@@ -2,7 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+  .interactive-cell {
+    @apply dark:text-neutral-300 text-neutral-500 py-2 px-3 rounded-md;
+    @apply transition-all hover:bg-gray-300 hover:text-neutral-800 dark:hover:text-neutral-100 dark:hover:bg-nb-gray-800/60 cursor-pointer;
+  }
 
+  .table-row-hoverable {
+    @apply transition-all hover:bg-gray-100 dark:hover:bg-nb-gray-940 cursor-pointer;
+  }
+}
 
 h1 {
     @apply text-2xl font-medium text-gray-700 dark:text-nb-gray-100 my-1;

src/components/FullTooltip.tsx

@@ -66,7 +66,8 @@ export default function FullTooltip({
               <div
                 className={cn(
                   isAction ? "cursor-pointer" : "cursor-default",
-                  "inline-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",
+                  "inline-flex items-center gap-2",
+                  "interactive-cell",
                   className,
                 )}
               >

src/components/table/Table.tsx

@@ -103,9 +103,10 @@ const TableRow = React.forwardRef<
     className={cn(
       "transition-colors group/table-row data-[state=selected]:bg-neutral-100 dark:data-[state=selected]:bg-nb-gray-930/70",
       "data-[state=selected]:border-gray-200 dark:data-[state=selected]:border-nb-gray-900",
+      "table-row-hoverable",
       minimal
-        ? "hover:bg-gray-50 dark:hover:bg-nb-gray-900/10"
-        : "border-b dark:border-zinc-700/40 border-gray-200 dark:hover:bg-nb-gray-940 hover:bg-gray-100",
+        ? ""
+        : "border-b dark:border-zinc-700/40 border-gray-200",
       className,
     )}
     {...props}

src/modules/activity/ActivityTable.tsx

@@ -106,7 +106,6 @@ export default function ActivityTable({
     <DataTable
       headingTarget={headingTarget}
       wrapperClassName={"gap-0 flex flex-col"}
-      tableClassName={"px-8 mt-10"}
       paginationClassName={"max-w-[800px]"}
       as={"div"}
       text={"Activity Events"}

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={
-          "group flex items-center gap-2 dark:text-neutral-300 text-neutral-500 transition-all hover:bg-gray-300 hover:text-neutral-800 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 interactive-cell"
         }
       >
         <ActiveInactiveRow

src/modules/groups/AssignPeerToGroupModal.tsx

@@ -196,7 +196,7 @@ export const AssignGroupToPeerModalContent = ({
                 {groupName !== "All" && (
                   <button
                     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 interactive-cell"
                     }
                     onClick={() => setGroupNameModal(true)}
                   >

src/modules/networks/misc/NetworkInformationSquare.tsx

@@ -20,9 +20,9 @@ export const NetworkInformationSquare = ({
   return (
     <button
       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",
+        "flex w-full items-center max-w-[300px] gap-4 group/network",
         onClick
-          ? "hover:bg-gray-300 hover:text-neutral-700 dark:hover:text-neutral-100 dark:hover:bg-nb-gray-910 cursor-pointer py-2 pl-3 pr-5 relative"
+          ? "interactive-cell pl-3 pr-5 relative"
           : "cursor-default",
       )}
       onClick={onClick}

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-gray-100/50 dark: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 interactive-cell"
         }
         onClick={(e) => {
           e.stopPropagation();