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

String and boolean nodes dark mode implemented

Browse source
This commit is contained in:
Lucas Oliveira 2023-03-02 09:07:03 -03:00
commit 7f31ae6a7e
2 changed files with 16 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,8 +10,8 @@ export default function BooleanNode({ data }) {
const [enabled, setEnabled] = useState(false); const [enabled, setEnabled] = useState(false);
const {types, deleteNode} = useContext(typesContext); const {types, deleteNode} = useContext(typesContext);
return ( return (
<div className="prompt-node relative bg-white rounded-lg solid border flex flex-col justify-center"> <div className="prompt-node relative bg-white dark:bg-slate-900 rounded-lg solid border dark:border-slate-700 flex flex-col justify-center">
<div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 border-b "> <div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 dark:bg-slate-800 dark:text-white dark:border-b-slate-700 border-b ">
<div className="flex items-center gap-4 text-lg"> <div className="flex items-center gap-4 text-lg">
<CheckCircleIcon <CheckCircleIcon
className="w-10 h-10 p-1 rounded" className="w-10 h-10 p-1 rounded"
@ -35,8 +35,10 @@ export default function BooleanNode({ data }) {
position={Position.Right} position={Position.Right}
id={data.type} id={data.type}
isValidConnection={(connection) => isValidConnection(data,connection)} isValidConnection={(connection) => isValidConnection(data,connection)}
className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none" className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
style={{ borderLeftColor: nodeColors[types[data.type]] }} style={{
borderColor: nodeColors[types[data.type]],
}}
></Handle> ></Handle>
</div> </div>
); );

16
space_flow/src/CustomNodes/InputNode/index.tsx
View file

@ -15,7 +15,7 @@ import TextAreaComponent from "../../components/textAreaComponent";
export default function InputNode({ data }) { export default function InputNode({ data }) {
const {types, deleteNode} = useContext(typesContext); const {types, deleteNode} = useContext(typesContext);
return ( return (
<div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center"> <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">
<Tooltip title="Prefix: str"> <Tooltip title="Prefix: str">
<Handle <Handle
type="target" type="target"
@ -24,12 +24,14 @@ export default function InputNode({ data }) {
isValidConnection={(connection) => isValidConnection={(connection) =>
isValidConnection(data, connection) isValidConnection(data, connection)
} }
className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none" className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
style={{ borderLeftColor: nodeColors[types[data.type]] }} style={{
borderColor: nodeColors[types[data.type]],
}}
></Handle> ></Handle>
</Tooltip> </Tooltip>
<div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 border-b "> <div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 dark:bg-slate-800 dark:text-white border-b dark:border-b-slate-700 ">
<div className="flex items-center gap-4 text-lg"> <div className="flex items-center gap-4 text-lg">
<Bars3CenterLeftIcon <Bars3CenterLeftIcon
className="w-10 h-10 p-1 rounded" className="w-10 h-10 p-1 rounded"
@ -60,8 +62,10 @@ export default function InputNode({ data }) {
position={Position.Right} position={Position.Right}
id={data.type} id={data.type}
isValidConnection={(connection) => isValidConnection(data, connection)} isValidConnection={(connection) => isValidConnection(data, connection)}
className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none" className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
style={{ borderLeftColor: nodeColors[types[data.type]] }} style={{
borderColor: nodeColors[types[data.type]],
}}
></Handle> ></Handle>
</div> </div>
); );