UI cleanups

package-lock.json

@@ -14,6 +14,7 @@
 				"@oslojs/encoding": "^1.1.0",
 				"@tailwindcss/forms": "^0.5.9",
 				"@tailwindcss/typography": "^0.5.15",
+				"@zerodevx/svelte-toast": "^0.9.6",
 				"d3-array": "^3.2.4",
 				"d3-scale": "^4.0.2",
 				"d3-shape": "^3.2.0",
@@ -2688,6 +2689,15 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
+		"node_modules/@zerodevx/svelte-toast": {
+			"version": "0.9.6",
+			"resolved": "https://registry.npmjs.org/@zerodevx/svelte-toast/-/svelte-toast-0.9.6.tgz",
+			"integrity": "sha512-nHlTrCjverlPK9yukK6fqbG3e/R+f10ldrc4nJHOe2qNDScuPTuYVSFEk2dDDtzWAwTN5pmdEXgA3M2RbT8jiw==",
+			"license": "ISC",
+			"peerDependencies": {
+				"svelte": "^3.57.0 || ^4.0.0 || ^5.0.0"
+			}
+		},
 		"node_modules/acorn": {
 			"version": "8.14.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",

package.json

@@ -45,6 +45,7 @@
 		"@oslojs/encoding": "^1.1.0",
 		"@tailwindcss/forms": "^0.5.9",
 		"@tailwindcss/typography": "^0.5.15",
+		"@zerodevx/svelte-toast": "^0.9.6",
 		"d3-array": "^3.2.4",
 		"d3-scale": "^4.0.2",
 		"d3-shape": "^3.2.0",

src/app.css

@@ -1,3 +1,8 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+
+:root {
+    --toastBackground: white;
+    --toastColor: black;
+}

src/lib/SkillInput.svelte

@@ -22,7 +22,7 @@
 <label for={skill.id} class="justify-self-end"
 	>{skill.title}
 	<button popovertarget="description-{skill.id}" type="button" title="Show skill description"
-		><InfoIcon class="size-4 fill-lime-500" /></button
+		><InfoIcon class="size-4 fill-lime-600" /></button
 	></label
 >
 <div class="justify-self-start">

src/lib/toast.ts

@@ -0,0 +1,9 @@
+import { toast } from '@zerodevx/svelte-toast';
+
+export function success(message: string) {
+    toast.push(message, {
+        theme: {
+            '--toastProgressBackground': 'green',
+        }
+    });
+}

src/routes/(app)/survey/[surveyId]/+page.svelte

@@ -9,6 +9,7 @@
 	import type { PageData } from './$types';
 	import TrashIcon from '$lib/components/icons/TrashIcon.svelte';
 	import { goto } from '$app/navigation';
+	import { success } from '$lib/toast';
 
 	let { data }: { data: PageData } = $props();
 
@@ -75,7 +76,10 @@
 				aria-label="Copy link to clipboard"
 				class="text-sky-700"
 				title="Copy link to clipboard"
-				onclick={() => copyLinkToClipboard(`${window.location.origin}/${participant.accessToken}`)}
+				onclick={() => {
+					copyLinkToClipboard(`${window.location.origin}/${participant.accessToken}`);
+					success('Link copied to clipboard');
+				}}
 			>
 				<LinkIcon />
 			</button>

src/routes/+layout.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
+	import { SvelteToast } from '@zerodevx/svelte-toast';
+
 	import '../app.css';
 	let { children } = $props();
+
+	const options = {};
 </script>
 
+<SvelteToast {options} />
 {@render children()}