From 9d6d2fd88a8cc9cb2484695343d30cb3f6f8550c Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Wed, 5 Jul 2023 19:54:10 -0300
Subject: [PATCH] feat: add header and input component tailwind constant
 classes

---
 .../components/menuBar/index.tsx              | 16 ++---
 .../src/components/headerComponent/index.tsx  | 32 ++++-----
 .../src/components/inputComponent/index.tsx   | 14 ++--
 .../components/inputFileComponent/index.tsx   |  4 +-
 src/frontend/src/index.css                    | 67 +++++++++++++++++++
 5 files changed, 100 insertions(+), 33 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 4109e318f..41cb0bef9 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -47,19 +47,19 @@ export const MenuBar = ({ flows, tabId }) => {
   let current_flow = flows.find((flow) => flow.id === tabId);
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="round-button-div">
       <Link to="/">
         <ChevronLeft className="w-4" />
       </Link>
-      <div className="flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium">
+      <div className="header-menu-bar">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              className="flex max-w-[200px] items-center gap-2"
+              className="header-menu-bar-display"
               variant="primary"
               size="sm"
             >
-              <div className="flex-1 truncate">{current_flow.name}</div>
+              <div className="header-menu-flow-name">{current_flow.name}</div>
               <ChevronDown className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
@@ -71,7 +71,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Plus className="mr-2 h-4 w-4" />
+              <Plus className="header-menu-options" />
               New
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -80,7 +80,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Settings2 className="mr-2 h-4 w-4 " />
+              <Settings2 className="header-menu-options " />
               Settings
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -89,7 +89,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Undo className="mr-2 h-4 w-4 " />
+              <Undo className="header-menu-options " />
               Undo
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -98,7 +98,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Redo className="mr-2 h-4 w-4 " />
+              <Redo className="header-menu-options " />
               Redo
             </DropdownMenuItem>
             <DropdownMenuSeparator />
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 342054b10..0eedbff59 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -36,8 +36,8 @@ export default function Header() {
     fetchStars();
   }, []);
   return (
-    <div className="flex h-12 w-full items-center justify-between border-b bg-muted">
-      <div className="flex w-96 items-center justify-start gap-2">
+    <div className="header-arrangement">
+      <div className="header-start-display">
         <Link to="/">
           <span className="ml-4 text-2xl">⛓️</span>
         </Link>
@@ -45,7 +45,7 @@ export default function Header() {
           <MenuBar flows={flows} tabId={tabId} />
         )}
       </div>
-      <div className="flex items-center gap-2">
+      <div className="round-button-div">
         <Link to="/">
           <Button
             className="gap-2"
@@ -69,17 +69,17 @@ export default function Header() {
           </Button>
         </Link>
       </div>
-      <div className="flex w-96 justify-end px-2">
-        <div className="ml-auto mr-2 flex items-center gap-5">
+      <div className="header-end-division">
+        <div className="header-end-display">
           <a
             href="https://github.com/logspace-ai/langflow"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex shadow-sm items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
+            className="header-github-link"
           >
             <FaGithub className="mr-2 h-5 w-5" />
             Star
-            <div className="-mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm">
+            <div className="header-github-display">
               {stars}
             </div>
           </a>
@@ -89,7 +89,7 @@ export default function Header() {
             rel="noreferrer"
             className="text-muted-foreground"
           >
-            <FaTwitter className="h-5 w-5 hover:text-accent-foreground" />
+            <FaTwitter className="side-bar-button-size" />
           </a>
           <a
             href="https://discord.gg/EqksyE2EX9"
@@ -97,24 +97,24 @@ export default function Header() {
             rel="noreferrer"
             className="text-muted-foreground"
           >
-            <FaDiscord className="h-5 w-5 hover:text-accent-foreground" />
+            <FaDiscord className="side-bar-button-size" />
           </a>
 
           <Separator orientation="vertical" />
           <button
-            className="text-muted-foreground hover:text-accent-foreground "
+            className="extra-side-bar-save-disable"
             onClick={() => {
               setDark(!dark);
             }}
           >
             {dark ? (
-              <SunIcon className="h-5 w-5" />
+              <SunIcon className="side-bar-button-size" />
             ) : (
-              <MoonIcon className="h-5 w-5" />
+              <MoonIcon className="side-bar-button-size" />
             )}
           </button>
           <button
-            className="text-muted-foreground hover:text-accent-foreground relative"
+            className="extra-side-bar-save-disable relative"
             onClick={(event: React.MouseEvent<HTMLElement>) => {
               setNotificationCenter(false);
               const { top, left } = (
@@ -128,15 +128,15 @@ export default function Header() {
                   >
                     <AlertDropdown />
                   </div>
-                  <div className="fixed left-0 top-0 h-screen w-screen"></div>
+                  <div className="header-notifications-box"></div>
                 </>
               );
             }}
           >
             {notificationCenter && (
-              <div className="absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive"></div>
+              <div className="header-notifications"></div>
             )}
-            <Bell className="h-5 w-5" aria-hidden="true" />
+            <Bell className="side-bar-button-size" aria-hidden="true" />
           </button>
         </div>
       </div>
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 4182dbbb2..61942f834 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -32,7 +32,7 @@ export default function InputComponent({
     <div
       className={
         disabled
-          ? "pointer-events-none relative cursor-not-allowed"
+          ? "input-component-div"
           : "relative"
       }
     >
@@ -61,8 +61,8 @@ export default function InputComponent({
         <button
           className={classNames(
             editNode
-              ? "absolute inset-y-0 right-0 items-center pr-2 text-muted-foreground"
-              : "absolute inset-y-0 right-0 items-center px-4 text-muted-foreground"
+              ? "input-component-true-button"
+              : "input-component-false-button"
           )}
           onClick={() => {
             setPwdVisible(!pwdVisible);
@@ -78,8 +78,8 @@ export default function InputComponent({
                 stroke="currentColor"
                 className={classNames(
                   editNode
-                    ? "absolute bottom-0.5 right-2 h-5 w-5"
-                    : "absolute bottom-2 right-3 h-5 w-5"
+                    ? "input-component-true-svg"
+                    : "input-component-false-svg"
                 )}
               >
                 <path
@@ -97,8 +97,8 @@ export default function InputComponent({
                 stroke="currentColor"
                 className={classNames(
                   editNode
-                    ? "absolute bottom-0.5 right-2 h-5 w-5"
-                    : "absolute bottom-2 right-3 h-5 w-5"
+                    ? "input-component-true-svg"
+                    : "input-component-false-svg"
                 )}
               >
                 <path
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index edfc8e39d..d909ebd86 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -94,10 +94,10 @@ export default function InputFileComponent({
   return (
     <div
       className={
-        disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
+        disabled ? "input-component-div" : "w-full"
       }
     >
-      <div className="flex w-full items-center">
+      <div className="input-file-component">
         <span
           onClick={handleButtonClick}
           className={
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index b088671cd..1582cc137 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -176,9 +176,15 @@ The cursor: default; property value restores the browser's default cursor style
   .extra-side-bar-save-disable {
     @apply text-muted-foreground
   }
+  .extra-side-bar-save-disable:hover {
+    @apply hover:text-accent-foreground
+  }
   .side-bar-button-size {
     @apply h-5 w-5
   }
+  .side-bar-button-size:hover {
+    @apply hover:text-accent-foreground
+  }
   .side-bar-buttons-arrangement {
     @apply mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2
   }
@@ -525,4 +531,65 @@ The cursor: default; property value restores the browser's default cursor style
   .float-component-pointer {
     @apply pointer-events-none cursor-not-allowed
   }
+
+  .header-menu-bar {
+    @apply flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium
+  }
+  .header-menu-bar-display {
+    @apply flex max-w-[200px] items-center gap-2
+  }
+  .header-menu-flow-name {
+    @apply flex-1 truncate
+  }
+  .header-menu-options {
+    @apply mr-2 h-4 w-4
+  }
+
+  .header-arrangement {
+    @apply flex-max-width h-12 items-center justify-between border-b bg-muted
+  }
+  .header-start-display {
+    @apply flex w-96 items-center justify-start gap-2
+  }
+  .header-end-division {
+    @apply flex w-96 justify-end px-2
+  }
+  .header-end-display {
+    @apply ml-auto mr-2 flex items-center gap-5
+  }
+  .header-github-link {
+    @apply inline-flex shadow-sm items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md
+  }
+  .header-github-display {
+    @apply -mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm
+  }
+  .header-notifications-box {
+    @apply fixed left-0 top-0 h-screen w-screen
+  }
+  .header-notifications {
+    @apply absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive
+  }
+
+  .input-component-div {
+    @apply pointer-events-none relative cursor-not-allowed
+  }
+  .input-component-button {
+    @apply absolute inset-y-0 right-0 items-center text-muted-foreground
+  }
+  .input-component-true-button {
+    @apply input-component-button pr-2
+  }
+  .input-component-false-button {
+    @apply input-component-button px-4
+  }
+  .input-component-true-svg {
+    @apply absolute bottom-0.5 right-2 side-bar-button-size
+  }
+  .input-component-false-svg {
+    @apply absolute bottom-2 right-3 side-bar-button-size
+  }
+  
+  .input-file-component {
+    @apply flex-max-width items-center
+  }
 }
\ No newline at end of file