fix: fixed the issue of incorrect background color of canvas node in …

…dark mode (#1830)
eosphoros-ai · Aug 14, 2024 · 145b255 · 145b255
2 parents a07676e + 9796bf9
commit 145b255
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 15 deletions.
diff --git a/web/components/flow/canvas-node.tsx b/web/components/flow/canvas-node.tsx
@@ -26,7 +26,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
   const { inputs, outputs, parameters, flow_type: flowType } = node;
   const [isHovered, setIsHovered] = useState(false);
   const reactFlow = useReactFlow();
-  
+
   function onHover() {
     setIsHovered(true);
   }
@@ -74,9 +74,9 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
   function renderOutput(data: IFlowNode) {
     if (flowType === 'operator' && outputs?.length > 0) {
       return (
-        <div className="bg-zinc-100 rounded p-2">
+        <div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2">
           <TypeLabel label="Outputs" />
-          <div className="text-sm flex flex-col space-y-3">
+          <div className="flex flex-col space-y-3">
             {outputs?.map((output, index) => (
               <NodeHandler key={`${data.id}_input_${index}`} node={data} data={output} type="source" label="outputs" index={index} />
             ))}
@@ -86,11 +86,9 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
     } else if (flowType === 'resource') {
       // resource nodes show output default
       return (
-        <div className="bg-zinc-100 rounded p-2">
+        <div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2">
           <TypeLabel label="Outputs" />
-          <div className="text-sm">
-            <NodeHandler key={`${data.id}_input_0`} node={data} data={data} type="source" label="outputs" index={0} />
-          </div>
+          <NodeHandler key={`${data.id}_input_0`} node={data} data={data} type="source" label="outputs" index={0} />
         </div>
       );
     }
@@ -126,7 +124,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
     >
       <div
         className={classNames(
-          'w-72 h-auto rounded-xl shadow-md px-2 py-4 border bg-white dark:bg-zinc-800 cursor-grab flex flex-col space-y-2 text-sm',
+          'w-80 h-auto rounded-xl shadow-md px-2 py-4 border bg-white dark:bg-zinc-800 cursor-grab flex flex-col space-y-2 text-sm',
           {
             'border-blue-500': node.selected || isHovered,
             'border-stone-400 dark:border-white': !node.selected && !isHovered,
@@ -144,9 +142,9 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
         </div>
 
         {inputs?.length > 0 && (
-          <div className="bg-zinc-100 rounded p-2">
+          <div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2">
             <TypeLabel label="Inputs" />
-            <div className="text-sm flex flex-col space-y-2">
+            <div className="flex flex-col space-y-2">
               {inputs?.map((input, index) => (
                 <NodeHandler key={`${node.id}_input_${index}`} node={node} data={input} type="target" label="inputs" index={index} />
               ))}
@@ -155,9 +153,9 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
         )}
 
         {parameters?.length > 0 && (
-          <div className="bg-zinc-100 rounded p-2">
+          <div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2">
             <TypeLabel label="Parameters" />
-            <div className="text-sm flex flex-col space-y-3 text-neutral-500">
+            <div className="flex flex-col space-y-3 text-neutral-500">
               {parameters?.map((parameter, index) => (
                 <NodeParamHandler key={`${node.id}_param_${index}`} node={node} data={parameter} label="parameters" index={index} />
               ))}

diff --git a/web/components/flow/node-handler.tsx b/web/components/flow/node-handler.tsx
@@ -101,7 +101,7 @@ const NodeHandler: React.FC<NodeHandlerProps> = ({ node, data, type, label, inde
         isValidConnection={(connection) => isValidConnection(connection)}
       />
       <Typography
-        className={classNames('bg-white w-full px-2 py-1 rounded text-neutral-500',{
+        className={classNames('bg-white dark:bg-[#232734] w-full px-2 py-1 rounded text-neutral-500',{
           'text-right': label === 'outputs',
         })}
       >

diff --git a/web/components/flow/node-renderer/date-picker.tsx b/web/components/flow/node-renderer/date-picker.tsx
@@ -11,11 +11,21 @@ type Props = {
 
 export const RenderDatePicker = (params: Props) => {
   const { data, defaultValue, onChange } = params;
+  console.log('data', data);
+
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   const onChangeDate: DatePickerProps['onChange'] = (date, dateString) => {
     onChange(dateString);
   };
 
-  return <DatePicker {...attr} className="w-full" defaultValue={dayjs(defaultValue)} onChange={onChangeDate} />;
+  return (
+    <DatePicker
+      {...attr}
+      className="w-full"
+      placeholder="please select a date"
+      defaultValue={defaultValue ? dayjs(defaultValue) : null}
+      onChange={onChangeDate}
+    />
+  );
 };
diff --git a/web/components/flow/node-renderer/time-picker.tsx b/web/components/flow/node-renderer/time-picker.tsx
@@ -17,5 +17,5 @@ export const RenderTimePicker = (params: TextAreaProps) => {
     onChange(timeString);
   };
 
-  return <TimePicker {...attr} className="w-full" defaultValue={defaultValue} onChange={onChangeTime} />;
+  return <TimePicker {...attr} className="w-full" defaultValue={defaultValue} onChange={onChangeTime} placeholder="please select a moment" />;
 };