Misc

src/lib/components/card/tabs.svelte

@@ -45,7 +45,7 @@
 						class="text cursor-pointer font-semibold min-w-16 w-auto px-2 py-1 -mb-4 rounded-t  block leading-normal {activeTabID ===
 						tab.id
 							? 'text-indigo-500 bg-white border-white'
-							: 'text-white bg-indigo-500 border-indigo-500'}"
+							: 'text-white bg-indigo-500 border-indigo-500 hover:bg-indigo-600'}"
 						on:click|stopPropagation={() => toggleTabs(tab)}>
 						{tab.title}
 					</div>

src/lib/components/history/history.svelte

@@ -80,16 +80,18 @@
 					<div class="flex-1">
 						<div class="flex flex-col">
 							<span>{name}</span>
+							<span class="text-gray-400 text-sm">{relativeTime(time)}</span>
 						</div>
 					</div>
 					<div class="flex gap-2 content-center">
-						<button class="rounded px-2 bg-green-200" on:click={() => restoreHistory(state)}
+						<button
-							>Restore</button>
+							class="rounded px-2 w-24 bg-green-200 hover:bg-green-300"
-						<button class="rounded px-2 bg-red-200" on:click={() => clearHistory(time)}
+							on:click={() => restoreHistory(state)}>Restore</button>
-							>Delete</button>
+						<button
+							class="rounded px-2 w-24 bg-red-200 hover:bg-red-300"
+							on:click={() => clearHistory(time)}>Delete</button>
 					</div>
 				</div>
-				<span class="text-gray-400 text-sm">{relativeTime(time)}</span>
 			</li>
 		{/each}
 	</ul>