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

Add generic node tailwind constants classes (#614)

Browse source 
Improves code verbosity and organization of Tailwind classes.
This commit is contained in:
anovazzi1 2023-07-05 21:01:04 -03:00 • committed by GitHub
commit 5c6f35b4ac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 402 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -82,30 +82,30 @@ export default function GenericNode({
<div <div
className={classNames( className={classNames(
selected ? "border border-ring" : "border", selected ? "border border-ring" : "border",
"prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-background" "generic-node-div"
)} )}
> >
<div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 "> <div className="generic-node-div-title">
<div className="flex w-full items-center truncate"> <div className="generic-node-title-arrangement">
<Icon <Icon
strokeWidth={1.5} strokeWidth={1.5}
className="h-10 w-10 rounded p-1" className="generic-node-icon"
style={{ style={{
color: nodeColors[types[data.type]] ?? nodeColors.unknown, color: nodeColors[types[data.type]] ?? nodeColors.unknown,
}} }}
/> />
<div className="ml-2 truncate"> <div className="generic-node-tooltip-div">
<ShadTooltip <ShadTooltip
delayDuration={1500} delayDuration={1500}
content={data.node.display_name} content={data.node.display_name}
> >
<div className="ml-2 truncate text-primary"> <div className="generic-node-tooltip-div text-primary">
{data.node.display_name} {data.node.display_name}
</div> </div>
</ShadTooltip> </ShadTooltip>
</div> </div>
</div> </div>
<div className="flex gap-3"> <div className="round-button-div">
<button <button
className="relative" className="relative"
onClick={(event) => { onClick={(event) => {
@ -114,14 +114,14 @@ export default function GenericNode({
}} }}
></button> ></button>
</div> </div>
<div className="flex gap-3"> <div className="round-button-div">
<div> <div>
<Tooltip <Tooltip
title={ title={
!validationStatus ? ( !validationStatus ? (
"Validating..." "Validating..."
) : ( ) : (
<div className="max-h-96 overflow-auto"> <div className="generic-node-validation-div">
{validationStatus.params || {validationStatus.params ||
"" ""
.split("\n") .split("\n")
@ -130,29 +130,29 @@ export default function GenericNode({
) )
} }
> >
<div className="relative top-[3px] h-5 w-5"> <div className="generic-node-status-position">
<div <div
className={classNames( className={classNames(
validationStatus && validationStatus.valid validationStatus && validationStatus.valid
? "h-4 w-4 rounded-full bg-status-green opacity-100" ? "green-status"
: "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0", : "status-build-animation",
"absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all" "status-div"
)} )}
></div> ></div>
<div <div
className={classNames( className={classNames(
validationStatus && !validationStatus.valid validationStatus && !validationStatus.valid
? "h-4 w-4 rounded-full bg-status-red opacity-100" ? "red-status"
: "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0", : "status-build-animation",
"absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all" "status-div"
)} )}
></div> ></div>
<div <div
className={classNames( className={classNames(
!validationStatus || isBuilding !validationStatus || isBuilding
? "h-4 w-4 rounded-full bg-status-yellow opacity-100" ? "yellow-status"
: "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0", : "status-build-animation",
"absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all" "status-div"
)} )}
></div> ></div>
</div> </div>
@ -161,8 +161,8 @@ export default function GenericNode({
</div> </div>
</div> </div>
<div className="h-full w-full py-5 text-foreground"> <div className="generic-node-desc">
<div className="w-full px-5 pb-3 text-sm text-muted-foreground"> <div className="generic-node-desc-text">
{data.node.description} {data.node.description}
</div> </div>
@ -221,7 +221,7 @@ export default function GenericNode({
<div <div
className={classNames( className={classNames(
Object.keys(data.node.template).length < 1 ? "hidden" : "", Object.keys(data.node.template).length < 1 ? "hidden" : "",
"flex w-full justify-center" "flex-max-width justify-center"
)} )}
> >
{" "} {" "}

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

@ -39,19 +39,19 @@ export default function ErrorAlert({
removeAlert(id); removeAlert(id);
}, 500); }, 500);
}} }}
className="mt-6 w-96 cursor-pointer rounded-md bg-error-background p-4 shadow-xl" className="error-build-message"
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<XCircle className="h-5 w-5 text-status-red" aria-hidden="true" /> <XCircle className="error-build-message-circle" aria-hidden="true" />
</div> </div>
<div className="ml-3"> <div className="ml-3">
<h3 className="text-sm font-medium text-error-foreground"> <h3 className="error-build-foreground">
{title} {title}
</h3> </h3>
{list.length !== 0 ? ( {list.length !== 0 ? (
<div className="mt-2 text-sm text-error-foreground"> <div className="error-build-message-div">
<ul className="list-disc space-y-1 pl-5"> <ul className="error-build-message-list">
{list.map((item, index) => ( {list.map((item, index) => (
<li key={index}>{item}</li> <li key={index}>{item}</li>
))} ))}

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

@ -34,17 +34,17 @@ export default function SuccessAlert({
setShow(false); setShow(false);
removeAlert(id); removeAlert(id);
}} }}
className="mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl" className="success-alert"
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<CheckCircle2 <CheckCircle2
className="h-5 w-5 text-status-green" className="success-alert-icon"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="ml-3"> <div className="ml-3">
<p className="text-sm font-medium text-success-foreground"> <p className="success-alert-message">
{title} {title}
</p> </p>
</div> </div>

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

@ -44,10 +44,10 @@ export const EditFlowSettings: React.FC<InputProps> = ({
return ( return (
<> <>
<Label> <Label>
<div className="flex justify-between"> <div className="edit-flow-arrangement">
<span className="font-medium">Name</span>{" "} <span className="font-medium">Name</span>{" "}
{isMaxLength && ( {isMaxLength && (
<span className="ml-10 animate-pulse text-status-red"> <span className="edit-flow-span">
Character limit reached Character limit reached
</span> </span>
)} )}

36
src/frontend/src/components/ExtraSidebarComponent/index.tsx
View file

@ -18,13 +18,13 @@ export default function ExtraSidebar() {
<aside <aside
className={` ${ className={` ${
isStackedOpen ? "w-52" : "w-0 " isStackedOpen ? "w-52" : "w-0 "
} flex flex-shrink-0 flex-col overflow-hidden border-r transition-all duration-500`} } unused-side-bar-aside`}
> >
<div className="flex h-full w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide"> <div className="unused-side-bar-arrangement">
<div className="flex w-full flex-grow flex-col"> <div className="unused-side-bar-division">
{extraNavigation.options ? ( {extraNavigation.options ? (
<div className="p-4"> <div className="p-4">
<nav className="flex-1 space-y-1"> <nav className="unused-side-bar-nav">
{extraNavigation.options.map((item) => {extraNavigation.options.map((item) =>
!item.children ? ( !item.children ? (
<div key={item.name}> <div key={item.name}>
@ -32,17 +32,17 @@ export default function ExtraSidebar() {
to={item.href} to={item.href}
className={classNames( className={classNames(
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "bg-muted text-foreground" ? "unused-side-bar-link-colors-true"
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground", : "unused-side-bar-link-colors-false",
"group flex w-full items-center rounded-md py-2 pl-2 text-sm font-medium" "unused-side-bar-link"
)} )}
> >
<item.icon <item.icon
className={classNames( className={classNames(
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "text-ring" ? "text-ring"
: "text-ring group-hover:text-accent-foreground", : "unused-side-bar-icon-false",
"mr-3 h-6 w-6 flex-shrink-0" "unused-side-bar-icon"
)} )}
/> />
{item.name} {item.name}
@ -59,20 +59,20 @@ export default function ExtraSidebar() {
<Disclosure.Button <Disclosure.Button
className={classNames( className={classNames(
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "bg-muted text-foreground" ? "unused-side-bar-link-colors-true"
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground", : "unused-side-bar-link-colors-false",
"group flex w-full items-center rounded-md py-2 pl-2 pr-1 text-left text-sm font-medium focus:outline-none focus:ring-1 focus:ring-ring" "unused-side-bar-disclosure"
)} )}
> >
<item.icon <item.icon
className="mr-3 h-6 w-6 flex-shrink-0 text-ring group-hover:text-accent-foreground" className="unused-side-bar-disclosure-icon"
aria-hidden="true" aria-hidden="true"
/> />
<span className="flex-1">{item.name}</span> <span className="flex-1">{item.name}</span>
<svg <svg
className={classNames( className={classNames(
open ? "rotate-90 text-ring" : "text-ring", open ? "unused-side-bar-svg-true" : "text-ring",
"transition-rotate ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-accent-foreground" "unused-side-bar-svg"
)} )}
viewBox="0 0 20 20" viewBox="0 0 20 20"
aria-hidden="true" aria-hidden="true"
@ -90,9 +90,9 @@ export default function ExtraSidebar() {
to={subItem.href} to={subItem.href}
className={classNames( className={classNames(
subItem.href.split("/")[3] === current[5] subItem.href.split("/")[3] === current[5]
? "bg-muted text-foreground" ? "unused-side-bar-link-colors-true"
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground", : "unused-side-bar-link-colors-false",
"group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium" "unused-side-bar-disclosure-panel"
)} )}
> >
{subItem.name} {subItem.name}

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

@ -28,24 +28,24 @@ export const CardComponent = ({
return ( return (
<Card className="group"> <Card className="group">
<CardHeader> <CardHeader>
<CardTitle className="flex w-full items-center gap-4"> <CardTitle className="card-component-title-display">
<span <span
className={ className={
"flex h-7 w-7 items-center justify-center rounded-full text-2xl " + "card-component-image " +
gradients[parseInt(flow.id.slice(0, 12), 16) % gradients.length] gradients[parseInt(flow.id.slice(0, 12), 16) % gradients.length]
} }
></span> ></span>
<span className="inline-block w-full flex-1 break-words truncate-doubleline"> <span className="card-component-title-size">
{flow.name} {flow.name}
</span> </span>
{onDelete && ( {onDelete && (
<button className="flex self-start" onClick={onDelete}> <button className="card-component-delete-button" onClick={onDelete}>
<Trash2 className="h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100" /> <Trash2 className="card-component-delete-icon" />
</button> </button>
)} )}
</CardTitle> </CardTitle>
<CardDescription className="pb-2 pt-2"> <CardDescription className="card-component-desc">
<div className="truncate-doubleline"> <div className="card-component-desc-text">
{flow.description} {flow.description}
{/* {flow.description} */} {/* {flow.description} */}
</div> </div>
@ -53,8 +53,8 @@ export const CardComponent = ({
</CardHeader> </CardHeader>
<CardFooter> <CardFooter>
<div className="flex w-full items-end justify-between gap-2"> <div className="card-component-footer-arrangement">
<div className="flex flex-wrap gap-2"> <div className="card-component-footer">
{/* <Badge variant="secondary">Agent</Badge> {/* <Badge variant="secondary">Agent</Badge>
<Badge variant="secondary"> <Badge variant="secondary">
<div className="w-3"> <div className="w-3">

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

@ -30,10 +30,10 @@ export default function CodeAreaComponent({
return ( return (
<div <div
className={ className={
disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full" disabled ? "code-area-component" : "w-full"
} }
> >
<div className="flex w-full items-center"> <div className="code-area-input-positioning">
<span <span
onClick={() => { onClick={() => {
openPopUp( openPopUp(
@ -69,10 +69,7 @@ export default function CodeAreaComponent({
}} }}
> >
{!editNode && ( {!editNode && (
<ExternalLink <ExternalLink strokeWidth={1.5} className="code-area-external-link" />
strokeWidth={1.5}
className="ml-3 h-6 w-6 hover:text-accent-foreground"
/>
)} )}
</button> </button>
</div> </div>

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

@ -38,20 +38,20 @@ export default function Dropdown({
<Listbox.Button <Listbox.Button
className={ className={
editNode editNode
? "border-1 input-edit-node relative pr-8" ? "dropdown-component-outline"
: "input-primary py-2 pl-3 pr-10 text-left" : "dropdown-component-false-outline"
} }
> >
<span className="block w-full truncate bg-background"> <span className="dropdown-component-display">
{internalValue} {internalValue}
</span> </span>
<span <span
className={ className={
"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2" "dropdown-component-arrow"
} }
> >
<ChevronsUpDown <ChevronsUpDown
className="h-5 w-5 text-muted-foreground" className="dropdown-component-arrow-color"
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
@ -67,8 +67,8 @@ export default function Dropdown({
<Listbox.Options <Listbox.Options
className={classNames( className={classNames(
editNode editNode
? "z-10 mt-1 max-h-60 w-[215px] overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" ? "dropdown-component-true-options "
: "nowheel overflow-y z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ", : "dropdown-component-false-options ",
apiModal ? "mb-2 w-[250px]" : "absolute" apiModal ? "mb-2 w-[250px]" : "absolute"
)} )}
> >
@ -79,8 +79,8 @@ export default function Dropdown({
classNames( classNames(
active ? " bg-accent" : "", active ? " bg-accent" : "",
editNode editNode
? "relative cursor-default select-none py-0.5 pl-3 pr-12" ? "dropdown-component-false-option"
: "relative cursor-default select-none py-2 pl-3 pr-9" : "dropdown-component-true-option"
) )
} }
value={option} value={option}
@ -100,14 +100,14 @@ export default function Dropdown({
<span <span
className={classNames( className={classNames(
active ? "text-background " : "", active ? "text-background " : "",
"absolute inset-y-0 right-0 flex items-center pr-4" "dropdown-component-choosal"
)} )}
> >
<Check <Check
className={ className={
active active
? "h-5 w-5 text-black" ? "dropdown-component-check-icon"
: "h-5 w-5 text-black" : "dropdown-component-check-icon"
} }
aria-hidden="true" aria-hidden="true"
/> />

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

@ -32,7 +32,7 @@ export default function FloatComponent({
return ( return (
<div <div
className={ className={
"w-full " + (disabled ? "pointer-events-none cursor-not-allowed" : "") "w-full " + (disabled ? "float-component-pointer" : "")
} }
> >
<input <input

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

@ -47,19 +47,19 @@ export const MenuBar = ({ flows, tabId }) => {
let current_flow = flows.find((flow) => flow.id === tabId); let current_flow = flows.find((flow) => flow.id === tabId);
return ( return (
<div className="flex items-center gap-2"> <div className="round-button-div">
<Link to="/"> <Link to="/">
<ChevronLeft className="w-4" /> <ChevronLeft className="w-4" />
</Link> </Link>
<div className="flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium"> <div className="header-menu-bar">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button <Button
className="flex max-w-[200px] items-center gap-2" className="header-menu-bar-display"
variant="primary" variant="primary"
size="sm" size="sm"
> >
<div className="flex-1 truncate">{current_flow.name}</div> <div className="header-menu-flow-name">{current_flow.name}</div>
<ChevronDown className="h-4 w-4" /> <ChevronDown className="h-4 w-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
@ -71,7 +71,7 @@ export const MenuBar = ({ flows, tabId }) => {
}} }}
className="cursor-pointer" className="cursor-pointer"
> >
<Plus className="mr-2 h-4 w-4" /> <Plus className="header-menu-options" />
New New
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
@ -80,7 +80,7 @@ export const MenuBar = ({ flows, tabId }) => {
}} }}
className="cursor-pointer" className="cursor-pointer"
> >
<Settings2 className="mr-2 h-4 w-4 " /> <Settings2 className="header-menu-options " />
Settings Settings
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
@ -89,7 +89,7 @@ export const MenuBar = ({ flows, tabId }) => {
}} }}
className="cursor-pointer" className="cursor-pointer"
> >
<Undo className="mr-2 h-4 w-4 " /> <Undo className="header-menu-options " />
Undo Undo
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
@ -98,7 +98,7 @@ export const MenuBar = ({ flows, tabId }) => {
}} }}
className="cursor-pointer" className="cursor-pointer"
> >
<Redo className="mr-2 h-4 w-4 " /> <Redo className="header-menu-options " />
Redo Redo
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />

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

@ -36,8 +36,8 @@ export default function Header() {
fetchStars(); fetchStars();
}, []); }, []);
return ( return (
<div className="flex h-12 w-full items-center justify-between border-b bg-muted"> <div className="header-arrangement">
<div className="flex w-96 items-center justify-start gap-2"> <div className="header-start-display">
<Link to="/"> <Link to="/">
<span className="ml-4 text-2xl">⛓️</span> <span className="ml-4 text-2xl">⛓️</span>
</Link> </Link>
@ -45,7 +45,7 @@ export default function Header() {
<MenuBar flows={flows} tabId={tabId} /> <MenuBar flows={flows} tabId={tabId} />
)} )}
</div> </div>
<div className="flex items-center gap-2"> <div className="round-button-div">
<Link to="/"> <Link to="/">
<Button <Button
className="gap-2" className="gap-2"
@ -69,17 +69,17 @@ export default function Header() {
</Button> </Button>
</Link> </Link>
</div> </div>
<div className="flex w-96 justify-end px-2"> <div className="header-end-division">
<div className="ml-auto mr-2 flex items-center gap-5"> <div className="header-end-display">
<a <a
href="https://github.com/logspace-ai/langflow" href="https://github.com/logspace-ai/langflow"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="inline-flex h-9 items-center justify-center rounded-md border border-input px-3 pr-0 text-sm font-medium text-muted-foreground shadow-sm ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" className="header-github-link"
> >
<FaGithub className="mr-2 h-5 w-5" /> <FaGithub className="mr-2 h-5 w-5" />
Star Star
<div className="-mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm"> <div className="header-github-display">
{stars} {stars}
</div> </div>
</a> </a>
@ -89,7 +89,7 @@ export default function Header() {
rel="noreferrer" rel="noreferrer"
className="text-muted-foreground" className="text-muted-foreground"
> >
<FaTwitter className="h-5 w-5 hover:text-accent-foreground" /> <FaTwitter className="side-bar-button-size" />
</a> </a>
<a <a
href="https://discord.gg/EqksyE2EX9" href="https://discord.gg/EqksyE2EX9"
@ -97,24 +97,24 @@ export default function Header() {
rel="noreferrer" rel="noreferrer"
className="text-muted-foreground" className="text-muted-foreground"
> >
<FaDiscord className="h-5 w-5 hover:text-accent-foreground" /> <FaDiscord className="side-bar-button-size" />
</a> </a>
<Separator orientation="vertical" /> <Separator orientation="vertical" />
<button <button
className="text-muted-foreground hover:text-accent-foreground " className="extra-side-bar-save-disable"
onClick={() => { onClick={() => {
setDark(!dark); setDark(!dark);
}} }}
> >
{dark ? ( {dark ? (
<SunIcon className="h-5 w-5" /> <SunIcon className="side-bar-button-size" />
) : ( ) : (
<MoonIcon className="h-5 w-5" /> <MoonIcon className="side-bar-button-size" />
)} )}
</button> </button>
<button <button
className="relative text-muted-foreground hover:text-accent-foreground" className="extra-side-bar-save-disable relative"
onClick={(event: React.MouseEvent<HTMLElement>) => { onClick={(event: React.MouseEvent<HTMLElement>) => {
setNotificationCenter(false); setNotificationCenter(false);
const { top, left } = ( const { top, left } = (
@ -128,15 +128,15 @@ export default function Header() {
> >
<AlertDropdown /> <AlertDropdown />
</div> </div>
<div className="fixed left-0 top-0 h-screen w-screen"></div> <div className="header-notifications-box"></div>
</> </>
); );
}} }}
> >
{notificationCenter && ( {notificationCenter && (
<div className="absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive"></div> <div className="header-notifications"></div>
)} )}
<Bell className="h-5 w-5" aria-hidden="true" /> <Bell className="side-bar-button-size" aria-hidden="true" />
</button> </button>
</div> </div>
</div> </div>

14
src/frontend/src/components/inputComponent/index.tsx
View file

@ -32,7 +32,7 @@ export default function InputComponent({
<div <div
className={ className={
disabled disabled
? "pointer-events-none relative cursor-not-allowed" ? "input-component-div"
: "relative" : "relative"
} }
> >
@ -61,8 +61,8 @@ export default function InputComponent({
<button <button
className={classNames( className={classNames(
editNode editNode
? "absolute inset-y-0 right-0 items-center pr-2 text-muted-foreground" ? "input-component-true-button"
: "absolute inset-y-0 right-0 items-center px-4 text-muted-foreground" : "input-component-false-button"
)} )}
onClick={() => { onClick={() => {
setPwdVisible(!pwdVisible); setPwdVisible(!pwdVisible);
@ -78,8 +78,8 @@ export default function InputComponent({
stroke="currentColor" stroke="currentColor"
className={classNames( className={classNames(
editNode editNode
? "absolute bottom-0.5 right-2 h-5 w-5" ? "input-component-true-svg"
: "absolute bottom-2 right-3 h-5 w-5" : "input-component-false-svg"
)} )}
> >
<path <path
@ -97,8 +97,8 @@ export default function InputComponent({
stroke="currentColor" stroke="currentColor"
className={classNames( className={classNames(
editNode editNode
? "absolute bottom-0.5 right-2 h-5 w-5" ? "input-component-true-svg"
: "absolute bottom-2 right-3 h-5 w-5" : "input-component-false-svg"
)} )}
> >
<path <path

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

@ -94,10 +94,10 @@ export default function InputFileComponent({
return ( return (
<div <div
className={ className={
disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full" disabled ? "input-component-div" : "w-full"
} }
> >
<div className="flex w-full items-center"> <div className="input-file-component">
<span <span
onClick={handleButtonClick} onClick={handleButtonClick}
className={ className={

294
src/frontend/src/index.css
View file

@ -176,9 +176,15 @@ The cursor: default; property value restores the browser's default cursor style
.extra-side-bar-save-disable { .extra-side-bar-save-disable {
@apply text-muted-foreground @apply text-muted-foreground
} }
.extra-side-bar-save-disable:hover {
@apply hover:text-accent-foreground
}
.side-bar-button-size { .side-bar-button-size {
@apply h-5 w-5 @apply h-5 w-5
} }
.side-bar-button-size:hover {
@apply hover:text-accent-foreground
}
.side-bar-buttons-arrangement { .side-bar-buttons-arrangement {
@apply mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2 @apply mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2
} }
@ -298,4 +304,292 @@ The cursor: default; property value restores the browser's default cursor style
.community-pages-flows-panel { .community-pages-flows-panel {
@apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4 @apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
} }
.generic-node-div {
@apply relative flex w-96 flex-col justify-center rounded-lg bg-background
}
.generic-node-div-title {
@apply flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4
}
.generic-node-title-arrangement {
@apply flex-max-width items-center truncate
}
.generic-node-icon {
@apply h-10 w-10 rounded p-1
}
.generic-node-tooltip-div {
@apply ml-2 truncate
}
.generic-node-validation-div {
@apply max-h-96 overflow-auto
}
.generic-node-status-position {
@apply relative top-[3px] h-5 w-5
}
.generic-node-status-animation {
@apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0
}
.generic-node-status {
@apply h-4 w-4 rounded-full opacity-100
}
.green-status {
@apply generic-node-status bg-status-green
}
.red-status {
@apply generic-node-status bg-status-red
}
.yellow-status {
@apply generic-node-status bg-status-yellow
}
.status-build-animation {
@apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0
}
.status-div {
@apply absolute w-4 duration-200 ease-in-out
}
.status-div:hover {
@apply hover:text-accent-foreground hover:transition-all
}
.generic-node-desc {
@apply h-full w-full py-5 text-foreground
}
.generic-node-desc-text {
@apply w-full px-5 pb-3 text-sm text-muted-foreground
}
.alert-icon {
@apply h-5 w-5
}
.alert-font-size {
@apply text-sm font-medium
}
.error-build-message {
@apply mt-6 w-96 cursor-pointer rounded-md bg-error-background p-4 shadow-xl
}
.error-build-message-circle {
@apply text-status-red alert-icon
}
.error-build-text {
@apply text-error-foreground
}
.error-build-foreground {
@apply error-build-text alert-font-size
}
.error-build-message-div {
@apply mt-2 text-sm error-build-text
}
.error-build-message-list {
@apply list-disc space-y-1 pl-5
}
.success-alert {
@apply mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl
}
.success-alert-icon {
@apply alert-icon text-status-green
}
.success-alert-message {
@apply alert-font-size text-success-foreground
}
.card-component-title-display {
@apply round-button-div flex-max-width
}
.card-component-image {
@apply flex h-7 w-7 items-center justify-center rounded-full text-2xl
}
.card-component-title-size {
@apply inline-block w-full flex-1 break-words truncate-doubleline
}
.card-component-delete-button {
@apply flex self-start
}
.card-component-delete-icon {
@apply h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100
}
.card-component-desc {
@apply pb-2 pt-2
}
.card-component-desc-text {
@apply truncate-doubleline
}
.card-component-footer-arrangement {
@apply flex-max-width items-end justify-between gap-2
}
.card-component-footer {
@apply flex flex-wrap gap-2
}
.unused-side-bar-aside {
@apply flex flex-shrink-0 flex-col overflow-hidden border-r transition-all duration-500
}
.unused-side-bar-arrangement {
@apply flex h-full w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide
}
.unused-side-bar-division {
@apply flex-max-width flex-grow flex-col
}
.unused-side-bar-nav {
@apply flex-1 space-y-1
}
.unused-side-bar-link {
@apply flex-max-width items-center rounded-md py-2 pl-2 text-sm font-medium
}
.unused-side-bar-link-colors-true {
@apply bg-muted text-foreground
}
.unused-side-bar-link-colors-false {
@apply bg-background text-muted-foreground hover:bg-muted hover:text-foreground
}
.unused-side-bar-icon {
@apply mr-3 flex-shrink-0 h-6 w-6
}
.unused-side-bar-icon-false {
@apply text-ring group-hover:text-accent-foreground
}
.unused-side-bar-disclosure {
@apply unused-side-bar-link pr-1 text-left
}
.unused-side-bar-disclosure:focus {
@apply focus:outline-none focus:ring-1 focus:ring-ring
}
.unused-side-bar-disclosure-icon {
@apply unused-side-bar-icon text-ring group-hover:text-accent-foreground
}
.unused-side-bar-svg-true {
@apply text-ring rotate-90
}
.unused-side-bar-svg {
@apply ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-accent-foreground
}
.unused-side-bar-disclosure-panel {
@apply flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium
}
.code-area-component {
@apply pointer-events-none w-full cursor-not-allowed
}
.code-area-input-positioning {
@apply flex-max-width items-center
}
.code-area-external-link {
@apply w-6 h-6 ml-3
}
.code-area-external-link:hover {
@apply hover:text-accent-foreground
}
.dropdown-component-outline {
@apply border-1 input-edit-node relative pr-8
}
.dropdown-component-false-outline {
@apply input-primary py-2 pl-3 pr-10 text-left
}
.dropdown-component-display {
@apply block w-full truncate bg-background
}
.dropdown-component-arrow {
@apply pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2
}
.dropdown-component-arrow-color {
@apply h-5 w-5 extra-side-bar-save-disable
}
.dropdown-component-options {
@apply z-10 mt-1 max-h-60 overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm
}
.dropdown-component-true-options {
@apply dropdown-component-options w-[215px]
}
.dropdown-component-false-options {
@apply dropdown-component-options w-full
}
.dropdown-component-option {
@apply relative cursor-default select-none
}
.dropdown-component-false-option {
@apply dropdown-component-option py-0.5 pl-3 pr-12
}
.dropdown-component-true-option {
@apply dropdown-component-option py-2 pl-3 pr-9
}
.dropdown-component-choosal {
@apply absolute inset-y-0 right-0 flex items-center pr-4
}
.dropdown-component-check-icon {
@apply h-5 w-5 text-black
}
.edit-flow-arrangement {
@apply flex justify-between
}
.edit-flow-span {
@apply ml-10 animate-pulse text-status-red
}
.float-component-pointer {
@apply pointer-events-none cursor-not-allowed
}
.header-menu-bar {
@apply flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium
}
.header-menu-bar-display {
@apply flex max-w-[200px] items-center gap-2
}
.header-menu-flow-name {
@apply flex-1 truncate
}
.header-menu-options {
@apply mr-2 h-4 w-4
}
.header-arrangement {
@apply flex-max-width h-12 items-center justify-between border-b bg-muted
}
.header-start-display {
@apply flex w-96 items-center justify-start gap-2
}
.header-end-division {
@apply flex w-96 justify-end px-2
}
.header-end-display {
@apply ml-auto mr-2 flex items-center gap-5
}
.header-github-link {
@apply inline-flex h-9 items-center justify-center rounded-md border border-input px-3 pr-0 text-sm font-medium text-muted-foreground shadow-sm ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
}
.header-github-display {
@apply -mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm
}
.header-notifications-box {
@apply fixed left-0 top-0 h-screen w-screen
}
.header-notifications {
@apply absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive
}
.input-component-div {
@apply pointer-events-none relative cursor-not-allowed
}
.input-component-button {
@apply absolute inset-y-0 right-0 items-center text-muted-foreground
}
.input-component-true-button {
@apply input-component-button pr-2
}
.input-component-false-button {
@apply input-component-button px-4
}
.input-component-true-svg {
@apply absolute bottom-0.5 right-2 side-bar-button-size
}
.input-component-false-svg {
@apply absolute bottom-2 right-3 side-bar-button-size
}
.input-file-component {
@apply flex-max-width items-center
}
} }