jyapayne/langflow
Watch
1
0
Fork
You've already forked langflow
 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat[tailwind colors]: Change all tailwind default colors to variables colors

Browse source
This commit is contained in:
Igor Carvalho 2023-06-20 19:21:00 -03:00
commit 838e5b2af7
50 changed files with 378 additions and 220 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -121,12 +121,12 @@ export default function ParameterComponent({
return (
<div
ref={ref}
className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-dark-gray dark:text-white mt-1 px-5 py-2"
>
<>
<div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
{title}
<span className="text-red-600">{required ? " *" : ""}</span>
<span className="text-almost-medium-red">{required ? " *" : ""}</span>
</div>
{left &&
(type === "str" ||
@ -153,7 +153,7 @@ export default function ParameterComponent({
}
className={classNames(
left ? "-ml-0.5 " : "-mr-0.5 ",
"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
"w-3 h-3 rounded-full border-2 bg-white dark:bg-dark-gray"
)}
style={{
borderColor: color,

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

@ -75,11 +75,11 @@ export default function GenericNode({
<div
className={classNames(
selected ? "border border-ring" : "border dark:border-gray-700",
"prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-gray-900"
selected ? "border border-ring" : "border dark:border-almost-dark-gray",
"prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-high-dark-gray"
)}
>
<div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-gray-700 dark:bg-gray-800 dark:text-white ">
<div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-almost-dark-gray dark:bg-dark-gray dark:text-white ">
<div className="flex w-full items-center gap-2 truncate text-lg">
<Icon
className="h-10 w-10 rounded p-1"
@ -89,7 +89,7 @@ export default function GenericNode({
/>
<div className="ml-2 truncate">
<ShadTooltip delayDuration={1500} content={data.type}>
<div className="ml-2 truncate text-gray-800">{data.type}</div>
<div className="ml-2 truncate text-dark-gray">{data.type}</div>
</ShadTooltip>
</div>
</div>
@ -122,25 +122,25 @@ export default function GenericNode({
<div
className={classNames(
validationStatus && validationStatus.valid
? "w-4 h-4 rounded-full bg-green-500 opacity-100"
: "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
"absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
? "w-4 h-4 rounded-full bg-almost-medium-green opacity-100"
: "w-4 h-4 rounded-full bg-medium-gray opacity-0 hidden animate-spin",
"absolute w-4 hover:text-medium-gray hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
)}
></div>
<div
className={classNames(
validationStatus && !validationStatus.valid
? "w-4 h-4 rounded-full bg-red-500 opacity-100"
: "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
"absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
? "w-4 h-4 rounded-full bg-medium-red opacity-100"
: "w-4 h-4 rounded-full bg-medium-gray opacity-0 hidden animate-spin",
"absolute w-4 hover:text-medium-gray hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
)}
></div>
<div
className={classNames(
!validationStatus
? "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 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
? "w-4 h-4 rounded-full bg-medium-yellow opacity-100"
: "w-4 h-4 rounded-full bg-medium-gray opacity-0 hidden animate-spin",
"absolute w-4 hover:text-medium-gray hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
)}
></div>
</div>
@ -149,7 +149,7 @@ export default function GenericNode({
</div>
</div>
<div className="h-full w-full py-5 text-gray-800">
<div className="h-full w-full py-5 text-dark-gray">
<div className="w-full px-5 pb-3 text-sm text-muted-foreground">
{data.node.description}
</div>

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

@ -24,13 +24,13 @@ export default function AlertDropdown({}: AlertDropdownType) {
return (
<div
ref={componentRef}
className="z-10 py-3 pb-4 px-2 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
className="z-10 py-3 pb-4 px-2 rounded-md bg-white dark:bg-dark-gray ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
>
<div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800 dark:text-gray-200">
<div className="flex pl-3 flex-row justify-between text-md font-medium text-dark-gray dark:text-light-gray">
Notifications
<div className="flex gap-3 pr-3 ">
<button
className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
className="text-dark-gray hover:text-medium-red dark:text-light-gray dark:hover:text-medium-red"
onClick={() => {
closePopUp();
setTimeout(clearNotificationList, 100);
@ -39,14 +39,14 @@ export default function AlertDropdown({}: AlertDropdownType) {
<TrashIcon className="w-[1.1rem] h-[1.1rem]" />
</button>
<button
className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
className="text-dark-gray hover:text-medium-red dark:text-light-gray dark:hover:text-medium-red"
onClick={closePopUp}
>
<XMarkIcon className="h-5 w-5" />
</button>
</div>
</div>
<div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-gray-900 dark:text-gray-300">
<div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-high-dark-gray dark:text-medium-low-gray">
{notificationList.length !== 0 ? (
notificationList.map((alertItem, index) => (
<SingleAlert
@ -56,7 +56,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
/>
))
) : (
<div className="h-full w-full pb-16 text-gray-500 dark:text-gray-500 flex justify-center items-center">
<div className="h-full w-full pb-16 text-medium-gray dark:text-medium-gray flex justify-center items-center">
No new notifications
</div>
)}

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

@ -39,21 +39,21 @@ export default function ErrorAlert({
removeAlert(id);
}, 500);
}}
className="rounded-md w-96 mt-6 shadow-xl bg-red-50 dark:bg-red-900 p-4 cursor-pointer"
className="rounded-md w-96 mt-6 shadow-xl bg-light-red dark:bg-dark-red p-4 cursor-pointer"
>
<div className="flex">
<div className="flex-shrink-0">
<XCircleIcon
className="h-5 w-5 text-red-400 dark:text-red-50"
className="h-5 w-5 text-light-red dark:text-light-red"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-red-800 dark:text-white/80">
<h3 className="text-sm font-medium text-almost-dark-red dark:text-white/80">
{title}
</h3>
{list.length !== 0 ? (
<div className="mt-2 text-sm text-red-700 dark:text-red-50">
<div className="mt-2 text-sm text-medium-dark-red dark:text-light-red">
<ul className="list-disc space-y-1 pl-5">
{list.map((item, index) => (
<li key={index}>{item}</li>

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

@ -36,22 +36,22 @@ export default function NoticeAlert({
setShow(false);
removeAlert(id);
}}
className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 dark:bg-blue-900 p-4"
className="rounded-md w-96 mt-6 shadow-xl bg-light-blue dark:bg-dark-blue p-4"
>
<div className="flex">
<div className="flex-shrink-0">
<InformationCircleIcon
className="h-5 w-5 text-blue-400 dark:text-blue-50"
className="h-5 w-5 text-medium-blue dark:text-light-blue"
aria-hidden="true"
/>
</div>
<div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-blue-700 dark:text-white/80">{title}</p>
<p className="text-sm text-medium-dark-blue dark:text-white/80">{title}</p>
<p className="mt-3 text-sm md:mt-0 md:ml-6">
{link !== "" ? (
<Link
to={link}
className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 hover:dark:text-blue-10 hover:text-ring"
className="whitespace-nowrap font-medium text-medium-dark-blue dark:text-light-blue hover:dark:text-blue-10 hover:text-ring"
>
Details
</Link>

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

@ -34,17 +34,17 @@ export default function SuccessAlert({
setShow(false);
removeAlert(id);
}}
className="rounded-md w-96 mt-6 shadow-xl bg-green-50 dark:bg-green-900 p-4"
className="rounded-md w-96 mt-6 shadow-xl bg-light-green dark:bg-dark-green p-4"
>
<div className="flex">
<div className="flex-shrink-0">
<CheckCircleIcon
className="h-5 w-5 text-green-400 dark:text-green-50"
className="h-5 w-5 text-medium-green dark:text-light-green"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-green-800 dark:text-white/80">
<p className="text-sm font-medium text-medium-dark-green dark:text-white/80">
{title}
</p>
</div>

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

@ -1,11 +1,11 @@
export default function CrashErrorComponent({ error, resetErrorBoundary }) {
return (
<div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 z-50">
<div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-dark-gray bg-opacity-50 z-50">
<div className="bg-white max-w-4xl h-1/3 min-h-fit rounded-lg shadow-lg p-8 text-start flex flex-col justify-evenly">
<h1 className="text-red-500 text-3xl mb-4">
<h1 className="text-medium-red text-3xl mb-4">
Oops! An unknown error has occurred.
</h1>
<p className="text-gray-700 mb-4 text-xl">
<p className="text-almost-dark-gray mb-4 text-xl">
Please click the 'Reset Application' button to restore the
application's state. If the error persists, please create an issue on
our GitHub page. We apologize for any inconvenience this may have
@ -14,7 +14,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
<div className="flex justify-center">
<button
onClick={resetErrorBoundary}
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4"
className="bg-almost-dark-blue hover:bg-medium-dark-blue text-white font-bold py-2 px-4 rounded mr-4"
>
Reset Application
</button>
@ -22,7 +22,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
href="https://github.com/logspace-ai/langflow/issues/new"
target="_blank"
rel="noopener noreferrer"
className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
className="bg-medium-red hover:bg-medium-dark-red text-white font-bold py-2 px-4 rounded"
>
Create Issue
</a>

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

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

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

@ -19,9 +19,9 @@ export default function ExtraSidebar() {
<aside
className={` ${
isStackedOpen ? "w-52" : "w-0 "
} flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
} flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-almost-dark-gray transition-all duration-500`}
>
<div className="w-52 dark:bg-gray-800 border dark:border-gray-700 overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-white">
<div className="w-52 dark:bg-dark-gray border dark:border-almost-dark-gray overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-white">
<div className="flex flex-grow flex-col w-full">
{extraNavigation.options ? (
<div className="p-4">
@ -33,16 +33,16 @@ export default function ExtraSidebar() {
to={item.href}
className={classNames(
item.href.split("/")[2] === current[4]
? "bg-muted text-gray-900"
: "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
? "bg-muted text-high-dark-gray"
: "bg-white text-medium-dark-gray hover:bg-muted hover:text-high-dark-gray",
"group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
)}
>
<item.icon
className={classNames(
item.href.split("/")[2] === current[4]
? "text-gray-500"
: "text-gray-400 group-hover:text-gray-500",
? "text-medium-gray"
: "text-almost-medium-gray group-hover:text-medium-gray",
"mr-3 flex-shrink-0 h-6 w-6"
)}
/>
@ -60,22 +60,22 @@ export default function ExtraSidebar() {
<Disclosure.Button
className={classNames(
item.href.split("/")[2] === current[4]
? "bg-muted text-gray-900"
: "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
"group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500"
? "bg-muted text-high-dark-gray"
: "bg-white text-medium-dark-gray hover:bg-muted hover:text-high-dark-gray",
"group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-medium-indigo"
)}
>
<item.icon
className="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
className="mr-3 h-6 w-6 flex-shrink-0 text-almost-medium-gray group-hover:text-medium-gray"
aria-hidden="true"
/>
<span className="flex-1">{item.name}</span>
<svg
className={classNames(
open
? "text-gray-400 rotate-90"
: "text-gray-300",
"ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-gray-400"
? "text-almost-medium-gray rotate-90"
: "text-medium-low-gray",
"ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-almost-medium-gray"
)}
viewBox="0 0 20 20"
aria-hidden="true"
@ -93,8 +93,8 @@ export default function ExtraSidebar() {
to={subItem.href}
className={classNames(
subItem.href.split("/")[3] === current[5]
? "bg-muted text-gray-900"
: "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
? "bg-muted text-high-dark-gray"
: "bg-white text-medium-dark-gray hover:bg-muted hover:text-high-dark-gray",
"group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
)}
>

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

@ -37,7 +37,7 @@ const TooltipReact: FC<TooltipProps> = ({
id={selector}
content={content}
className={classNames(
"!bg-white !text-xs !font-normal !text-gray-700 !shadow-md !opacity-100 z-[9999]",
"!bg-white !text-xs !font-normal !text-almost-dark-gray !shadow-md !opacity-100 z-[9999]",
className
)}
place={position}

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

@ -143,7 +143,7 @@ export default function BuildTrigger({
>
<div
className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md hover:shadow-sm shadow-btn-shadow hover:shadow-btn-shadow
bg-buildBackground dark:border-gray-600 cursor-pointer"
bg-buildBackground dark:border-medium-dark-gray cursor-pointer"
onClick={() => {
handleBuild(flow);
}}

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

@ -48,7 +48,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
</div>
) : (
<div className="w-full text-end">
<div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-gray-700 bg-gray-200 font-normal rounded-tr-none">
<div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-almost-dark-gray bg-light-gray font-normal rounded-tr-none">
{chat.message}
</div>
</div>

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

@ -36,13 +36,13 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
side="left"
>
<div
className="border flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full bg-blue-500 dark:border-gray-600 cursor-pointer"
className="border flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full bg-almost-dark-blue dark:border-medium-dark-gray cursor-pointer"
onClick={handleClick}
>
<button>
<div className="flex gap-3">
<MessagesSquare
className="h-6 w-6 text-blue-100 fill-blue-100"
className="h-6 w-6 text-medium-light-blue fill-medium-light-blue"
style={{ color: "white" }}
strokeWidth={1.5}
/>

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

@ -46,11 +46,11 @@ export default function CodeAreaComponent({
}}
className={
editNode
? "truncate cursor-pointer placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 border-1 shadow-sm sm:text-sm" +
? "truncate cursor-pointer placeholder:text-center text-medium-gray block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray border-1 shadow-sm sm:text-sm" +
INPUT_STYLE
: "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
: "truncate block w-full text-medium-gray px-3 py-2 rounded-md border border-medium-low-gray dark:border-almost-dark-gray shadow-sm sm:text-sm" +
INPUT_STYLE +
(disabled ? " bg-gray-200" : "")
(disabled ? " bg-light-gray" : "")
}
>
{myValue !== "" ? myValue : "Type something..."}
@ -69,7 +69,7 @@ export default function CodeAreaComponent({
}}
>
{!editNode && (
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3" />
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-medium-low-gray ml-3" />
)}
</button>
</div>

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

@ -31,9 +31,9 @@ export default function Dropdown({
<Listbox.Button
className={
editNode
? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm border-gray-300 border-1" +
? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md shadow-sm sm:text-sm border-medium-low-gray border-1" +
INPUT_STYLE
: "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
: "ring-1 ring-light-slate dark:ring-medium-slate w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-high-dark-gray dark:focus:ring-1 dark:focus:ring-medium-dark-gray dark:focus-visible:ring-high-dark-gray dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
INPUT_STYLE
}
>
@ -44,7 +44,7 @@ export default function Dropdown({
}
>
<ChevronUpDownIcon
className="h-5 w-5 text-gray-400"
className="h-5 w-5 text-almost-medium-gray"
aria-hidden="true"
/>
</span>
@ -70,11 +70,11 @@ export default function Dropdown({
className={({ active }) =>
classNames(
active
? " bg-accent dark:bg-white dark:text-gray-500"
? " bg-accent dark:bg-white dark:text-medium-gray"
: "",
editNode
? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
: "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-medium-low-gray dark:bg-dark-gray"
: "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-medium-low-gray dark:bg-dark-gray"
)
}
value={option}

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

@ -56,11 +56,11 @@ export default function FloatComponent({
value={myValue}
className={
editNode
? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
INPUT_STYLE
: "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 sm:text-sm" +
: "focus:placeholder-transparent block w-full form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm ring-offset-light-gray sm:text-sm" +
INPUT_STYLE +
(disabled ? " bg-gray-200 dark:bg-gray-700" : "")
(disabled ? " bg-light-gray dark:bg-almost-dark-gray" : "")
}
placeholder={
editNode ? "Number 0 to 1" : "Type a number from zero to one"

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

@ -70,7 +70,7 @@ export const MenuBar = ({ flows, tabId }) => {
openPopUp(<FlowSettingsModal />);
}}
>
<Settings2 className="w-4 h-4 mr-2 dark:text-gray-300" />
<Settings2 className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
Settings
</DropdownMenuItem>
<DropdownMenuItem
@ -78,7 +78,7 @@ export const MenuBar = ({ flows, tabId }) => {
undo();
}}
>
<Undo className="w-4 h-4 mr-2 dark:text-gray-300" />
<Undo className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
Undo
</DropdownMenuItem>
<DropdownMenuItem
@ -86,7 +86,7 @@ export const MenuBar = ({ flows, tabId }) => {
redo();
}}
>
<Redo className="w-4 h-4 mr-2 dark:text-gray-300" />
<Redo className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
Redo
</DropdownMenuItem>
<DropdownMenuSeparator />

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

@ -60,7 +60,7 @@ export default function Header() {
<Button
asChild
variant="outline"
className="text-gray-600 dark:text-gray-300 "
className="text-medium-dark-gray dark:text-medium-low-gray "
>
<a
href="https://github.com/logspace-ai/langflow"
@ -85,7 +85,7 @@ export default function Header() {
)}
</button> */}
<button
className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 relative"
className="text-medium-dark-gray hover:text-medium-gray dark:text-medium-low-gray dark:hover:text-light-gray relative"
onClick={(event: React.MouseEvent<HTMLElement>) => {
setNotificationCenter(false);
const { top, left } = (

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

@ -46,13 +46,13 @@ export default function InputComponent({
if (disableCopyPaste) setDisableCopyPaste(false);
}}
className={classNames(
"block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:placeholder-transparent",
disabled ? " bg-gray-200 dark:bg-gray-700" : "",
"block w-full pr-12 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm focus:placeholder-transparent",
disabled ? " bg-light-gray dark:bg-almost-dark-gray" : "",
password && !pwdVisible && myValue !== "" ? "password" : "",
editNode
? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm text-center" +
? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm text-center" +
INPUT_STYLE
: "ring-offset-gray-200" + INPUT_STYLE,
: "ring-offset-light-gray" + INPUT_STYLE,
password && editNode ? "pr-8" : "pr-3"
)}
placeholder={password && editNode ? "Key" : "Type something..."}
@ -65,8 +65,8 @@ export default function InputComponent({
<button
className={classNames(
editNode
? "absolute inset-y-0 right-0 pr-2 items-center text-gray-600"
: "absolute inset-y-0 right-0 items-center px-4 text-gray-600"
? "absolute inset-y-0 right-0 pr-2 items-center text-medium-dark-gray"
: "absolute inset-y-0 right-0 items-center px-4 text-medium-dark-gray"
)}
onClick={() => {
setPwdVisible(!pwdVisible);

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

@ -78,11 +78,11 @@ export default function InputFileComponent({
onClick={handleButtonClick}
className={
editNode
? "truncate placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm border-1" +
? "truncate placeholder:text-center text-medium-gray block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm border-1" +
INPUT_STYLE
: "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
: "truncate block w-full text-medium-gray dark:text-medium-low-gray px-3 py-2 rounded-md border border-medium-low-gray dark:border-almost-dark-gray shadow-sm sm:text-sm" +
INPUT_STYLE +
(disabled ? " bg-gray-200" : "")
(disabled ? " bg-light-gray" : "")
}
>
{myValue !== "" ? myValue : "No file"}

Some files were not shown because too many files have changed in this diff Show more