From cb45701e9f18b70f5d467bd9b06a2d2465845577 Mon Sep 17 00:00:00 2001
From: Cameron <cdg1039@usnh.edu>
Date: Tue, 17 Dec 2024 09:10:59 -0500
Subject: [PATCH 1/3] Make PageLayout component and use it in all existing page
 components

---
 Frontend/speedcart-react/src/App.css          |  6 ----
 .../PageLayout/PageLayout.module.css          |  5 ++++
 .../src/components/PageLayout/PageLayout.tsx  | 18 ++++++++++++
 .../src/components/PageLayout/index.ts        |  1 +
 .../components/StatusModal/StatusModal.tsx    |  1 -
 .../src/pages/Dashboard/Dashboard.tsx         | 19 +++++++-----
 .../speedcart-react/src/pages/Home/Home.tsx   |  5 ++--
 .../speedcart-react/src/pages/Login/Login.tsx | 29 +++++++++----------
 .../NewShoppingListWithProvider.tsx           | 19 +++++++-----
 .../ShoppingListDetailWithProvider.tsx        | 24 ++++++++-------
 .../ShoppingListShare/ShoppingListShare.tsx   |  5 ++--
 11 files changed, 79 insertions(+), 53 deletions(-)
 create mode 100644 Frontend/speedcart-react/src/components/PageLayout/PageLayout.module.css
 create mode 100644 Frontend/speedcart-react/src/components/PageLayout/PageLayout.tsx
 create mode 100644 Frontend/speedcart-react/src/components/PageLayout/index.ts

diff --git a/Frontend/speedcart-react/src/App.css b/Frontend/speedcart-react/src/App.css
index 869f0f5..3d5035d 100644
--- a/Frontend/speedcart-react/src/App.css
+++ b/Frontend/speedcart-react/src/App.css
@@ -15,12 +15,6 @@ body {
   box-sizing: border-box;
 }
 
-.main-content {
-  flex: 1;
-  overflow-y: auto; /* Allow content area to scroll */
-  max-height: calc(100vh - 60px); /* Adjust based on header and footer height */
-}
-
 #policyFooter a {
   text-decoration: none;
   color: white;
diff --git a/Frontend/speedcart-react/src/components/PageLayout/PageLayout.module.css b/Frontend/speedcart-react/src/components/PageLayout/PageLayout.module.css
new file mode 100644
index 0000000..c3308a6
--- /dev/null
+++ b/Frontend/speedcart-react/src/components/PageLayout/PageLayout.module.css
@@ -0,0 +1,5 @@
+.mainContent {
+    flex: 1;
+    overflow-y: auto; /* Allow content area to scroll */
+    max-height: calc(100vh - 60px); /* Adjust based on header and footer height */
+}
\ No newline at end of file
diff --git a/Frontend/speedcart-react/src/components/PageLayout/PageLayout.tsx b/Frontend/speedcart-react/src/components/PageLayout/PageLayout.tsx
new file mode 100644
index 0000000..62411de
--- /dev/null
+++ b/Frontend/speedcart-react/src/components/PageLayout/PageLayout.tsx
@@ -0,0 +1,18 @@
+// src/components/PageLayout.tsx
+import React from 'react';
+import StatusModal from '@components/StatusModal';
+
+import styles from './PageLayout.module.css';
+
+const PageLayout = ({ children, status = null, showStatusModal = false, modalProps = null, className=''}) => {
+  return (
+    <>
+      <main className={`${styles.mainContent} ${className}`}>
+        {children}
+      </main>
+      {showStatusModal && <StatusModal status={status} {...modalProps} />}
+    </>
+  );
+};
+
+export default PageLayout;
diff --git a/Frontend/speedcart-react/src/components/PageLayout/index.ts b/Frontend/speedcart-react/src/components/PageLayout/index.ts
new file mode 100644
index 0000000..cb4f878
--- /dev/null
+++ b/Frontend/speedcart-react/src/components/PageLayout/index.ts
@@ -0,0 +1 @@
+export { default } from './PageLayout';
\ No newline at end of file
diff --git a/Frontend/speedcart-react/src/components/StatusModal/StatusModal.tsx b/Frontend/speedcart-react/src/components/StatusModal/StatusModal.tsx
index 0d39e2f..c92f472 100644
--- a/Frontend/speedcart-react/src/components/StatusModal/StatusModal.tsx
+++ b/Frontend/speedcart-react/src/components/StatusModal/StatusModal.tsx
@@ -1,4 +1,3 @@
-// src/components/StatusModal.js
 import React, { useEffect, useState } from 'react';
 import styles from './StatusModal.module.css';
 import { RequestStatus } from '@constants/enums';
diff --git a/Frontend/speedcart-react/src/pages/Dashboard/Dashboard.tsx b/Frontend/speedcart-react/src/pages/Dashboard/Dashboard.tsx
index 62c983c..24b5a29 100644
--- a/Frontend/speedcart-react/src/pages/Dashboard/Dashboard.tsx
+++ b/Frontend/speedcart-react/src/pages/Dashboard/Dashboard.tsx
@@ -4,12 +4,12 @@ import { Link } from 'react-router-dom';
 import { FaTrash, FaEdit, FaShare, FaClipboard } from 'react-icons/fa';
 import { useAuth, fetchOwnedShoppingLists, fetchSharedShoppingLists, deleteShoppingList, createShareLink, AuthContextType } from 'shared';
 import Modal from '@components/Modal';
-import StatusModal from '@components/StatusModal';
 import CustomCheckbox from '@components/CustomCheckbox';
 
 import { RequestStatus } from '@constants/enums';
 
 import styles from './Dashboard.module.css';
+import PageLayout from '@components/PageLayout';
 
 function Dashboard() {
     const [shoppingListTitles, setShoppingListTitles] = useState([]);
@@ -181,7 +181,15 @@ function Dashboard() {
 
     return (
         <>
-            <main className={`main-content`}>
+            <PageLayout
+                status={deletionStatus}
+                showStatusModal={true}
+                modalProps={{
+                    loadingText:'Attempting deletion...',
+                    successText:'Deletion successful! Updating your list of shopping lists...',
+                    errorText:`Deletion failed! ${error}`
+                }}
+            >
                 <div className={styles.searchContainer}>
                     <label className={styles.caseSensitiveLabel}>
                         <input
@@ -334,12 +342,7 @@ function Dashboard() {
                     ) : <Link to="/login" className={styles.loginBtn}>Go sign in</Link>
                     }
                 </div>
-            </main>
-            <StatusModal status={deletionStatus}
-                loadingText='Attempting deletion...'
-                successText='Deletion successful! Updating your list of shopping lists...'
-                errorText={`Deletion failed! ${error}`}
-            />
+            </PageLayout>
         </>
     );
 }
diff --git a/Frontend/speedcart-react/src/pages/Home/Home.tsx b/Frontend/speedcart-react/src/pages/Home/Home.tsx
index 3ca2e94..e80693d 100644
--- a/Frontend/speedcart-react/src/pages/Home/Home.tsx
+++ b/Frontend/speedcart-react/src/pages/Home/Home.tsx
@@ -9,6 +9,7 @@ import adaptabilityImage from '@assets/images/freshProduce.jpg'; // Image from:
 import reusabilityImage from '@assets/images/phoneAndLaptop.jpg';// Image from: https://unsplash.com/photos/silver-iphone-6-on-macbook-pro--aC2BL0GICs
 
 import styles from './Home.module.css';
+import PageLayout from '@components/PageLayout';
 
 const Home: React.FC<any> = (props) => {
 
@@ -17,7 +18,7 @@ const Home: React.FC<any> = (props) => {
   }, []);
 
   return (
-    <main id={props.id} className={`main-content`}>
+    <PageLayout>
       <TransitionSection additionalClasses="centerAlignment" showClasses={[styles.inView]} hiddenClasses={[styles.outOfView]}>
         <SiteLogo />
         <h1 className={styles.heading}>Welcome to SpeedCart</h1>
@@ -74,7 +75,7 @@ const Home: React.FC<any> = (props) => {
           </p>
         </div>
       </TransitionSection>
-    </main>
+    </PageLayout>
   );
 }
 
diff --git a/Frontend/speedcart-react/src/pages/Login/Login.tsx b/Frontend/speedcart-react/src/pages/Login/Login.tsx
index 077d5dc..a4f4322 100644
--- a/Frontend/speedcart-react/src/pages/Login/Login.tsx
+++ b/Frontend/speedcart-react/src/pages/Login/Login.tsx
@@ -4,12 +4,11 @@ import { GoogleLogin } from '@react-oauth/google';
 
 import { useAuth } from 'shared';
 
-import StatusModal from '@components/StatusModal';
-
 import { RequestStatus } from '@constants/enums';
 import { AppRoute } from '@constants/routes';
 
 import styles from './Login.module.css';
+import PageLayout from '@components/PageLayout';
 
 function Login() {
   const navigate = useNavigate();
@@ -56,26 +55,26 @@ function Login() {
   };
 
   return (
-    <>
-      <main className={`${styles.loginContainer} main-content`}>
+    <PageLayout
+      status={loginStatus}
+      showStatusModal={true}
+      modalProps={{
+        loadingText: 'Verifying login token...',
+        successText: `Login successful! Redirecting to ${redirectPageName}...`,
+        errorText: `Login verification failed! ${loginError}`
+      }}
+    >
+      <section className={styles.loginContainer}>
         {isAuthenticated ? (
-          <>
-            <button onClick={logout} className={styles.logoutBtn}>Logout</button>
-          </>
-          
+          <button onClick={logout} className={styles.logoutBtn}>Logout</button>
         ) : (
           <GoogleLogin
             onSuccess={handleLoginSuccess}
             onError={handleLoginError}
           />
         )}
-      </main>
-      <StatusModal status={loginStatus}
-        loadingText='Verifying login token...'
-        successText={`Login successful! Redirecting to ${redirectPageName}...`}
-        errorText={`Login verification failed! ${loginError}`}
-      />
-    </>
+      </section>
+    </PageLayout>
   );
 }
 
diff --git a/Frontend/speedcart-react/src/pages/NewShoppingListWithProvider/NewShoppingListWithProvider.tsx b/Frontend/speedcart-react/src/pages/NewShoppingListWithProvider/NewShoppingListWithProvider.tsx
index b9cdca3..2dfc6b9 100644
--- a/Frontend/speedcart-react/src/pages/NewShoppingListWithProvider/NewShoppingListWithProvider.tsx
+++ b/Frontend/speedcart-react/src/pages/NewShoppingListWithProvider/NewShoppingListWithProvider.tsx
@@ -4,7 +4,6 @@ import { useAuth, AuthContextType } from 'shared';
 
 import SaveButton from '@components/SaveButton';
 import AddShoppingListItemButton from '@components/AddShoppingListItemButton';
-import StatusModal from '@components/StatusModal'; // Import StatusModal to provide UI info on list save status
 import ShoppingListSection from '@components/ShoppingListSection';
 
 import { ShoppingListProvider, useShoppingListContext } from '@customHooks/ShoppingListContext';
@@ -14,6 +13,7 @@ import { CrudMode } from '@constants/crudmodes';
 
 import styles from './NewShoppingListWithProvider.module.css';
 import inputStyles from '@modularStyles/inputs.module.css';
+import PageLayout from '@components/PageLayout';
 
 const NewShoppingList: React.FC = () => {
   const navigate = useNavigate();
@@ -71,7 +71,15 @@ const NewShoppingList: React.FC = () => {
 
   return (
     <>
-      <main className='main-content'>
+      <PageLayout
+        status={saveStatus}
+        showStatusModal={true}
+        modalProps={{
+          loadingText:'Loading...',
+          successText:'Save successful! Redirecting...',
+          errorText:`Save failed! ${saveError}`
+        }}
+      >
         <form className={`${styles.shoppingList}`} onSubmit={handleSubmit}>
           <div className={styles.inputGroup}>
             <label htmlFor="listTitle">Title of new list:</label>
@@ -103,12 +111,7 @@ const NewShoppingList: React.FC = () => {
             crudMode={crudMode}
           />
         </form>
-      </main>
-      <StatusModal status={saveStatus}
-        loadingText='Loading...'
-        successText='Save successful! Redirecting...'
-        errorText={`Save failed! ${saveError}`}
-      />
+      </PageLayout>
     </>
   );
 };
diff --git a/Frontend/speedcart-react/src/pages/ShoppingListDetailWithProvider/ShoppingListDetailWithProvider.tsx b/Frontend/speedcart-react/src/pages/ShoppingListDetailWithProvider/ShoppingListDetailWithProvider.tsx
index 015bbd1..7b74836 100644
--- a/Frontend/speedcart-react/src/pages/ShoppingListDetailWithProvider/ShoppingListDetailWithProvider.tsx
+++ b/Frontend/speedcart-react/src/pages/ShoppingListDetailWithProvider/ShoppingListDetailWithProvider.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid'; // Import uuid library for unique item identification
 import { useParams } from 'react-router-dom';
 
 import {
@@ -9,7 +8,6 @@ import {
 
 import SaveButton from '@components/SaveButton';
 import AddShoppingListItemButton from '@components/AddShoppingListItemButton';
-import StatusModal from '@components/StatusModal';
 import ShoppingListSection from '@components/ShoppingListSection';
 
 import { ShoppingListProvider, useShoppingListContext } from '@customHooks/ShoppingListContext';
@@ -19,6 +17,7 @@ import { RequestStatus } from '@constants/enums';
 // CSS style imports
 import inputStyles from '@modularStyles/inputs.module.css';
 import styles from './ShoppingListDetailWithProvider.module.css';
+import PageLayout from '@components/PageLayout';
 
 const ShoppingListDetail = () => {
   const { id } = useParams() as { id: string };
@@ -141,16 +140,24 @@ const ShoppingListDetail = () => {
   };
 
   if (loading) {
-    return <main className={`main-content`}>Loading...</main>;
+    return <PageLayout>Loading...</PageLayout>;
   }
 
   if (error) {
-    return <main className={`main-content`}>Error: {error}</main>;
+    return <PageLayout>Error: {error}</PageLayout>;
   }
 
   return (
     <>
-      <main className={`main-content ${styles.flexCenter}`}>
+      <PageLayout className={styles.flexCenter}
+        status={editStatus}
+        showStatusModal={true}
+        modalProps={{
+          loadingText:'Loading...',
+          successText:'Edit save successful! Refreshing page...',
+          errorText:`Edit save failed! ${error}`
+        }}
+      >
         <form onSubmit={handleSubmit} className={`${styles.innerContentArea} ${styles.form}`}>
           <div className={styles.formHeader}>
             <label htmlFor="editModeToggle">
@@ -227,12 +234,7 @@ const ShoppingListDetail = () => {
             )}
           </div>
         </form>
-      </main>
-      <StatusModal status={editStatus}
-        loadingText='Loading...'
-        successText='Edit save successful! Refreshing page...'
-        errorText={`Edit save failed! ${error}`}
-      />
+      </PageLayout>
     </>
   );
 };
diff --git a/Frontend/speedcart-react/src/pages/ShoppingListShare/ShoppingListShare.tsx b/Frontend/speedcart-react/src/pages/ShoppingListShare/ShoppingListShare.tsx
index e62602e..e37641f 100644
--- a/Frontend/speedcart-react/src/pages/ShoppingListShare/ShoppingListShare.tsx
+++ b/Frontend/speedcart-react/src/pages/ShoppingListShare/ShoppingListShare.tsx
@@ -5,6 +5,7 @@ import { GoogleLogin } from '@react-oauth/google';
 import { useAuth, createSharingPermissions } from 'shared';
 
 import { AppRoute } from "@constants/routes";
+import PageLayout from "@components/PageLayout";
 
 
 function ShoppingListShare() {
@@ -81,7 +82,7 @@ function ShoppingListShare() {
     };
 
     return (
-        <main className='main-content'>
+        <PageLayout>
             {/* Make sure user is signed in */}
             {!isAuthenticated ? (
                 <>
@@ -96,7 +97,7 @@ function ShoppingListShare() {
                     {shareInteractionStatus}
                 </>
             )}
-        </main>
+        </PageLayout>
     );
 }
 

From a07efbf6110b1fbc18bdd7495b25237898d82746 Mon Sep 17 00:00:00 2001
From: Cameron Green <camy624@comcast.net>
Date: Thu, 19 Dec 2024 19:09:29 -0500
Subject: [PATCH 2/3] Make adjustable styling of CustomCheckbox component for
 better modularity and reuse across different components

---
 .../CustomCheckbox/CustomCheckbox.module.css      | 15 ++++++++++++---
 .../components/CustomCheckbox/CustomCheckbox.tsx  |  6 +++---
 .../src/pages/Dashboard/Dashboard.tsx             |  6 +++---
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/Frontend/speedcart-react/src/components/CustomCheckbox/CustomCheckbox.module.css b/Frontend/speedcart-react/src/components/CustomCheckbox/CustomCheckbox.module.css
index cd14b6c..9a98351 100644
--- a/Frontend/speedcart-react/src/components/CustomCheckbox/CustomCheckbox.module.css
+++ b/Frontend/speedcart-react/src/components/CustomCheckbox/CustomCheckbox.module.css
@@ -1,13 +1,19 @@
 .labelContainer {
-    display: flex;
     align-items: center; /* Vertically center the checkbox and label */
-    justify-content: center; /* Horizontally center the checkbox and label */
     position: relative;
     cursor: pointer;
     user-select: none;
     text-align: center; /* Ensures text is also centered if used */
 }
 
+.flex {
+    display: flex;
+}
+
+.inlineFlex {
+    display: inline-flex;
+}
+
 .input {
     position: absolute;
     opacity: 0;
@@ -22,12 +28,15 @@
     width: 16px;
     background-color: #eee;
     border-radius: 4px;
-    margin-right: 8px;
     display: flex; /* Use flex to center the checkmark visually */
     align-items: center; /* Vertical center */
     justify-content: center; /* Horizontal center */
 }
 
+.marginRightDistance {
+    margin-right: 8px;
+}
+
 .labelContainer:hover .checkmark {
     background-color: #ccc;
 }
diff --git a/Frontend/speedcart-react/src/components/CustomCheckbox/CustomCheckbox.tsx b/Frontend/speedcart-react/src/components/CustomCheckbox/CustomCheckbox.tsx
index 7310ad3..0970938 100644
--- a/Frontend/speedcart-react/src/components/CustomCheckbox/CustomCheckbox.tsx
+++ b/Frontend/speedcart-react/src/components/CustomCheckbox/CustomCheckbox.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import styles from './CustomCheckbox.module.css';
 
-const CustomCheckbox = ({ name = '', className = '', checked = false, onChange = null, disabled = false, children = null}) => {
+const CustomCheckbox = ({ name = '', className = '', flexType = 'inlineFlex', checked = false, onChange = null, disabled = false, children = null}) => {
     return (
-        <label className={`${styles.labelContainer} ${className} ${disabled ? styles.disabled : ''}`}>
+        <label className={`${styles.labelContainer} ${flexType === 'flex' ? styles.flex : styles.inlineFlex} ${className} ${disabled ? styles.disabled : ''}`}>
             <input
                 type="checkbox"
                 className={styles.input}
@@ -12,7 +12,7 @@ const CustomCheckbox = ({ name = '', className = '', checked = false, onChange =
                 disabled={disabled}
                 name={name}
             />
-            <span className={styles.checkmark}></span>
+            <span className={`${styles.checkmark} ${children && styles.marginRightDistance}`}></span>
             {children}
         </label>
     );
diff --git a/Frontend/speedcart-react/src/pages/Dashboard/Dashboard.tsx b/Frontend/speedcart-react/src/pages/Dashboard/Dashboard.tsx
index 24b5a29..68a1067 100644
--- a/Frontend/speedcart-react/src/pages/Dashboard/Dashboard.tsx
+++ b/Frontend/speedcart-react/src/pages/Dashboard/Dashboard.tsx
@@ -308,16 +308,16 @@ function Dashboard() {
                                         (read is always the bare minimum).
                                     </section>
                                     <section>
-                                        <CustomCheckbox disabled={true} checked={true}>
+                                        <CustomCheckbox disabled={true} checked={true} flexType={'flex'}>
                                             Read
                                         </CustomCheckbox>
-                                        <CustomCheckbox checked={canUpdate} onChange={() => {
+                                        <CustomCheckbox checked={canUpdate} flexType={'flex'} onChange={() => {
                                             // Invert the current state
                                             setCanUpdate(!canUpdate);
                                         }}>
                                             Update
                                         </CustomCheckbox>
-                                        <CustomCheckbox checked={canDelete} onChange={() => {
+                                        <CustomCheckbox checked={canDelete} flexType={'flex'} onChange={() => {
                                             // Invert the current state
                                             setCanDelete(!canDelete);
                                         }}>

From 2e80b9802a3f6ea8f298a8210b034faddf1eca57 Mon Sep 17 00:00:00 2001
From: Cameron Green <camy624@comcast.net>
Date: Thu, 19 Dec 2024 19:40:16 -0500
Subject: [PATCH 3/3] Make PR final changes

---
 .../src/components/PageLayout/PageLayout.tsx                | 4 ++--
 Frontend/speedcart-react/src/pages/Dashboard/Dashboard.tsx  | 6 +++---
 Frontend/speedcart-react/src/pages/Home/Home.tsx            | 2 +-
 Frontend/speedcart-react/src/pages/Login/Login.tsx          | 4 ++--
 .../NewShoppingListWithProvider.tsx                         | 4 ++--
 .../ShoppingListDetailWithProvider.tsx                      | 3 +--
 .../src/pages/ShoppingListShare/ShoppingListShare.tsx       | 3 ++-
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/Frontend/speedcart-react/src/components/PageLayout/PageLayout.tsx b/Frontend/speedcart-react/src/components/PageLayout/PageLayout.tsx
index 62411de..b2df2d7 100644
--- a/Frontend/speedcart-react/src/components/PageLayout/PageLayout.tsx
+++ b/Frontend/speedcart-react/src/components/PageLayout/PageLayout.tsx
@@ -4,13 +4,13 @@ import StatusModal from '@components/StatusModal';
 
 import styles from './PageLayout.module.css';
 
-const PageLayout = ({ children, status = null, showStatusModal = false, modalProps = null, className=''}) => {
+const PageLayout = ({ children, status = null, modalProps = null, className=''}) => {
   return (
     <>
       <main className={`${styles.mainContent} ${className}`}>
         {children}
       </main>
-      {showStatusModal && <StatusModal status={status} {...modalProps} />}
+      {modalProps && <StatusModal status={status} {...modalProps} />}
     </>
   );
 };
diff --git a/Frontend/speedcart-react/src/pages/Dashboard/Dashboard.tsx b/Frontend/speedcart-react/src/pages/Dashboard/Dashboard.tsx
index 68a1067..19713e8 100644
--- a/Frontend/speedcart-react/src/pages/Dashboard/Dashboard.tsx
+++ b/Frontend/speedcart-react/src/pages/Dashboard/Dashboard.tsx
@@ -1,15 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-
 import { FaTrash, FaEdit, FaShare, FaClipboard } from 'react-icons/fa';
+
 import { useAuth, fetchOwnedShoppingLists, fetchSharedShoppingLists, deleteShoppingList, createShareLink, AuthContextType } from 'shared';
+
+import PageLayout from '@components/PageLayout';
 import Modal from '@components/Modal';
 import CustomCheckbox from '@components/CustomCheckbox';
 
 import { RequestStatus } from '@constants/enums';
 
 import styles from './Dashboard.module.css';
-import PageLayout from '@components/PageLayout';
 
 function Dashboard() {
     const [shoppingListTitles, setShoppingListTitles] = useState([]);
@@ -183,7 +184,6 @@ function Dashboard() {
         <>
             <PageLayout
                 status={deletionStatus}
-                showStatusModal={true}
                 modalProps={{
                     loadingText:'Attempting deletion...',
                     successText:'Deletion successful! Updating your list of shopping lists...',
diff --git a/Frontend/speedcart-react/src/pages/Home/Home.tsx b/Frontend/speedcart-react/src/pages/Home/Home.tsx
index e80693d..1941ea6 100644
--- a/Frontend/speedcart-react/src/pages/Home/Home.tsx
+++ b/Frontend/speedcart-react/src/pages/Home/Home.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 
+import PageLayout from '@components/PageLayout';
 import SiteLogo from '@components/SiteLogo';
 import TransitionSection from '@components/TransitionSection';
 
@@ -9,7 +10,6 @@ import adaptabilityImage from '@assets/images/freshProduce.jpg'; // Image from:
 import reusabilityImage from '@assets/images/phoneAndLaptop.jpg';// Image from: https://unsplash.com/photos/silver-iphone-6-on-macbook-pro--aC2BL0GICs
 
 import styles from './Home.module.css';
-import PageLayout from '@components/PageLayout';
 
 const Home: React.FC<any> = (props) => {
 
diff --git a/Frontend/speedcart-react/src/pages/Login/Login.tsx b/Frontend/speedcart-react/src/pages/Login/Login.tsx
index a4f4322..bc38662 100644
--- a/Frontend/speedcart-react/src/pages/Login/Login.tsx
+++ b/Frontend/speedcart-react/src/pages/Login/Login.tsx
@@ -4,11 +4,12 @@ import { GoogleLogin } from '@react-oauth/google';
 
 import { useAuth } from 'shared';
 
+import PageLayout from '@components/PageLayout';
+
 import { RequestStatus } from '@constants/enums';
 import { AppRoute } from '@constants/routes';
 
 import styles from './Login.module.css';
-import PageLayout from '@components/PageLayout';
 
 function Login() {
   const navigate = useNavigate();
@@ -57,7 +58,6 @@ function Login() {
   return (
     <PageLayout
       status={loginStatus}
-      showStatusModal={true}
       modalProps={{
         loadingText: 'Verifying login token...',
         successText: `Login successful! Redirecting to ${redirectPageName}...`,
diff --git a/Frontend/speedcart-react/src/pages/NewShoppingListWithProvider/NewShoppingListWithProvider.tsx b/Frontend/speedcart-react/src/pages/NewShoppingListWithProvider/NewShoppingListWithProvider.tsx
index 2dfc6b9..7c61973 100644
--- a/Frontend/speedcart-react/src/pages/NewShoppingListWithProvider/NewShoppingListWithProvider.tsx
+++ b/Frontend/speedcart-react/src/pages/NewShoppingListWithProvider/NewShoppingListWithProvider.tsx
@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom'; // Necessary for redirects
+
 import { useAuth, AuthContextType } from 'shared';
 
+import PageLayout from '@components/PageLayout';
 import SaveButton from '@components/SaveButton';
 import AddShoppingListItemButton from '@components/AddShoppingListItemButton';
 import ShoppingListSection from '@components/ShoppingListSection';
@@ -13,7 +15,6 @@ import { CrudMode } from '@constants/crudmodes';
 
 import styles from './NewShoppingListWithProvider.module.css';
 import inputStyles from '@modularStyles/inputs.module.css';
-import PageLayout from '@components/PageLayout';
 
 const NewShoppingList: React.FC = () => {
   const navigate = useNavigate();
@@ -73,7 +74,6 @@ const NewShoppingList: React.FC = () => {
     <>
       <PageLayout
         status={saveStatus}
-        showStatusModal={true}
         modalProps={{
           loadingText:'Loading...',
           successText:'Save successful! Redirecting...',
diff --git a/Frontend/speedcart-react/src/pages/ShoppingListDetailWithProvider/ShoppingListDetailWithProvider.tsx b/Frontend/speedcart-react/src/pages/ShoppingListDetailWithProvider/ShoppingListDetailWithProvider.tsx
index 7b74836..baca011 100644
--- a/Frontend/speedcart-react/src/pages/ShoppingListDetailWithProvider/ShoppingListDetailWithProvider.tsx
+++ b/Frontend/speedcart-react/src/pages/ShoppingListDetailWithProvider/ShoppingListDetailWithProvider.tsx
@@ -6,6 +6,7 @@ import {
   fetchShoppingList,
 } from 'shared';
 
+import PageLayout from '@components/PageLayout';
 import SaveButton from '@components/SaveButton';
 import AddShoppingListItemButton from '@components/AddShoppingListItemButton';
 import ShoppingListSection from '@components/ShoppingListSection';
@@ -17,7 +18,6 @@ import { RequestStatus } from '@constants/enums';
 // CSS style imports
 import inputStyles from '@modularStyles/inputs.module.css';
 import styles from './ShoppingListDetailWithProvider.module.css';
-import PageLayout from '@components/PageLayout';
 
 const ShoppingListDetail = () => {
   const { id } = useParams() as { id: string };
@@ -151,7 +151,6 @@ const ShoppingListDetail = () => {
     <>
       <PageLayout className={styles.flexCenter}
         status={editStatus}
-        showStatusModal={true}
         modalProps={{
           loadingText:'Loading...',
           successText:'Edit save successful! Refreshing page...',
diff --git a/Frontend/speedcart-react/src/pages/ShoppingListShare/ShoppingListShare.tsx b/Frontend/speedcart-react/src/pages/ShoppingListShare/ShoppingListShare.tsx
index e37641f..4f617e6 100644
--- a/Frontend/speedcart-react/src/pages/ShoppingListShare/ShoppingListShare.tsx
+++ b/Frontend/speedcart-react/src/pages/ShoppingListShare/ShoppingListShare.tsx
@@ -4,9 +4,10 @@ import { GoogleLogin } from '@react-oauth/google';
 
 import { useAuth, createSharingPermissions } from 'shared';
 
-import { AppRoute } from "@constants/routes";
 import PageLayout from "@components/PageLayout";
 
+import { AppRoute } from "@constants/routes";
+
 
 function ShoppingListShare() {
     const navigate = useNavigate();