Changed the success toast to reflect Lazim's design

frontend/src/components/AuthManager/AuthManager.tsx

@@ -2,7 +2,7 @@
 import {
   useGoogleLogin as googleAuth,
   googleLogout,
   TokenResponse,
 } from '@react-oauth/google';
 import {
   useHistory,
@@ -15,7 +15,7 @@
 import AuthContext from '../../context/auth';
 
 import LandingPage from '../../pages/Landing/Landing';
 import Home from '../../pages/Admin/Home';
 import styles from './authmanager.module.css';
 import { googleLogin } from '../../icons/other';
 import SubscribeWrapper from './SubscrbeWrapper';
@@ -162,7 +162,7 @@
     }
   }
 
   function createRefresh(userId: string, userType: string, token: string) {
     const endpoint =
       userType === 'Admin' ? `/api/admins/${userId}` : `/api/riders/${userId}`;
     return () => {
@@ -195,7 +195,7 @@
   );
 
   const SiteContent = () => {
-    const { visible, message, toastType } = useToast();
+    const { visible, message, toastType, setVisible } = useToast();
     const localUserType = localStorage.getItem('userType');
     return (
       <>
@@ -204,6 +204,7 @@
             <Toast
               message={message}
               toastType={toastType ? ToastStatus.SUCCESS : ToastStatus.ERROR}
+              onClose={() => setVisible(false)}
             />,
             document.body
           )}

frontend/src/components/ConfirmationToast/ConfirmationToast.tsx

@@ -1,19 +1,38 @@
-import React from 'react';
-import { check, block } from '../../icons/other/index';
+import React, { useState } from 'react';
+import { green_check, block, close } from '../../icons/other';
 import styles from './confirmationtoast.module.css';
 import { ToastStatus } from '../../context/toastContext';
 
 type toastProps = {
   message: string;
   toastType?: ToastStatus;
+  onClose: () => void;
 };
 
-const Toast = ({ message, toastType }: toastProps) => {
+const Toast = ({ message, toastType, onClose }: 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>
+      <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 className={`${styles.toast} ${styles.errorToast}`}>

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

@@ -1,28 +1,70 @@
 .toast {
   position: fixed;
-  top: 2rem;
+  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;
+}
+
+.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

@@ -12,13 +12,15 @@ type toastStat = {
   message: string;
   showToast: (message: string, currentToastType: ToastStatus) => void;
   toastType: boolean;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const initalState: toastStat = {
   visible: false,
   message: '',
   showToast: function () {},
   toastType: false,
+  setVisible: function () {},
 };
 
 const ToastContext = React.createContext(initalState);
@@ -35,14 +37,27 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
   const showToast = (inputMessage: string, currentToastType: ToastStatus) => {
     setMessage(inputMessage);
     setVisible(true);
+
+    if (currentToastType == ToastStatus.ERROR) {
+      setToastType(false);
+      setTimeout(() => {
+        setVisible(false);
+      }, 2000);
+    } else {
+      if (currentToastType == ToastStatus.SUCCESS) {
+        setToastType(true);
+      } else {
+        new Error('Invalid Toast type');
+      }
+    }
     currentToastType == ToastStatus.ERROR
       ? setToastType(false)
       : currentToastType == ToastStatus.SUCCESS
       ? setToastType(true)
       : new Error('Invalid Toast type');
-    setTimeout(() => {
-      setVisible(false);
-    }, 2000);
+    // setTimeout(() => {
+    //   setVisible(false);
+    // }, 2000);
   };
 
   return (
@@ -52,6 +67,7 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
         message,
         showToast,
         toastType,
+        setVisible,
       }}
     >
       {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';