diff --git a/package-lock.json b/package-lock.json index bcdf1ac..3ac4c2c 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 69bc529..459aca3 100644 --- a/package.json +++ b/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", diff --git a/src/app.css b/src/app.css index a31e444..83a2ed8 100644 --- a/src/app.css +++ b/src/app.css @@ -1,3 +1,8 @@ @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; + +:root { + --toastBackground: white; + --toastColor: black; +} \ No newline at end of file diff --git a/src/lib/SkillInput.svelte b/src/lib/SkillInput.svelte index 8c255fb..a4d25ae 100644 --- a/src/lib/SkillInput.svelte +++ b/src/lib/SkillInput.svelte @@ -22,7 +22,7 @@
diff --git a/src/lib/toast.ts b/src/lib/toast.ts new file mode 100644 index 0000000..79762ed --- /dev/null +++ b/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', + } + }); +} \ No newline at end of file diff --git a/src/routes/(app)/survey/[surveyId]/+page.svelte b/src/routes/(app)/survey/[surveyId]/+page.svelte index 9a0ca3f..b79b940 100644 --- a/src/routes/(app)/survey/[surveyId]/+page.svelte +++ b/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'); + }} > diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 9b776b7..ca31257 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,6 +1,11 @@ + {@render children()}