update floating button design

This commit is contained in:
Malte Teichert
2024-05-25 00:39:08 +02:00
parent 4e5425416a
commit a7b78f0e0f

View File

@@ -13,24 +13,54 @@
</script>
<div class="w-full flex flex-row justify-center">
<div class="fixed flex flex-row gap-2 justify-center bg-surface-50-900-token rounded-full p-4">
<div
class="fixed bottom-10 px-5 w-full max-w-xs shadow-xl flex flex-row gap-2 justify-between bg-surface-100-800-token rounded-full p-4"
>
<span class="flex justify-center">
<button
type="button"
class="btn variant-filled-primary"
class="btn gap-2 variant-filled-primary"
on:click={() => {
addPath(modalStore);
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
/>
</svg>
Add Path
</button>
</span>
<span class="flex justify-center">
<button
type="button"
class="btn btn-sm variant-filled-secondary"
class="btn btn-sm gap-2 variant-filled-secondary"
on:click={sortPathsAlphabetically}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
/>
</svg>
Sort paths
</button>
</span>