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 /> <ExtraSidebar />
{/* Main area */} {/* 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 */} {/* Primary column */}
<div className="w-full h-full"> <div className="w-full h-full">
<TabsManagerComponent></TabsManagerComponent> <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 [enabled, setEnabled] = useState(false);
const {types, deleteNode} = useContext(typesContext); const {types, deleteNode} = useContext(typesContext);
return ( 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="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-slate-800 dark:text-white dark:border-b-slate-700 border-b "> <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"> <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,7 +35,7 @@ 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-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={{ style={{
borderColor: nodeColors[types[data.type]], 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); const { types } = useContext(typesContext);
return ( return (
<div <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]] }} style={{ color: nodeColors[types[data.type]] }}
> >
<Tooltip title="Prefix: str"> <Tooltip title="Prefix: str">
@ -24,7 +24,7 @@ export default function ChatInputNode({ data }) {
} }
position={Position.Left} position={Position.Left}
id={"str|Prefix|" + data.id} 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={{ style={{
borderColor: nodeColors[types[data.type]], borderColor: nodeColors[types[data.type]],
}} }}
@ -38,7 +38,7 @@ export default function ChatInputNode({ data }) {
} }
position={Position.Right} position={Position.Right}
id={"str|str|" + data.id} 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={{ style={{
borderColor: nodeColors[types[data.type]], 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 }) { export default function ChatOutputNode({ data }) {
const {types} = useContext(typesContext); const {types} = useContext(typesContext);
return ( 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"> <Tooltip title="Message: str">
<Handle <Handle
type="target" type="target"
isValidConnection={(connection) => isValidConnection(data,connection)} isValidConnection={(connection) => isValidConnection(data,connection)}
position={Position.Left} position={Position.Left}
id={"str|output|"+data.id} 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={{ style={{
borderColor: nodeColors[types[data.type]], 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; let disabled = reactFlowInstance?.getEdges().some((e) => (e.targetHandle === id)) ?? false;
return ( 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> <div className="text-sm truncate">{title}<span className="text-red-600">{required ? " *" : ""}</span></div>
<Tooltip title={tooltipTitle + (required ? " (required)" : "")}> <Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
@ -56,7 +56,7 @@ export default function ParameterComponent({
} }
className={ className={
(left ? "-ml-0.5 " : "-mr-0.5 ") + (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={{ style={{
borderColor: color, borderColor: color,

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

@ -16,8 +16,8 @@ export default function GenericNode({ data }) {
return ( 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">
<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 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"> <div className="w-full flex items-center truncate gap-4 text-lg">
<Icon <Icon
className="w-10 h-10 p-1 rounded" className="w-10 h-10 p-1 rounded"
@ -26,7 +26,7 @@ export default function GenericNode({ data }) {
<div className="truncate">{data.type}</div> <div className="truncate">{data.type}</div>
</div> </div>
<button onClick={() => {deleteNode(data.id)}}> <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> </button>
</div> </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 }) { export default function InputNode({ data }) {
const {types, deleteNode} = useContext(typesContext); const {types, deleteNode} = useContext(typesContext);
return ( 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"> <Tooltip title="Prefix: str">
<Handle <Handle
type="target" type="target"
@ -24,14 +24,14 @@ export default function InputNode({ data }) {
isValidConnection={(connection) => isValidConnection={(connection) =>
isValidConnection(data, 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={{ style={{
borderColor: nodeColors[types[data.type]], 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 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"> <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"
@ -62,7 +62,7 @@ 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-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={{ style={{
borderColor: nodeColors[types[data.type]], 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} /> <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 No new notifications
</div> </div>
} }

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

@ -20,9 +20,9 @@ export default function ExtraSidebar() {
<aside <aside
className={` ${ className={` ${
isStackedOpen ? "w-60" : "w-0 " 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"> <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"> <span className="text-gray-900 dark:text-white text-lg ml-2 font-semibold">
{extraNavigation.title} {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); const {dark, setDark} = useContext(darkContext);
return ( 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 */} {/* Logo area */}
<div className="static shrink-0"> <div className="static shrink-0">
<a <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"> <div className="w-20 h-full">
<nav <nav
aria-label="Sidebar" 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="flex flex-col h-full justify-between">
<div className="relative flex w-20 flex-col space-y-3 p-3"> <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" leaveTo="translate-y-96"
> >
<div className="w-[400px] absolute bottom-0 right-6"> <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="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-slate-700"> <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"> <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']}} /> <Bars3CenterLeftIcon className="h-8 w-8 mt-1" style={{color: nodeColors['chat']}} />
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" /> <XMarkIcon className="h-6 w-6 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
</button> </button>
</div> </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) => ( {chatHistory.map((c, i) => (
<div key={i}> <div key={i}>
{!c.isSend ? ( {!c.isSend ? (
@ -113,7 +113,7 @@ export default function Chat({flow, reactFlowInstance }) {
</div> </div>
) : ( ) : (
<div className="w-full text-start"> <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} {c.message}
</div> </div>
</div> </div>
@ -122,7 +122,7 @@ export default function Chat({flow, reactFlowInstance }) {
))} ))}
<div ref={ref}></div> <div ref={ref}></div>
</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"> <div className="relative w-full mt-1 rounded-md shadow-sm">
<input <input
onKeyDown={(event)=>{ onKeyDown={(event)=>{
@ -135,7 +135,7 @@ export default function Chat({flow, reactFlowInstance }) {
onChange={(e) => { onChange={(e) => {
setChatValue(e.target.value); 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..." placeholder="Send a message..."
/> />
<div className="absolute inset-y-0 right-0 flex items-center pr-3"> <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" leaveTo="translate-y-96"
> >
<div className="absolute bottom-0 right-6"> <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 <button
onClick={() => { onClick={() => {
setOpen(true); setOpen(true);

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

@ -13,7 +13,7 @@ export default function InputComponent({value, onChange, disabled}){
<input <input
type="text" type="text"
value={myValue} 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" placeholder="Type a text"
onChange={(e) => { onChange={(e) => {
setMyValue(e.target.value); 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"> <div className="w-full flex items-center gap-3">
<span <span
className={ 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" : "") (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); setEnabled(x);
}} }}
className={classNames( 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 " "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 <span
className={classNames( className={classNames(
enabled ? "translate-x-5" : "translate-x-0", 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 <span

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

@ -32,7 +32,7 @@ export default function TextAreaModal({value, setValue}){
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <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" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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"> <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<button <button
type="button" type="button"
@ -61,7 +61,7 @@ export default function TextAreaModal({value, setValue}){
</div> </div>
<div className="h-full w-full flex flex-col justify-center items-center"> <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="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 <ClipboardDocumentListIcon
className="h-6 w-6 text-blue-600" className="h-6 w-6 text-blue-600"
aria-hidden="true" aria-hidden="true"
@ -76,14 +76,14 @@ export default function TextAreaModal({value, setValue}){
</Dialog.Title> </Dialog.Title>
</div> </div>
</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="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"> <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-slate-700 dark:bg-slate-900 dark:text-white" value={myValue} onChange={(e) => {setMyValue(e.target.value); setValue(e.target.value)}}/> <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>
</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 <button
type="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" 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 }) => ( {({ open }) => (
<> <>
<div> <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"> <div className="flex gap-4">
<Icon className="w-6 text-gray-800 dark:text-white" /> <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"> <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> <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> </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> <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> </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> <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> </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> <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> </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> <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> </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 ? ( {flow ? (
!selected ? ( !selected ? (
<div <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} onClick={onClick}
> >
{flow.name} {flow.name}
@ -25,11 +25,11 @@ export default function TabComponent({ selected, flow, onClick }) {
removeFlow(flow.id); 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> </button>
</div> </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 ? ( {isRename ? (
<input <input
autoFocus autoFocus
@ -70,7 +70,7 @@ export default function TabComponent({ selected, flow, onClick }) {
}} }}
> >
{flows.length > 1 && ( {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> </button>
</div> </div>
@ -78,10 +78,10 @@ export default function TabComponent({ selected, flow, onClick }) {
) : ( ) : (
<div className="h-full py-1.5 flex justify-center items-center"> <div className="h-full py-1.5 flex justify-center items-center">
<button <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} 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> </button>
</div> </div>
)} )}

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

@ -14,7 +14,7 @@ export default function TabsManagerComponent() {
return ( return (
<div className="h-full w-full flex flex-col"> <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) => { {flows.map((flow, index) => {
return ( return (
<TabComponent <TabComponent

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

@ -174,8 +174,8 @@ export default function FlowPage({ flow }) {
onDragOver={onDragOver} onDragOver={onDragOver}
onDrop={onDrop} onDrop={onDrop}
> >
<Background className="dark:bg-slate-900"/> <Background className="dark:bg-gray-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"> <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 <ControlButton
onClick={() => uploadFlow()} onClick={() => uploadFlow()}
> >