jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

update name from style to TWstyle to avoid conflicts

Browse source
This commit is contained in:
anovazzi1 2023-07-18 11:15:25 -03:00
commit 9cf639841f
40 changed files with 93 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -145,7 +145,6 @@ export default function ParameterComponent({
); );
}); });
}, [tooltipTitle]); }, [tooltipTitle]);
return ( return (
<div <div
ref={ref} ref={ref}
@ -166,7 +165,7 @@ export default function ParameterComponent({
<ShadTooltip content={infoHtml.current}> <ShadTooltip content={infoHtml.current}>
<IconComponent <IconComponent
name="Info" 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> </ShadTooltip>
)} )}

4
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -83,7 +83,7 @@ export default function GenericNode({
<div className="generic-node-title-arrangement"> <div className="generic-node-title-arrangement">
<IconComponent <IconComponent
name={name} name={name}
style="generic-node-icon" TWstyle="generic-node-icon"
iconColor={`${nodeColors[types[data.type]]}`} iconColor={`${nodeColors[types[data.type]]}`}
/> />
<div className="generic-node-tooltip-div"> <div className="generic-node-tooltip-div">
@ -114,7 +114,7 @@ export default function GenericNode({
Build{" "} Build{" "}
<IconComponent <IconComponent
name="Zap" 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. flow to validate status.
</span> </span>

12
src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
View file

@ -31,7 +31,7 @@ export default function SingleAlert({
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<IconComponent <IconComponent
name="XCircle" name="XCircle"
style="h-5 w-5 text-status-red" TWstyle="h-5 w-5 text-status-red"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
@ -68,7 +68,7 @@ export default function SingleAlert({
<span className="sr-only">Dismiss</span> <span className="sr-only">Dismiss</span>
<IconComponent <IconComponent
name="X" name="X"
style="h-4 w-4 text-error-foreground" TWstyle="h-4 w-4 text-error-foreground"
aria-hidden="true" aria-hidden="true"
/> />
</button> </button>
@ -83,7 +83,7 @@ export default function SingleAlert({
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<IconComponent <IconComponent
name="Info" name="Info"
style="h-5 w-5 text-status-blue " TWstyle="h-5 w-5 text-status-blue "
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
@ -119,7 +119,7 @@ export default function SingleAlert({
<span className="sr-only">Dismiss</span> <span className="sr-only">Dismiss</span>
<IconComponent <IconComponent
name="X" name="X"
style="h-4 w-4 text-info-foreground" TWstyle="h-4 w-4 text-info-foreground"
aria-hidden="true" aria-hidden="true"
/> />
</button> </button>
@ -134,7 +134,7 @@ export default function SingleAlert({
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<IconComponent <IconComponent
name="CheckCircle2" name="CheckCircle2"
style="h-5 w-5 text-status-green" TWstyle="h-5 w-5 text-status-green"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
@ -158,7 +158,7 @@ export default function SingleAlert({
<span className="sr-only">Dismiss</span> <span className="sr-only">Dismiss</span>
<IconComponent <IconComponent
name="X" name="X"
style="h-4 w-4 text-success-foreground" TWstyle="h-4 w-4 text-success-foreground"
aria-hidden="true" aria-hidden="true"
/> />
</button> </button>

4
src/frontend/src/alerts/alertDropDown/index.tsx
View file

@ -36,13 +36,13 @@ export default function AlertDropdown({}: AlertDropdownType) {
setTimeout(clearNotificationList, 100); 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>
<button <button
className="text-foreground hover:text-status-red" className="text-foreground hover:text-status-red"
onClick={closePopUp} onClick={closePopUp}
> >
<IconComponent name="X" style="h-5 w-5" /> <IconComponent name="X" TWstyle="h-5 w-5" />
</button> </button>
</div> </div>
</div> </div>

2
src/frontend/src/alerts/error/index.tsx
View file

@ -46,7 +46,7 @@ export default function ErrorAlert({
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<IconComponent <IconComponent
name="XCircle" name="XCircle"
style="error-build-message-circle" TWstyle="error-build-message-circle"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>

2
src/frontend/src/alerts/notice/index.tsx
View file

@ -42,7 +42,7 @@ export default function NoticeAlert({
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<IconComponent <IconComponent
name="Info" name="Info"
style="h-5 w-5 text-status-blue " TWstyle="h-5 w-5 text-status-blue "
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>

2
src/frontend/src/alerts/success/index.tsx
View file

@ -40,7 +40,7 @@ export default function SuccessAlert({
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<IconComponent <IconComponent
name="CheckCircle2" name="CheckCircle2"
style="success-alert-icon" TWstyle="success-alert-icon"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>

5
src/frontend/src/components/cardComponent/index.tsx
View file

@ -37,7 +37,10 @@ export const CardComponent = ({
<span className="card-component-title-size">{flow.name}</span> <span className="card-component-title-size">{flow.name}</span>
{onDelete && ( {onDelete && (
<button className="card-component-delete-button" onClick={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> </button>
)} )}
</CardTitle> </CardTitle>

2
src/frontend/src/components/chatComponent/buildTrigger/index.tsx
View file

@ -192,7 +192,7 @@ export default function BuildTrigger({
) : ( ) : (
<IconComponent <IconComponent
name="Zap" 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> </div>

2
src/frontend/src/components/chatComponent/chatTrigger/index.tsx
View file

@ -52,7 +52,7 @@ export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) {
<div className="flex gap-3"> <div className="flex gap-3">
<IconComponent <IconComponent
name="MessagesSquare" name="MessagesSquare"
style={ TWstyle={
"h-6 w-6 transition-all " + "h-6 w-6 transition-all " +
(isBuilt && canOpen (isBuilt && canOpen
? "message-button-icon" ? "message-button-icon"

2
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -72,7 +72,7 @@ export default function CodeAreaComponent({
{!editNode && ( {!editNode && (
<IconComponent <IconComponent
name="ExternalLink" name="ExternalLink"
style={ TWstyle={
"icons-parameters-comp" + "icons-parameters-comp" +
(disabled ? " text-ring" : " hover:text-accent-foreground") (disabled ? " text-ring" : " hover:text-accent-foreground")
} }

4
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -48,7 +48,7 @@ export default function Dropdown({
<span className={"dropdown-component-arrow"}> <span className={"dropdown-component-arrow"}>
<IconComponent <IconComponent
name="ChevronsUpDown" name="ChevronsUpDown"
style="dropdown-component-arrow-color" TWstyle="dropdown-component-arrow-color"
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
@ -102,7 +102,7 @@ export default function Dropdown({
> >
<IconComponent <IconComponent
name="Check" name="Check"
style={ TWstyle={
active active
? "dropdown-component-check-icon" ? "dropdown-component-check-icon"
: "dropdown-component-check-icon" : "dropdown-component-check-icon"

5
src/frontend/src/components/genericIconComponent/index.tsx
View file

@ -3,9 +3,10 @@ import { nodeIconsLucide } from "../../utils";
export default function IconComponent({ export default function IconComponent({
name, name,
style, TWstyle,
iconColor, iconColor,
}: IconComponentProps): JSX.Element { }: IconComponentProps): JSX.Element {
console.log("IconComponent", name, TWstyle, iconColor);
const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"]; const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
return <TargetIcon className={style} style={{ color: iconColor }} />; return <TargetIcon className={TWstyle} style={{ color: iconColor }} />;
} }

12
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -39,7 +39,7 @@ export const MenuBar = ({ flows, tabId }) => {
return ( return (
<div className="round-button-div"> <div className="round-button-div">
<Link to="/"> <Link to="/">
<IconComponent name="ChevronLeft" style="w-4" /> <IconComponent name="ChevronLeft" TWstyle="w-4" />
</Link> </Link>
<div className="header-menu-bar"> <div className="header-menu-bar">
<DropdownMenu> <DropdownMenu>
@ -47,7 +47,7 @@ export const MenuBar = ({ flows, tabId }) => {
<Button asChild variant="primary" size="sm"> <Button asChild variant="primary" size="sm">
<div className="header-menu-bar-display"> <div className="header-menu-bar-display">
<div className="header-menu-flow-name">{current_flow.name}</div> <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> </div>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
@ -59,7 +59,7 @@ export const MenuBar = ({ flows, tabId }) => {
}} }}
className="cursor-pointer" className="cursor-pointer"
> >
<IconComponent name="Plus" style="header-menu-options" /> <IconComponent name="Plus" TWstyle="header-menu-options" />
New New
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
@ -68,7 +68,7 @@ export const MenuBar = ({ flows, tabId }) => {
}} }}
className="cursor-pointer" className="cursor-pointer"
> >
<IconComponent name="Settings2" style="header-menu-options " /> <IconComponent name="Settings2" TWstyle="header-menu-options " />
Settings Settings
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
@ -77,7 +77,7 @@ export const MenuBar = ({ flows, tabId }) => {
}} }}
className="cursor-pointer" className="cursor-pointer"
> >
<IconComponent name="Undo" style="header-menu-options " /> <IconComponent name="Undo" TWstyle="header-menu-options " />
Undo Undo
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
@ -86,7 +86,7 @@ export const MenuBar = ({ flows, tabId }) => {
}} }}
className="cursor-pointer" className="cursor-pointer"
> >
<IconComponent name="Redo" style="header-menu-options " /> <IconComponent name="Redo" TWstyle="header-menu-options " />
Redo Redo
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>

10
src/frontend/src/components/headerComponent/index.tsx
View file

@ -51,7 +51,7 @@ export default function Header() {
variant={location.pathname === "/" ? "primary" : "secondary"} variant={location.pathname === "/" ? "primary" : "secondary"}
size="sm" 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> <div className="flex-1">{USER_PROJECTS_HEADER}</div>
</Button> </Button>
</Link> </Link>
@ -63,7 +63,7 @@ export default function Header() {
} }
size="sm" 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> <div className="flex-1">Community Examples</div>
</Button> </Button>
</Link> </Link>
@ -105,9 +105,9 @@ export default function Header() {
}} }}
> >
{dark ? ( {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>
<button <button
@ -133,7 +133,7 @@ export default function Header() {
{notificationCenter && <div className="header-notifications"></div>} {notificationCenter && <div className="header-notifications"></div>}
<IconComponent <IconComponent
name="Bell" name="Bell"
style="side-bar-button-size" TWstyle="side-bar-button-size"
aria-hidden="true" aria-hidden="true"
/> />
</button> </button>

2
src/frontend/src/components/inputFileComponent/index.tsx
View file

@ -110,7 +110,7 @@ export default function InputFileComponent({
{!editNode && !loading && ( {!editNode && !loading && (
<IconComponent <IconComponent
name="FileSearch2" name="FileSearch2"
style={ TWstyle={
"icons-parameters-comp" + "icons-parameters-comp" +
(disabled ? " text-ring " : " hover:text-accent-foreground") (disabled ? " text-ring " : " hover:text-accent-foreground")
} }

7
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -67,7 +67,7 @@ export default function InputListComponent({
> >
<IconComponent <IconComponent
name="Plus" name="Plus"
style={"h-4 w-4 hover:text-accent-foreground"} TWstyle={"h-4 w-4 hover:text-accent-foreground"}
/> />
</button> </button>
) : ( ) : (
@ -81,7 +81,10 @@ export default function InputListComponent({
onChange(inputList); 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> </button>
)} )}
</div> </div>

2
src/frontend/src/components/promptComponent/index.tsx
View file

@ -90,7 +90,7 @@ export default function PromptAreaComponent({
{!editNode && ( {!editNode && (
<IconComponent <IconComponent
name="ExternalLink" name="ExternalLink"
style={ TWstyle={
"icons-parameters-comp" + "icons-parameters-comp" +
(disabled ? " text-ring" : " hover:text-accent-foreground") (disabled ? " text-ring" : " hover:text-accent-foreground")
} }

2
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -70,7 +70,7 @@ export default function TextAreaComponent({
{!editNode && ( {!editNode && (
<IconComponent <IconComponent
name="ExternalLink" name="ExternalLink"
style={ TWstyle={
"icons-parameters-comp" + "icons-parameters-comp" +
(disabled ? " text-ring" : " hover:text-accent-foreground") (disabled ? " text-ring" : " hover:text-accent-foreground")
} }

2
src/frontend/src/components/ui/checkbox.tsx
View file

@ -20,7 +20,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Indicator <CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")} 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.Indicator>
</CheckboxPrimitive.Root> </CheckboxPrimitive.Root>
)); ));

2
src/frontend/src/components/ui/dialog.tsx
View file

@ -51,7 +51,7 @@ const DialogContent = React.forwardRef<
> >
{children} {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"> <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> <span className="sr-only">Close</span>
</DialogPrimitive.Close> </DialogPrimitive.Close>
</DialogPrimitive.Content> </DialogPrimitive.Content>

6
src/frontend/src/components/ui/dropdown-menu.tsx
View file

@ -33,7 +33,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
{...props} {...props}
> >
{children} {children}
<IconComponent name="ChevronRight" style="ml-auto h-4 w-4" /> <IconComponent name="ChevronRight" TWstyle="ml-auto h-4 w-4" />
</DropdownMenuPrimitive.SubTrigger> </DropdownMenuPrimitive.SubTrigger>
)); ));
DropdownMenuSubTrigger.displayName = 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"> <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator> <DropdownMenuPrimitive.ItemIndicator>
<IconComponent name="Check" style="h-4 w-4" /> <IconComponent name="Check" TWstyle="h-4 w-4" />
</DropdownMenuPrimitive.ItemIndicator> </DropdownMenuPrimitive.ItemIndicator>
</span> </span>
{children} {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"> <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator> <DropdownMenuPrimitive.ItemIndicator>
<IconComponent name="Circle" style="h-2 w-2 fill-current" /> <IconComponent name="Circle" TWstyle="h-2 w-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator> </DropdownMenuPrimitive.ItemIndicator>
</span> </span>
{children} {children}

6
src/frontend/src/components/ui/menubar.tsx
View file

@ -62,7 +62,7 @@ const MenubarSubTrigger = React.forwardRef<
{...props} {...props}
> >
{children} {children}
<IconComponent name="ChevronRight" style="ml-auto h-4 w-4" /> <IconComponent name="ChevronRight" TWstyle="ml-auto h-4 w-4" />
</MenubarPrimitive.SubTrigger> </MenubarPrimitive.SubTrigger>
)); ));
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName; 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"> <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<MenubarPrimitive.ItemIndicator> <MenubarPrimitive.ItemIndicator>
<IconComponent name="Check" style="h-4 w-4" /> <IconComponent name="Check" TWstyle="h-4 w-4" />
</MenubarPrimitive.ItemIndicator> </MenubarPrimitive.ItemIndicator>
</span> </span>
{children} {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"> <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<MenubarPrimitive.ItemIndicator> <MenubarPrimitive.ItemIndicator>
<IconComponent name="Circle" style="h-2 w-2 fill-current" /> <IconComponent name="Circle" TWstyle="h-2 w-2 fill-current" />
</MenubarPrimitive.ItemIndicator> </MenubarPrimitive.ItemIndicator>
</span> </span>
{children} {children}

2
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -273,7 +273,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<span className="pr-2">Code</span> <span className="pr-2">Code</span>
<IconComponent <IconComponent
name="Code2" 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" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>

2
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -111,7 +111,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
<div className="flex pt-3"> <div className="flex pt-3">
<IconComponent <IconComponent
name="Variable" name="Variable"
style="edit-node-modal-variable " TWstyle="edit-node-modal-variable "
/> />
<span className="edit-node-modal-span">Parameters</span> <span className="edit-node-modal-span">Parameters</span>
</div> </div>

2
src/frontend/src/modals/NodeModal/index.tsx
View file

@ -71,7 +71,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
<IconComponent <IconComponent
name="X" name="X"
style="h-6 w-6" TWstyle="h-6 w-6"
aria-hidden="true" aria-hidden="true"
/> />
</button> </button>

2
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -85,7 +85,7 @@ export default function CodeAreaModal({
<span className="pr-2">Edit Code</span> <span className="pr-2">Edit Code</span>
<IconComponent <IconComponent
name="prompts" name="prompts"
style="h-6 w-6 pl-1 text-primary " TWstyle="h-6 w-6 pl-1 text-primary "
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>

2
src/frontend/src/modals/exportModal/index.tsx
View file

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

2
src/frontend/src/modals/flowSettingsModal/index.tsx
View file

@ -51,7 +51,7 @@ export default function FlowSettingsModal() {
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Settings </span> <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> </DialogTitle>
<DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription> <DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader> </DialogHeader>

6
src/frontend/src/modals/formModal/chatInput/index.tsx
View file

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

2
src/frontend/src/modals/formModal/chatMessage/index.tsx
View file

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

6
src/frontend/src/modals/formModal/fileComponent/index.tsx
View file

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

6
src/frontend/src/modals/formModal/index.tsx
View file

@ -398,7 +398,7 @@ export default function FormModal({
<span className="pr-2">Chat</span> <span className="pr-2">Chat</span>
<IconComponent <IconComponent
name="prompts" 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" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
@ -410,7 +410,7 @@ export default function FormModal({
<div className="file-component-arrangement"> <div className="file-component-arrangement">
<IconComponent <IconComponent
name="Variable" name="Variable"
style=" file-component-variable" TWstyle=" file-component-variable"
/> />
<span className="file-component-variables-span text-md"> <span className="file-component-variables-span text-md">
Input Variables Input Variables
@ -507,7 +507,7 @@ export default function FormModal({
<button disabled={lockChat} onClick={() => clearChat()}> <button disabled={lockChat} onClick={() => clearChat()}>
<IconComponent <IconComponent
name="Eraser" name="Eraser"
style={classNames( TWstyle={classNames(
"h-5 w-5", "h-5 w-5",
lockChat lockChat
? "animate-pulse text-primary" ? "animate-pulse text-primary"

4
src/frontend/src/modals/genericModal/index.tsx
View file

@ -174,7 +174,7 @@ export default function GenericModal({
<span className="pr-2">{myModalTitle}</span> <span className="pr-2">{myModalTitle}</span>
<IconComponent <IconComponent
name="FileText" name="FileText"
style="h-6 w-6 pl-1 text-primary " TWstyle="h-6 w-6 pl-1 text-primary "
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
@ -227,7 +227,7 @@ export default function GenericModal({
<div className="flex flex-wrap items-center"> <div className="flex flex-wrap items-center">
<IconComponent <IconComponent
name="Variable" 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"> <span className="text-md font-semibold text-primary">
Prompt Variables: Prompt Variables:

9
src/frontend/src/pages/CommunityPage/index.tsx
View file

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

2
src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
View file

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

10
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -68,7 +68,7 @@ export default function ExtraSidebar() {
uploadFlow(); uploadFlow();
}} }}
> >
<IconComponent name="FileUp" style="side-bar-button-size " /> <IconComponent name="FileUp" TWstyle="side-bar-button-size " />
</button> </button>
</ShadTooltip> </ShadTooltip>
@ -79,7 +79,7 @@ export default function ExtraSidebar() {
openPopUp(<ExportModal />); openPopUp(<ExportModal />);
}} }}
> >
<IconComponent name="FileDown" style="side-bar-button-size" /> <IconComponent name="FileDown" TWstyle="side-bar-button-size" />
</button> </button>
</ShadTooltip> </ShadTooltip>
<ShadTooltip content="Code" side="top"> <ShadTooltip content="Code" side="top">
@ -89,7 +89,7 @@ export default function ExtraSidebar() {
openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />); 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> </button>
</ShadTooltip> </ShadTooltip>
@ -104,7 +104,7 @@ export default function ExtraSidebar() {
> >
<IconComponent <IconComponent
name="Save" name="Save"
style={ TWstyle={
"side-bar-button-size" + "side-bar-button-size" +
(isPending ? " " : " extra-side-bar-save-disable") (isPending ? " " : " extra-side-bar-save-disable")
} }
@ -182,7 +182,7 @@ export default function ExtraSidebar() {
</span> </span>
<IconComponent <IconComponent
name="Menu" name="Menu"
style="side-bar-components-icon " TWstyle="side-bar-components-icon "
/> />
</div> </div>
</div> </div>

8
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -36,7 +36,7 @@ const NodeToolbarComponent = (props) => {
props.deleteNode(props.data.id); props.deleteNode(props.data.id);
}} }}
> >
<IconComponent name="Trash2" style="h-4 w-4" /> <IconComponent name="Trash2" TWstyle="h-4 w-4" />
</button> </button>
</ShadTooltip> </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> </button>
</ShadTooltip> </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> </a>
</ShadTooltip> </ShadTooltip>
@ -110,7 +110,7 @@ const NodeToolbarComponent = (props) => {
props.openPopUp(<EditNodeModal data={props.data} />); props.openPopUp(<EditNodeModal data={props.data} />);
}} }}
> >
<IconComponent name="Settings2" style="h-4 w-4 " /> <IconComponent name="Settings2" TWstyle="h-4 w-4 " />
</button> </button>
</ShadTooltip> </ShadTooltip>
</span> </span>

10
src/frontend/src/pages/MainPage/index.tsx
View file

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

2
src/frontend/src/types/components/index.ts
View file

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