display any errors, rounder popup buttons

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>

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">

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