update name from style to TWstyle to avoid conflicts

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

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>

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>

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>

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>

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>

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>

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>

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>

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"

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

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"

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 }} />;
 }

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>

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>

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

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>

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

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

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