refac: styling

This commit is contained in:
Timothy J. Baek 2024-10-20 18:31:24 -07:00
parent 254c6ca709
commit b38ed4221a
2 changed files with 36 additions and 56 deletions

View File

@ -8,6 +8,8 @@
import CodeEditor from '$lib/components/common/CodeEditor.svelte'; import CodeEditor from '$lib/components/common/CodeEditor.svelte';
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import Badge from '$lib/components/common/Badge.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 formElement = null;
let loading = false; 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="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="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"> <div class="flex-1">
<input <input
class="w-full text-2xl font-medium bg-transparent outline-none" class="w-full text-2xl font-medium bg-transparent outline-none"
@ -339,7 +329,7 @@ class Pipe:
</div> </div>
</div> </div>
<div class=" flex gap-2"> <div class=" flex gap-2 px-1">
{#if edit} {#if edit}
<div class="text-sm text-gray-500 flex-shrink-0"> <div class="text-sm text-gray-500 flex-shrink-0">
{id} {id}

View File

@ -7,6 +7,8 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import Badge from '$lib/components/common/Badge.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(); 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="flex flex-col flex-1 overflow-auto h-0">
<div class="w-full mb-2 flex flex-col gap-0.5"> <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"> <div class="flex-1">
<input <input
class="w-full text-2xl font-medium bg-transparent outline-none" class="w-full text-2xl font-medium bg-transparent outline-none"
@ -227,7 +217,7 @@ class Tools:
</div> </div>
</div> </div>
<div class=" flex gap-2"> <div class=" flex gap-2 px-1">
{#if edit} {#if edit}
<div class="text-sm text-gray-500 flex-shrink-0"> <div class="text-sm text-gray-500 flex-shrink-0">
{id} {id}