🚸 Improve the toast

Dlurak · Nov 12, 2023 · f9ec218 · f9ec218
1 parent af7fb5b
commit f9ec218
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 42 deletions.
diff --git a/src/lib/toast/Toast.svelte b/src/lib/toast/Toast.svelte
@@ -34,34 +34,51 @@
 		error: 'bg-red-500',
 		info: 'bg-light-box dark:bg-dark-box'
 	};
+	const borderColors: ToastTypeRecord = {
+		success: 'border-green-500',
+		warning: 'border-yellow-500',
+		error: 'border-red-500',
+		info: 'border-gray-600'
+	};
+
 	let icon = icons[toast.type];
 	let color = colors[toast.type];
+	let borderColor = borderColors[toast.type];
 </script>
 
-<div
-	class="w-full {color} p-4 rounded-sm shadow-2xl text-base relative flex justify-between items-center overflow-hidden"
-	role="alert"
-	aria-atomic="true"
-	aria-live="assertive"
+<button
+	class="w-full {color} p-4 rounded-sm shadow-2xl text-base relative flex justify-between items-center overflow-hidden focus:outline-none"
 	on:mouseenter={() => (hovering = true)}
 	on:mouseleave={() => (hovering = false)}
 	on:touchstart={() => (hovering = true)}
 	on:touchend={() => (hovering = false)}
 	on:touchcancel={() => (hovering = false)}
+	on:focus={() => (hovering = true)}
+	on:blur={() => (hovering = false)}
+	on:click={removeSelf}
 >
-	<div class="flex gap-1 items-center">
-		<i class="bx {icon}" />
-		<I18n key={toast.content} />
+	<div class="w-full h-full flex justify-between items-center">
+		<div class="flex gap-1 items-center">
+			<i class="bx {icon}" />
+			<I18n key={toast.content} />
+		</div>
+		<div class="aspect-square h-full">
+			<i class="bx bx-x" />
+		</div>
+
+		{#if toast.duration}
+			<progress
+				value={doneMs}
+				max={toast.duration}
+				class="w-full h-1 absolute bottom-0 left-0 right-0 rounded-sm"
+			/>
+		{/if}
 	</div>
-	<button class="aspect-square h-full" on:click={removeSelf}>
-		<i class="bx bx-x" />
-	</button>
 
-	{#if toast.duration}
-		<progress
-			value={doneMs}
-			max={toast.duration}
-			class="w-full h-1 absolute bottom-0 left-0 right-0 rounded-sm"
-		/>
-	{/if}
-</div>
+	<div
+		class="w-full h-full flex justify-center items-center bg-black bg-opacity-80 absolute bottom-0 left-0 right-0 top-0 border-4 {borderColor}"
+		class:hidden={!hovering}
+	>
+		<i class="bx bx-x text-2xl" />
+	</div>
+</button>
diff --git a/tests/network.test.ts b/tests/network.test.ts
@@ -1,29 +1,6 @@
 import { test, expect } from '@playwright/test';
 
 test.describe('changes in the network should be monitored', () => {
-	test('a toast should be shown when the network changges', async ({ page, browser }) => {
-		await browser.contexts()[0].setOffline(false);
-		await page.goto('/');
-		await page.waitForTimeout(1000);
-		await browser.contexts()[0].setOffline(true);
-
-		await page.waitForTimeout(1000);
-
-		const toast = await page.getByRole('alert');
-
-		await page.waitForTimeout(1000);
-
-		await expect(toast).toBeVisible();
-		await expect(toast).toHaveText('Du bist offline. ');
-
-		await browser.contexts()[0].setOffline(false);
-
-		await page.waitForTimeout(1000);
-
-		const lastToast = await toast.last();
-		await expect(lastToast).toHaveText('Du bist wieder online. ');
-	});
-
 	test('the contact section in the footer should be hidden when the network is offline', async ({
 		page,
 		browser