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

generic node dark mode implemented

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-28 22:58:21 -03:00
commit 9dfb915dd9
4 changed files with 11 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

4
space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -43,7 +43,7 @@ export default function ParameterComponent({
let disabled = reactFlowInstance?.getEdges().some((e) => (e.targetHandle === id)) ?? false;
return (
<div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 mt-1 px-5 py-2">
<div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-slate-800 dark:text-white mt-1 px-5 py-2">
<>
<div className="text-sm truncate">{title}<span className="text-red-600">{required ? " *" : ""}</span></div>
<Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
@ -56,7 +56,7 @@ export default function ParameterComponent({
}
className={
(left ? "-ml-0.5 " : "-mr-0.5 ") +
"w-3 h-3 rounded-full border-2 bg-white"
"w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"
}
style={{
borderColor: color,

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

@ -16,8 +16,8 @@ export default function GenericNode({ data }) {
return (
<div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
<div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 border-b ">
<div className="prompt-node relative bg-white dark:bg-slate-900 w-96 rounded-lg solid border dark:border-slate-700 flex flex-col justify-center">
<div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-slate-800 border-b dark:border-b-slate-700 ">
<div className="w-full flex items-center truncate gap-4 text-lg">
<Icon
className="w-10 h-10 p-1 rounded"
@ -26,7 +26,7 @@ export default function GenericNode({ data }) {
<div className="truncate">{data.type}</div>
</div>
<button onClick={() => {deleteNode(data.id)}}>
<TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
<TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-slate-500 dark:hover:text-red-500"></TrashIcon>
</button>
</div>
@ -41,7 +41,7 @@ export default function GenericNode({ data }) {
.map((t, idx) => (
<div key={idx}>
{idx === 0 ? (
<div className="px-5 py-2 mt-2 text-center">Inputs:</div>
<div className="px-5 py-2 mt-2 dark:text-white text-center">Inputs:</div>
) : (
<></>
)}
@ -73,7 +73,7 @@ export default function GenericNode({ data }) {
)}
</div>
))}
<div className="px-5 py-2 mt-2 text-center">Output:</div>
<div className="px-5 py-2 mt-2 dark:text-white text-center">Output:</div>
<ParameterComponent
data={data}
color={nodeColors[types[data.type]]}

2
space_flow/src/components/inputComponent/index.tsx
View file

@ -13,7 +13,7 @@ export default function InputComponent({value, onChange, disabled}){
<input
type="text"
value={myValue}
className={"block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200" : "")}
className={"block w-full form-input dark:bg-slate-900 dark:border-slate-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200 dark:bg-slate-700" : "")}
placeholder="Type a text"
onChange={(e) => {
setMyValue(e.target.value);

6
space_flow/src/components/toggleComponent/index.tsx
View file

@ -16,15 +16,15 @@ export default function ToggleComponent({ enabled, setEnabled, disabled }) {
setEnabled(x);
}}
className={classNames(
enabled ? "bg-indigo-600" : "bg-gray-200",
"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-slate-600",
"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out "
)}
>
<span className="sr-only">Use setting</span>
<span
className={classNames(
enabled ? "translate-x-5" : "translate-x-0",
"pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out", disabled ? "bg-gray-200" : "bg-white"
"pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out", disabled ? "bg-gray-200 dark:bg-slate-600" : "bg-white dark:bg-slate-800"
)}
>
<span