From 2f4ebb290a1e5eefddac51f4fd2746cc672d2f9c Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Mon, 10 Jun 2024 14:14:39 -0300
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(TableOptions):=20reorder?=
 =?UTF-8?q?=20imports=20for=20better=20readability=20=F0=9F=92=84=20(Table?=
 =?UTF-8?q?Options):=20adjust=20gap=20between=20buttons=20for=20better=20U?=
 =?UTF-8?q?I=20spacing=20=F0=9F=92=84=20(TableOptions):=20update=20icon=20?=
 =?UTF-8?q?styles=20for=20better=20visual=20feedback=20=E2=9C=A8=20(editNo?=
 =?UTF-8?q?deModal):=20add=20dark=20mode=20support=20for=20badge=20compone?=
 =?UTF-8?q?nt=20=E2=99=BB=EF=B8=8F=20(editNodeModal):=20refactor=20functio?=
 =?UTF-8?q?n=20parameters=20for=20consistency=20=F0=9F=92=84=20(headerComp?=
 =?UTF-8?q?onent):=20update=20icon=20hover=20color=20for=20better=20UX=20c?=
 =?UTF-8?q?onsistency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TableOptions/index.tsx               | 13 ++++++++-----
 src/frontend/src/modals/editNodeModal/index.tsx     |  7 ++++++-
 .../MainPage/components/headerComponent/index.tsx   |  2 +-
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/components/tableComponent/components/TableOptions/index.tsx b/src/frontend/src/components/tableComponent/components/TableOptions/index.tsx
index 7ad2d11f3..dcf246fda 100644
--- a/src/frontend/src/components/tableComponent/components/TableOptions/index.tsx
+++ b/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",
-                    !hasSelection ? "" : "hover:text-destructive",
+                    "h-5 w-5  text-primary transition-all",
+                    !hasSelection ? "" : "hover:text-status-red ",
                   )}
                 />
               </Button>
diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx
index 4e910ca84..63849cd7e 100644
--- a/src/frontend/src/modals/editNodeModal/index.tsx
+++ b/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">
diff --git a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
index f4e518e19..151cdd902 100644
--- a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
+++ b/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>