windmill-components 1.122.0 → 1.138.2

package/package/components/jobs/JobDetail.svelte

@@ -42,7 +42,7 @@ function endedDate(started_at, duration_ms) {
 
 <ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
 
-<div class="border border-gray-400 rounded py-4">
+<div class="border rounded py-4">
 	<div class="grid grid-cols-1 lg:grid-cols-4 w-full gap-4">
 		<div class="flex-col col-span-2">
 			<div class="flex flex-row text-sm">
@@ -53,14 +53,14 @@ function endedDate(started_at, duration_ms) {
 						{#if 'success' in job && job.success}
 							{#if job.is_skipped}
 								<Icon
-									class="text-green-600"
+									class="text-green-600 dark:text-green-400"
 									data={faFastForward}
 									scale={SMALL_ICON_SCALE}
 									label="Job completed successfully but was skipped"
 								/>
 							{:else}
 								<Icon
-									class="text-green-600"
+									class="text-green-600 dark:text-green-400"
 									data={check}
 									scale={SMALL_ICON_SCALE}
 									label="Job completed successfully"
@@ -68,7 +68,7 @@ function endedDate(started_at, duration_ms) {
 							{/if}
 						{:else if 'success' in job}
 							<Icon
-								class="text-red-700"
+								class="text-red-600 dark:text-red-400"
 								data={faTimes}
 								scale={SMALL_ICON_SCALE}
 								label="Job completed with an error"
@@ -82,14 +82,14 @@ function endedDate(started_at, duration_ms) {
 							/>
 						{:else if job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)}
 							<Icon
-								class="text-gray-700"
+								class="text-secondary"
 								data={faCalendar}
 								scale={SMALL_ICON_SCALE}
 								label="Job is scheduled to run at a later time"
 							/>
 						{:else}
 							<Icon
-								class="text-gray-500"
+								class="text-tertiary"
 								data={faHourglassHalf}
 								scale={SMALL_ICON_SCALE}
 								label="Job is waiting for an executor"
@@ -133,20 +133,20 @@ function endedDate(started_at, duration_ms) {
 					</div>
 				{/if}
 			</div>
-			<div class="pl-14 italic text-gray-500 text-2xs whitespace-nowrap overflow-hidden"
-				>{truncateRev(job.id, 8, '')}</div
-			>
+			<div class="pl-14 italic text-secondary text-2xs whitespace-nowrap overflow-hidden">
+				{truncateRev(job.id, 8, '')}
+			</div>
 		</div>
-		<div class="bg-white grid grid-cols-2 gap-x-2 col-span-2">
-			<div class="w-full text-gray-500 text-xs text-left flex flex-col gap-1 mx-4 overflow-hidden">
+		<div class="bg-surface grid grid-cols-2 gap-x-2 col-span-2">
+			<div class="w-full text-secondary text-xs text-left flex flex-col gap-1 mx-4 overflow-hidden">
 				<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}</span
 					>
 				</div>
 				{#if job && 'duration_ms' in job && job.duration_ms != undefined}
 					<div>
-						<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span
+						<Icon class="text-secondary" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span
 							class="mx-2"
 						>
 							Ran in {msToSec(job.duration_ms)}s</span
@@ -154,10 +154,10 @@ function endedDate(started_at, duration_ms) {
 					</div>
 				{/if}
 			</div>
-			<div class="text-gray-500 text-xs text-left place-self-start flex flex-col gap-1">
+			<div class="text-secondary text-xs text-left place-self-start flex flex-col gap-1">
 				{#if 'started_at' in job && job.started_at}
 					<div>
-						<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+						<Icon class="text-secondary" data={faClock} scale={SMALL_ICON_SCALE} /><span
 							class="mx-1.5"
 						>
 							<span>
@@ -176,16 +176,16 @@ function endedDate(started_at, duration_ms) {
 					<div class="inline-flex gap-1">
 						<CalendarClock size={13} class="-ml-0.5" />
 						<span>
-							<span class="bg-blue-200 text-gray-700 text-xs rounded px-1">Scheduled</span>
+							<span class="bg-blue-200 text-secondary text-xs rounded px-1">Scheduled</span>
 							for {displayDate(job.scheduled_for ?? '')}
 						</span>
 					</div>
 				{:else if 'scheduled_for' in job && !job.running}
 					<div>
-						<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+						<Icon class="text-secondary" data={faClock} scale={SMALL_ICON_SCALE} /><span
 							class="mx-2"
 						>
-							<span class="bg-blue-200 text-gray-700 text-xs rounded px-1"
+							<span class="bg-blue-200 text-secondary text-xs rounded px-1"
 								>Waiting for an executor</span
 							>
 						</span>
@@ -194,21 +194,21 @@ function endedDate(started_at, duration_ms) {
 				<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-1"
 							>
 								Step of flow <a href={`/run/${job.parent_job}`}>{truncateRev(job.parent_job, 6)}</a
 								></span
 							>
 						{:else}
-							<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span
+							<Icon class="text-secondary" data={faRobot} scale={SMALL_ICON_SCALE} /><span
 								class="mx-1"
 							>
 								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 class="mx-1"
 							>Schedule <button
 								class="break-words text-blue-400 font-normal truncate text-xs"

package/package/components/jobs/JobPreview.svelte

@@ -83,8 +83,8 @@ onDestroy(() => {
 	{#if open}
 		<div
 			transition:fade|local={{ duration: 50 }}
-			class="absolute z-50 {popupOnTop ? 'bottom-[35px]' : 'top-[35px]'} -left-10 bg-white rounded
-			border border-gray-300 shadow-xl flex justify-start items-start w-[600px] h-80
+			class="absolute z-50 {popupOnTop ? 'bottom-[35px]' : 'top-[35px]'} -left-10 bg-surface rounded
+			border shadow-xl flex justify-start items-start w-[600px] h-80
 			overflow-hidden"
 		>
 			<div class="absolute bottom-0 right-1 flex justify-end gap-2 pb-0.5">
@@ -92,7 +92,7 @@ onDestroy(() => {
 					Mem: {job?.['mem_peak'] ? `${(job['mem_peak'] / 1024).toPrecision(4)}MB` : 'N/A'}
 				</Badge>
 				<Badge>
-					<Icon class="text-gray-700" data={faHourglassHalf} scale={0.5} /><span class="mx-2">
+					<Icon class="text-secondary" data={faHourglassHalf} scale={0.5} /><span class="mx-2">
 						Ran in {msToSec(job?.['duration_ms'])}s</span
 					>
 				</Badge>
@@ -102,15 +102,15 @@ onDestroy(() => {
 			</div>
 			<div class="w-1/2 h-full overflow-auto p-2">
 				{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
-					<div class="text-sm font-semibold text-gray-600 mb-1">
+					<div class="text-sm font-semibold text-tertiary mb-1">
 						<div>Job is scheduled for</div>
 						<div>{new Date(job?.['scheduled_for']).toLocaleString()}</div>
 					</div>
 				{/if}
 				{#if job?.type === Job.type.COMPLETED_JOB}
-					<DisplayResult {result} disableExpand />
+					<DisplayResult workspaceId={job?.workspace_id} jobId={job?.id} {result} disableExpand />
 				{:else if job && `running` in job ? job.running : false}
-					<div class="text-sm font-semibold text-gray-600 mb-1"> Job is still running </div>
+					<div class="text-sm font-semibold text-tertiary mb-1"> Job is still running </div>
 					<LogViewer
 						jobId={job?.id}
 						duration={job?.['duration_ms']}

package/package/components/preview/FlowPreviewStatus.svelte

@@ -2,11 +2,11 @@
 export let job;
 </script>
 
-<div class="grid grid-cols-2 gap-4 mb-1 text-gray-500 dark:text-gray-400">
+<div class="grid grid-cols-2 gap-4 mb-1 text-tertiary dark:text-gray-400">
 	<JobStatus {job} />
 	{#if job}
 		<div
-			><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" target="_blank" href="/run/{job?.id}?workspace={job?.workspace_id}">
 					{job?.id}

package/package/components/progressBar/ProgressBar.svelte

@@ -58,8 +58,8 @@ else {
 <div class={$$props.class}>
 	<div
 		class="flex justify-between items-end font-medium mb-1 {error
-			? 'text-red-700'
-			: 'text-blue-700'}"
+			? 'text-red-700 dark:text-red-200'
+			: 'text-blue-700 dark:text-blue-200'}"
 	>
 		<span class="text-base">
 			{error

package/package/components/propertyPicker/ObjectViewer.svelte

@@ -31,9 +31,10 @@ function collapse() {
     collapsed = !collapsed;
 }
 const dispatch = createEventDispatcher();
-function selectProp(key, value) {
+function selectProp(key, value = undefined) {
     if (pureViewer && allowCopy) {
-        copyToClipboard(computeKey(key, isArray, currentPath));
+        const valueToCopy = value !== undefined ? value : computeKey(key, isArray, currentPath);
+        copyToClipboard(valueToCopy);
     }
     dispatch('select', rawKey ? key : computeKey(key, isArray, currentPath));
 }
@@ -45,29 +46,22 @@ $: keyLimit = isArray ? 1 : 100;
 		<span>
 			{#if level != 0}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<span
-					class="cursor-pointer border border-gray-300 hover:bg-gray-200 px-1 rounded"
-					on:click={collapse}
-				>
+				<span class="cursor-pointer border hover:bg-surface-hover px-1 rounded" on:click={collapse}>
 					-
 				</span>
 			{/if}
 			{#if level == 0 && topBrackets}<span class="h-0">{openBracket}</span>{/if}
-			<ul
-				class={`w-full pl-2 ${
-					level === 0 ? 'border-none' : 'border-l border-dotted border-gray-200'
-				}`}
-			>
+			<ul class={`w-full pl-2 ${level === 0 ? 'border-none' : 'border-l border-dotted'}`}>
 				{#each keys.length > keyLimit ? keys.slice(0, keyLimit) : keys as key, index (key)}
 					<li>
-						<button on:click={() => selectProp(key, key)} class="whitespace-nowrap">
+						<button on:click={() => selectProp(key)} class="whitespace-nowrap">
 							{#if topLevelNode}
 								<Badge baseClass="border border-blue-600" color="indigo">{key}</Badge>
 							{:else}
 								<span
 									class="key {pureViewer
 										? 'cursor-auto'
-										: 'border border-gray-300'} font-semibold rounded px-1 hover:bg-blue-100 text-2xs text-gray-800"
+										: 'border '} font-semibold rounded px-1 hover:bg-surface-hover text-2xs text-secondary"
 								>
 									{!isArray ? key : index}</span
 								>
@@ -126,14 +120,14 @@ $: keyLimit = isArray ? 1 : 100;
 		{openBracket}{collapsedSymbol}{closeBracket}
 	</span>
 	{#if collapsed}
-		<span class="text-gray-500 text-xs">
+		<span class="text-tertiary text-xs">
 			{pluralize(Object.keys(json).length, Array.isArray(json) ? 'item' : 'key')}
 		</span>
 	{/if}
 {:else if topBrackets}
-	<span class="text-black">{openBracket}{closeBracket}</span>
+	<span class="text-primary">{openBracket}{closeBracket}</span>
 {:else}
-	<span class="text-gray-400 text-xs ml-2">No items ([])</span>
+	<span class="text-tertiary text-xs ml-2">No items ([])</span>
 {/if}
 
 <style>
@@ -145,16 +139,17 @@ $: keyLimit = isArray ? 1 : 100;
 
 	.val.undefined {
 		--tw-text-opacity: 1;
-		color: rgb(75 85 99 / var(--tw-text-opacity));
+		color: rgb(var(--color-text-tertiary) / var(--tw-text-opacity));
 }
 	.val.null {
 		--tw-text-opacity: 1;
-		color: rgb(75 85 99 / var(--tw-text-opacity));
+		color: rgb(var(--color-text-tertiary) / var(--tw-text-opacity));
 }
 	.val.string {
 		--tw-text-opacity: 1;
 		color: rgb(22 163 74 / var(--tw-text-opacity));
 }
+
 	.val.number {
 		--tw-text-opacity: 1;
 		color: rgb(234 88 12 / var(--tw-text-opacity));

package/package/components/propertyPicker/PropPicker.svelte

@@ -60,11 +60,14 @@ async function loadResources() {
 		<input
 			type="text"
 			bind:value={search}
-			class="bg-gray-50 mt-2 border border-gray-300 text-gray-900 text-sm rounded-lg block mb-2 w-full"
+			class="bg-gray-50 mt-2 border border-gray-300 text-primary text-sm rounded-lg block mb-2 w-full"
 			placeholder="Search prop..."
 		/>
 	</div>
-	<div class="overflow-y-auto px-2 grow" class:bg-gray-100={!$propPickerConfig && !notSelectable}>
+	<div
+		class="overflow-y-auto px-2 pt-2 grow"
+		class:bg-surface-secondary={!$propPickerConfig && !notSelectable}
+	>
 		<div class="flex justify-between items-center space-x-1">
 			<span class="font-bold text-sm">Flow Input</span>
 			<div class="flex space-x-2 items-center" />

package/package/components/scriptEditor/LogPanel.svelte

@@ -22,6 +22,8 @@ export let lang;
 export let previewIsLoading = false;
 export let previewJob;
 export let pastPreviews = [];
+export let editor = undefined;
+export let diffEditor = undefined;
 let selectedTab = 'logs';
 let drawerOpen = false;
 let drawerContent = undefined;
@@ -43,10 +45,10 @@ function closeDrawer() {
 			<Highlight language={json} code={JSON.stringify(drawerContent.content, null, 4)} />
 		{:else if drawerContent?.mode === 'plain'}
 			<pre
-				class="overflow-x-auto break-words relative h-full m-2 text-xs bg-white shadow-inner p-2">
+				class="overflow-x-auto break-words relative h-full m-2 text-xs bg-surface shadow-inner p-2">
 				{drawerContent?.content}
 			</pre>
-		{:else if drawerContent?.mode === 'deno' || drawerContent?.mode === 'python3' || drawerContent?.mode === 'go' || drawerContent?.mode === 'bash'}
+		{:else if drawerContent?.mode === 'deno' || drawerContent?.mode === 'python3' || drawerContent?.mode === 'go' || drawerContent?.mode === 'bash' || drawerContent?.mode === 'nativets'}
 			<HighlightCode language={drawerContent?.mode} code={drawerContent?.content} />
 		{/if}
 	</DrawerContent>
@@ -76,10 +78,17 @@ function closeDrawer() {
 					<Pane>
 						{#if previewJob != undefined && 'result' in previewJob}
 							<div class="relative w-full h-full p-2"
-								><DisplayResult result={previewJob.result} />
+								><DisplayResult
+									workspaceId={previewJob?.workspace_id}
+									jobId={previewJob?.id}
+									result={previewJob.result}
+									{editor}
+									{diffEditor}
+									{lang}
+								/>
 							</div>
 						{:else}
-							<div class="text-sm text-gray-600 p-2">
+							<div class="text-sm text-tertiary p-2">
 								{#if previewIsLoading}
 									<Loader2 class="animate-spin" />
 								{:else}

package/package/components/scriptEditor/LogPanel.svelte.d.ts

@@ -1,11 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
 import { CompletedJob, Job, Preview } from '../../gen';
+import type Editor from '../Editor.svelte';
+import type DiffEditor from '../DiffEditor.svelte';
 declare const __propDef: {
     props: {
         lang: Preview.language | undefined;
         previewIsLoading?: boolean | undefined;
         previewJob: Job | undefined;
         pastPreviews?: CompletedJob[] | undefined;
+        editor?: Editor | undefined;
+        diffEditor?: DiffEditor | undefined;
         setFocusToLogs?: (() => void) | undefined;
     };
     events: {

package/package/components/sidebar/DarkModeToggle.svelte

@@ -0,0 +1,30 @@
+<script>import { Moon, Sun } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+export let darkMode = document.documentElement.classList.contains('dark');
+export let forcedDarkMode = true;
+</script>
+
+<button
+	class={twMerge(
+		'text-2xs text-white m-1 p-2 rounded-lg flex flex-row gap-2 justify-center hover:bg-gray-600',
+		forcedDarkMode ? 'text-white hover:bg-gray-600' : 'text-primary hover:bg-surface-hover'
+	)}
+	on:click={() => {
+		if (!document.documentElement.classList.contains('dark')) {
+			document.documentElement.classList.add('dark')
+			window.localStorage.setItem('dark-mode', 'dark')
+
+			darkMode = true
+		} else {
+			document.documentElement.classList.remove('dark')
+			window.localStorage.setItem('dark-mode', 'light')
+			darkMode = false
+		}
+	}}
+>
+	{#if darkMode}
+		<Sun class="w-4 h-4" />
+	{:else}
+		<Moon class="w-4 h-4" />
+	{/if}
+</button>

package/package/components/sidebar/DarkModeToggle.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        darkMode?: boolean | undefined;
+        forcedDarkMode?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DarkModeToggleProps = typeof __propDef.props;
+export type DarkModeToggleEvents = typeof __propDef.events;
+export type DarkModeToggleSlots = typeof __propDef.slots;
+export default class DarkModeToggle extends SvelteComponentTyped<DarkModeToggleProps, DarkModeToggleEvents, DarkModeToggleSlots> {
+}
+export {};

package/package/components/sidebar/FavoriteMenu.svelte

@@ -9,6 +9,7 @@ export let favoriteLinks = [];
 
 <Menu placement="bottom-start" let:close>
 	<button
+		title="Favorites"
 		slot="trigger"
 		type="button"
 		class={classNames(
@@ -28,7 +29,7 @@ export let favoriteLinks = [];
 	<div class="overflow-hidden" role="none">
 		{#if !favoriteLinks.length}
 			<div class="py-1" role="none">
-				<div class="text-gray-600 block px-4 py-2 text-xs" role="menuitem" tabindex="-1">
+				<div class="text-secondary block px-4 py-2 text-xs" role="menuitem" tabindex="-1">
 					Add Scripts/Flows/Apps here by starring them
 				</div>
 			</div>
@@ -38,7 +39,7 @@ export let favoriteLinks = [];
 					<a
 						href={favorite.href}
 						on:click={close}
-						class="w-full inline-flex flex-row px-4 py-2 hover:bg-gray-100"
+						class="w-full inline-flex flex-row px-4 py-2 hover:bg-surface-hover"
 					>
 						<span class="center-center">
 							{#if favorite.kind == 'script'}
@@ -49,7 +50,7 @@ export let favoriteLinks = [];
 								<LayoutDashboard size={16} />
 							{/if}
 						</span>
-						<span class="text-gray-800 ml-2 grow min-w-0 text-xs truncate">
+						<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
 							{favorite.label}
 						</span>
 					</a>

package/package/components/sidebar/MenuLink.svelte

@@ -24,16 +24,17 @@ navigating.subscribe(() => {
 			'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8',
 			isSelected
 				? 'bg-gray-50 text-gray-900'
-				: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
+				: 'text-tertiary hover:bg-gray-50 hover:text-gray-900',
 			$$props.class
 		)}
 		target={href.includes('http') ? '_blank' : null}
+		title={label}
 	>
 		<Icon
 			data={icon}
 			class={classNames(
 				' flex-shrink-0 h-4 w-4',
-				isSelected ? ' text-gray-700' : 'text-white group-hover:text-gray-500',
+				isSelected ? ' text-gray-700' : 'text-white group-hover:text-tertiary',
 				isCollapsed ? '-mr-1' : 'mr-3'
 			)}
 		/>

package/package/components/sidebar/MultiplayerMenu.svelte

@@ -112,8 +112,8 @@ function showActivity(url) {
 							>
 						</span>
 						<div class="flex flex-col">
-							<span class="text-sm text-gray-900 truncate">{user}</span>
-							<span class="text-xs text-gray-500 truncate">{showActivity(url)}</span>
+							<span class="text-sm text-primary truncate">{user}</span>
+							<span class="text-xs text-tertiary truncate">{showActivity(url)}</span>
 						</div>
 					</div>
 				{/each}

package/package/components/sidebar/SidebarContent.svelte

@@ -3,6 +3,7 @@ import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
 import MenuLink from './MenuLink.svelte';
 import { userStore } from '../../stores';
 import { SIDEBAR_SHOW_SCHEDULES } from '../../consts';
+import DarkModeToggle from './DarkModeToggle.svelte';
 const mainMenuLinks = [
     { label: 'Home', href: '/', icon: faHomeAlt },
     { label: 'Runs', href: '/runs', icon: faPlay },
@@ -10,7 +11,12 @@ const mainMenuLinks = [
     { label: 'Resources', href: '/resources', icon: faCubes, disabled: $userStore?.operator }
 ];
 $: secondaryMenuLinks = [
-    { label: 'Schedules', href: '/schedules', icon: faCalendar, disabled: !SIDEBAR_SHOW_SCHEDULES || $userStore?.operator },
+    {
+        label: 'Schedules',
+        href: '/schedules',
+        icon: faCalendar,
+        disabled: !SIDEBAR_SHOW_SCHEDULES || $userStore?.operator
+    },
     { label: 'Folders', href: '/folders', icon: faFolderOpen, disabled: $userStore?.operator },
     { label: 'Groups', href: '/groups', icon: faUsersCog, disabled: $userStore?.operator },
     { label: 'Audit Logs', href: '/audit_logs', icon: faEye, disabled: $userStore?.operator },
@@ -53,3 +59,5 @@ export let isCollapsed = false;
 		</div>
 	</div>
 </nav>
+
+<DarkModeToggle />

package/package/components/sidebar/UserMenu.svelte

@@ -12,6 +12,7 @@ export let isCollapsed = false;
 
 <Menu let:close placement="bottom-start">
 	<button
+		title="User Menu"
 		slot="trigger"
 		type="button"
 		class={classNames(
@@ -35,12 +36,12 @@ export let isCollapsed = false;
 		{/if}
 	</button>
 
-	<div class="divide-y divide-gray-100">
+	<div class="divide-y">
 		<div class="px-4 py-3" role="none">
-			<p class="text-sm font-medium text-gray-900 truncate" role="none">
+			<p class="text-sm font-medium text-primary truncate" role="none">
 				{$usersWorkspaceStore?.email}
 			</p>
-			<span class="text-xs text-gray-600">
+			<span class="text-xs text-tertiary">
 				{#if $userStore?.is_admin}
 					Admin of this workspace <Icon data={faCrown} scale={0.6} />
 				{:else if $userStore?.operator}
@@ -52,7 +53,7 @@ export let isCollapsed = false;
 		<div class="py-1" role="none">
 			<a
 				href={USER_SETTINGS_HASH}
-				class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
+				class="text-secondary block px-4 py-2 text-sm hover:bg-surface-hover hover:text-primary"
 				role="menuitem"
 				tabindex="-1"
 			>
@@ -63,7 +64,7 @@ export let isCollapsed = false;
 			<div class="py-1" role="none">
 				<a
 					href={SUPERADMIN_SETTINGS_HASH}
-					class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
+					class="text-secondary block px-4 py-2 text-sm hover:bg-surface-hover hover:text-primary"
 					role="menuitem"
 					tabindex="-1"
 				>
@@ -79,7 +80,7 @@ export let isCollapsed = false;
 						switchWorkspace('admins')
 						close()
 					}}
-					class="text-gray-700 block px-4 py-2 font-normal text-sm hover:bg-gray-100 hover:text-gray-900"
+					class="text-secondary block px-4 py-2 font-normal text-sm hover:bg-surface-hover hover:text-primary"
 					role="menuitem"
 					tabindex="-1"
 				>
@@ -90,7 +91,7 @@ export let isCollapsed = false;
 		<div class="py-1" role="none">
 			<button
 				type="button"
-				class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
+				class="text-secondary block w-full text-left px-4 py-2 text-sm hover:bg-surface-hover hover:text-primary"
 				role="menuitem"
 				tabindex="-1"
 				on:click={() => logout()}
@@ -101,7 +102,7 @@ export let isCollapsed = false;
 		{#if isCloudHosted() && $premiumStore}
 			{#if !$premiumStore.premium}
 				<div class="py-1" role="none">
-					<span class="text-gray-700 block w-full text-left px-4 py-2 text-sm"
+					<span class="text-secondary block w-full text-left px-4 py-2 text-sm"
 						>{$usageStore}/1000 free-tier executions</span
 					>
 					<div class="w-full bg-gray-200 h-1">
@@ -110,7 +111,7 @@ export let isCollapsed = false;
 					{#if $userStore?.is_admin}
 						<button
 							type="button"
-							class="text-gray-700 block font-normal w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
+							class="text-secondary block font-normal w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
 							role="menuitem"
 							tabindex="-1"
 							on:click={() => {
@@ -126,7 +127,7 @@ export let isCollapsed = false;
 				<div class="py-1" role="none">
 					<button
 						type="button"
-						class="text-gray-700 block font-normal w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
+						class="text-secondary block font-normal w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
 						role="menuitem"
 						tabindex="-1"
 						on:click={() => {