ui: redesign a lot

apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte

@@ -16,7 +16,7 @@
 	import { toast } from '@zerodevx/svelte-toast';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
-	import { appSession, status } from '$lib/store';
+	import { addToast, appSession, status } from '$lib/store';
 	import Explainer from '$lib/components/Explainer.svelte';
 
 	const { id } = $page.params;
@@ -92,7 +92,10 @@
 			loading = true;
 			await post(`/databases/${id}`, { ...database, isRunning: $status.database.isRunning });
 			generateDbDetails();
-			toast.push('Configuration saved.');
+			addToast({
+					message: 'Configuration saved.',
+					type: 'success'
+				});
 		} catch (error) {
 			return errorNotification(error);
 		} finally {
@@ -108,9 +111,10 @@
 			{#if $appSession.isAdmin}
 				<button
 					type="submit"
-					class:bg-purple-600={!loading}
-					class:hover:bg-purple-500={!loading}
-					disabled={loading}>{loading ? $t('forms.saving') : $t('forms.save')}</button
+					class="btn btn-sm"
+					class:loading={loading}
+					class:bg-databases={!loading}
+					disabled={loading}>{$t('forms.save')}</button
 				>
 			{/if}
 		</div>

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

@@ -50,21 +50,24 @@
 
 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">{$t('index.databases')}</div>
-	<div on:click={newDatabase} class="add-icon cursor-pointer bg-purple-600 hover:bg-purple-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={newDatabase}
+			class="btn btn-square btn-sm bg-databases"
 		>
-	</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">