From fa628a04fd2c6d6a09ee61ca567da94e61b5e6b7 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Wed, 5 Jul 2023 15:50:57 -0300
Subject: [PATCH 1/6] feat: Add generic node tailwind constants classes

---
 .../src/CustomNodes/GenericNode/index.tsx     | 44 +++++++--------
 src/frontend/src/index.css                    | 53 +++++++++++++++++++
 2 files changed, 75 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 32cee565d..f177ab1c0 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -82,30 +82,30 @@ export default function GenericNode({
       <div
         className={classNames(
           selected ? "border border-ring" : "border",
-          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-background"
+          "generic-node-div"
         )}
       >
-        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4  ">
-          <div className="flex w-full items-center truncate">
+        <div className="generic-node-div-title">
+          <div className="generic-node-title-arrangement">
             <Icon
               strokeWidth={1.5}
-              className="h-10 w-10 rounded p-1"
+              className="generic-node-icon"
               style={{
                 color: nodeColors[types[data.type]] ?? nodeColors.unknown,
               }}
             />
-            <div className="ml-2 truncate">
+            <div className="generic-node-tooltip-div">
               <ShadTooltip
                 delayDuration={1500}
                 content={data.node.display_name}
               >
-                <div className="ml-2 truncate text-primary">
+                <div className="generic-node-tooltip-div text-primary">
                   {data.node.display_name}
                 </div>
               </ShadTooltip>
             </div>
           </div>
-          <div className="flex gap-3">
+          <div className="round-button-div">
             <button
               className="relative"
               onClick={(event) => {
@@ -114,14 +114,14 @@ export default function GenericNode({
               }}
             ></button>
           </div>
-          <div className="flex gap-3">
+          <div className="round-button-div">
             <div>
               <Tooltip
                 title={
                   !validationStatus ? (
                     "Validating..."
                   ) : (
-                    <div className="max-h-96 overflow-auto">
+                    <div className="generic-node-validation-div">
                       {validationStatus.params ||
                         ""
                           .split("\n")
@@ -130,29 +130,29 @@ export default function GenericNode({
                   )
                 }
               >
-                <div className="relative top-[3px] h-5 w-5">
+                <div className="generic-node-status-position">
                   <div
                     className={classNames(
                       validationStatus && validationStatus.valid
-                        ? "h-4 w-4 rounded-full bg-status-green opacity-100"
-                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
-                      "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
+                        ? "green-status"
+                        : "status-build-animation",
+                      "status-div"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       validationStatus && !validationStatus.valid
-                        ? "h-4 w-4 rounded-full  bg-status-red opacity-100"
-                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
-                      "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
+                        ? "red-status"
+                        : "status-build-animation",
+                      "status-div"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       !validationStatus || isBuilding
-                        ? "h-4 w-4 rounded-full  bg-status-yellow opacity-100"
-                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
-                      "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
+                        ? "yellow-status"
+                        : "status-build-animation",
+                      "status-div"
                     )}
                   ></div>
                 </div>
@@ -161,8 +161,8 @@ export default function GenericNode({
           </div>
         </div>
 
-        <div className="h-full w-full py-5 text-foreground">
-          <div className="w-full px-5 pb-3 text-sm text-muted-foreground">
+        <div className="generic-node-desc">
+          <div className="generic-node-desc-text">
             {data.node.description}
           </div>
 
@@ -221,7 +221,7 @@ export default function GenericNode({
             <div
               className={classNames(
                 Object.keys(data.node.template).length < 1 ? "hidden" : "",
-                "flex w-full justify-center"
+                "flex-max-width justify-center"
               )}
             >
               {" "}
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index a9dfc0c1a..84398be78 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -298,4 +298,57 @@ The cursor: default; property value restores the browser's default cursor style
   .community-pages-flows-panel {
     @apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
   }
+  .generic-node-div {
+    @apply relative flex w-96 flex-col justify-center rounded-lg bg-background
+  }
+  .generic-node-div-title {
+    @apply flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4
+  }
+  .generic-node-title-arrangement {
+    @apply flex-max-width items-center truncate
+  }
+  .generic-node-icon {
+    @apply h-10 w-10 rounded p-1
+  }
+  .generic-node-tooltip-div {
+    @apply ml-2 truncate
+  }
+  .generic-node-validation-div {
+    @apply max-h-96 overflow-auto
+  }
+
+  .generic-node-status-position {
+    @apply relative top-[3px] h-5 w-5
+  }
+
+  .generic-node-status-animation {
+    @apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0
+  }
+  .generic-node-status {
+    @apply h-4 w-4 rounded-full opacity-100
+  }
+  .green-status {
+    @apply generic-node-status bg-status-green
+  }
+  .red-status {
+    @apply generic-node-status bg-status-red
+  }
+  .yellow-status {
+    @apply generic-node-status bg-status-yellow
+  }
+  .status-build-animation {
+    @apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0
+  }
+  .status-div {
+    @apply absolute w-4 duration-200 ease-in-out
+  }
+  .status-div:hover {
+    @apply hover:text-accent-foreground hover:transition-all
+  }
+  .generic-node-desc {
+    @apply h-full w-full py-5 text-foreground
+  }
+  .generic-node-desc-text {
+    @apply w-full px-5 pb-3 text-sm text-muted-foreground
+  }
 }
\ No newline at end of file

From 9922ea05930bce58e1277dbd8910a04536abb2fa Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Wed, 5 Jul 2023 16:12:48 -0300
Subject: [PATCH 2/6] feat: Add alerts tailwind constants classes

---
 src/frontend/src/alerts/error/index.tsx   | 10 +++----
 src/frontend/src/alerts/success/index.tsx |  6 ++--
 src/frontend/src/index.css                | 36 +++++++++++++++++++++++
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index 31980dc6b..93f30484b 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -39,19 +39,19 @@ export default function ErrorAlert({
             removeAlert(id);
           }, 500);
         }}
-        className="mt-6 w-96 cursor-pointer rounded-md bg-error-background  p-4 shadow-xl"
+        className="error-build-message"
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
+            <XCircle className="error-build-message-circle" aria-hidden="true" />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm font-medium text-error-foreground">
+            <h3 className="error-build-foreground">
               {title}
             </h3>
             {list.length !== 0 ? (
-              <div className="mt-2 text-sm text-error-foreground">
-                <ul className="list-disc space-y-1 pl-5">
+              <div className="error-build-message-div">
+                <ul className="error-build-message-list">
                   {list.map((item, index) => (
                     <li key={index}>{item}</li>
                   ))}
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index 88fc79962..e943feb8c 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -34,17 +34,17 @@ export default function SuccessAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl"
+        className="success-alert"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <CheckCircle2
-              className="h-5 w-5 text-status-green"
+              className="success-alert-icon"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-success-foreground">
+            <p className="success-alert-message">
               {title}
             </p>
           </div>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 84398be78..37b26ab1c 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -351,4 +351,40 @@ The cursor: default; property value restores the browser's default cursor style
   .generic-node-desc-text {
     @apply w-full px-5 pb-3 text-sm text-muted-foreground
   }
+
+  .alert-icon {
+    @apply h-5 w-5
+  } /*error-build-message-circle*/
+  .alert-font-size {
+    @apply text-sm font-medium
+  }
+
+  .error-build-message {
+    @apply mt-6 w-96 cursor-pointer rounded-md bg-error-background  p-4 shadow-xl
+  }
+  .error-build-message-circle {
+    @apply text-status-red alert-icon
+  }
+  .error-build-text {
+    @apply text-error-foreground
+  }
+  .error-build-foreground {
+    @apply error-build-text alert-font-size
+  }
+  .error-build-message-div {
+    @apply mt-2 text-sm error-build-text
+  }
+  .error-build-message-list {
+    @apply list-disc space-y-1 pl-5
+  }
+
+  .success-alert {
+    @apply mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl
+  }
+  .success-alert-icon {
+    @apply alert-icon text-status-green
+  }
+  .success-alert-message {
+    @apply alert-font-size text-success-foreground
+  }
 }
\ No newline at end of file

From d0621efd1cf1511f9fe813a45db034627d429acf Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Wed, 5 Jul 2023 18:13:32 -0300
Subject: [PATCH 3/6] feat: Add card component and unused extrasidebar tailwind
 constants classes

---
 .../ExtraSidebarComponent/index.tsx           | 36 ++++-----
 .../src/components/cardComponent/index.tsx    | 18 ++---
 src/frontend/src/index.css                    | 76 ++++++++++++++++++-
 3 files changed, 102 insertions(+), 28 deletions(-)

diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index 7efef4ec0..318971dd5 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -18,13 +18,13 @@ export default function ExtraSidebar() {
       <aside
         className={` ${
           isStackedOpen ? "w-52" : "w-0 "
-        } flex flex-shrink-0 flex-col overflow-hidden border-r  transition-all duration-500`}
+        } unused-side-bar-aside`}
       >
-        <div className="flex h-full  w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide">
-          <div className="flex w-full flex-grow flex-col">
+        <div className="unused-side-bar-arrangement">
+          <div className="unused-side-bar-division">
             {extraNavigation.options ? (
               <div className="p-4">
-                <nav className="flex-1 space-y-1">
+                <nav className="unused-side-bar-nav">
                   {extraNavigation.options.map((item) =>
                     !item.children ? (
                       <div key={item.name}>
@@ -32,17 +32,17 @@ export default function ExtraSidebar() {
                           to={item.href}
                           className={classNames(
                             item.href.split("/")[2] === current[4]
-                              ? "bg-muted text-foreground"
-                              : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
-                            "group flex w-full items-center rounded-md py-2 pl-2 text-sm font-medium"
+                              ? "unused-side-bar-link-colors-true"
+                              : "unused-side-bar-link-colors-false",
+                            "unused-side-bar-link"
                           )}
                         >
                           <item.icon
                             className={classNames(
                               item.href.split("/")[2] === current[4]
                                 ? "text-ring"
-                                : "text-ring group-hover:text-accent-foreground",
-                              "mr-3 flex-shrink-0 h-6 w-6"
+                                : "unused-side-bar-icon-false",
+                              "unused-side-bar-icon"
                             )}
                           />
                           {item.name}
@@ -59,20 +59,20 @@ export default function ExtraSidebar() {
                             <Disclosure.Button
                               className={classNames(
                                 item.href.split("/")[2] === current[4]
-                                  ? "bg-muted text-foreground"
-                                  : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
-                                "group flex w-full items-center rounded-md py-2 pl-2 pr-1 text-left text-sm font-medium focus:outline-none focus:ring-1 focus:ring-ring"
+                                  ? "unused-side-bar-link-colors-true"
+                                  : "unused-side-bar-link-colors-false",
+                                "unused-side-bar-disclosure"
                               )}
                             >
                               <item.icon
-                                className="mr-3 h-6 w-6 flex-shrink-0 text-ring group-hover:text-accent-foreground"
+                                className="unused-side-bar-disclosure-icon"
                                 aria-hidden="true"
                               />
                               <span className="flex-1">{item.name}</span>
                               <svg
                                 className={classNames(
-                                  open ? "text-ring rotate-90" : "text-ring",
-                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-accent-foreground"
+                                  open ? "unused-side-bar-svg-true" : "text-ring",
+                                  "unused-side-bar-svg"
                                 )}
                                 viewBox="0 0 20 20"
                                 aria-hidden="true"
@@ -90,9 +90,9 @@ export default function ExtraSidebar() {
                                   to={subItem.href}
                                   className={classNames(
                                     subItem.href.split("/")[3] === current[5]
-                                      ? "bg-muted text-foreground"
-                                      : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
-                                    "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
+                                      ? "unused-side-bar-link-colors-true"
+                                      : "unused-side-bar-link-colors-false",
+                                    "unused-side-bar-disclosure-panel"
                                   )}
                                 >
                                   {subItem.name}
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 307568413..112744ab1 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -28,24 +28,24 @@ export const CardComponent = ({
   return (
     <Card className="group">
       <CardHeader>
-        <CardTitle className="flex w-full items-center gap-4">
+        <CardTitle className="card-component-title-display">
           <span
             className={
-              "flex h-7 w-7 items-center justify-center rounded-full text-2xl " +
+              "card-component-image " +
               gradients[parseInt(flow.id.slice(0, 12), 16) % gradients.length]
             }
           ></span>
-          <span className="inline-block w-full flex-1 break-words truncate-doubleline">
+          <span className="card-component-title-size">
             {flow.name}
           </span>
           {onDelete && (
-            <button className="flex self-start" onClick={onDelete}>
-              <Trash2 className="h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100" />
+            <button className="card-component-delete-button" onClick={onDelete}>
+              <Trash2 className="card-component-delete-icon" />
             </button>
           )}
         </CardTitle>
-        <CardDescription className="pb-2 pt-2">
-          <div className="truncate-doubleline">
+        <CardDescription className="card-component-desc">
+          <div className="card-component-desc-text">
             {flow.description}
             {/* {flow.description} */}
           </div>
@@ -53,8 +53,8 @@ export const CardComponent = ({
       </CardHeader>
 
       <CardFooter>
-        <div className="flex w-full items-end justify-between gap-2">
-          <div className="flex flex-wrap gap-2">
+        <div className="card-component-footer-arrangement">
+          <div className="card-component-footer">
             {/* <Badge variant="secondary">Agent</Badge>
             <Badge variant="secondary">
               <div className="w-3">
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 37b26ab1c..00b31bd37 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -354,7 +354,7 @@ The cursor: default; property value restores the browser's default cursor style
 
   .alert-icon {
     @apply h-5 w-5
-  } /*error-build-message-circle*/
+  }
   .alert-font-size {
     @apply text-sm font-medium
   }
@@ -387,4 +387,78 @@ The cursor: default; property value restores the browser's default cursor style
   .success-alert-message {
     @apply alert-font-size text-success-foreground
   }
+
+  .card-component-title-display {
+    @apply round-button-div flex-max-width
+  }
+  .card-component-image {
+    @apply flex h-7 w-7 items-center justify-center rounded-full text-2xl
+  }
+  .card-component-title-size {
+    @apply inline-block w-full flex-1 break-words truncate-doubleline
+  }
+  .card-component-delete-button {
+    @apply flex self-start
+  }
+  .card-component-delete-icon {
+    @apply h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100
+  }
+  .card-component-desc {
+    @apply pb-2 pt-2
+  }
+  .card-component-desc-text {
+    @apply truncate-doubleline
+  }
+  .card-component-footer-arrangement {
+    @apply flex-max-width items-end justify-between gap-2
+  }
+  .card-component-footer {
+    @apply flex flex-wrap gap-2
+  }
+
+  .unused-side-bar-aside {
+    @apply flex flex-shrink-0 flex-col overflow-hidden border-r  transition-all duration-500
+  }
+  .unused-side-bar-arrangement {
+    @apply flex h-full  w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide
+  }
+  .unused-side-bar-division {
+    @apply flex-max-width flex-grow flex-col
+  }
+  .unused-side-bar-nav {
+    @apply flex-1 space-y-1
+  }
+  .unused-side-bar-link {
+    @apply flex-max-width items-center rounded-md py-2 pl-2 text-sm font-medium
+  }
+  .unused-side-bar-link-colors-true {
+    @apply bg-muted text-foreground
+  }
+  .unused-side-bar-link-colors-false {
+    @apply bg-background text-muted-foreground hover:bg-muted hover:text-foreground
+  }
+  .unused-side-bar-icon {
+    @apply mr-3 flex-shrink-0 h-6 w-6
+  }
+  .unused-side-bar-icon-false {
+    @apply text-ring group-hover:text-accent-foreground
+  }
+  .unused-side-bar-disclosure {
+    @apply unused-side-bar-link pr-1 text-left
+  }
+  .unused-side-bar-disclosure:focus {
+    @apply focus:outline-none focus:ring-1 focus:ring-ring
+  }
+  .unused-side-bar-disclosure-icon {
+    @apply unused-side-bar-icon text-ring group-hover:text-accent-foreground
+  }
+  .unused-side-bar-svg-true {
+    @apply text-ring rotate-90
+  }
+  .unused-side-bar-svg {
+    @apply ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-accent-foreground
+  }
+  .unused-side-bar-disclosure-panel {
+    @apply flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium
+  }
 }
\ No newline at end of file

From dccb9c27dbcedbe0a6dbe0babc137dc9340db398 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Wed, 5 Jul 2023 19:08:33 -0300
Subject: [PATCH 4/6] feat: Add CodeArea and Dropdown component tailwind
 constant classes

---
 .../EditFlowSettingsComponent/index.tsx       |  4 +-
 .../components/codeAreaComponent/index.tsx    |  6 +-
 .../components/dropdownComponent/index.tsx    | 24 ++++----
 .../src/components/floatComponent/index.tsx   |  2 +-
 src/frontend/src/index.css                    | 60 +++++++++++++++++++
 5 files changed, 78 insertions(+), 18 deletions(-)

diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
index 7ce5f4f26..4c1d18b75 100644
--- a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
@@ -44,10 +44,10 @@ export const EditFlowSettings: React.FC<InputProps> = ({
   return (
     <>
       <Label>
-        <div className="flex justify-between">
+        <div className="edit-flow-arrangement">
           <span className="font-medium">Name</span>{" "}
           {isMaxLength && (
-            <span className="ml-10 animate-pulse text-status-red">
+            <span className="edit-flow-span">
               Character limit reached
             </span>
           )}
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index d4bf6f716..e0799ffac 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -30,10 +30,10 @@ export default function CodeAreaComponent({
   return (
     <div
       className={
-        disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
+        disabled ? "code-area-component" : "w-full"
       }
     >
-      <div className="flex w-full items-center">
+      <div className="code-area-input-positioning">
         <span
           onClick={() => {
             openPopUp(
@@ -68,7 +68,7 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground  ml-3" />
+            <ExternalLink strokeWidth={1.5} className="code-area-external-link" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 67447a21f..704c6bff5 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -39,20 +39,20 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "border-1 relative pr-8 input-edit-node"
-                    : "py-2 pl-3 pr-10 text-left input-primary"
+                    ? "dropdown-component-outline"
+                    : "dropdown-component-false-outline"
                 }
               >
-                <span className="block w-full truncate bg-background">
+                <span className="dropdown-component-display">
                   {internalValue}
                 </span>
                 <span
                   className={
-                    "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+                    "dropdown-component-arrow"
                   }
                 >
                   <ChevronsUpDown
-                    className="h-5 w-5 text-muted-foreground"
+                    className="dropdown-component-arrow-color"
                     aria-hidden="true"
                   />
                 </span>
@@ -68,8 +68,8 @@ export default function Dropdown({
                 <Listbox.Options
                   className={classNames(
                     editNode
-                      ? "z-10 mt-1 max-h-60 w-[215px] overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-                      : "nowheel overflow-y z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ",
+                      ? "dropdown-component-true-options "
+                      : "dropdown-component-false-options ",
                     apiModal ? "mb-2 w-[250px]" : "absolute"
                   )}
                 >
@@ -80,8 +80,8 @@ export default function Dropdown({
                         classNames(
                           active ? " bg-accent" : "",
                           editNode
-                            ? "relative cursor-default select-none py-0.5 pl-3 pr-12"
-                            : "relative cursor-default select-none py-2 pl-3 pr-9"
+                            ? "dropdown-component-false-option"
+                            : "dropdown-component-true-option"
                         )
                       }
                       value={option}
@@ -101,14 +101,14 @@ export default function Dropdown({
                             <span
                               className={classNames(
                                 active ? "text-background " : "",
-                                "absolute inset-y-0 right-0 flex items-center pr-4"
+                                "dropdown-component-choosal"
                               )}
                             >
                               <Check
                                 className={
                                   active
-                                    ? "h-5 w-5 text-black"
-                                    : "h-5 w-5 text-black"
+                                    ? "dropdown-component-check-icon"
+                                    : "dropdown-component-check-icon"
                                 }
                                 aria-hidden="true"
                               />
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 523892595..b76256840 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -32,7 +32,7 @@ export default function FloatComponent({
   return (
     <div
       className={
-        "w-full " + (disabled ? "pointer-events-none cursor-not-allowed" : "")
+        "w-full " + (disabled ? "float-component-pointer" : "")
       }
     >
       <input
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 00b31bd37..ba7c657f4 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -461,4 +461,64 @@ The cursor: default; property value restores the browser's default cursor style
   .unused-side-bar-disclosure-panel {
     @apply flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium
   }
+
+  .code-area-component {
+    @apply pointer-events-none w-full cursor-not-allowed
+  }
+  .code-area-input-positioning {
+    @apply flex-max-width items-center
+  }
+  .code-area-external-link {
+    @apply w-6 h-6 ml-3
+  }
+  .code-area-external-link:hover {
+    @apply hover:text-accent-foreground
+  }
+
+  .dropdown-component-outline {
+    @apply relative pr-8 input-edit-node
+  }
+  .dropdown-component-false-outline {
+    @apply py-2 pl-3 pr-10 text-left input-primary
+  }
+  .dropdown-component-display {
+    @apply block w-full truncate bg-background
+  }
+  .dropdown-component-arrow {
+    @apply pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2
+  }
+  .dropdown-component-arrow-color {
+    @apply h-5 w-5 extra-side-bar-save-disable
+  }
+  .dropdown-component-options {
+    @apply z-10 mt-1 max-h-60 overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm
+  }
+  .dropdown-component-true-options {
+    @apply dropdown-component-options w-[215px]
+  }
+  .dropdown-component-false-options {
+    @apply dropdown-component-options w-full
+  }
+  .dropdown-component-option {
+    @apply relative cursor-default select-none
+  }
+  .dropdown-component-false-option {
+    @apply dropdown-component-option py-0.5 pl-3 pr-12
+  }
+  .dropdown-component-true-option {
+    @apply dropdown-component-option py-2 pl-3 pr-9
+  }
+  .dropdown-component-choosal {
+    @apply absolute inset-y-0 right-0 flex items-center pr-4
+  }
+  .dropdown-component-check-icon {
+    @apply h-5 w-5 text-black
+  }
+
+  .edit-flow-arrangement {
+    @apply flex justify-between
+  }
+  .edit-flow-span {
+    @apply ml-10 animate-pulse text-status-red
+  }
 }
\ No newline at end of file

From cbda5fc1462ac5e4f57dba08c149001c8867d38c Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Wed, 5 Jul 2023 19:09:15 -0300
Subject: [PATCH 5/6] fix: commit saving error

---
 src/frontend/src/index.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index ba7c657f4..b088671cd 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -521,4 +521,8 @@ The cursor: default; property value restores the browser's default cursor style
   .edit-flow-span {
     @apply ml-10 animate-pulse text-status-red
   }
+
+  .float-component-pointer {
+    @apply pointer-events-none cursor-not-allowed
+  }
 }
\ No newline at end of file

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 6/6] 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