feat: use toast.promise and chirag's styling (#38)

* feat: use toast.promise and chirag's styling

* yeet: yeet return

Author: harshkhandeparkar

frontend/src/styles/styles.scss

@@ -21,18 +21,13 @@ $fg-color: #f7f7f7;
 $fg-inverse: #3d3d3d;
 
 .toast {
-  background-color: $bg-color !important;
+  background-color: $surface-1 !important;
   color: $fg-color !important;
   fill: $fg-color !important;
 
-  border: 1px solid $accent-color;
   border-radius: 10px !important;
 }
 
-.toast-err {
-  border: 1px solid rgba(rgb(194, 42, 42), 0.7);
-}
-
 body {
   color: rgba($fg-color, 0.8);
   background-color: $bg-color;

frontend/src/utils/copyLink.ts

@@ -1,14 +1,11 @@
 import { toast } from 'solid-toast';
 
-export async function copyLink(e: Event, link: string) {
+export function copyLink(e: Event, link: string) {
 	e.preventDefault();
 
-    try {
-      await navigator.clipboard.writeText(link);
-      toast('Link copied to clipboard.');
-    } catch (e) {
-      toast('Error copying link to the clipboard.', {
-        className: "toast toast-err"
-      });
-    }
+  toast.promise(navigator.clipboard.writeText(link), {
+    loading: "Copying link to clipboard...",
+    success: "Link copied to clipboard.",
+    error: "Failed to copy link to clipboard."
+  })
 }