feat: improve appearance of toast messages

Author: OliverDudgeon

src/components/app/ConfiguredSnackbarProvider.tsx

@@ -0,0 +1,38 @@
+import { forwardRef, type PropsWithChildren } from "react";
+
+import { Alert } from "@mui/material";
+import { type CustomContentProps, SnackbarProvider } from "notistack";
+
+const CustomSnackbar = forwardRef<HTMLDivElement, CustomContentProps>(
+  ({ message, variant = "default" }, ref) => {
+    // Map notistack variants to MUI Alert severity
+    const severity = variant === "default" ? "info" : variant;
+
+    return (
+      <Alert
+        ref={ref}
+        severity={severity}
+        sx={{ width: "100%", bgcolor: "background.paper" }}
+        variant="outlined"
+      >
+        {message}
+      </Alert>
+    );
+  },
+);
+
+CustomSnackbar.displayName = "CustomSnackbar";
+
+export const ConfiguredSnackbarProvider = ({ children }: PropsWithChildren) => (
+  <SnackbarProvider
+    Components={{
+      success: CustomSnackbar,
+      error: CustomSnackbar,
+      warning: CustomSnackbar,
+      info: CustomSnackbar,
+      default: CustomSnackbar,
+    }}
+  >
+    {children}
+  </SnackbarProvider>
+);

src/components/eventMessages/ProcessingChargeMessage.tsx

@@ -40,7 +40,7 @@ export const ProcessingChargeMessage = ({ coins, product }: ProcessingChargeMess
 
         <Typography>
           <Button
-            color="secondary"
+            color="info"
             href={projectURL(productData.claim.id)}
             rel="noreferrer"
             sx={{ textTransform: "none" }}

src/pages/_app.tsx

@@ -13,8 +13,8 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { enableMapSet } from "immer";
 import { type AppProps } from "next/app";
 import Head from "next/head";
-import { SnackbarProvider } from "notistack";
 
+import { ConfiguredSnackbarProvider } from "../components/app/ConfiguredSnackbarProvider";
 import { ThemeProviders } from "../components/app/ThemeProviders";
 import { TopLevelHooks } from "../components/app/TopLevelHooks";
 import { EventStream } from "../components/EventStream";
@@ -63,14 +63,14 @@ const App = ({ Component, pageProps }: CustomAppProps) => {
           >
             <QueryClientProvider client={queryClient}>
               <HydrationBoundary state={pageProps.dehydratedState}>
-                <SnackbarProvider>
+                <ConfiguredSnackbarProvider>
                   <EventStream />
                   <MDXComponentProvider>
                     <TopLevelHooks>
                       <Component {...pageProps} />
                     </TopLevelHooks>
                   </MDXComponentProvider>
-                </SnackbarProvider>
+                </ConfiguredSnackbarProvider>
               </HydrationBoundary>
               <ReactQueryDevtools client={queryClient} />
             </QueryClientProvider>