make toasts look better (:

Frontend/package.json

@@ -15,7 +15,9 @@
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
@@ -31,6 +33,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.51.3",
     "restfulmc-lib": "^1.1.2",
+    "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7"
   },

Frontend/src/app/components/copy-button.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useToast } from "@/components/ui/use-toast";
 import copy from "clipboard-copy";
 import { ReactElement, ReactNode } from "react";
+import { toast } from "sonner";
 
 /**
  * Props for the copy button.
@@ -37,19 +37,13 @@ const CopyButton = ({
     children,
     showToast,
 }: CopyButtonProps): ReactElement => {
-    const { toast } = useToast();
     const handleClick = async (): Promise<void> => {
         await copy(content); // Copy to the clipboard
 
         // Show a toast when copied
         if (showToast) {
-            toast({
+            toast("Copied", {
-                title: "Copied",
+                description: `Copied "${content}" to your clipboard`,
-                description: (
-                    <>
-                        Copied <b>{content}</b> to your clipboard
-                    </>
-                ),
             });
         }
     };

Frontend/src/app/components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

Frontend/src/app/layout.tsx

@@ -1,5 +1,5 @@
 import Navbar from "@/components/navbar";
-import { Toaster } from "@/components/ui/toaster";
+import { Toaster } from "@/components/ui/sonner"
 import { TooltipProvider } from "@/components/ui/tooltip";
 import config from "@/config";
 import { notoSans } from "@/font/fonts";