From bfd830f1e41d4cad6b5ba194781d9b55144ca764 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 4 Jul 2023 17:45:47 -0300
Subject: [PATCH] feat: Change extra side bar buttons classes to tailwind
 constants

---
 src/frontend/src/index.css                             | 10 ++++++++++
 .../components/extraSidebarComponent/index.tsx         | 10 +++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 077297311..09d19db88 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -143,6 +143,15 @@ The cursor: default; property value restores the browser's default cursor style
 
 
 @layer components {
+  .extra-side-bar-save-disable {
+    @apply text-muted-foreground
+  }
+  .extra-side-bar-buttons {
+    @apply relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out
+  }
+  .extra-side-bar-buttons:hover {
+    @apply hover:bg-muted
+  }
   .button-div-style {
     @apply gap-2 flex
   }
@@ -164,4 +173,5 @@ The cursor: default; property value restores the browser's default cursor style
   .input-dialog{
     @apply text-ring cursor-pointer bg-transparent
   }
+
 }
\ No newline at end of file
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index e03cb521b..a3f7da7bc 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -63,7 +63,7 @@ export default function ExtraSidebar() {
       <div className="mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2">
         <ShadTooltip content="Import" side="top">
           <button
-            className="relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
+            className="extra-side-bar-buttons"
             onClick={() => {
               // openPopUp(<ImportModal />);
               uploadFlow();
@@ -76,7 +76,7 @@ export default function ExtraSidebar() {
         <ShadTooltip content="Export" side="top">
           <button
             className={classNames(
-              "relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset  ring-input transition-all duration-500 ease-in-out hover:bg-muted"
+              "extra-side-bar-buttons"
             )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
@@ -88,7 +88,7 @@ export default function ExtraSidebar() {
         <ShadTooltip content="Code" side="top">
           <button
             className={classNames(
-              "relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset  ring-input transition-all duration-500 ease-in-out hover:bg-muted"
+              "extra-side-bar-buttons"
             )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
@@ -100,7 +100,7 @@ export default function ExtraSidebar() {
 
         <ShadTooltip content="Save" side="top">
           <button
-            className="relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset  ring-input transition-all duration-500 ease-in-out hover:bg-muted"
+            className="extra-side-bar-buttons"
             onClick={(event) => {
               saveFlow(flows.find((f) => f.id === tabId));
               setSuccessData({ title: "Changes saved successfully" });
@@ -110,7 +110,7 @@ export default function ExtraSidebar() {
             <Save
               strokeWidth={1.5}
               className={
-                "h-5 w-5" + (isPending ? " " : " text-muted-foreground")
+                "h-5 w-5" + (isPending ? " " : " extra-side-bar-save-disable")
               }
             ></Save>
           </button>