From 0d72dc42b28d7d94b18d82b30492fe2ba628703a Mon Sep 17 00:00:00 2001
From: martin-mfg <2026226+martin-mfg@users.noreply.github.com>
Date: Wed, 10 Dec 2025 15:18:03 +0100
Subject: [PATCH] display any errors, rounder popup buttons

---
 frontend/frontend/src/pages/App/AppTrends.js  | 33 +++++++++++++++++++
 .../frontend/src/pages/Home/stages/Display.js |  7 ++--
 .../frontend/src/pages/Home/stages/Login.js   |  4 +--
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/frontend/frontend/src/pages/App/AppTrends.js b/frontend/frontend/src/pages/App/AppTrends.js
index df04de31..c6d95506 100644
--- a/frontend/frontend/src/pages/App/AppTrends.js
+++ b/frontend/frontend/src/pages/App/AppTrends.js
@@ -14,8 +14,40 @@ import {
   useIsAuthenticated,
   useUserKey,
 } from '../../redux/selectors/userSelectors';
+import { toast, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 function App() {
+  const toMessage = (input) => {
+    if (typeof input === 'string') return input;
+    if (input.reason.message) return input.reason.message;
+    if (input.message) return input.message;
+    try {
+      return JSON.stringify(input);
+    } catch {
+      return 'Unknown error';
+    }
+  };
+
+  const showError = (event) => {
+    toast.error(toMessage(event), {
+      position: 'bottom-right',
+      autoClose: 1500,
+      hideProgressBar: true,
+      closeOnClick: false,
+      pauseOnHover: true,
+      draggable: false,
+      progress: undefined,
+    });
+  };
+
+  window.addEventListener('error', (event) => {
+    showError(event);
+  });
+  window.addEventListener('unhandledrejection', (event) => {
+    showError(event);
+  });
+
   const userKey = useUserKey();
   const isAuthenticated = useIsAuthenticated();
   const [stage, setStage] = useState(isAuthenticated ? 1 : 0);
@@ -50,6 +82,7 @@ function App() {
         <Header mode="trends" stage={stage} setStage={setStage} />
         <section className="bg-white text-gray-700 flex-grow">
           <HomeScreen stage={stage} setStage={setStage} />
+          <ToastContainer />
         </section>
       </Router>
     </div>
diff --git a/frontend/frontend/src/pages/Home/stages/Display.js b/frontend/frontend/src/pages/Home/stages/Display.js
index 66a15c32..df920b69 100644
--- a/frontend/frontend/src/pages/Home/stages/Display.js
+++ b/frontend/frontend/src/pages/Home/stages/Display.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { toast, ToastContainer } from 'react-toastify';
+import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
 import { saveSvgAsPng } from 'save-svg-as-png';
@@ -36,7 +36,7 @@ const DisplayStage = ({ filename, link, themeSuffix }) => {
       autoClose: 1500,
       hideProgressBar: true,
       closeOnClick: false,
-      pauseOnHover: false,
+      pauseOnHover: true,
       draggable: false,
       progress: undefined,
     });
@@ -49,7 +49,7 @@ const DisplayStage = ({ filename, link, themeSuffix }) => {
       autoClose: 1500,
       hideProgressBar: true,
       closeOnClick: false,
-      pauseOnHover: false,
+      pauseOnHover: true,
       draggable: false,
       progress: undefined,
     });
@@ -57,7 +57,6 @@ const DisplayStage = ({ filename, link, themeSuffix }) => {
 
   return (
     <div className="w-full flex flex-wrap">
-      <ToastContainer />
       <div className="h-auto lg:w-2/5 md:w-1/2">
         <div className="pr-10 p-10 rounded-sm bg-gray-200">
           <div className="flex flex-col items-center">
diff --git a/frontend/frontend/src/pages/Home/stages/Login.js b/frontend/frontend/src/pages/Home/stages/Login.js
index 321903b7..a5649bea 100644
--- a/frontend/frontend/src/pages/Home/stages/Login.js
+++ b/frontend/frontend/src/pages/Home/stages/Login.js
@@ -278,13 +278,13 @@ const LoginStage = ({ setCurrItem }) => {
                 <br />
                 <div className="flex flex-wrap">
                   <Button
-                    className="bg-blue-500 text-white rounded-sm"
+                    className="bg-blue-500 text-white rounded-[0.25rem]"
                     onClick={() => setDeleteModal(false)}
                   >
                     Cancel
                   </Button>
                   <Button
-                    className="bg-gray-200 ml-auto rounded-sm text-red-600 border-2"
+                    className="bg-gray-200 ml-auto rounded-[0.25rem] text-red-600 border-2"
                     onClick={deleteAccountHandler}
                   >
                     Delete Account