From 290516179e7fad236aee6372facf2673dd9fa50b Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 14 Jul 2024 09:43:18 +0200
Subject: [PATCH] nit light mode flow style

---
 .../settingsPanel/DecisionTreeGraphNode.svelte |  4 ++--
 .../decisionTree/DecisionTreePreview.svelte    | 11 +++++++++--
 .../components/flows/map/VirtualItem.svelte    |  7 +++----
 .../src/lib/components/graph/FlowGraph.svelte  | 18 ++++++++++--------
 frontend/src/lib/components/graph/util.ts      |  6 ++++--
 5 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
index b827571f2c..4ab3578b41 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
@@ -15,7 +15,7 @@
 	export let canDelete: boolean = true
 	export let canAddBranch: boolean = true
 	export let index: number
-
+	export let darkMode: boolean
 	let open: boolean = false
 
 	const dispatch = createEventDispatcher<{
@@ -39,7 +39,7 @@
 			selected ? 'outline outline-2 outline-offset-2 outline-gray-600' : '',
 			'flex flex-row gap-2 items-center justify-between'
 		)}
-		style="width: 275px; height: 34px; background-color: {getStateColor(undefined)};"
+		style="width: 275px; height: 34px; background-color: {getStateColor(undefined, darkMode)};"
 		on:click={() => {
 			selected = true
 			dispatch('select', node.id)
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte
index c9b808d166..9408962449 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte
@@ -23,6 +23,7 @@
 	import { createEdge, createNode } from './nodeHelpers'
 	import type { AppViewerContext } from '$lib/components/apps/types'
 	import { deleteGridItem } from '../../appUtils'
+	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
 
 	export let nodes: DecisionTreeNode[]
 	export let rebuildOnChange: any = undefined
@@ -34,6 +35,8 @@
 	let edges: UserEdgeType[] = []
 	let scroll = false
 
+	let darkMode = false
+
 	const dispatch = createEventDispatcher()
 
 	const { selectedNodeId } = getContext<{
@@ -304,7 +307,8 @@
 									node: graphNode,
 									canDelete: !(graphNode.next.length > 1 && parentIds.length > 1),
 									canAddBranch: !cannotAddBranch,
-									index
+									index,
+									darkMode
 								},
 								cb: (e: string, detail: any) =>
 									nodeCallbackHandler(e, detail, graphNode, parentIds, false)
@@ -365,7 +369,8 @@
 										!cannotAddBranch &&
 										(graphNode.next.length == 1 || !parentIds.includes('start')),
 									canAddBranch: !cannotAddBranch,
-									index
+									index,
+									darkMode
 								},
 								cb: (e: string, detail: any) =>
 									nodeCallbackHandler(e, detail, graphNode, parentIds, false)
@@ -473,6 +478,8 @@
 	}
 </script>
 
+<DarkModeObserver bind:darkMode />
+
 {#if mounted}
 	<Svelvet
 		download={false}
diff --git a/frontend/src/lib/components/flows/map/VirtualItem.svelte b/frontend/src/lib/components/flows/map/VirtualItem.svelte
index 7003654d60..155a70903e 100644
--- a/frontend/src/lib/components/flows/map/VirtualItem.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItem.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Badge } from '$lib/components/common'
-	import type { FlowModule, FlowStatusModule } from '$lib/gen'
+	import type { FlowModule } from '$lib/gen'
 	import { classNames } from '$lib/utils'
 	import { ClipboardCopy, ExternalLink, Wand2, X } from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
@@ -9,7 +9,6 @@
 	import { copilotInfo } from '$lib/stores'
 	import Menu from '$lib/components/common/menu/Menu.svelte'
 	import InsertTriggerButton from './InsertTriggerButton.svelte'
-	import { getStateColor } from '$lib/components/graph'
 
 	export let label: string
 	export let modules: FlowModule[] | undefined
@@ -24,7 +23,7 @@
 	export let center = true
 	export let disableAi: boolean = false
 	export let wrapperNode: FlowModule | undefined = undefined
-	export let borderStatus: FlowStatusModule['type'] | undefined = undefined
+	export let borderColor: string | undefined = undefined
 
 	const dispatch = createEventDispatcher<{
 		insert: {
@@ -82,7 +81,7 @@
 	id={`flow-editor-virtual-${label}`}
 >
 	<div
-		style={borderStatus ? `border-color: ${getStateColor(borderStatus)}` : ''}
+		style={borderColor ? `border-color: ${borderColor};` : ''}
 		class="flex gap-1 justify-between {center
 			? 'items-center'
 			: 'items-baseline'} w-full overflow-hidden rounded-sm border p-2 text-2xs module text-primary border-gray-400 dark:border-gray-600"
diff --git a/frontend/src/lib/components/graph/FlowGraph.svelte b/frontend/src/lib/components/graph/FlowGraph.svelte
index e31b4a6110..c352402952 100644
--- a/frontend/src/lib/components/graph/FlowGraph.svelte
+++ b/frontend/src/lib/components/graph/FlowGraph.svelte
@@ -88,6 +88,8 @@
 
 	let oldRebuildOnChange = rebuildOnChange ? JSON.parse(JSON.stringify(rebuildOnChange)) : undefined
 
+	let darkMode = false
+
 	function triggerRebuild() {
 		if (!deepEqual(oldRebuildOnChange, rebuildOnChange)) {
 			oldRebuildOnChange = JSON.parse(JSON.stringify(rebuildOnChange))
@@ -125,7 +127,7 @@
 					undefined,
 					'Input',
 					undefined,
-					success == undefined ? undefined : success ? 'Success' : 'Failure'
+					undefined
 				)
 			)
 
@@ -329,7 +331,7 @@
 						branchable,
 						retries: flowModuleStates?.[mod.id]?.retries,
 						duration_ms: flowModuleStates?.[mod.id]?.duration_ms,
-						bgColor: getStateColor(type),
+						bgColor: getStateColor(type, darkMode),
 						annotation: annotation,
 						modules,
 						moving,
@@ -716,9 +718,9 @@
 
 		let bgColor
 		if (module_status) {
-			bgColor = getStateColor(module_status)
+			bgColor = getStateColor(module_status, darkMode)
 		} else {
-			bgColor = document.documentElement.classList.contains('dark') ? '#2e3440' : '#dfe6ee'
+			bgColor = darkMode ? '#2e3440' : '#dfe6ee'
 		}
 		return {
 			type: 'node',
@@ -737,7 +739,9 @@
 						insertable,
 						modules,
 						bgColor,
-						borderStatus,
+						borderColor: borderStatus
+							? getStateColor(borderStatus, darkMode) + (!darkMode ? '; border-width: 3px' : '')
+							: undefined,
 						selected: $selectedId == label,
 						index,
 						selectable,
@@ -793,7 +797,7 @@
 						label,
 						insertable: false,
 						modules: undefined,
-						bgColor: getStateColor(flowModuleStates?.[mod.id]?.type),
+						bgColor: getStateColor(flowModuleStates?.[mod.id]?.type, darkMode),
 						selected: $selectedId == mod.id,
 						index: 0,
 						selectable: true,
@@ -824,8 +828,6 @@
 	onMount(() => {
 		onThemeChange()
 	})
-
-	let darkMode = false
 </script>
 
 <DarkModeObserver bind:darkMode on:change={onThemeChange} />
diff --git a/frontend/src/lib/components/graph/util.ts b/frontend/src/lib/components/graph/util.ts
index 155c9c2700..0c870dad16 100644
--- a/frontend/src/lib/components/graph/util.ts
+++ b/frontend/src/lib/components/graph/util.ts
@@ -16,8 +16,10 @@ export function* createIdGenerator(): Generator<number, number, unknown> {
 	}
 }
 
-export function getStateColor(state: FlowStatusModule['type'] | undefined): string {
-	const isDark = document.documentElement.classList.contains('dark')
+export function getStateColor(
+	state: FlowStatusModule['type'] | undefined,
+	isDark: boolean
+): string {
 	switch (state) {
 		case 'Success':
 			return isDark ? '#059669' : 'rgb(193, 255, 216)'