fix: toast, rde, webhooks

apps/ui/src/lib/components/Toast.svelte

@@ -4,7 +4,7 @@
 	export let type = 'info';
 	function success() {
 		if (type === 'success') {
-			return 'bg-coollabs';
+			return 'bg-dark lg:bg-primary';
 		}
 	}
 </script>

apps/ui/src/lib/components/Toasts.svelte

@@ -6,7 +6,7 @@
 
 {#if $toasts.length > 0}
 	<section>
-		<article class="toast toast-top toast-center rounded-none min-w-[18rem]" role="alert">
+		<article class="toast toast-top toast-center rounded-none w-2/3 lg:w-[20rem]" role="alert">
 			{#each $toasts as toast (toast.id)}
 				<Toast
 					type={toast.type}

apps/ui/src/lib/components/Usage.svelte

@@ -68,12 +68,6 @@
 </script>
 
 <div class="w-full relative p-5 ">
-	{#if loading.usage}
-		<span class="indicator-item badge bg-yellow-500 badge-sm" />
-	{:else}
-		<span class="indicator-item badge bg-success badge-sm" />
-	{/if}
-
 	<div class="w-full flex flex-col lg:flex-row space-y-4 lg:space-y-0 space-x-4">
 		<div class="flex flex-col">
 			<h1 class="font-bold text-lg lg:text-xl truncate">
@@ -99,6 +93,11 @@
 				class="btn btn-sm">Cleanup Storage</button
 			>
 		{/if}
+		{#if loading.usage}
+			<button id="streaming" class=" btn btn-sm bg-transparent border-none loading"
+				>Getting data...</button
+			>
+		{/if}
 	</div>
 	<div class="flex lg:flex-row flex-col gap-4">
 		<div class="flex lg:flex-row flex-col space-x-0 lg:space-x-2 space-y-2 lg:space-y-0" />