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

feat: Update class names and colors in various components

Browse source 
- Update class names and colors in parameterComponent, GenericNode, alertDropDown, error, notice, success, buildTrigger, dropdownComponent, headerComponent, and inputListComponent to improve consistency and visual appeal.
This commit is contained in:
Rodrigo Nader 2023-06-29 00:50:58 -03:00
commit 05d2e82f2d
21 changed files with 54 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -97,7 +97,7 @@ export default function ParameterComponent({
>
{React.createElement(nodeIconsLucide[item.family])}
</div>
<span className="ps-2 text-gray-950">
<span className="ps-2 text-foreground">
{nodeNames[item.family] ?? ""}{" "}
<span className={classNames(left ? "hidden" : "")}>
{" "}

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

@ -108,7 +108,7 @@ export default function GenericNode({
delayDuration={1500}
content={data.node.display_name}
>
<div className="ml-2 truncate text-gray-800">
<div className="ml-2 truncate text-primary">
{data.node.display_name}
</div>
</ShadTooltip>
@ -143,7 +143,7 @@ export default function GenericNode({
<div
className={classNames(
validationStatus && validationStatus.valid
? "w-4 h-4 rounded-full bg-red-600 opacity-100"
? "w-4 h-4 rounded-full bg-status-red opacity-100"
: "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
"absolute w-4 hover:text-ring hover: transition-all ease-in-out duration-200"
)}
@ -159,9 +159,9 @@ export default function GenericNode({
<div
className={classNames(
!validationStatus || isBuilding
? "w-4 h-4 rounded-full bg-yellow-500 opacity-100"
: "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
"absolute w-4 hover:text-gray-500 transition-all ease-in-out duration-200"
? "w-4 h-4 rounded-full bg-status-yellow opacity-100"
: "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
"absolute w-4 hover:text-ring transition-all ease-in-out duration-200"
)}
></div>
</div>

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

@ -30,16 +30,16 @@ export default function SingleAlert({
>
<div className="flex-shrink-0">
<XCircle
className="h-5 w-5 text-red-400"
className="h-5 w-5 text-status-red"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<h3 className="text-sm break-words font-medium text-red-800">
<h3 className="text-sm break-words font-medium text-error-foreground">
{dropItem.title}
</h3>
{dropItem.list ? (
<div className="mt-2 text-sm text-red-700">
<div className="mt-2 text-sm text-error-foreground">
<ul className="list-disc space-y-1 pl-5">
{dropItem.list.map((item, idx) => (
<li className="break-words" key={idx}>
@ -62,7 +62,7 @@ export default function SingleAlert({
removeAlert(dropItem.id);
}, 500);
}}
className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500"
className="inline-flex rounded-md bg-red-50 p-1.5 text-status-red"
>
<span className="sr-only">Dismiss</span>
<X className="h-5 w-5" aria-hidden="true" />
@ -77,19 +77,19 @@ export default function SingleAlert({
>
<div className="flex-shrink-0">
<Info
className="h-5 w-5 text-blue-400 "
className="h-5 w-5 text-medium-dark-blue"
aria-hidden="true"
/>
</div>
<div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-blue-700">
<p className="text-sm text-medium-dark-blue">
{dropItem.title}
</p>
<p className="mt-3 text-sm md:mt-0 md:ml-6">
{dropItem.link ? (
<Link
to={dropItem.link}
className="whitespace-nowrap font-medium text-blue-700 hover:text-ring"
className="whitespace-nowrap font-medium text-medium-dark-blue hover:text-ring"
>
Details
</Link>
@ -108,7 +108,7 @@ export default function SingleAlert({
removeAlert(dropItem.id);
}, 500);
}}
className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500 "
className="inline-flex rounded-md bg-blue-50 p-1.5 text-medium-dark-blue "
>
<span className="sr-only">Dismiss</span>
<X className="h-5 w-5" aria-hidden="true" />
@ -123,12 +123,12 @@ export default function SingleAlert({
>
<div className="flex-shrink-0">
<CheckCircle2
className="h-5 w-5 text-green-400 "
className="h-5 w-5 text-status-green"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-green-800">
<p className="text-sm font-medium text-success-foreground">
{dropItem.title}
</p>
</div>
@ -142,7 +142,7 @@ export default function SingleAlert({
removeAlert(dropItem.id);
}, 500);
}}
className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 "
className="inline-flex rounded-md bg-success-background p-1.5 text-status-green"
>
<span className="sr-only">Dismiss</span>
<X className="h-5 w-5" aria-hidden="true" />

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

@ -44,7 +44,7 @@ export default function ErrorAlert({
<div className="flex">
<div className="flex-shrink-0">
<XCircle
className="h-5 w-5 text-red-400"
className="h-5 w-5 text-status-red"
aria-hidden="true"
/>
</div>

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

@ -41,7 +41,7 @@ export default function NoticeAlert({
<div className="flex">
<div className="flex-shrink-0">
<Info
className="h-5 w-5 text-blue-400 "
className="h-5 w-5 text-medium-dark-blue "
aria-hidden="true"
/>
</div>

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

@ -39,7 +39,7 @@ export default function SuccessAlert({
<div className="flex">
<div className="flex-shrink-0">
<CheckCircle2
className="h-5 w-5 text-green-400 "
className="h-5 w-5 text-status-green"
aria-hidden="true"
/>
</div>

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

@ -174,9 +174,9 @@ export default function BuildTrigger({
value={progress}
></RadialProgressComponent>
) : isBuilding ? (
<Loading strokeWidth={1.5} style={{ color: "#fb923c" }} />
<Loading strokeWidth={1.5} className="stroke-build-trigger"/>
) : (
<Zap className="sh-6 w-6 fill-orange-400 stroke-1 stroke-orange-400" />
<Zap className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
)}
</div>
</button>

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

@ -47,7 +47,7 @@ export default function Dropdown({
}
>
<ChevronsUpDown
className="h-5 w-5 text-gray-400"
className="h-5 w-5 text-border"
aria-hidden="true"
/>
</span>

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

@ -75,7 +75,7 @@ export default function Header() {
href="https://github.com/logspace-ai/langflow"
target="_blank"
rel="noreferrer"
className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-gray-600 border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
>
<FaGithub className="h-5 w-5 mr-2" />
Star
@ -102,7 +102,7 @@ export default function Header() {
<Separator orientation="vertical" />
<button
className="text-gray-600 hover:text-gray-500 "
className="text-muted-foreground hover:text-ring "
onClick={() => {
setDark(!dark);
}}

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

@ -73,7 +73,7 @@ export default function InputListComponent({
onChange(inputList);
}}
>
<X className="w-4 h-4 hover:text-red-600" />
<X className="w-4 h-4 hover:text-status-red" />
</button>
)}
</div>

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

@ -3,109 +3,6 @@
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%; /* hsl(0 0% 100%) */
--foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
--muted: 210 40% 96.1%; /* hsl(210 40% 96%) */
--muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
--popover: 0 0% 100%; /* hsl(0 0% 100%) */
--popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
--card: 0 0% 100%; /* hsl(0 0% 100%) */
--card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
--border: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
--input: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
--primary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
--primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
--secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
--secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
--accent: 210 40% 96.1%; /* hsl(210 40% 96%) */
--accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
--destructive: 0 100% 50%; /* hsl(0 100% 50%) */
--destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
--ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
--radius: 0.5rem;
--build-background: #E2E7EE; /* hsl(215, 26%, 91%) */
--round-btn-shadow: #00000063;
--hover-btn-background: #242f47;
--build-trigger: #dc735b; /* hsl(11, 65%, 61%) */
--chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
--error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
--error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
--status-red: #ef4444; /* tailwind red 500 medium-red*/
--status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
--status-green: #4ade80; /* tailwind green 400 medium-green*/
--success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/
--success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
/* --high-indigo: #4338ca; tailwind indigo 700
--medium-indigo: #6366f1; tailwind indigo 500
--medium-dark-blue:#1d4ed8; tailwind blue 700 Change in component (--ring)
--medium-high-indigo: #4f46e5; tailwind indigo 600
--medium-emerald: #10b981; tailwind emerald 500 Unused
--medium-dark-green: #166534; tailwind green 800 Unused
--almost-medium-green: #22c55e; tailwind green 500 Unused
--light-slate: #cbd5e1; tailwind slate 300 UNUSED
--light-blue: #eff6ff; tailwind blue 50
--dark-blue: #1e3a8a; tailwind blue 900
--medium-blue: #60a5fa; tailwind blue 400
--almost-dark-blue:#3b82f6; tailwind blue 500
--almost-light-blue: #dbeafe; tailwind blue 100 */
}
.dark {
--background: 224 71% 4%; /* hsl(224 71% 4%) */
--foreground: 213 31% 91%; /* hsl(213 31% 91%) */
--muted: 223 47% 11%; /* hsl(223 47% 11%) */
--muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
--popover: 224 71% 4%; /* hsl(224 71% 4%) */
--popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
--card: 224 71% 4%; /* hsl(224 71% 4%) */
--card-foreground: 213 31% 91%; /* hsl(213 31% 91%) */
--border: 216 34% 17%; /* hsl(216 34% 17%) */
--input: 216 34% 17%; /* hsl(216 34% 17%) */
--primary: 210 40% 98%; /* hsl(210 40% 98%) */
--primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
--secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
--secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
--accent: 216 34% 17%; /* hsl(216 34% 17%) */
--accent-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
--destructive: 0 63% 31%; /* hsl(0 63% 31%) */
--destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
--ring: 216 34% 17%; /* hsl(216 34% 17%) */
--radius: 0.5rem;
--build-trigger: 11, 65% 61%; /* hsl(11, 65%, 61%) */
}
}
:root {
--background: 0 0% 100%; /* hsl(0 0% 100%) */
@ -145,6 +42,7 @@
--success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/
--success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
--high-indigo: #4338ca; /*tailwind indigo 700*/
--medium-indigo: #6366f1; /* tailwind indigo 500 */
--medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
@ -191,7 +89,7 @@
--high-indigo: #000000; /*tailwind indigo 700*/
--medium-indigo: #000000; /* tailwind indigo 500 */
--medium-dark-blue:#000000; /* tailwind blue 700 Change in component (--ring)*/
}
}}
@layer base {
* {
@ -222,4 +120,4 @@ code {
The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */
.react-flow__pane {
cursor: default;
}
}

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

@ -88,7 +88,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<DialogTitle className="flex items-center">
<span className="pr-2">Code</span>
<Code2
className="h-6 w-6 text-gray-800 pl-1 "
className="h-6 w-6 text-primary pl-1 "
aria-hidden="true"
/>
</DialogTitle>

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

@ -90,8 +90,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
<DialogDescription>
{data.node?.description}
<div className="flex pt-4">
<Variable className="w-5 h-5 pe-1 text-gray-700 stroke-2 "></Variable>
<span className="text-sm font-semibold text-gray-800 ">
<Variable className="w-5 h-5 pe-1 text-muted-foreground stroke-2 "></Variable>
<span className="text-sm font-semibold text-primary ">
Parameters
</span>
</div>

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

@ -147,7 +147,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
<div className="bg-input w-full pb-3 flex flex-row-reverse px-4">
<button
type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent bg-red-500 px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
className="inline-flex w-full justify-center rounded-md border border-transparent bg-status-red px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => {
setModalOpen(false);
}}

8
src/frontend/src/modals/chatModal/chatInput/index.tsx
View file

@ -51,8 +51,8 @@ export default function ChatInput({
}}
className={classNames(
lockChat
? " bg-input text-black "
: " bg-background-200 text-black ",
? " bg-input text-foreground "
: " bg-background text-foreground ",
"form-input block w-full custom-scroll rounded-md border-ring pr-10 sm:text-sm" +
INPUT_STYLE
)}
@ -62,12 +62,12 @@ export default function ChatInput({
<button disabled={lockChat} onClick={() => sendMessage()}>
{lockChat ? (
<Lock
className="h-5 w-5 text-gray-500 animate-pulse"
className="h-5 w-5 text-ring animate-pulse"
aria-hidden="true"
/>
) : (
<Send
className="h-5 w-5 text-gray-500 hover:text-gray-600 "
className="h-5 w-5 text-ring hover:text-muted-foreground "
aria-hidden="true"
/>
)}

4
src/frontend/src/modals/chatModal/chatMessage/index.tsx
View file

@ -61,7 +61,7 @@ export default function ChatMessage({
</div>
)}
{chat.isSend && (
<User2 className="w-6 h-6 -mb-1 text-gray-800 " />
<User2 className="w-6 h-6 -mb-1 text-primary " />
)}
</div>
{!chat.isSend ? (
@ -151,7 +151,7 @@ export default function ChatMessage({
</div>
) : (
<div className="w-full flex items-center">
<div className="text-start inline-block px-3 text-gray-600 ">
<div className="text-start inline-block px-3 text-muted-foreground ">
<span
className="text-muted-foreground "
dangerouslySetInnerHTML={{

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

@ -52,7 +52,7 @@ export default function CodeAreaModal({
<DialogTitle className="flex items-center">
<span className="pr-2">Edit Code</span>
<TerminalSquare
className="h-6 w-6 text-gray-800 pl-1 "
className="h-6 w-6 text-primary pl-1 "
aria-hidden="true"
/>
</DialogTitle>

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

@ -55,7 +55,7 @@ export default function GenericModal({
<DialogTitle className="flex items-center">
<span className="pr-2">{myModalTitle}</span>
<FileText
className="h-6 w-6 text-gray-800 pl-1 "
className="h-6 w-6 text-primary pl-1 "
aria-hidden="true"
/>
</DialogTitle>

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

@ -14,8 +14,8 @@ export default function DisclosureComponent({
<div>
<Disclosure.Button className="select-none bg-muted w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input">
<div className="flex gap-4">
<Icon size={22} className="text-gray-800 " />
<span className="flex items-center text-sm text-gray-800 font-medium">
<Icon size={22} className="text-primary " />
<span className="flex items-center text-sm text-primary font-medium">
{title}
</span>
</div>

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

@ -182,11 +182,11 @@ export default function ExtraSidebar() {
);
}}
>
<div className="flex w-full justify-between text-sm px-3 py-1 bg-white items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border">
<span className="text-black w-full pr-1 truncate text-xs">
<div className="flex w-full justify-between text-sm px-3 py-1 bg-white items-center border-dashed border-ring border-l-0 rounded-md rounded-l-none border">
<span className="text-foreground w-full pr-1 truncate text-xs">
{data[d][t].display_name}
</span>
<Menu className="w-4 h-6 text-gray-400 " />
<Menu className="w-4 h-6 text-ring " />
</div>
</div>
</div>

16
src/frontend/tailwind.config.js
View file

@ -164,14 +164,14 @@ module.exports = {
'dark-gray': "var(--dark-gray)",
'btn-hover-bg': "var(--hover-btn-background)",
'btn-shadow': "var(--round-btn-shadow)",
buildBackground: "var(--build-background)",
build: "var(--build-trigger)",
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
'build-background': "var(--build-background)",
'build-trigger': "var(--build-trigger)",
'border': "hsl(var(--border))",
'input': "hsl(var(--input))",
'ring': "hsl(var(--ring))",
'background': "hsl(var(--background))",
'foreground': "hsl(var(--foreground))",
'primary': {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},