ui: redesign a lot

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

@@ -7,6 +7,7 @@
 	import { del, post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+import { addToast } from '$lib/store';
 	import { toast } from '@zerodevx/svelte-toast';
 	import { createEventDispatcher } from 'svelte';
 
@@ -31,7 +32,6 @@
 			await post(`/services/${id}/secrets`, {
 				name,
 				value,
-
 				isNew
 			});
 			dispatch('refresh');
@@ -39,7 +39,10 @@
 				name = '';
 				value = '';
 			}
-			toast.push('Secret saved.');
+			addToast({
+				message: 'Secret saved.',
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -72,15 +75,15 @@
 <td>
 	{#if isNewSecret}
 		<div class="flex items-center justify-center">
-			<button class="bg-green-600 hover:bg-green-500" on:click={() => saveSecret(true)}>Add</button>
+			<button class="btn btn-sm bg-success" on:click={() => saveSecret(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={() => saveSecret(false)}>Set</button>
+				<button class="btn btn-sm bg-success" on:click={() => saveSecret(false)}>Set</button>
 			</div>
 			<div class="flex justify-center items-end">
-				<button class="bg-red-600 hover:bg-red-500" on:click={removeSecret}>Remove</button>
+				<button class="btn btn-sm bg-error" on:click={removeSecret}>Remove</button>
 			</div>
 		</div>
 	{/if}

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

@@ -13,7 +13,7 @@
 	import { get, post } from '$lib/api';
 	import { errorNotification, getDomain } from '$lib/common';
 	import { t } from '$lib/translations';
-	import { appSession, disabledButton, status, location, setLocation } from '$lib/store';
+	import { appSession, disabledButton, status, location, setLocation, addToast } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
 	import Setting from '$lib/components/Setting.svelte';
@@ -45,7 +45,10 @@
 	async function isDNSValid(domain: any, isWWW: any) {
 		try {
 			await get(`/services/${id}/check?domain=${domain}`);
-			toast.push('DNS configuration is valid.');
+			addToast({
+				message: 'DNS configuration is valid.',
+				type: 'success'
+			});
 			isWWW ? (isWWWDomainOK = true) : (isNonWWWDomainOK = true);
 			return true;
 		} catch (error) {
@@ -70,7 +73,10 @@
 			setLocation(service);
 			$disabledButton = false;
 			forceSave = false;
-			toast.push('Configuration saved.');
+			return addToast({
+				message: 'Configuration saved.',
+				type: 'success'
+			});
 		} catch (error) {
 			//@ts-ignore
 			if (error?.message.startsWith($t('application.dns_not_set_partial_error'))) {
@@ -96,7 +102,10 @@
 		loadingVerification = true;
 		try {
 			await post(`/services/${id}/${service.type}/activate`, { id: service.id });
-			toast.push(t.get('services.all_email_verified'));
+			return addToast({
+				message: t.get('services.all_email_verified'),
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		} finally {
@@ -109,7 +118,10 @@
 				dualCerts = !dualCerts;
 			}
 			await post(`/services/${id}/settings`, { dualCerts });
-			return toast.push(t.get('application.settings_saved'));
+			return addToast({
+				message: t.get('application.settings_saved'),
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -145,13 +157,14 @@
 			{#if $appSession.isAdmin}
 				<button
 					type="submit"
-					class:bg-pink-600={!loading}
+					class="btn btn-sm"
 					class:bg-orange-600={forceSave}
-					class:hover:bg-pink-500={!loading}
 					class:hover:bg-orange-400={forceSave}
+					class:loading={loading}
+					class:bg-services={!loading}
 					disabled={loading}
 					>{loading
-						? $t('forms.saving')
+						? $t('forms.save')
 						: forceSave
 						? $t('forms.confirm_continue')
 						: $t('forms.save')}</button

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}

apps/ui/src/routes/services/index.svelte

@@ -46,21 +46,24 @@
 
 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">{$t('index.services')}</div>
-	<div on:click={newService} class="add-icon cursor-pointer bg-pink-600 hover:bg-pink-500">
-		<svg
-			class="w-6"
-			xmlns="http://www.w3.org/2000/svg"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke="currentColor"
-			><path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-			/></svg
+	<button
+			on:click={newService}
+			class="btn btn-square btn-sm bg-services"
 		>
-	</div>
+			<svg
+				class="h-6 w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			>
+		</button>
 </div>
 
 <div class="flex-col justify-center">