feat: Add CodeArea and Dropdown component tailwind constant classes

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>
           )}

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>

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"
+                    ? "dropdown-component-outline"
-                    : "py-2 pl-3 pr-10 text-left input-primary"
+                    : "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"
+                      ? "dropdown-component-true-options "
-                      : "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-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"
+                            ? "dropdown-component-false-option"
-                            : "relative cursor-default select-none py-2 pl-3 pr-9"
+                            : "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"
+                                    ? "dropdown-component-check-icon"
-                                    : "h-5 w-5 text-black"
+                                    : "dropdown-component-check-icon"
                                 }
                                 aria-hidden="true"
                               />

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

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
+  }
 }