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