refac: styling

This commit is contained in:
Timothy Jaeryang Baek 2025-09-14 17:45:58 -04:00
parent e701c65db4
commit cae7ad8c70

View file

@ -32,19 +32,26 @@
{#if showHistory} {#if showHistory}
<div class="flex flex-row"> <div class="flex flex-row">
{#if history.length > 1} {#if history.length > 1}
<div class="w-1 border-r border-gray-100 dark:border-gray-800 mt-3 -mb-2.5" /> <div class="w-full">
<div class="w-full -translate-x-[7.5px]">
{#each history as status, idx} {#each history as status, idx}
{#if idx !== history.length - 1} {#if idx !== history.length - 1}
<div class="flex items-start gap-2 mb-1"> <div class="flex items-stretch gap-2 mb-1">
<div class="pt-3 px-1"> <div class=" ">
<span class="relative flex size-1.5 rounded-full justify-center items-center"> <div class="pt-3 px-1 mb-1.5">
<span <span
class="relative inline-flex size-1.5 rounded-full bg-gray-300 dark:bg-gray-600" class="relative flex size-1.5 rounded-full justify-center items-center"
>
<span
class="relative inline-flex size-1.5 rounded-full bg-gray-500 dark:bg-gray-300"
></span> ></span>
</span> </span>
</div> </div>
<div
class="w-[0.5px] ml-[6.5px] h-[calc(100%-14px)] bg-gray-300 dark:bg-gray-700"
/>
</div>
<StatusItem {status} done={true} /> <StatusItem {status} done={true} />
</div> </div>
{/if} {/if}
@ -55,7 +62,7 @@
{/if} {/if}
<button <button
class="w-full -translate-x-[3.5px]" class="w-full"
on:click={() => { on:click={() => {
showHistory = !showHistory; showHistory = !showHistory;
}} }}
@ -65,10 +72,10 @@
<span class="relative flex size-1.5 rounded-full justify-center items-center"> <span class="relative flex size-1.5 rounded-full justify-center items-center">
{#if status?.done === false} {#if status?.done === false}
<span <span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-gray-300 dark:bg-gray-600 opacity-75" class="absolute inline-flex h-full w-full animate-ping rounded-full bg-gray-500 dark:bg-gray-300 opacity-75"
></span> ></span>
{/if} {/if}
<span class="relative inline-flex size-1.5 rounded-full bg-gray-300 dark:bg-gray-600" <span class="relative inline-flex size-1.5 rounded-full bg-gray-500 dark:bg-gray-300"
></span> ></span>
</span> </span>
</div> </div>