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

changed color slate to gray

Browse source
This commit is contained in:
Lucas Oliveira 2023-03-02 09:22:16 -03:00
commit 9c727fdb24
21 changed files with 61 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

2
space_flow/src/App.tsx
View file

@ -105,7 +105,7 @@ export default function App() {
<ExtraSidebar />
{/* Main area */}
<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-slate-700 flex">
<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
{/* Primary column */}
<div className="w-full h-full">
<TabsManagerComponent></TabsManagerComponent>

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

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

6
space_flow/src/CustomNodes/ChatInputNode/index.tsx
View file

@ -13,7 +13,7 @@ export default function ChatInputNode({ data }) {
const { types } = useContext(typesContext);
return (
<div
className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-slate-800 dark:border-slate-700"
className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-gray-800 dark:border-gray-700"
style={{ color: nodeColors[types[data.type]] }}
>
<Tooltip title="Prefix: str">
@ -24,7 +24,7 @@ export default function ChatInputNode({ data }) {
}
position={Position.Left}
id={"str|Prefix|" + data.id}
className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
style={{
borderColor: nodeColors[types[data.type]],
}}
@ -38,7 +38,7 @@ export default function ChatInputNode({ data }) {
}
position={Position.Right}
id={"str|str|" + data.id}
className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
style={{
borderColor: nodeColors[types[data.type]],
}}

4
space_flow/src/CustomNodes/ChatOutputNode/index.tsx
View file

@ -9,14 +9,14 @@ import { typesContext } from "../../contexts/typesContext";
export default function ChatOutputNode({ data }) {
const {types} = useContext(typesContext);
return (
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-slate-800 dark:border-slate-700" style={{color: nodeColors[types[data.type]]}}>
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-gray-800 dark:border-gray-700" style={{color: nodeColors[types[data.type]]}}>
<Tooltip title="Message: str">
<Handle
type="target"
isValidConnection={(connection) => isValidConnection(data,connection)}
position={Position.Left}
id={"str|output|"+data.id}
className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"
className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
}
style={{
borderColor: nodeColors[types[data.type]],

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 dark:bg-slate-800 dark:text-white mt-1 px-5 py-2">
<div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-gray-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 dark:bg-slate-800"
"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
}
style={{
borderColor: color,

6
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 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="prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg solid border dark:border-gray-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-gray-800 border-b dark:border-b-gray-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 dark:text-slate-500 dark:hover:text-red-500"></TrashIcon>
<TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
</button>
</div>

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

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

2
space_flow/src/alerts/alertDropDown/index.tsx
View file

@ -67,7 +67,7 @@ export default function AlertDropdown({closeFunction, open}: AlertDropdownProps)
<SingleAlert key={index} dropItem={alertItem} removeAlert={removeFromNotificationList} />
))
:
<div className="h-full w-full pb-16 text-slate-500 flex justify-center items-center">
<div className="h-full w-full pb-16 text-gray-500 flex justify-center items-center">
No new notifications
</div>
}

4
space_flow/src/components/ExtraSidebarComponent/index.tsx
View file

@ -20,9 +20,9 @@ export default function ExtraSidebar() {
<aside
className={` ${
isStackedOpen ? "w-60" : "w-0 "
} flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-slate-700 transition-all duration-500`}
} flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
>
<div className="w-60 dark:bg-slate-800 border dark:border-slate-700 overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
<div className="w-60 dark:bg-gray-800 border dark:border-gray-700 overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
<div className="flex pt-4 px-4 justify-between align-middle w-full">
<span className="text-gray-900 dark:text-white text-lg ml-2 font-semibold">
{extraNavigation.title}

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

@ -28,7 +28,7 @@ export default function Header({user, userNavigation}){
})
const {dark, setDark} = useContext(darkContext);
return (
<header className="relative flex h-16 w-full shrink-0 items-center bg-white dark:bg-slate-800">
<header className="relative flex h-16 w-full shrink-0 items-center bg-white dark:bg-gray-800">
{/* Logo area */}
<div className="static shrink-0">
<a

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

@ -21,7 +21,7 @@ export default function Sidebar() {
<div className="w-20 h-full">
<nav
aria-label="Sidebar"
className="h-full overflow-y-auto bg-slate-800 dark:bg-slate-900"
className="h-full overflow-y-auto bg-gray-800 dark:bg-gray-900"
>
<div className="flex flex-col h-full justify-between">
<div className="relative flex w-20 flex-col space-y-3 p-3">

14
space_flow/src/components/chatComponent/index.tsx
View file

@ -88,8 +88,8 @@ export default function Chat({flow, reactFlowInstance }) {
leaveTo="translate-y-96"
>
<div className="w-[400px] absolute bottom-0 right-6">
<div className="border dark:border-slate-700 h-full rounded-xl rounded-b-none bg-white dark:bg-slate-800 shadow">
<div className="flex justify-between items-center px-5 py-3 border-b dark:border-b-slate-700">
<div className="border dark:border-gray-700 h-full rounded-xl rounded-b-none bg-white dark:bg-gray-800 shadow">
<div className="flex justify-between items-center px-5 py-3 border-b dark:border-b-gray-700">
<div className="flex gap-3 text-xl dark:text-white font-medium items-center">
<Bars3CenterLeftIcon className="h-8 w-8 mt-1" style={{color: nodeColors['chat']}} />
Chat
@ -102,7 +102,7 @@ export default function Chat({flow, reactFlowInstance }) {
<XMarkIcon className="h-6 w-6 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
</button>
</div>
<div className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 dark:bg-slate-900 p-3 py-5">
<div className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 dark:bg-gray-900 p-3 py-5">
{chatHistory.map((c, i) => (
<div key={i}>
{!c.isSend ? (
@ -113,7 +113,7 @@ export default function Chat({flow, reactFlowInstance }) {
</div>
) : (
<div className="w-full text-start">
<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-slate-700 bg-gray-200 font-normal rounded-tl-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-gray-700 bg-gray-200 font-normal rounded-tl-none">
{c.message}
</div>
</div>
@ -122,7 +122,7 @@ export default function Chat({flow, reactFlowInstance }) {
))}
<div ref={ref}></div>
</div>
<div className="w-full bg-white dark:bg-slate-800 border-t dark:border-t-slate-600 flex items-center justify-between p-3">
<div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex items-center justify-between p-3">
<div className="relative w-full mt-1 rounded-md shadow-sm">
<input
onKeyDown={(event)=>{
@ -135,7 +135,7 @@ export default function Chat({flow, reactFlowInstance }) {
onChange={(e) => {
setChatValue(e.target.value);
}}
className="form-input block w-full rounded-md border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white pr-10 sm:text-sm"
className="form-input block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white pr-10 sm:text-sm"
placeholder="Send a message..."
/>
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
@ -164,7 +164,7 @@ export default function Chat({flow, reactFlowInstance }) {
leaveTo="translate-y-96"
>
<div className="absolute bottom-0 right-6">
<div className="border flex justify-center align-center py-2 px-4 rounded-xl rounded-b-none bg-white dark:bg-slate-800 dark:border-slate-600 dark:text-white shadow">
<div className="border flex justify-center align-center py-2 px-4 rounded-xl rounded-b-none bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-white shadow">
<button
onClick={() => {
setOpen(true);

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 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" : "")}
className={"block w-full form-input dark:bg-gray-900 dark:border-gray-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-gray-700" : "")}
placeholder="Type a text"
onChange={(e) => {
setMyValue(e.target.value);

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

@ -17,7 +17,7 @@ export default function TextAreaComponent({ value, onChange, disabled }) {
<div className="w-full flex items-center gap-3">
<span
className={
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-slate-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "")
}
>

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

@ -16,7 +16,7 @@ export default function ToggleComponent({ enabled, setEnabled, disabled }) {
setEnabled(x);
}}
className={classNames(
enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-slate-600",
enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-gray-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 "
)}
>
@ -24,7 +24,7 @@ export default function ToggleComponent({ enabled, setEnabled, disabled }) {
<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 dark:bg-slate-600" : "bg-white dark:bg-slate-800"
"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-gray-600" : "bg-white dark:bg-gray-800"
)}
>
<span

14
space_flow/src/modals/textAreaModal/index.tsx
View file

@ -32,7 +32,7 @@ export default function TextAreaModal({value, setValue}){
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 dark:bg-slate-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
@ -46,7 +46,7 @@ export default function TextAreaModal({value, setValue}){
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-slate-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<button
type="button"
@ -61,7 +61,7 @@ export default function TextAreaModal({value, setValue}){
</div>
<div className="h-full w-full flex flex-col justify-center items-center">
<div className="flex w-full pb-6 z-10 justify-center shadow-sm">
<div className="mx-auto mt-8 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-slate-900 sm:mx-0 sm:h-10 sm:w-10">
<div className="mx-auto mt-8 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
<ClipboardDocumentListIcon
className="h-6 w-6 text-blue-600"
aria-hidden="true"
@ -76,14 +76,14 @@ export default function TextAreaModal({value, setValue}){
</Dialog.Title>
</div>
</div>
<div className="h-full w-full bg-gray-200 dark:bg-slate-900 p-4 gap-4 flex flex-row justify-center items-center">
<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
<div className="flex h-full w-full">
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-slate-800 shadow">
<textarea ref={ref} className="form-input h-full w-full rounded-lg border-gray-300 dark:border-slate-700 dark:bg-slate-900 dark:text-white" value={myValue} onChange={(e) => {setMyValue(e.target.value); setValue(e.target.value)}}/>
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
<textarea ref={ref} className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white" value={myValue} onChange={(e) => {setMyValue(e.target.value); setValue(e.target.value)}}/>
</div>
</div>
</div>
<div className="bg-gray-200 dark:bg-slate-900 w-full pb-3 flex flex-row-reverse px-4">
<div className="bg-gray-200 dark:bg-gray-900 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-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"

2
space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx
View file

@ -19,7 +19,7 @@ export default function DisclosureComponent({
{({ open }) => (
<>
<div>
<div className="select-none bg-gray-50 dark:bg-slate-700 dark:border-y-slate-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
<div className="select-none bg-gray-50 dark:bg-gray-700 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
<div className="flex gap-4">
<Icon className="w-6 text-gray-800 dark:text-white" />
<span className="flex items-center text-sm text-gray-800 dark:text-white font-medium">

20
space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -69,9 +69,9 @@ export default function ExtraSidebar() {
})
}
>
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-slate-600 border-l-0 rounded-md rounded-l-none border-2">
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black dark:text-white w-36 truncate">{t}</span>
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
</div>
</div>
</div>
@ -94,9 +94,9 @@ export default function ExtraSidebar() {
})
}
>
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-slate-600 border-l-0 rounded-md rounded-l-none border-2">
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black dark:text-white w-36 truncate">Chat Input</span>
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
</div>
</div>
</div>
@ -111,9 +111,9 @@ export default function ExtraSidebar() {
})
}
>
<div className="flex w-full justify-between text-sm px-4 py-3 items-center dark:border-slate-600 border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<div className="flex w-full justify-between text-sm px-4 py-3 items-center dark:border-gray-600 border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black dark:text-white w-36 truncate">Chat Output</span>
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
</div>
</div>
</div>
@ -134,9 +134,9 @@ export default function ExtraSidebar() {
})
}
>
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-slate-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-gray-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black dark:text-white w-36 truncate">String</span>
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
</div>
</div>
</div>
@ -151,9 +151,9 @@ export default function ExtraSidebar() {
})
}
>
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-slate-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed dark:border-gray-600 border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black dark:text-white w-36 truncate">Boolean</span>
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-slate-600" />
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
</div>
</div>
</div>

12
space_flow/src/pages/FlowPage/components/tabComponent/index.tsx
View file

@ -15,7 +15,7 @@ export default function TabComponent({ selected, flow, onClick }) {
{flow ? (
!selected ? (
<div
className="dark:text-white flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-x-gray-300 dark:border-x-slate-600 -ml-px"
className="dark:text-white flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-x-gray-300 dark:border-x-gray-600 -ml-px"
onClick={onClick}
>
{flow.name}
@ -25,11 +25,11 @@ export default function TabComponent({ selected, flow, onClick }) {
removeFlow(flow.id);
}}
>
<XMarkIcon className="h-4 hover:bg-white dark:hover:bg-slate-600 rounded-full" />
<XMarkIcon className="h-4 hover:bg-white dark:hover:bg-gray-600 rounded-full" />
</button>
</div>
) : (
<div className="bg-white dark:text-white dark:bg-slate-700 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-slate-600 px-4 py-1.5 rounded-t-xl -ml-px">
<div className="bg-white dark:text-white dark:bg-gray-700 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1.5 rounded-t-xl -ml-px">
{isRename ? (
<input
autoFocus
@ -70,7 +70,7 @@ export default function TabComponent({ selected, flow, onClick }) {
}}
>
{flows.length > 1 && (
<XMarkIcon className="h-4 hover:bg-gray-100 dark:hover:bg-slate-600 rounded-full" />
<XMarkIcon className="h-4 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-full" />
)}
</button>
</div>
@ -78,10 +78,10 @@ export default function TabComponent({ selected, flow, onClick }) {
) : (
<div className="h-full py-1.5 flex justify-center items-center">
<button
className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-x-gray-300 dark:border-x-slate-600 dark:text-white -ml-px"
className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-x-gray-300 dark:border-x-gray-600 dark:text-white -ml-px"
onClick={onClick}
>
<PlusIcon className="h-5 rounded-full hover:bg-white dark:hover:bg-slate-600" />
<PlusIcon className="h-5 rounded-full hover:bg-white dark:hover:bg-gray-600" />
</button>
</div>
)}

2
space_flow/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
View file

@ -14,7 +14,7 @@ export default function TabsManagerComponent() {
return (
<div className="h-full w-full flex flex-col">
<div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-slate-800 px-2">
<div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-gray-800 px-2">
{flows.map((flow, index) => {
return (
<TabComponent

4
space_flow/src/pages/FlowPage/index.tsx
View file

@ -174,8 +174,8 @@ export default function FlowPage({ flow }) {
onDragOver={onDragOver}
onDrop={onDrop}
>
<Background className="dark:bg-slate-900"/>
<Controls className="[&>button]:text-black [&>button]:dark:bg-slate-800 hover:[&>button]:dark:bg-slate-700 [&>button]:dark:text-slate-400 [&>button]:dark:fill-slate-400 [&>button]:dark:border-slate-600">
<Background className="dark:bg-gray-900"/>
<Controls className="[&>button]:text-black [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600">
<ControlButton
onClick={() => uploadFlow()}
>