Changed the success toast to reflect Lazim's design

frontend/src/components/AuthManager/AuthManager.tsx

@@ -195,18 +195,19 @@ const AuthManager = () => {
   );
 
   const SiteContent = () => {
-    const { visible, message, toastType } = useToast();
+    const { visible, message, toastType, hideToast } = useToast();
     const localUserType = localStorage.getItem('userType');
+
     return (
       <>
-        {visible &&
-          createPortal(
-            <Toast
-              message={message}
-              toastType={toastType ? ToastStatus.SUCCESS : ToastStatus.ERROR}
-            />,
-            document.body
-          )}
+        {
+          <Toast
+            message={message}
+            toastType={toastType}
+            onClose={hideToast}
+            isOpen={visible}
+          />
+        }
         <AuthContext.Provider value={{ logout, id, user, refreshUser }}>
           <SubscribeWrapper userId={id}>
             <Switch>

frontend/src/components/ConfirmationToast/ConfirmationToast.tsx

@@ -1,25 +1,92 @@
-import React from 'react';
-import { check, block } from '../../icons/other/index';
+import React, { useState, useEffect } from 'react';
+import { green_check, block, close } from '../../icons/other';
 import styles from './confirmationtoast.module.css';
 import { ToastStatus } from '../../context/toastContext';
+import FocusTrap from 'focus-trap-react';
+import { createPortal } from 'react-dom';
 
 type toastProps = {
   message: string;
   toastType?: ToastStatus;
+  onClose: () => void;
+  isOpen: boolean;
 };
 
-const Toast = ({ message, toastType }: toastProps) => {
-  return typeof toastType === 'undefined' ||
-    toastType == ToastStatus.SUCCESS ? (
-    <div className={`${styles.toast} ${styles.successToast}`}>
-      <img alt="toast check" src={check} />
-      <p className={styles.toasttext}>{message}</p>
-    </div>
+const Toast = ({ message, toastType, onClose, isOpen }: toastProps) => {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'initial';
+    }
+  }, [isOpen]);
+  return toastType == ToastStatus.SUCCESS ? (
+    <>
+      {isOpen &&
+        createPortal(
+          <FocusTrap
+            focusTrapOptions={{
+              onDeactivate: onClose,
+              returnFocusOnDeactivate: true,
+            }}
+          >
+            <div className={styles.background}>
+              <div
+                className={`${styles.toast} ${styles.successToast}`}
+                id="bruh"
+              >
+                <button
+                  onClick={() => {
+                    onClose();
+                  }}
+                  className={styles.closeButton}
+                >
+                  <img src={close} className={styles.closeImg}></img>
+                </button>
+                <div className={styles.toastContent}>
+                  <img alt="toast check" src={green_check} />
+                  <p className={styles.toasttext}>{message}</p>
+                </div>
+                <button
+                  onClick={() => {
+                    onClose();
+                  }}
+                  className={styles.continueButton}
+                >
+                  <p className={styles.continueText}>Continue</p>
+                </button>
+              </div>
+            </div>
+          </FocusTrap>,
+          document.body
+        )}
+    </>
   ) : (
-    <div className={`${styles.toast} ${styles.errorToast}`}>
-      <img alt="toast block" src={block} />
-      <p className={styles.toasttext}>{message}</p>
-    </div>
+    <>
+      {isOpen &&
+        createPortal(
+          <FocusTrap
+            focusTrapOptions={{
+              onDeactivate: onClose,
+              returnFocusOnDeactivate: true,
+            }}
+          >
+            <div className={`${styles.toast} ${styles.errorToast}`}>
+              <button onClick={onClose} className={styles.closeButton}>
+                <img src={close} className={styles.closeImg}></img>
+              </button>
+              <div className={styles.toastContent}>
+                <img alt="toast check" src={green_check} />
+                <p className={styles.toasttext}>{message}</p>
+              </div>
+              <button onClick={onClose} className={styles.continueButton}>
+                <p className={styles.continueText}>Continue</p>
+              </button>
+            </div>
+          </FocusTrap>,
+          document.body
+        )}
+    </>
   );
 };
 

frontend/src/components/ConfirmationToast/confirmationtoast.module.css

@@ -1,28 +1,79 @@
 .toast {
   position: fixed;
-  top: 2rem;
+  background-color: black;
+  top: 50%;
   left: 50%;
-  transform: translate(-50%, 0);
+  transform: translate(-50%, -50%);
   margin: auto;
-  padding: 0.75rem 1rem;
+  width: 38.5rem;
+  height: 25.125rem;
+  padding: 1.5rem 1.5rem;
   box-shadow: 4px 6px 30px 5px rgba(0, 0, 0, 0.15);
-  border-radius: 0.625rem;
-  z-index: 999;
+  border-radius: 1rem;
+  z-index: 1000;
   display: flex;
   align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.background {
+  position: fixed;
+  background-color: rgba(13, 13, 13, 0.6);
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1000;
+}
+.toastContent {
+  margin-bottom: 4rem;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 }
 
 .toasttext {
-  font-size: 1.0625rem;
-  height: 100%;
-  margin-left: 0.625rem;
-  color: white;
+  color: #00c48c;
+  text-align: center;
+  font-size: 1.75rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  margin-top: 1.5rem;
 }
 
 .successToast {
-  background-color: #00c48c;
+  background-color: white;
 }
 
 .errorToast {
   background-color: #ff0000;
 }
+
+.continueButton {
+  background-color: #00c48c;
+  border: none;
+  border-radius: 9px;
+  padding: 0.4rem 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.continueText {
+  color: #fff;
+  text-align: center;
+  font-size: 0.938rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.closeButton {
+  background-color: white;
+  border: none;
+  align-self: flex-end;
+  border: none;
+  cursor: pointer;
+  background: none;
+  padding: 0;
+  margin-bottom: 1rem;
+}

frontend/src/components/UserDetail/UserDetail.tsx

@@ -77,7 +77,7 @@ const UserDetail = ({
   const { refreshUser } = useContext(AuthContext);
   const [showingToast, setToast] = useState(false);
   const { refreshRiders } = useRiders();
-  const { toastType } = useToast();
+  const { toastType, showToast } = useToast();
   const [confirmationModalisOpen, setConfirmationModalisOpen] = useState(false);
 
   const openConfirmationModal = () => {
@@ -97,14 +97,14 @@ const UserDetail = ({
       });
     }
   };
+  if (isShowing && rider) {
+    showToast(
+      `Rider ${rider.active ? 'activated' : 'deactivated'}.`,
+      toastType ? ToastStatus.SUCCESS : ToastStatus.ERROR
+    );
+  }
   return (
     <div className={cn(styles.userDetail, { [styles.rider]: isRider })}>
-      {isShowing && rider ? (
-        <Toast
-          message={`Rider ${rider.active ? 'activated' : 'deactivated'}.`}
-          toastType={toastType ? ToastStatus.SUCCESS : ToastStatus.ERROR}
-        />
-      ) : null}
       <div className={styles.imgContainer}>
         {photoLink && photoLink !== '' ? (
           <img

frontend/src/context/toastContext.tsx

@@ -11,14 +11,16 @@ type toastStat = {
   visible: boolean;
   message: string;
   showToast: (message: string, currentToastType: ToastStatus) => void;
-  toastType: boolean;
+  toastType: ToastStatus;
+  hideToast: () => void;
 };
 
 const initalState: toastStat = {
   visible: false,
   message: '',
   showToast: function () {},
-  toastType: false,
+  toastType: ToastStatus.ERROR,
+  hideToast: function () {},
 };
 
 const ToastContext = React.createContext(initalState);
@@ -30,19 +32,16 @@ type ToastProviderProps = {
 
 export const ToastProvider = ({ children }: ToastProviderProps) => {
   const [message, setMessage] = useState<string>('');
-  const [visible, setVisible] = useState(false);
-  const [toastType, setToastType] = useState(true);
+  const [visible, setVisible] = useState<boolean>(false);
+  const [toastType, setToastType] = useState<ToastStatus>(ToastStatus.ERROR);
   const showToast = (inputMessage: string, currentToastType: ToastStatus) => {
     setMessage(inputMessage);
     setVisible(true);
-    currentToastType == ToastStatus.ERROR
-      ? setToastType(false)
-      : currentToastType == ToastStatus.SUCCESS
-      ? setToastType(true)
-      : new Error('Invalid Toast type');
-    setTimeout(() => {
-      setVisible(false);
-    }, 2000);
+    setToastType(currentToastType);
+  };
+
+  const hideToast = () => {
+    setVisible(false);
   };
 
   return (
@@ -52,6 +51,7 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
         message,
         showToast,
         toastType,
+        hideToast,
       }}
     >
       {children}

frontend/src/icons/other/index.ts

@@ -17,3 +17,4 @@ export { default as chevronLeft } from './chevron-left.svg';
 export { default as block } from './blocked.svg';
 export { default as red_trash } from './red-trash.svg';
 export { default as search_icon } from './search.svg';
+export { default as green_check } from './green-check.svg';