♻️ (TableOptions): reorder imports for better readability

💄 (TableOptions): adjust gap between buttons for better UI spacing
💄 (TableOptions): update icon styles for better visual feedback
✨ (editNodeModal): add dark mode support for badge component
♻️ (editNodeModal): refactor function parameters for consistency
💄 (headerComponent): update icon hover color for better UX consistency

src/frontend/src/components/tableComponent/components/TableOptions/index.tsx

@@ -1,7 +1,7 @@
 import { cn } from "../../../../utils/utils";
+import IconComponent from "../../../genericIconComponent";
 import ShadTooltip from "../../../shadTooltipComponent";
 import { Button } from "../../../ui/button";
-import IconComponent from "../../../genericIconComponent";
 
 export default function TableOptions({
   resetGrid,
@@ -18,7 +18,7 @@ export default function TableOptions({
 }): JSX.Element {
   return (
     <div className={cn("absolute bottom-3 left-6")}>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-3">
         <div>
           <ShadTooltip content="Reset Columns">
             <Button
@@ -31,7 +31,10 @@ export default function TableOptions({
             >
               <IconComponent
                 name="RotateCcw"
-                className={cn("h-5 w-5 text-primary transition-all")}
+                strokeWidth={2}
+                className={cn(
+                  "h-5 w-5 text-primary transition-all hover:text-accent-foreground",
+                )}
               />
             </Button>
           </ShadTooltip>
@@ -81,8 +84,8 @@ export default function TableOptions({
                 <IconComponent
                   name="Trash2"
                   className={cn(
-                    "h-5 w-5 text-primary transition-all",
+                    "h-5 w-5  text-primary transition-all",
-                    !hasSelection ? "" : "hover:text-destructive",
+                    !hasSelection ? "" : "hover:text-status-red ",
                   )}
                 />
               </Button>

src/frontend/src/modals/editNodeModal/index.tsx

@@ -3,6 +3,7 @@ import { forwardRef, useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
 import { Badge } from "../../components/ui/badge";
+import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
 import { NodeDataType } from "../../types/flow";
 import BaseModal from "../baseModal";
@@ -28,6 +29,8 @@ const EditNodeModal = forwardRef(
   ) => {
     const myData = useRef(data);
 
+    const isDark = useDarkStore((state) => state.dark);
+
     const setNode = useFlowStore((state) => state.setNode);
 
     function changeAdvanced(n) {
@@ -85,7 +88,9 @@ const EditNodeModal = forwardRef(
         </BaseModal.Trigger>
         <BaseModal.Header description={data.node?.description!}>
           <span className="pr-2">{data.type}</span>
-          <Badge variant="secondary">ID: {data.id}</Badge>
+          <Badge variant={isDark ? "gray" : "secondary"}>
+            <span className="relative top-[0.6px]">ID: {data.id}</span>
+          </Badge>
         </BaseModal.Header>
         <BaseModal.Content>
           <div className="flex h-full flex-col">

src/frontend/src/pages/MainPage/components/headerComponent/index.tsx

@@ -107,7 +107,7 @@ const HeaderComponent = ({
                   name="Trash2"
                   className={cn(
                     "h-5 w-5 text-primary transition-all",
-                    disableFunctions ? "" : "hover:text-destructive",
+                    disableFunctions ? "" : "hover:text-status-red",
                   )}
                 />
               </Button>