From 9cf639841fe4e767389c7105464777483e07357a Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 18 Jul 2023 11:15:25 -0300
Subject: [PATCH] update name from style to TWstyle to avoid conflicts

---
 .../components/parameterComponent/index.tsx          |  3 +--
 src/frontend/src/CustomNodes/GenericNode/index.tsx   |  4 ++--
 .../components/singleAlertComponent/index.tsx        | 12 ++++++------
 src/frontend/src/alerts/alertDropDown/index.tsx      |  4 ++--
 src/frontend/src/alerts/error/index.tsx              |  2 +-
 src/frontend/src/alerts/notice/index.tsx             |  2 +-
 src/frontend/src/alerts/success/index.tsx            |  2 +-
 src/frontend/src/components/cardComponent/index.tsx  |  5 ++++-
 .../components/chatComponent/buildTrigger/index.tsx  |  2 +-
 .../components/chatComponent/chatTrigger/index.tsx   |  2 +-
 .../src/components/codeAreaComponent/index.tsx       |  2 +-
 .../src/components/dropdownComponent/index.tsx       |  4 ++--
 .../src/components/genericIconComponent/index.tsx    |  5 +++--
 .../headerComponent/components/menuBar/index.tsx     | 12 ++++++------
 .../src/components/headerComponent/index.tsx         | 10 +++++-----
 .../src/components/inputFileComponent/index.tsx      |  2 +-
 .../src/components/inputListComponent/index.tsx      |  7 +++++--
 .../src/components/promptComponent/index.tsx         |  2 +-
 .../src/components/textAreaComponent/index.tsx       |  2 +-
 src/frontend/src/components/ui/checkbox.tsx          |  2 +-
 src/frontend/src/components/ui/dialog.tsx            |  2 +-
 src/frontend/src/components/ui/dropdown-menu.tsx     |  6 +++---
 src/frontend/src/components/ui/menubar.tsx           |  6 +++---
 src/frontend/src/modals/ApiModal/index.tsx           |  2 +-
 src/frontend/src/modals/EditNodeModal/index.tsx      |  2 +-
 src/frontend/src/modals/NodeModal/index.tsx          |  2 +-
 src/frontend/src/modals/codeAreaModal/index.tsx      |  2 +-
 src/frontend/src/modals/exportModal/index.tsx        |  2 +-
 src/frontend/src/modals/flowSettingsModal/index.tsx  |  2 +-
 .../src/modals/formModal/chatInput/index.tsx         |  6 +++---
 .../src/modals/formModal/chatMessage/index.tsx       |  2 +-
 .../src/modals/formModal/fileComponent/index.tsx     |  6 +++---
 src/frontend/src/modals/formModal/index.tsx          |  6 +++---
 src/frontend/src/modals/genericModal/index.tsx       |  4 ++--
 src/frontend/src/pages/CommunityPage/index.tsx       |  9 ++++++---
 .../components/DisclosureComponent/index.tsx         |  2 +-
 .../components/extraSidebarComponent/index.tsx       | 10 +++++-----
 .../components/nodeToolbarComponent/index.tsx        |  8 ++++----
 src/frontend/src/pages/MainPage/index.tsx            | 10 +++++-----
 src/frontend/src/types/components/index.ts           |  2 +-
 40 files changed, 93 insertions(+), 84 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index ff5be6bab..7d977f579 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -145,7 +145,6 @@ export default function ParameterComponent({
       );
     });
   }, [tooltipTitle]);
-
   return (
     <div
       ref={ref}
@@ -166,7 +165,7 @@ export default function ParameterComponent({
               <ShadTooltip content={infoHtml.current}>
                 <IconComponent
                   name="Info"
-                  style="relative bottom-0.5 ml-2 h-3 w-3"
+                  TWstyle="relative bottom-0.5 ml-2 h-3 w-4"
                 />
               </ShadTooltip>
             )}
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 00a81bfa0..72088084b 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -83,7 +83,7 @@ export default function GenericNode({
           <div className="generic-node-title-arrangement">
             <IconComponent
               name={name}
-              style="generic-node-icon"
+              TWstyle="generic-node-icon"
               iconColor={`${nodeColors[types[data.type]]}`}
             />
             <div className="generic-node-tooltip-div">
@@ -114,7 +114,7 @@ export default function GenericNode({
                       Build{" "}
                       <IconComponent
                         name="Zap"
-                        style="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
+                        TWstyle="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
                       />{" "}
                       flow to validate status.
                     </span>
diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index fbb97a710..546ba583f 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -31,7 +31,7 @@ export default function SingleAlert({
           <div className="flex-shrink-0">
             <IconComponent
               name="XCircle"
-              style="h-5 w-5 text-status-red"
+              TWstyle="h-5 w-5 text-status-red"
               aria-hidden="true"
             />
           </div>
@@ -68,7 +68,7 @@ export default function SingleAlert({
                 <span className="sr-only">Dismiss</span>
                 <IconComponent
                   name="X"
-                  style="h-4 w-4 text-error-foreground"
+                  TWstyle="h-4 w-4 text-error-foreground"
                   aria-hidden="true"
                 />
               </button>
@@ -83,7 +83,7 @@ export default function SingleAlert({
           <div className="flex-shrink-0">
             <IconComponent
               name="Info"
-              style="h-5 w-5 text-status-blue "
+              TWstyle="h-5 w-5 text-status-blue "
               aria-hidden="true"
             />
           </div>
@@ -119,7 +119,7 @@ export default function SingleAlert({
                 <span className="sr-only">Dismiss</span>
                 <IconComponent
                   name="X"
-                  style="h-4 w-4 text-info-foreground"
+                  TWstyle="h-4 w-4 text-info-foreground"
                   aria-hidden="true"
                 />
               </button>
@@ -134,7 +134,7 @@ export default function SingleAlert({
           <div className="flex-shrink-0">
             <IconComponent
               name="CheckCircle2"
-              style="h-5 w-5 text-status-green"
+              TWstyle="h-5 w-5 text-status-green"
               aria-hidden="true"
             />
           </div>
@@ -158,7 +158,7 @@ export default function SingleAlert({
                 <span className="sr-only">Dismiss</span>
                 <IconComponent
                   name="X"
-                  style="h-4 w-4 text-success-foreground"
+                  TWstyle="h-4 w-4 text-success-foreground"
                   aria-hidden="true"
                 />
               </button>
diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index a70c1a3d1..6a2288e1f 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -36,13 +36,13 @@ export default function AlertDropdown({}: AlertDropdownType) {
               setTimeout(clearNotificationList, 100);
             }}
           >
-            <IconComponent name="Trash2" style="h-[1.1rem] w-[1.1rem]" />
+            <IconComponent name="Trash2" TWstyle="h-[1.1rem] w-[1.1rem]" />
           </button>
           <button
             className="text-foreground hover:text-status-red"
             onClick={closePopUp}
           >
-            <IconComponent name="X" style="h-5 w-5" />
+            <IconComponent name="X" TWstyle="h-5 w-5" />
           </button>
         </div>
       </div>
diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index c80d803ce..f9187186e 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -46,7 +46,7 @@ export default function ErrorAlert({
           <div className="flex-shrink-0">
             <IconComponent
               name="XCircle"
-              style="error-build-message-circle"
+              TWstyle="error-build-message-circle"
               aria-hidden="true"
             />
           </div>
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 8d1a90160..eef00762c 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -42,7 +42,7 @@ export default function NoticeAlert({
           <div className="flex-shrink-0">
             <IconComponent
               name="Info"
-              style="h-5 w-5 text-status-blue "
+              TWstyle="h-5 w-5 text-status-blue "
               aria-hidden="true"
             />
           </div>
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index a6d36f5e6..ab7b8fe59 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -40,7 +40,7 @@ export default function SuccessAlert({
           <div className="flex-shrink-0">
             <IconComponent
               name="CheckCircle2"
-              style="success-alert-icon"
+              TWstyle="success-alert-icon"
               aria-hidden="true"
             />
           </div>
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 9e1ef95a5..3152a28f4 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -37,7 +37,10 @@ export const CardComponent = ({
           <span className="card-component-title-size">{flow.name}</span>
           {onDelete && (
             <button className="card-component-delete-button" onClick={onDelete}>
-              <IconComponent name="Trash2" style="card-component-delete-icon" />
+              <IconComponent
+                name="Trash2"
+                TWstyle="card-component-delete-icon"
+              />
             </button>
           )}
         </CardTitle>
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 703c67d01..b71f752f1 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -192,7 +192,7 @@ export default function BuildTrigger({
               ) : (
                 <IconComponent
                   name="Zap"
-                  style="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1"
+                  TWstyle="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1"
                 />
               )}
             </div>
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index 191604f80..bee089142 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -52,7 +52,7 @@ export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) {
         <div className="flex gap-3">
           <IconComponent
             name="MessagesSquare"
-            style={
+            TWstyle={
               "h-6 w-6 transition-all " +
               (isBuilt && canOpen
                 ? "message-button-icon"
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 8fa12fbcf..aa2fce9db 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -72,7 +72,7 @@ export default function CodeAreaComponent({
           {!editNode && (
             <IconComponent
               name="ExternalLink"
-              style={
+              TWstyle={
                 "icons-parameters-comp" +
                 (disabled ? " text-ring" : " hover:text-accent-foreground")
               }
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 3722db77a..0dc5fc66e 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -48,7 +48,7 @@ export default function Dropdown({
                 <span className={"dropdown-component-arrow"}>
                   <IconComponent
                     name="ChevronsUpDown"
-                    style="dropdown-component-arrow-color"
+                    TWstyle="dropdown-component-arrow-color"
                     aria-hidden="true"
                   />
                 </span>
@@ -102,7 +102,7 @@ export default function Dropdown({
                             >
                               <IconComponent
                                 name="Check"
-                                style={
+                                TWstyle={
                                   active
                                     ? "dropdown-component-check-icon"
                                     : "dropdown-component-check-icon"
diff --git a/src/frontend/src/components/genericIconComponent/index.tsx b/src/frontend/src/components/genericIconComponent/index.tsx
index b03cda631..0d231e907 100644
--- a/src/frontend/src/components/genericIconComponent/index.tsx
+++ b/src/frontend/src/components/genericIconComponent/index.tsx
@@ -3,9 +3,10 @@ import { nodeIconsLucide } from "../../utils";
 
 export default function IconComponent({
   name,
-  style,
+  TWstyle,
   iconColor,
 }: IconComponentProps): JSX.Element {
+  console.log("IconComponent", name, TWstyle, iconColor);
   const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
-  return <TargetIcon className={style} style={{ color: iconColor }} />;
+  return <TargetIcon className={TWstyle} style={{ color: iconColor }} />;
 }
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index cb4d4596f..9a8486849 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -39,7 +39,7 @@ export const MenuBar = ({ flows, tabId }) => {
   return (
     <div className="round-button-div">
       <Link to="/">
-        <IconComponent name="ChevronLeft" style="w-4" />
+        <IconComponent name="ChevronLeft" TWstyle="w-4" />
       </Link>
       <div className="header-menu-bar">
         <DropdownMenu>
@@ -47,7 +47,7 @@ export const MenuBar = ({ flows, tabId }) => {
             <Button asChild variant="primary" size="sm">
               <div className="header-menu-bar-display">
                 <div className="header-menu-flow-name">{current_flow.name}</div>
-                <IconComponent name="ChevronDown" style="h-4 w-4" />
+                <IconComponent name="ChevronDown" TWstyle="h-4 w-4" />
               </div>
             </Button>
           </DropdownMenuTrigger>
@@ -59,7 +59,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <IconComponent name="Plus" style="header-menu-options" />
+              <IconComponent name="Plus" TWstyle="header-menu-options" />
               New
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -68,7 +68,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <IconComponent name="Settings2" style="header-menu-options " />
+              <IconComponent name="Settings2" TWstyle="header-menu-options " />
               Settings
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -77,7 +77,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <IconComponent name="Undo" style="header-menu-options " />
+              <IconComponent name="Undo" TWstyle="header-menu-options " />
               Undo
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -86,7 +86,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <IconComponent name="Redo" style="header-menu-options " />
+              <IconComponent name="Redo" TWstyle="header-menu-options " />
               Redo
             </DropdownMenuItem>
           </DropdownMenuContent>
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 3e2509aad..c4db0e091 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -51,7 +51,7 @@ export default function Header() {
             variant={location.pathname === "/" ? "primary" : "secondary"}
             size="sm"
           >
-            <IconComponent name="Home" style="h-4 w-4" />
+            <IconComponent name="Home" TWstyle="h-4 w-4" />
             <div className="flex-1">{USER_PROJECTS_HEADER}</div>
           </Button>
         </Link>
@@ -63,7 +63,7 @@ export default function Header() {
             }
             size="sm"
           >
-            <IconComponent name="Users2" style="h-4 w-4" />
+            <IconComponent name="Users2" TWstyle="h-4 w-4" />
             <div className="flex-1">Community Examples</div>
           </Button>
         </Link>
@@ -105,9 +105,9 @@ export default function Header() {
             }}
           >
             {dark ? (
-              <IconComponent name="SunIcon" style="side-bar-button-size" />
+              <IconComponent name="SunIcon" TWstyle="side-bar-button-size" />
             ) : (
-              <IconComponent name="MoonIcon" style="side-bar-button-size" />
+              <IconComponent name="MoonIcon" TWstyle="side-bar-button-size" />
             )}
           </button>
           <button
@@ -133,7 +133,7 @@ export default function Header() {
             {notificationCenter && <div className="header-notifications"></div>}
             <IconComponent
               name="Bell"
-              style="side-bar-button-size"
+              TWstyle="side-bar-button-size"
               aria-hidden="true"
             />
           </button>
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index b285585f7..7ea6ba983 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -110,7 +110,7 @@ export default function InputFileComponent({
           {!editNode && !loading && (
             <IconComponent
               name="FileSearch2"
-              style={
+              TWstyle={
                 "icons-parameters-comp" +
                 (disabled ? " text-ring " : " hover:text-accent-foreground")
               }
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index d987d5028..6283d4538 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -67,7 +67,7 @@ export default function InputListComponent({
               >
                 <IconComponent
                   name="Plus"
-                  style={"h-4 w-4 hover:text-accent-foreground"}
+                  TWstyle={"h-4 w-4 hover:text-accent-foreground"}
                 />
               </button>
             ) : (
@@ -81,7 +81,10 @@ export default function InputListComponent({
                   onChange(inputList);
                 }}
               >
-                <IconComponent name="X" style="h-4 w-4 hover:text-status-red" />
+                <IconComponent
+                  name="X"
+                  TWstyle="h-4 w-4 hover:text-status-red"
+                />
               </button>
             )}
           </div>
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index b4f68afa0..d73d14abf 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -90,7 +90,7 @@ export default function PromptAreaComponent({
           {!editNode && (
             <IconComponent
               name="ExternalLink"
-              style={
+              TWstyle={
                 "icons-parameters-comp" +
                 (disabled ? " text-ring" : " hover:text-accent-foreground")
               }
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 39f794db2..cd3eaf3e5 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -70,7 +70,7 @@ export default function TextAreaComponent({
           {!editNode && (
             <IconComponent
               name="ExternalLink"
-              style={
+              TWstyle={
                 "icons-parameters-comp" +
                 (disabled ? " text-ring" : " hover:text-accent-foreground")
               }
diff --git a/src/frontend/src/components/ui/checkbox.tsx b/src/frontend/src/components/ui/checkbox.tsx
index 33ed9e496..0a131f3f1 100644
--- a/src/frontend/src/components/ui/checkbox.tsx
+++ b/src/frontend/src/components/ui/checkbox.tsx
@@ -20,7 +20,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <IconComponent name="Check" style="h-4 w-4" />
+      <IconComponent name="Check" TWstyle="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index 6401427b6..837f008ad 100644
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -51,7 +51,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <IconComponent name="X" style="h-4 w-4" />
+        <IconComponent name="X" TWstyle="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
diff --git a/src/frontend/src/components/ui/dropdown-menu.tsx b/src/frontend/src/components/ui/dropdown-menu.tsx
index c491aed66..1ebe42b48 100644
--- a/src/frontend/src/components/ui/dropdown-menu.tsx
+++ b/src/frontend/src/components/ui/dropdown-menu.tsx
@@ -33,7 +33,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <IconComponent name="ChevronRight" style="ml-auto h-4 w-4" />
+    <IconComponent name="ChevronRight" TWstyle="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName =
@@ -106,7 +106,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <IconComponent name="Check" style="h-4 w-4" />
+        <IconComponent name="Check" TWstyle="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -129,7 +129,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <IconComponent name="Circle" style="h-2 w-2 fill-current" />
+        <IconComponent name="Circle" TWstyle="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/src/frontend/src/components/ui/menubar.tsx b/src/frontend/src/components/ui/menubar.tsx
index 8e1d6b99b..1b0ea960b 100644
--- a/src/frontend/src/components/ui/menubar.tsx
+++ b/src/frontend/src/components/ui/menubar.tsx
@@ -62,7 +62,7 @@ const MenubarSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <IconComponent name="ChevronRight" style="ml-auto h-4 w-4" />
+    <IconComponent name="ChevronRight" TWstyle="ml-auto h-4 w-4" />
   </MenubarPrimitive.SubTrigger>
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
@@ -140,7 +140,7 @@ const MenubarCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <IconComponent name="Check" style="h-4 w-4" />
+        <IconComponent name="Check" TWstyle="h-4 w-4" />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
@@ -162,7 +162,7 @@ const MenubarRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <IconComponent name="Circle" style="h-2 w-2 fill-current" />
+        <IconComponent name="Circle" TWstyle="h-2 w-2 fill-current" />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 45f3c4fdb..9d7d53d1b 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -273,7 +273,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
             <span className="pr-2">Code</span>
             <IconComponent
               name="Code2"
-              style="h-6 w-6 pl-1 text-gray-800 dark:text-white"
+              TWstyle="h-6 w-6 pl-1 text-gray-800 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 0167fbe8d..7c21a9e24 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -111,7 +111,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
               <div className="flex pt-3">
                 <IconComponent
                   name="Variable"
-                  style="edit-node-modal-variable "
+                  TWstyle="edit-node-modal-variable "
                 />
                 <span className="edit-node-modal-span">Parameters</span>
               </div>
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 3512267e0..702b4c409 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -71,7 +71,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                     <span className="sr-only">Close</span>
                     <IconComponent
                       name="X"
-                      style="h-6 w-6"
+                      TWstyle="h-6 w-6"
                       aria-hidden="true"
                     />
                   </button>
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index a0217d695..85696f775 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -85,7 +85,7 @@ export default function CodeAreaModal({
           <span className="pr-2">Edit Code</span>
           <IconComponent
             name="prompts"
-            style="h-6 w-6 pl-1 text-primary "
+            TWstyle="h-6 w-6 pl-1 text-primary "
             aria-hidden="true"
           />
         </DialogTitle>
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 5275cdb09..0866f6a3c 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -48,7 +48,7 @@ export default function ExportModal() {
             <span className="pr-2">Export</span>
             <IconComponent
               name="Download"
-              style="h-6 w-6 pl-1 text-foreground"
+              TWstyle="h-6 w-6 pl-1 text-foreground"
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index f52e473da..736de9736 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -51,7 +51,7 @@ export default function FlowSettingsModal() {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Settings </span>
-            <IconComponent name="Settings2" style="mr-2 h-4 w-4 " />
+            <IconComponent name="Settings2" TWstyle="mr-2 h-4 w-4 " />
           </DialogTitle>
           <DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx
index f007302c7..c1402faa6 100644
--- a/src/frontend/src/modals/formModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/formModal/chatInput/index.tsx
@@ -79,19 +79,19 @@ export default function ChatInput({
           {lockChat ? (
             <IconComponent
               name="Lock"
-              style="form-modal-lock-icon"
+              TWstyle="form-modal-lock-icon"
               aria-hidden="true"
             />
           ) : noInput ? (
             <IconComponent
               name="Sparkles"
-              style="form-modal-play-icon"
+              TWstyle="form-modal-play-icon"
               aria-hidden="true"
             />
           ) : (
             <IconComponent
               name="LucideSend"
-              style="form-modal-send-icon "
+              TWstyle="form-modal-send-icon "
               aria-hidden="true"
             />
           )}
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index f9ef26c2c..705e3119e 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -162,7 +162,7 @@ export default function ChatMessage({
                 Display Prompt
                 <IconComponent
                   name="ChevronDown"
-                  style={
+                  TWstyle={
                     "h-3 w-3 transition-all " + (promptOpen ? "rotate-180" : "")
                   }
                 />
diff --git a/src/frontend/src/modals/formModal/fileComponent/index.tsx b/src/frontend/src/modals/formModal/fileComponent/index.tsx
index 33db61c74..0945087a6 100644
--- a/src/frontend/src/modals/formModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/formModal/fileComponent/index.tsx
@@ -43,7 +43,7 @@ export default function FileCard({ fileName, content, fileType }) {
             >
               <IconComponent
                 name="DownloadCloud"
-                style="h-5 w-5 text-current hover:scale-110"
+                TWstyle="h-5 w-5 text-current hover:scale-110"
               />
             </button>
           </div>
@@ -63,7 +63,7 @@ export default function FileCard({ fileName, content, fileType }) {
             className="h-8 w-8"
           />
         ) : (
-          <IconComponent name="File" style="h-8 w-8" />
+          <IconComponent name="File" TWstyle="h-8 w-8" />
         )}
         <div className="file-card-modal-footer">
           {" "}
@@ -72,7 +72,7 @@ export default function FileCard({ fileName, content, fileType }) {
         </div>
         <IconComponent
           name="DownloadCloud"
-          style="ml-auto h-6 w-6 text-current"
+          TWstyle="ml-auto h-6 w-6 text-current"
         />
       </div>
     </button>
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index 2100b5214..d929fffb3 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -398,7 +398,7 @@ export default function FormModal({
               <span className="pr-2">Chat</span>
               <IconComponent
                 name="prompts"
-                style="h-6 w-6 pl-1 text-gray-800 dark:text-white"
+                TWstyle="h-6 w-6 pl-1 text-gray-800 dark:text-white"
                 aria-hidden="true"
               />
             </DialogTitle>
@@ -410,7 +410,7 @@ export default function FormModal({
               <div className="file-component-arrangement">
                 <IconComponent
                   name="Variable"
-                  style=" file-component-variable"
+                  TWstyle=" file-component-variable"
                 />
                 <span className="file-component-variables-span text-md">
                   Input Variables
@@ -507,7 +507,7 @@ export default function FormModal({
                   <button disabled={lockChat} onClick={() => clearChat()}>
                     <IconComponent
                       name="Eraser"
-                      style={classNames(
+                      TWstyle={classNames(
                         "h-5 w-5",
                         lockChat
                           ? "animate-pulse text-primary"
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 47019edf8..f8e99d030 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -174,7 +174,7 @@ export default function GenericModal({
           <span className="pr-2">{myModalTitle}</span>
           <IconComponent
             name="FileText"
-            style="h-6 w-6 pl-1 text-primary "
+            TWstyle="h-6 w-6 pl-1 text-primary "
             aria-hidden="true"
           />
         </DialogTitle>
@@ -227,7 +227,7 @@ export default function GenericModal({
                     <div className="flex flex-wrap items-center">
                       <IconComponent
                         name="Variable"
-                        style=" -ml-px mr-1 flex h-4 w-4 text-primary"
+                        TWstyle=" -ml-px mr-1 flex h-4 w-4 text-primary"
                       />
                       <span className="text-md font-semibold text-primary">
                         Prompt Variables:
diff --git a/src/frontend/src/pages/CommunityPage/index.tsx b/src/frontend/src/pages/CommunityPage/index.tsx
index c01ed7a14..b32f9d8f8 100644
--- a/src/frontend/src/pages/CommunityPage/index.tsx
+++ b/src/frontend/src/pages/CommunityPage/index.tsx
@@ -40,7 +40,7 @@ export default function CommunityPage() {
     <div className="community-page-arrangement">
       <div className="community-page-nav-arrangement">
         <span className="community-page-nav-title">
-          <IconComponent name="Users2" style="w-6" />
+          <IconComponent name="Users2" TWstyle="w-6" />
           Community Examples
         </span>
         <div className="community-page-nav-button">
@@ -50,7 +50,7 @@ export default function CommunityPage() {
             rel="noreferrer"
           >
             <Button variant="primary">
-              <IconComponent name="GithubIcon" style="main-page-nav-button" />
+              <IconComponent name="GithubIcon" TWstyle="main-page-nav-button" />
               Add Your Example
             </Button>
           </a>
@@ -79,7 +79,10 @@ export default function CommunityPage() {
                     });
                   }}
                 >
-                  <IconComponent name="GitFork" style="main-page-nav-button" />
+                  <IconComponent
+                    name="GitFork"
+                    TWstyle="main-page-nav-button"
+                  />
                   Fork Example
                 </Button>
               }
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index b4300126b..4989917f4 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -26,7 +26,7 @@ export default function DisclosureComponent({
                 <div>
                   <IconComponent
                     name="ChevronRight"
-                    style={`${
+                    TWstyle={`${
                       open || openDisc ? "rotate-90 transform" : ""
                     } h-4 w-4 text-foreground`}
                   />
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 75e5fabb5..83488c8cb 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -68,7 +68,7 @@ export default function ExtraSidebar() {
               uploadFlow();
             }}
           >
-            <IconComponent name="FileUp" style="side-bar-button-size " />
+            <IconComponent name="FileUp" TWstyle="side-bar-button-size " />
           </button>
         </ShadTooltip>
 
@@ -79,7 +79,7 @@ export default function ExtraSidebar() {
               openPopUp(<ExportModal />);
             }}
           >
-            <IconComponent name="FileDown" style="side-bar-button-size" />
+            <IconComponent name="FileDown" TWstyle="side-bar-button-size" />
           </button>
         </ShadTooltip>
         <ShadTooltip content="Code" side="top">
@@ -89,7 +89,7 @@ export default function ExtraSidebar() {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
             }}
           >
-            <IconComponent name="Code2" style="side-bar-button-size" />
+            <IconComponent name="Code2" TWstyle="side-bar-button-size" />
           </button>
         </ShadTooltip>
 
@@ -104,7 +104,7 @@ export default function ExtraSidebar() {
           >
             <IconComponent
               name="Save"
-              style={
+              TWstyle={
                 "side-bar-button-size" +
                 (isPending ? " " : " extra-side-bar-save-disable")
               }
@@ -182,7 +182,7 @@ export default function ExtraSidebar() {
                               </span>
                               <IconComponent
                                 name="Menu"
-                                style="side-bar-components-icon "
+                                TWstyle="side-bar-components-icon "
                               />
                             </div>
                           </div>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 323957a34..0fc5ab88d 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -36,7 +36,7 @@ const NodeToolbarComponent = (props) => {
                 props.deleteNode(props.data.id);
               }}
             >
-              <IconComponent name="Trash2" style="h-4 w-4" />
+              <IconComponent name="Trash2" TWstyle="h-4 w-4" />
             </button>
           </ShadTooltip>
 
@@ -61,7 +61,7 @@ const NodeToolbarComponent = (props) => {
                 );
               }}
             >
-              <IconComponent name="Copy" style="h-4 w-4" />
+              <IconComponent name="Copy" TWstyle="h-4 w-4" />
             </button>
           </ShadTooltip>
 
@@ -90,7 +90,7 @@ const NodeToolbarComponent = (props) => {
                 }
               }}
             >
-              <IconComponent name="FileText" style="h-4 w-4 " />
+              <IconComponent name="FileText" TWstyle="h-4 w-4 " />
             </a>
           </ShadTooltip>
 
@@ -110,7 +110,7 @@ const NodeToolbarComponent = (props) => {
                 props.openPopUp(<EditNodeModal data={props.data} />);
               }}
             >
-              <IconComponent name="Settings2" style="h-4 w-4 " />
+              <IconComponent name="Settings2" TWstyle="h-4 w-4 " />
             </button>
           </ShadTooltip>
         </span>
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 93259d249..414426257 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -16,7 +16,7 @@ export default function HomePage() {
     <div className="main-page-panel">
       <div className="main-page-nav-arrangement">
         <span className="main-page-nav-title">
-          <IconComponent name="Home" style="w-6" />
+          <IconComponent name="Home" TWstyle="w-6" />
           {USER_PROJECTS_HEADER}
         </span>
         <div className="button-div-style">
@@ -26,7 +26,7 @@ export default function HomePage() {
               downloadFlows();
             }}
           >
-            <IconComponent name="Download" style="main-page-nav-button" />
+            <IconComponent name="Download" TWstyle="main-page-nav-button" />
             Download Collection
           </Button>
           <Button
@@ -35,7 +35,7 @@ export default function HomePage() {
               uploadFlows();
             }}
           >
-            <IconComponent name="Upload" style="main-page-nav-button" />
+            <IconComponent name="Upload" TWstyle="main-page-nav-button" />
             Upload Collection
           </Button>
           <Button
@@ -46,7 +46,7 @@ export default function HomePage() {
               });
             }}
           >
-            <IconComponent name="Plus" style="main-page-nav-button" />
+            <IconComponent name="Plus" TWstyle="main-page-nav-button" />
             New Project
           </Button>
         </div>
@@ -69,7 +69,7 @@ export default function HomePage() {
                 >
                   <IconComponent
                     name="ExternalLink"
-                    style="main-page-nav-button"
+                    TWstyle="main-page-nav-button"
                   />
                   Edit Flow
                 </Button>
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 4e6a1b31a..fe623ea64 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -164,6 +164,6 @@ export interface IVarHighlightType {
 
 export type IconComponentProps = {
   name: string;
-  style: string;
+  TWstyle: string;
   iconColor?: string;
 };