windmill-components 1.122.0 → 1.138.2

package/package/components/EditorTheme.svelte

@@ -0,0 +1,194 @@
+<script>import { editor as meditor } from 'monaco-editor/esm/vs/editor/editor.api';
+import { onMount } from 'svelte';
+import DarkModeObserver from './DarkModeObserver.svelte';
+import github from 'svelte-highlight/styles/github';
+import nord from 'svelte-highlight/styles/nord';
+import { each } from 'chart.js/helpers';
+import { Chart } from 'chart.js';
+meditor.defineTheme('nord', {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [
+        {
+            background: '2E3440',
+            token: ''
+        },
+        {
+            foreground: '616e88',
+            token: 'comment'
+        },
+        {
+            foreground: 'a3be8c',
+            token: 'string'
+        },
+        {
+            foreground: 'b48ead',
+            token: 'constant.numeric'
+        },
+        {
+            foreground: '81a1c1',
+            token: 'constant.language'
+        },
+        {
+            foreground: '81a1c1',
+            token: 'keyword'
+        },
+        {
+            foreground: '81a1c1',
+            token: 'storage'
+        },
+        {
+            foreground: '81a1c1',
+            token: 'storage.type'
+        },
+        {
+            foreground: '8fbcbb',
+            token: 'entity.name.class'
+        },
+        {
+            foreground: '8fbcbb',
+            fontStyle: '  bold',
+            token: 'entity.other.inherited-class'
+        },
+        {
+            foreground: '88c0d0',
+            token: 'entity.name.function'
+        },
+        {
+            foreground: '81a1c1',
+            token: 'entity.name.tag'
+        },
+        {
+            foreground: '8fbcbb',
+            token: 'entity.other.attribute-name'
+        },
+        {
+            foreground: '88c0d0',
+            token: 'support.function'
+        },
+        {
+            foreground: 'f8f8f0',
+            background: 'f92672',
+            token: 'invalid'
+        },
+        {
+            foreground: 'f8f8f0',
+            background: 'ae81ff',
+            token: 'invalid.deprecated'
+        },
+        {
+            foreground: 'b48ead',
+            token: 'constant.color.other.rgb-value'
+        },
+        {
+            foreground: 'ebcb8b',
+            token: 'constant.character.escape'
+        },
+        {
+            foreground: '8fbcbb',
+            token: 'variable.other.constant'
+        }
+    ],
+    colors: {
+        'editor.foreground': '#D8DEE9',
+        'editor.background': '#2E3440',
+        'editor.selectionBackground': '#434C5ECC',
+        'editor.lineHighlightBackground': '#3B4252',
+        'editorCursor.foreground': '#D8DEE9',
+        'editorWhitespace.foreground': '#434C5ECC'
+    }
+});
+meditor.defineTheme('myTheme', {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+        'editorLineNumber.foreground': '#999',
+        'editorGutter.background': '#F9FAFB'
+    }
+});
+let darkMode = false;
+function onThemeChange() {
+    if (document.documentElement.classList.contains('dark')) {
+        meditor.setTheme('nord');
+        darkMode = true;
+        each(Chart.instances, (instance) => {
+            instance.options = {
+                scales: {
+                    y: {
+                        ticks: {
+                            color: '#e0e7ed'
+                        },
+                        grid: {
+                            color: '#4a5568'
+                        }
+                    },
+                    x: {
+                        ticks: {
+                            color: '#e0e7ed'
+                        },
+                        grid: {
+                            color: '#4a5568'
+                        }
+                    }
+                },
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#e0e7ed'
+                        }
+                    }
+                }
+            };
+            instance.update();
+        });
+    }
+    else {
+        meditor.setTheme('myTheme');
+        darkMode = false;
+        each(Chart.instances, (instance) => {
+            instance.options = {
+                scales: {
+                    y: {
+                        ticks: {
+                            color: '#4a5568'
+                        },
+                        grid: {
+                            color: '#e0e7ed'
+                        }
+                    },
+                    x: {
+                        ticks: {
+                            color: '#4a5568'
+                        },
+                        grid: {
+                            color: '#e0e7ed'
+                        }
+                    }
+                },
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#4a5568'
+                        }
+                    }
+                }
+            };
+            instance.update();
+        });
+    }
+}
+onMount(() => {
+    onThemeChange();
+});
+</script>
+
+<DarkModeObserver on:change={onThemeChange} />
+
+<svelte:head>
+	{#if darkMode}
+		{@html nord}
+	{:else}
+		{@html github}
+	{/if}
+</svelte:head>

package/package/components/EditorTheme.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EditorThemeProps = typeof __propDef.props;
+export type EditorThemeEvents = typeof __propDef.events;
+export type EditorThemeSlots = typeof __propDef.slots;
+export default class EditorTheme extends SvelteComponentTyped<EditorThemeProps, EditorThemeEvents, EditorThemeSlots> {
+}
+export {};

package/package/components/FieldHeader.svelte

@@ -22,15 +22,15 @@ export let prettify = false;
 	<Required {required} class="!ml-0" />
 
 	{#if displayType}
-		{#if format && format != ''}
-			<span class="text-sm italic ml-1 text-indigo-800 dark:text-indigo-400">
-				({format})
+		{#if format && !format.startsWith('resource')}
+			<span class="text-xs italic ml-2 text-tertiary dark:text-indigo-400">
+				{format}
 			</span>
 		{:else}
-			<span class="text-sm italic ml-1 text-indigo-800 dark:text-indigo-400">
-				({type ?? 'any'}{contentEncoding && contentEncoding != ''
+			<span class="text-xs italic ml-2 text-tertiary dark:text-indigo-400">
+				{type ?? 'any'}{contentEncoding && contentEncoding != ''
 					? `, encoding: ${contentEncoding}`
-					: ''})
+					: ''}
 			</span>
 		{/if}
 	{/if}

package/package/components/FlowBuilder.svelte

@@ -56,6 +56,7 @@ async function saveDraft() {
         const flow = cleanInputs($flowStore);
         $dirtyStore = false;
         localStorage.removeItem('flow');
+        localStorage.removeItem(`flow-${flow.path}`);
         if (initialPath == '') {
             await FlowService.createFlow({
                 workspace: $workspaceStore,
@@ -65,6 +66,7 @@ async function saveDraft() {
                     description: flow.description ?? '',
                     value: flow.value,
                     schema: flow.schema,
+                    tag: flow.tag,
                     draft_only: true
                 }
             });
@@ -100,6 +102,7 @@ async function saveFlow() {
         $dirtyStore = false;
         if (initialPath === '') {
             localStorage.removeItem('flow');
+            localStorage.removeItem(`flow-${flow.path}`);
             await FlowService.createFlow({
                 workspace: $workspaceStore,
                 requestBody: {
@@ -124,7 +127,8 @@ async function saveFlow() {
                     summary: flow.summary,
                     description: flow.description ?? '',
                     value: flow.value,
-                    schema: flow.schema
+                    schema: flow.schema,
+                    tag: flow.tag
                 }
             });
             const scheduleExists = await ScheduleService.existsSchedule({
@@ -360,7 +364,7 @@ if (initialPath != '') {
 						>
 							<Badge
 								color="gray"
-								class="center-center !bg-gray-300 !text-gray-600 !h-[28px]  !w-[70px] rounded-r-none"
+								class="center-center !bg-gray-300 !text-tertiary dark:!bg-gray-700 dark:!text-gray-300 !h-[28px]  !w-[70px] rounded-r-none"
 							>
 								<Pen size={12} class="mr-2" /> Path
 							</Badge>

package/package/components/FlowGraphViewer.svelte

@@ -63,9 +63,7 @@ let codeViewer;
 </Drawer>
 <div class="grid grid-cols-3 w-full h-full">
 	<div
-		class="{noSide
-			? 'col-span-3'
-			: 'sm:col-span-2 col-span-3'} w-full border border-gray-400 max-h-full"
+		class="{noSide ? 'col-span-3' : 'sm:col-span-2 col-span-3'} w-full border max-h-full"
 		class:overflow-auto={overflowAuto}
 	>
 		<FlowGraph
@@ -83,7 +81,7 @@ let codeViewer;
 		>
 			{#if stepDetail == undefined}
 				<div>
-					<p class="font-medium text-gray-600 text-center pt-4 pb-8">
+					<p class="font-medium text-tertiary text-center pt-4 pb-8">
 						Click on a step to see its details
 					</p>
 					<h3 class="mb-2 font-semibold">Flow Inputs</h3>
@@ -92,10 +90,10 @@ let codeViewer;
 			{:else if stepDetail == 'Input'}
 				<SchemaViewer schema={flow?.schema} />
 			{:else if stepDetail == 'Result'}
-				<p class="font-medium text-gray-600 text-center pt-4 pb-8"> End of the flow </p>
+				<p class="font-medium text-tertiary text-center pt-4 pb-8"> End of the flow </p>
 			{:else if typeof stepDetail != 'string' && stepDetail.value}
 				<div class="">
-					<div class="sticky top-0 bg-white w-full flex items-center py-2">
+					<div class="sticky top-0 bg-surface w-full flex items-center py-2">
 						{#if stepDetail.id}
 							<Badge color="indigo">
 								{stepDetail.id}
@@ -133,7 +131,7 @@ let codeViewer;
 					{/if}
 				</div>
 				{#if stepDetail.value.type == 'identity'}
-					<p class="font-medium text-gray-600 text-center pt-4 pb-8">
+					<p class="font-medium text-tertiary text-center pt-4 pb-8">
 						An identity step returns its inputs as outputs
 					</p>
 				{:else if stepDetail.value.type == 'rawscript'}
@@ -181,7 +179,7 @@ let codeViewer;
 					{/if}
 				{:else if stepDetail.value.type == 'forloopflow'}
 					<div>
-						<p class="font-medium text-gray-600 pb-2"> Iterator expression: </p>
+						<p class="font-medium text-tertiary pb-2"> Iterator expression: </p>
 						{#if stepDetail.value.iterator.type == 'static'}
 							<ObjectViewer json={stepDetail.value.iterator.value} />
 						{:else}
@@ -191,18 +189,18 @@ let codeViewer;
 						{/if}
 					</div>
 				{:else if stepDetail.value.type == 'branchall'}
-					<p class="font-medium text-gray-600 text-center pt-4 pb-8">
+					<p class="font-medium text-tertiary text-center pt-4 pb-8">
 						All branches will run, regardless of the inputs
 					</p>
 				{:else if stepDetail.value.type == 'branchone'}
-					<p class="font-medium text-gray-600 text-center pt-4 pb-8">
+					<p class="font-medium text-tertiary text-center pt-4 pb-8">
 						Only one branch will run based on a predicate
 					</p>
 				{:else if stepDetail.value.type == 'flow'}
 					<FlowPathViewer noSide path={stepDetail.value.path} />
 				{/if}
 			{:else}
-				<p class="font-medium text-gray-600 text-center pt-4 pb-8">
+				<p class="font-medium text-tertiary text-center pt-4 pb-8">
 					Step {stepDetail} selected
 				</p>
 			{/if}

package/package/components/FlowJobResult.svelte

@@ -8,16 +8,17 @@ export let noBorder = false;
 export let loading;
 export let filename = undefined;
 export let jobId = undefined;
+export let workspaceId = undefined;
 </script>
 
 <div
 	class:border={!noBorder}
 	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow border-gray-400 h-full max-h-screen"
 >
-	<div class="bg-white {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
-		<span class="text-gray-500">Result</span>
+	<div class="bg-surface {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
+		<span class="text-tertiary">Result</span>
 		{#if result}
-			<DisplayResult {filename} {result} />
+			<DisplayResult {workspaceId} {jobId} {filename} {result} />
 		{:else if loading}
 			<Loader2 class="animate-spin" />
 		{:else}

package/package/components/FlowJobResult.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         loading: any;
         filename?: string | undefined;
         jobId?: string | undefined;
+        workspaceId?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/FlowMetadata.svelte

@@ -21,24 +21,26 @@ let scheduleEditor;
 
 <ScheduleEditor bind:this={scheduleEditor} />
 
-<div class="rounded-md p-3 bg-gray-50 shadow-sm sm:text-sm md:text-base" style="min-height: 150px;">
+<div
+	class="rounded-md p-3 bg-surface-secondary shadow-sm sm:text-sm md:text-base"
+	style="min-height: 150px;"
+>
 	<JobStatus {job} />
 	<div>
-		<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
-			class="mx-2 text-2xs text-gray-600"
-		>
+		<Icon class="text-secondary" data={faClock} scale={SMALL_ICON_SCALE} />
+		<span class="mx-2 text-2xs text-secondary">
 			{#if job['success'] != undefined}
 				Received job: {displayDate(job.created_at ?? '')}
 			{:else}
 				{#key time}
 					Received job {displayDaysAgo(job.created_at ?? '')}
 				{/key}
-			{/if}</span
-		>
+			{/if}
+		</span>
 	</div>
 	{#if job && 'started_at' in job && job.started_at}
 		<div>
-			<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+			<Icon class="text-secondary" data={faClock} scale={SMALL_ICON_SCALE} /><span class="mx-2">
 				{#if job['success'] != undefined}
 					Started: {displayDate(job.started_at ?? '')}
 				{:else}
@@ -50,7 +52,7 @@ let scheduleEditor;
 	{/if}
 	{#if job && job['mem_peak']}
 		<div>
-			<Icon class="text-gray-700" data={faMemory} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+			<Icon class="text-secondary" data={faMemory} scale={SMALL_ICON_SCALE} /><span class="mx-2">
 				Mem peak: {(job['mem_peak'] / 1024).toPrecision(5)}MB</span
 			>
 		</div>
@@ -58,18 +60,18 @@ let scheduleEditor;
 	<div>
 		{#if job && job.parent_job}
 			{#if job.is_flow_step}
-				<Icon class="text-gray-700" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
+				<Icon class="text-secondary" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
 					class="mx-2"
 				>
 					Step of flow <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
 				>
 			{:else}
-				<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+				<Icon class="text-secondary" data={faRobot} scale={SMALL_ICON_SCALE} /><span class="mx-2">
 					Triggered by parent <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
 				>
 			{/if}
 		{:else if job && job.schedule_path}
-			<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
+			<Icon class="text-secondary" data={faCalendar} scale={SMALL_ICON_SCALE} />
 			<span
 				>Triggered by the schedule: <button
 					class="break-words text-sm text-blue-600 font-normal"
@@ -84,21 +86,21 @@ let scheduleEditor;
 			{@const isScript = job?.job_kind === 'script'}
 			{@const viewHref = `${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
 			<div>
-				<Icon class="text-gray-700" data={faScroll} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+				<Icon class="text-secondary" data={faScroll} scale={SMALL_ICON_SCALE} /><span class="mx-2">
 					<a href={viewHref}>{isScript ? job?.script_hash : job?.script_path}</a>
 				</span>
 			</div>
 		{/if}
 
 		<div>
-			<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+			<Icon class="text-secondary" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
 				By {job.created_by}
 				{#if job.permissioned_as !== `u/${job.created_by}` && job.permissioned_as != job.created_by}but
 					permissioned as {job.permissioned_as}{/if}
 			</span>
 		</div>
 	</div>
-	<div class="text-gray-700 text-2xs pt-2">
+	<div class="text-secondary text-2xs pt-2">
 		run id: <a href={`/run/${job.id}?workspace=${job.workspace_id}`}>{job.id}</a>
 	</div>
 </div>

package/package/components/FlowPreviewContent.svelte

@@ -102,14 +102,14 @@ let inputLibraryDrawer;
 	</DrawerContent>
 </Drawer>
 
-<div class="flex divide-y flex-col space-y-2 h-screen bg-white px-6 py-2 w-full">
+<div class="flex divide-y flex-col space-y-2 h-screen bg-surface px-6 py-2 w-full">
 	<div class="flex flex-row justify-between w-full items-center gap-x-2">
 		<div class="w-8">
 			<button
 				on:click={() => dispatch('close')}
-				class="hover:bg-gray-200 bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center transition-all"
+				class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
 			>
-				<Icon data={faClose} class="text-gray-500" />
+				<Icon data={faClose} class="text-secondary" />
 			</button>
 		</div>
 
@@ -184,7 +184,7 @@ let inputLibraryDrawer;
 			{#if jobId}
 				<FlowStatusViewer bind:flowState={$flowStateStore} {jobId} bind:job />
 			{:else}
-				<div class="italic text-gray-500 h-full grow"> Flow status will be displayed here </div>
+				<div class="italic text-tertiary h-full grow"> Flow status will be displayed here </div>
 			{/if}
 		</div>
 	</div>

package/package/components/FlowStatusViewer.svelte

@@ -169,20 +169,21 @@ function onJobsLoaded(mod, job) {
 {#if job}
 	<div class="flow-root w-full space-y-4">
 		{#if innerModules.length > 0}
-			<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Flow result</h3>
+			<h3 class="text-md leading-6 font-bold text-primay border-b pb-2">Flow result</h3>
 		{/if}
 		{#if isListJob}
 			{#if render}
-				<div class="w-full h-full border border-gray-600 bg-white p-1">
-					<DisplayResult result={jobResults} />
+				<div class="w-full h-full border border-gray-600 bg-surface p-1">
+					<DisplayResult workspaceId={job?.workspace_id} {jobId} result={jobResults} />
 				</div>
 			{/if}
 		{:else if render}
-			<div class={innerModules.length > 0 ? 'border border-gray-400 shadow p-2' : ''}>
+			<div class={innerModules.length > 0 ? 'border rounded-md shadow p-2' : ''}>
 				<FlowPreviewStatus {job} />
 				{#if `result` in job}
 					<div class="w-full h-full">
 						<FlowJobResult
+							workspaceId={job?.workspace_id}
 							jobId={job?.id}
 							loading={job['running'] == true}
 							result={job.result}
@@ -204,7 +205,7 @@ function onJobsLoaded(mod, job) {
 								<div
 									><span class="inline-flex gap-1"
 										><Badge color="indigo">{mod.id}</Badge>
-										<span class="font-medium text-gray-900">
+										<span class="font-medium text-primary">
 											{#if !emptyString(rawMod?.summary)}
 												{rawMod?.summary ?? ''}
 											{:else if rawMod?.value.type == 'script'}
@@ -233,7 +234,7 @@ function onJobsLoaded(mod, job) {
 		{/if}
 		<div class={selected == 'graph' ? 'hidden' : ''}>
 			{#if isListJob}
-				<h3 class="text-md leading-6 font-bold text-gray-600 border-b mb-4">
+				<h3 class="text-md leading-6 font-bold text-tertiary border-b mb-4">
 					Embedded flows: ({flowJobIds?.flowJobs.length} items)
 				</h3>
 				{#each flowJobIds?.flowJobs ?? [] as loopJobId, j}
@@ -316,23 +317,23 @@ function onJobsLoaded(mod, job) {
 				{/each}
 			{:else if innerModules.length > 0}
 				<ul class="w-full">
-					<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4 py-2">
+					<h3 class="text-md leading-6 font-bold text-primary border-b mb-4 py-2">
 						Step-by-step results
 					</h3>
 
 					{#each innerModules as mod, i}
 						{#if render}
 							<div class="line w-8 h-10" />
-							<h3 class="text-gray-500 mb-2 w-full">
+							<h3 class="text-tertiary mb-2 w-full">
 								{#if job?.raw_flow?.modules && i < job?.raw_flow?.modules.length}
 									Step
-									<span class="font-medium text-gray-900">
+									<span class="font-medium text-primary">
 										{i + 1}
 									</span>
 									out of
-									<span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
+									<span class="font-medium text-primary">{job?.raw_flow?.modules.length}</span>
 									{#if job.raw_flow?.modules[i]?.summary}
-										: <span class="font-medium text-gray-900">
+										: <span class="font-medium text-primary">
 											{job.raw_flow?.modules[i]?.summary ?? ''}
 										</span>
 									{/if}
@@ -342,7 +343,7 @@ function onJobsLoaded(mod, job) {
 							</h3>
 							<div class="line w-8 h-10" />
 						{/if}
-						<li class="w-full border border-gray-600 p-6 space-y-2 bg-blue-50/50">
+						<li class="w-full border p-6 space-y-2 bg-blue-50/50 dark:bg-frost-900/50">
 							{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
 								{#if job.raw_flow?.modules[i]?.value.type == 'flow'}
 									<svelte:self
@@ -386,8 +387,8 @@ function onJobsLoaded(mod, job) {
 	{#if render}
 		{#if job.raw_flow && !isListJob}
 			<div class="{selected != 'graph' ? 'hidden' : ''} mt-4">
-				<div class="grid grid-cols-3 border border-gray-300">
-					<div class="col-span-2 bg-gray-50">
+				<div class="grid grid-cols-3 border">
+					<div class="col-span-2 bg-surface-secondary">
 						<div class="flex flex-col">
 							{#each Object.values(retry_status) as count}
 								<span class="text-sm">
@@ -426,6 +427,7 @@ function onJobsLoaded(mod, job) {
 							{@const node = localFlowModuleStates[selectedNode]}
 							{#if selectedNode == 'end'}
 								<FlowJobResult
+									workspaceId={job?.workspace_id}
 									jobId={job?.id}
 									filename={job.id}
 									loading={job['running']}
@@ -447,7 +449,7 @@ function onJobsLoaded(mod, job) {
 									<ModuleStatus type={node.type} scheduled_for={node['scheduled_for']} />
 									{#if node.job_id}
 										<div class="truncate"
-											><div class=" text-gray-900 whitespace-nowrap truncate">
+											><div class=" text-primary whitespace-nowrap truncate">
 												<span class="font-bold">Job Id</span>
 												<a
 													rel="noreferrer"
@@ -465,6 +467,7 @@ function onJobsLoaded(mod, job) {
 								</div>
 
 								<FlowJobResult
+									workspaceId={job?.workspace_id}
 									jobId={job?.id}
 									loading={job['running'] == true}
 									noBorder
@@ -473,12 +476,12 @@ function onJobsLoaded(mod, job) {
 									logs={node.logs ?? ''}
 								/>
 							{:else}
-								<p class="p-2 text-gray-600 italic"
+								<p class="p-2 text-tertiary italic"
 									>The execution of this node has no information attached to it. The job likely did
 									not run yet</p
 								>
 							{/if}
-						{:else}<p class="p-2 text-gray-600 italic">Select a node to see its details here</p
+						{:else}<p class="p-2 text-tertiary italic">Select a node to see its details here</p
 							>{/if}
 					</div>
 				</div>

package/package/components/FlowStatusWaitingForEvents.svelte

@@ -22,7 +22,7 @@ async function getDefaultArgs() {
 }
 </script>
 
-<div class="w-full h-full mt-2 text-sm text-gray-600">
+<div class="w-full h-full mt-2 text-sm text-tertiary">
 	<p>Waiting to be resumed</p>
 	<div>
 		{#if is_owner}