change TWstyle to className

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -168,7 +168,7 @@ export default function ParameterComponent({
                 <div>
                   <IconComponent
                     name="Info"
-                    TWstyle="relative bottom-0.5 ml-2 h-3 w-4"
+                    className="relative bottom-0.5 ml-2 h-3 w-4"
                   />
                 </div>
               </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}
-              TWstyle="generic-node-icon"
+              className="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"
-                        TWstyle="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
+                        className="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"
-              TWstyle="h-5 w-5 text-status-red"
+              className="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"
-                  TWstyle="h-4 w-4 text-error-foreground"
+                  className="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"
-              TWstyle="h-5 w-5 text-status-blue "
+              className="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"
-                  TWstyle="h-4 w-4 text-info-foreground"
+                  className="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"
-              TWstyle="h-5 w-5 text-status-green"
+              className="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"
-                  TWstyle="h-4 w-4 text-success-foreground"
+                  className="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" TWstyle="h-[1.1rem] w-[1.1rem]" />
+            <IconComponent name="Trash2" className="h-[1.1rem] w-[1.1rem]" />
           </button>
           <button
             className="text-foreground hover:text-status-red"
             onClick={closePopUp}
           >
-            <IconComponent name="X" TWstyle="h-5 w-5" />
+            <IconComponent name="X" className="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"
-              TWstyle="error-build-message-circle"
+              className="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"
-              TWstyle="h-5 w-5 text-status-blue "
+              className="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"
-              TWstyle="success-alert-icon"
+              className="success-alert-icon"
               aria-hidden="true"
             />
           </div>

src/frontend/src/components/cardComponent/index.tsx

@@ -39,7 +39,7 @@ export const CardComponent = ({
             <button className="card-component-delete-button" onClick={onDelete}>
               <IconComponent
                 name="Trash2"
-                TWstyle="card-component-delete-icon"
+                className="card-component-delete-icon"
               />
             </button>
           )}

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -192,7 +192,7 @@ export default function BuildTrigger({
               ) : (
                 <IconComponent
                   name="Zap"
-                  TWstyle="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1"
+                  className="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"
-            TWstyle={
+            className={
               "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"
-              TWstyle={
+              className={
                 "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"
-                    TWstyle="dropdown-component-arrow-color"
+                    className="dropdown-component-arrow-color"
                     aria-hidden="true"
                   />
                 </span>
@@ -102,7 +102,7 @@ export default function Dropdown({
                             >
                               <IconComponent
                                 name="Check"
-                                TWstyle={
+                                className={
                                   active
                                     ? "dropdown-component-check-icon"
                                     : "dropdown-component-check-icon"

src/frontend/src/components/genericIconComponent/index.tsx

@@ -3,9 +3,9 @@ import { nodeIconsLucide } from "../../utils";
 
 export default function IconComponent({
   name,
-  TWstyle,
+  className,
   iconColor,
 }: IconComponentProps): JSX.Element {
   const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
-  return <TargetIcon className={TWstyle} style={{ color: iconColor }} />;
+  return <TargetIcon className={className} 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" TWstyle="w-4" />
+        <IconComponent name="ChevronLeft" className="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" TWstyle="h-4 w-4" />
+                <IconComponent name="ChevronDown" className="h-4 w-4" />
               </div>
             </Button>
           </DropdownMenuTrigger>
@@ -59,7 +59,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <IconComponent name="Plus" TWstyle="header-menu-options" />
+              <IconComponent name="Plus" className="header-menu-options" />
               New
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -68,7 +68,10 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <IconComponent name="Settings2" TWstyle="header-menu-options " />
+              <IconComponent
+                name="Settings2"
+                className="header-menu-options "
+              />
               Settings
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -77,7 +80,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <IconComponent name="Undo" TWstyle="header-menu-options " />
+              <IconComponent name="Undo" className="header-menu-options " />
               Undo
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -86,7 +89,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <IconComponent name="Redo" TWstyle="header-menu-options " />
+              <IconComponent name="Redo" className="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" TWstyle="h-4 w-4" />
+            <IconComponent name="Home" className="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" TWstyle="h-4 w-4" />
+            <IconComponent name="Users2" className="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" TWstyle="side-bar-button-size" />
+              <IconComponent name="SunIcon" className="side-bar-button-size" />
             ) : (
-              <IconComponent name="MoonIcon" TWstyle="side-bar-button-size" />
+              <IconComponent name="MoonIcon" className="side-bar-button-size" />
             )}
           </button>
           <button
@@ -133,7 +133,7 @@ export default function Header() {
             {notificationCenter && <div className="header-notifications"></div>}
             <IconComponent
               name="Bell"
-              TWstyle="side-bar-button-size"
+              className="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"
-              TWstyle={
+              className={
                 "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"
-                  TWstyle={"h-4 w-4 hover:text-accent-foreground"}
+                  className={"h-4 w-4 hover:text-accent-foreground"}
                 />
               </button>
             ) : (
@@ -83,7 +83,7 @@ export default function InputListComponent({
               >
                 <IconComponent
                   name="X"
-                  TWstyle="h-4 w-4 hover:text-status-red"
+                  className="h-4 w-4 hover:text-status-red"
                 />
               </button>
             )}

src/frontend/src/components/promptComponent/index.tsx

@@ -90,7 +90,7 @@ export default function PromptAreaComponent({
           {!editNode && (
             <IconComponent
               name="ExternalLink"
-              TWstyle={
+              className={
                 "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"
-              TWstyle={
+              className={
                 "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" TWstyle="h-4 w-4" />
+      <IconComponent name="Check" className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

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" TWstyle="h-4 w-4" />
+        <IconComponent name="X" className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

src/frontend/src/components/ui/dropdown-menu.tsx

@@ -33,7 +33,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <IconComponent name="ChevronRight" TWstyle="ml-auto h-4 w-4" />
+    <IconComponent name="ChevronRight" className="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" TWstyle="h-4 w-4" />
+        <IconComponent name="Check" className="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" TWstyle="h-2 w-2 fill-current" />
+        <IconComponent name="Circle" className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

src/frontend/src/components/ui/menubar.tsx

@@ -62,7 +62,7 @@ const MenubarSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <IconComponent name="ChevronRight" TWstyle="ml-auto h-4 w-4" />
+    <IconComponent name="ChevronRight" className="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" TWstyle="h-4 w-4" />
+        <IconComponent name="Check" className="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" TWstyle="h-2 w-2 fill-current" />
+        <IconComponent name="Circle" className="h-2 w-2 fill-current" />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}

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"
-              TWstyle="h-6 w-6 pl-1 text-gray-800 dark:text-white"
+              className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>

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"
-                  TWstyle="edit-node-modal-variable "
+                  className="edit-node-modal-variable "
                 />
                 <span className="edit-node-modal-span">Parameters</span>
               </div>

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"
-                      TWstyle="h-6 w-6"
+                      className="h-6 w-6"
                       aria-hidden="true"
                     />
                   </button>

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"
-            TWstyle="h-6 w-6 pl-1 text-primary "
+            className="h-6 w-6 pl-1 text-primary "
             aria-hidden="true"
           />
         </DialogTitle>

src/frontend/src/modals/exportModal/index.tsx

@@ -48,7 +48,7 @@ export default function ExportModal() {
             <span className="pr-2">Export</span>
             <IconComponent
               name="Download"
-              TWstyle="h-6 w-6 pl-1 text-foreground"
+              className="h-6 w-6 pl-1 text-foreground"
               aria-hidden="true"
             />
           </DialogTitle>

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" TWstyle="mr-2 h-4 w-4 " />
+            <IconComponent name="Settings2" className="mr-2 h-4 w-4 " />
           </DialogTitle>
           <DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>

src/frontend/src/modals/formModal/chatInput/index.tsx

@@ -79,19 +79,19 @@ export default function ChatInput({
           {lockChat ? (
             <IconComponent
               name="Lock"
-              TWstyle="form-modal-lock-icon"
+              className="form-modal-lock-icon"
               aria-hidden="true"
             />
           ) : noInput ? (
             <IconComponent
               name="Sparkles"
-              TWstyle="form-modal-play-icon"
+              className="form-modal-play-icon"
               aria-hidden="true"
             />
           ) : (
             <IconComponent
               name="LucideSend"
-              TWstyle="form-modal-send-icon "
+              className="form-modal-send-icon "
               aria-hidden="true"
             />
           )}

src/frontend/src/modals/formModal/chatMessage/index.tsx

@@ -162,7 +162,7 @@ export default function ChatMessage({
                 Display Prompt
                 <IconComponent
                   name="ChevronDown"
-                  TWstyle={
+                  className={
                     "h-3 w-3 transition-all " + (promptOpen ? "rotate-180" : "")
                   }
                 />

src/frontend/src/modals/formModal/fileComponent/index.tsx

@@ -43,7 +43,7 @@ export default function FileCard({ fileName, content, fileType }) {
             >
               <IconComponent
                 name="DownloadCloud"
-                TWstyle="h-5 w-5 text-current hover:scale-110"
+                className="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" TWstyle="h-8 w-8" />
+          <IconComponent name="File" className="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"
-          TWstyle="ml-auto h-6 w-6 text-current"
+          className="ml-auto h-6 w-6 text-current"
         />
       </div>
     </button>

src/frontend/src/modals/formModal/index.tsx

@@ -398,7 +398,7 @@ export default function FormModal({
               <span className="pr-2">Chat</span>
               <IconComponent
                 name="prompts"
-                TWstyle="h-6 w-6 pl-1 text-gray-800 dark:text-white"
+                className="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"
-                  TWstyle=" file-component-variable"
+                  className=" 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"
-                      TWstyle={classNames(
+                      className={classNames(
                         "h-5 w-5",
                         lockChat
                           ? "animate-pulse text-primary"

src/frontend/src/modals/genericModal/index.tsx

@@ -174,7 +174,7 @@ export default function GenericModal({
           <span className="pr-2">{myModalTitle}</span>
           <IconComponent
             name="FileText"
-            TWstyle="h-6 w-6 pl-1 text-primary "
+            className="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"
-                        TWstyle=" -ml-px mr-1 flex h-4 w-4 text-primary"
+                        className=" -ml-px mr-1 flex h-4 w-4 text-primary"
                       />
                       <span className="text-md font-semibold text-primary">
                         Prompt Variables:

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" TWstyle="w-6" />
+          <IconComponent name="Users2" className="w-6" />
           Community Examples
         </span>
         <div className="community-page-nav-button">
@@ -50,7 +50,10 @@ export default function CommunityPage() {
             rel="noreferrer"
           >
             <Button variant="primary">
-              <IconComponent name="GithubIcon" TWstyle="main-page-nav-button" />
+              <IconComponent
+                name="GithubIcon"
+                className="main-page-nav-button"
+              />
               Add Your Example
             </Button>
           </a>
@@ -81,7 +84,7 @@ export default function CommunityPage() {
                 >
                   <IconComponent
                     name="GitFork"
-                    TWstyle="main-page-nav-button"
+                    className="main-page-nav-button"
                   />
                   Fork Example
                 </Button>

src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx

@@ -26,7 +26,7 @@ export default function DisclosureComponent({
                 <div>
                   <IconComponent
                     name="ChevronRight"
-                    TWstyle={`${
+                    className={`${
                       open || openDisc ? "rotate-90 transform" : ""
                     } h-4 w-4 text-foreground`}
                   />

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -68,7 +68,7 @@ export default function ExtraSidebar() {
               uploadFlow();
             }}
           >
-            <IconComponent name="FileUp" TWstyle="side-bar-button-size " />
+            <IconComponent name="FileUp" className="side-bar-button-size " />
           </button>
         </ShadTooltip>
 
@@ -79,7 +79,7 @@ export default function ExtraSidebar() {
               openPopUp(<ExportModal />);
             }}
           >
-            <IconComponent name="FileDown" TWstyle="side-bar-button-size" />
+            <IconComponent name="FileDown" className="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" TWstyle="side-bar-button-size" />
+            <IconComponent name="Code2" className="side-bar-button-size" />
           </button>
         </ShadTooltip>
 
@@ -104,7 +104,7 @@ export default function ExtraSidebar() {
           >
             <IconComponent
               name="Save"
-              TWstyle={
+              className={
                 "side-bar-button-size" +
                 (isPending ? " " : " extra-side-bar-save-disable")
               }
@@ -182,7 +182,7 @@ export default function ExtraSidebar() {
                               </span>
                               <IconComponent
                                 name="Menu"
-                                TWstyle="side-bar-components-icon "
+                                className="side-bar-components-icon "
                               />
                             </div>
                           </div>

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -36,7 +36,7 @@ const NodeToolbarComponent = (props) => {
                 props.deleteNode(props.data.id);
               }}
             >
-              <IconComponent name="Trash2" TWstyle="h-4 w-4" />
+              <IconComponent name="Trash2" className="h-4 w-4" />
             </button>
           </ShadTooltip>
 
@@ -61,7 +61,7 @@ const NodeToolbarComponent = (props) => {
                 );
               }}
             >
-              <IconComponent name="Copy" TWstyle="h-4 w-4" />
+              <IconComponent name="Copy" className="h-4 w-4" />
             </button>
           </ShadTooltip>
 
@@ -90,7 +90,7 @@ const NodeToolbarComponent = (props) => {
                 }
               }}
             >
-              <IconComponent name="FileText" TWstyle="h-4 w-4 " />
+              <IconComponent name="FileText" className="h-4 w-4 " />
             </a>
           </ShadTooltip>
 
@@ -110,7 +110,7 @@ const NodeToolbarComponent = (props) => {
                 props.openPopUp(<EditNodeModal data={props.data} />);
               }}
             >
-              <IconComponent name="Settings2" TWstyle="h-4 w-4 " />
+              <IconComponent name="Settings2" className="h-4 w-4 " />
             </button>
           </ShadTooltip>
         </span>

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" TWstyle="w-6" />
+          <IconComponent name="Home" className="w-6" />
           {USER_PROJECTS_HEADER}
         </span>
         <div className="button-div-style">
@@ -26,7 +26,7 @@ export default function HomePage() {
               downloadFlows();
             }}
           >
-            <IconComponent name="Download" TWstyle="main-page-nav-button" />
+            <IconComponent name="Download" className="main-page-nav-button" />
             Download Collection
           </Button>
           <Button
@@ -35,7 +35,7 @@ export default function HomePage() {
               uploadFlows();
             }}
           >
-            <IconComponent name="Upload" TWstyle="main-page-nav-button" />
+            <IconComponent name="Upload" className="main-page-nav-button" />
             Upload Collection
           </Button>
           <Button
@@ -46,7 +46,7 @@ export default function HomePage() {
               });
             }}
           >
-            <IconComponent name="Plus" TWstyle="main-page-nav-button" />
+            <IconComponent name="Plus" className="main-page-nav-button" />
             New Project
           </Button>
         </div>
@@ -69,7 +69,7 @@ export default function HomePage() {
                 >
                   <IconComponent
                     name="ExternalLink"
-                    TWstyle="main-page-nav-button"
+                    className="main-page-nav-button"
                   />
                   Edit Flow
                 </Button>

src/frontend/src/types/components/index.ts

@@ -164,6 +164,6 @@ export interface IVarHighlightType {
 
 export type IconComponentProps = {
   name: string;
-  TWstyle: string;
+  className: string;
   iconColor?: string;
 };