ui: redesign a lot

apps/ui/src/routes/services/[id]/_Storage.svelte

@@ -10,6 +10,7 @@
 
 	import { toast } from '@zerodevx/svelte-toast';
 	import { errorNotification } from '$lib/common';
+	import { addToast } from '$lib/store';
 	const { id } = $page.params;
 
 	const dispatch = createEventDispatcher();
@@ -29,8 +30,10 @@
 				storage.path = null;
 				storage.id = null;
 			}
-			if (newStorage) toast.push('Storage saved.');
-			else toast.push('Storage updated.');
+			addToast({
+				message: 'Storage saved.',
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -39,16 +42,19 @@
 		try {
 			await del(`/services/${id}/storages`, { path: storage.path });
 			dispatch('refresh');
-			toast.push('Storage deleted.');
+			return addToast({
+				message: 'Storage deleted.',
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		}
 	}
 	async function handleSubmit() {
 		if (isNew) {
-			await saveStorage(true)
+			await saveStorage(true);
 		} else {
-			await saveStorage(false)
+			await saveStorage(false);
 		}
 	}
 </script>
@@ -66,16 +72,16 @@
 <td>
 	{#if isNew}
 		<div class="flex items-center justify-center">
-			<button class="bg-green-600 hover:bg-green-500" on:click={() => saveStorage(true)}>Add</button
+			<button class="btn btn-sm btn-success" on:click={() => saveStorage(true)}>Add</button
 			>
 		</div>
 	{:else}
 		<div class="flex flex-row justify-center space-x-2">
 			<div class="flex items-center justify-center">
-				<button class="" on:click={() => saveStorage(false)}>Set</button>
+				<button class="btn btn-sm btn-success" on:click={() => saveStorage(false)}>Set</button>
 			</div>
 			<div class="flex justify-center items-end">
-				<button class="bg-red-600 hover:bg-red-500" on:click={removeStorage}>Remove</button>
+				<button class="btn btn-sm btn-error" on:click={removeStorage}>Remove</button>
 			</div>
 		</div>
 	{/if}