ui: redesign a lot

apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte

@@ -9,7 +9,7 @@
 	import { onMount } from 'svelte';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
-	import { appSession } from '$lib/store';
+	import { addToast, appSession } from '$lib/store';
 	import Setting from '$lib/components/Setting.svelte';
 
 	const { id } = $page.params;
@@ -24,7 +24,10 @@
 		loading.save = true;
 		try {
 			await post(`/destinations/${id}`, { ...destination });
-			toast.push('Configuration saved.');
+			addToast({
+				message: 'Configuration saved.',
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		} finally {
@@ -96,7 +99,10 @@
 	async function stopProxy() {
 		try {
 			await post(`/destinations/${id}/stop`, { engine: destination.engine });
-			return toast.push($t('destination.coolify_proxy_stopped'));
+			return addToast({
+				message: $t('destination.coolify_proxy_stopped'),
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -104,7 +110,10 @@
 	async function startProxy() {
 		try {
 			await post(`/destinations/${id}/start`, { engine: destination.engine });
-			return toast.push($t('destination.coolify_proxy_started'));
+			return addToast({
+				message: $t('destination.coolify_proxy_started'),
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -114,7 +123,10 @@
 		if (sure) {
 			try {
 				loading.restart = true;
-				toast.push($t('destination.coolify_proxy_restarting'));
+				addToast({
+					message: $t('destination.coolify_proxy_restarting'),
+					type: 'success'
+				});
 				await post(`/destinations/${id}/restart`, {
 					engine: destination.engine,
 					fqdn: settings.fqdn
@@ -136,19 +148,18 @@
 		{#if $appSession.isAdmin}
 			<button
 				type="submit"
-				class="bg-sky-600 hover:bg-sky-500"
-				class:bg-sky-600={!loading.save}
-				class:hover:bg-sky-500={!loading.save}
+				class="btn btn-sm"
+				class:bg-destinations={!loading.save}
+				class:loading={loading.save}
 				disabled={loading.save}
-				>{loading.save ? $t('forms.saving') : $t('forms.save')}
+				>{$t('forms.save')}
 			</button>
 			<button
-				class={loading.restart ? '' : 'bg-red-600 hover:bg-red-500'}
+				class="btn btn-sm"
+				class:loading={loading.restart}
+				class:bg-error={!loading.restart}
 				disabled={loading.restart}
-				on:click|preventDefault={forceRestartProxy}
-				>{loading.restart
-					? $t('destination.restarting_please_wait')
-					: $t('destination.force_restart_proxy')}</button
+				on:click|preventDefault={forceRestartProxy}>{$t('destination.force_restart_proxy')}</button
 			>
 		{/if}
 	</div>

apps/ui/src/routes/destinations/[id]/_New.svelte

@@ -40,10 +40,10 @@
 <div class="flex-col space-y-2 pb-10 text-center">
 	<div class="text-xl font-bold text-white">{$t('destination.new.predefined_destinations')}</div>
 	<div class="flex justify-center space-x-2">
-		<button class="w-32" on:click={() => setPredefined('localDocker')}
+		<button class="btn btn-sm" on:click={() => setPredefined('localDocker')}
 			>{$t('sources.local_docker')}</button
 		>
-		<button class="w-32" on:click={() => setPredefined('remoteDocker')}>Remote Docker</button>
+		<button class="btn btn-sm" on:click={() => setPredefined('remoteDocker')}>Remote Docker</button>
 		<!-- <button class="w-32" on:click={() => setPredefined('kubernetes')}>Kubernetes</button> -->
 	</div>
 </div>

apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte

@@ -10,7 +10,7 @@
 	import { onMount } from 'svelte';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
-	import { appSession } from '$lib/store';
+	import { addToast, appSession } from '$lib/store';
 
 	const { id } = $page.params;
 
@@ -28,7 +28,10 @@
 		loading.save = true;
 		try {
 			await post(`/destinations/${id}`, { ...destination });
-			toast.push('Configuration saved.');
+			addToast({
+				message: 'Configuration saved.',
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		} finally {
@@ -103,7 +106,10 @@
 	async function stopProxy() {
 		try {
 			await post(`/destinations/${id}/stop`, { engine: destination.engine });
-			return toast.push($t('destination.coolify_proxy_stopped'));
+			return addToast({
+				message: $t('destination.coolify_proxy_stopped'),
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -111,7 +117,10 @@
 	async function startProxy() {
 		try {
 			await post(`/destinations/${id}/start`, { engine: destination.engine });
-			return toast.push($t('destination.coolify_proxy_started'));
+			return addToast({
+				message: $t('destination.coolify_proxy_started'),
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -121,7 +130,10 @@
 		if (sure) {
 			try {
 				loading.restart = true;
-				toast.push($t('destination.coolify_proxy_restarting'));
+				addToast({
+					message: $t('destination.coolify_proxy_restarting'),
+					type: 'success'
+				});
 				await post(`/destinations/${id}/restart`, {
 					engine: destination.engine,
 					fqdn: settings.fqdn
@@ -140,8 +152,10 @@
 			loading.verify = true;
 			await post(`/destinations/${id}/verify`, {});
 			destination.remoteVerified = true;
-			toast.push('Remote Docker Engine verified!');
-			return;
+			return addToast({
+				message: 'Remote Docker Engine verified!',
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		} finally {
@@ -156,26 +170,28 @@
 		{#if $appSession.isAdmin}
 			<button
 				type="submit"
-				class="bg-sky-600 hover:bg-sky-500"
-				class:bg-sky-600={!loading.save}
-				class:hover:bg-sky-500={!loading.save}
+				class="btn btn-sm"
+				class:loading={loading.save}
+				class:bg-destinations={!loading.save}
 				disabled={loading.save}
-				>{loading.save ? $t('forms.saving') : $t('forms.save')}
+				>{$t('forms.save')}
 			</button>
 			{#if !destination.remoteVerified}
 				<button
 					disabled={loading.verify}
+					class="btn btn-sm"
+					class:loading={loading.verify}
 					on:click|preventDefault|stopPropagation={verifyRemoteDocker}
-					>{loading.verify ? 'Verifying...' : 'Verify Remote Docker Engine'}</button
+					>Verify Remote Docker Engine</button
 				>
 			{:else}
 				<button
-					class={loading.restart ? '' : 'bg-red-600 hover:bg-red-500'}
+					class="btn btn-sm"
+					class:loading={loading.restart}
+					class:bg-error={!loading.restart}
 					disabled={loading.restart}
 					on:click|preventDefault={forceRestartProxy}
-					>{loading.restart
-						? $t('destination.restarting_please_wait')
-						: $t('destination.force_restart_proxy')}</button
+					>{$t('destination.force_restart_proxy')}</button
 				>
 			{/if}
 		{/if}

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

@@ -39,9 +39,9 @@
 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">{$t('index.destinations')}</div>
 	{#if $appSession.isAdmin}
-		<a href="/destinations/new" class="add-icon bg-sky-600 hover:bg-sky-500">
+		<a href="/destinations/new" class="btn btn-square btn-sm bg-destinations">
 			<svg
-				class="w-6"
+				class="h-6 w-6"
 				xmlns="http://www.w3.org/2000/svg"
 				fill="none"
 				viewBox="0 0 24 24"