refac: styling

src/lib/components/workspace/Functions/FunctionEditor.svelte

@@ -8,6 +8,8 @@
 	import CodeEditor from '$lib/components/common/CodeEditor.svelte';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import Badge from '$lib/components/common/Badge.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
 
 	let formElement = null;
 	let loading = false;
@@ -295,35 +297,23 @@ class Pipe:
 				}
 			}}
 		>
-			<div class="mb-2.5">
-				<button
-					class="flex space-x-1"
-					on:click={() => {
-						goto('/workspace/functions');
-					}}
-					type="button"
-				>
-					<div class=" self-center">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-					</div>
-					<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
-				</button>
-			</div>
-
 			<div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg">
 				<div class="w-full mb-2 flex flex-col gap-0.5">
-					<div class="flex gap-2 w-full items-center">
+					<div class="flex w-full items-center">
+						<div class=" flex-shrink-0 mr-2">
+							<Tooltip content={$i18n.t('Back')}>
+								<button
+									class="w-full text-left text-sm py-1.5 px-0.5 rounded-lg dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-gray-850"
+									on:click={() => {
+										goto('/workspace/functions');
+									}}
+									type="button"
+								>
+									<ChevronLeft strokeWidth="2.5" />
+								</button>
+							</Tooltip>
+						</div>
+
 						<div class="flex-1">
 							<input
 								class="w-full text-2xl font-medium bg-transparent outline-none"
@@ -339,7 +329,7 @@ class Pipe:
 						</div>
 					</div>
 
-					<div class=" flex gap-2">
+					<div class=" flex gap-2 px-1">
 						{#if edit}
 							<div class="text-sm text-gray-500 flex-shrink-0">
 								{id}

src/lib/components/workspace/Tools/ToolkitEditor.svelte

@@ -7,6 +7,8 @@
 	import { goto } from '$app/navigation';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import Badge from '$lib/components/common/Badge.svelte';
+	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -183,35 +185,23 @@ class Tools:
 				}
 			}}
 		>
-			<div class="mb-2.5">
-				<button
-					class="flex space-x-1"
-					on:click={() => {
-						goto('/workspace/tools');
-					}}
-					type="button"
-				>
-					<div class=" self-center">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-					</div>
-					<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
-				</button>
-			</div>
-
 			<div class="flex flex-col flex-1 overflow-auto h-0">
 				<div class="w-full mb-2 flex flex-col gap-0.5">
-					<div class="flex gap-2 w-full items-center">
+					<div class="flex w-full items-center">
+						<div class=" flex-shrink-0 mr-2">
+							<Tooltip content={$i18n.t('Back')}>
+								<button
+									class="w-full text-left text-sm py-1.5 px-0.5 rounded-lg dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-gray-850"
+									on:click={() => {
+										goto('/workspace/tools');
+									}}
+									type="button"
+								>
+									<ChevronLeft strokeWidth="2.5" />
+								</button>
+							</Tooltip>
+						</div>
+
 						<div class="flex-1">
 							<input
 								class="w-full text-2xl font-medium bg-transparent outline-none"
@@ -227,7 +217,7 @@ class Tools:
 						</div>
 					</div>
 
-					<div class=" flex gap-2">
+					<div class=" flex gap-2 px-1">
 						{#if edit}
 							<div class="text-sm text-gray-500 flex-shrink-0">
 								{id}