List Sharing mutual share removal and other bug fixes

.github/workflows/frontend.yml

@@ -4,9 +4,10 @@ on:
   # Allows manual deployment
   workflow_dispatch:
   push:
-    # Triggers only when code is pushed to the development branch
+    # Triggers only when code is pushed to the deployment or development branches
     # that modifies files in the Frontend or docs/legal directories
     branches:
+      - deployment
       - development
 
     paths:
@@ -29,6 +30,9 @@ jobs:
     - name: Install dependencies
       run: cd Frontend && npm install --force # This should install all dependencies, regardless of the workspace
 
+    - name: Write .env file
+      run: echo "${{ github.ref == 'refs/heads/deployment' && secrets.FRONTEND_PROD_ENV_FILE || secrets.FRONTEND_DEV_ENV_FILE }}" > Frontend/speedcart-react/.env
+
     - name: Build front end
       env:
         CI: false
@@ -41,4 +45,4 @@ jobs:
         accountId: ${{ secrets.CF_ACCOUNT_ID }}
         projectName: "speedcart"
         directory: "Frontend/speedcart-react/build"
-        branch: "development"
+        branch: "${{ github.ref == 'refs/heads/deployment' && 'deployment' || 'development' }}"

Frontend/speedcart-react/.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

Frontend/speedcart-react/src/components/ShoppingListItem/ShoppingListItem.module.css

@@ -1,5 +1,6 @@
 .listItem {
   display: table-row; /* Ensure the row aligns with the table structure */
+  border-top: 2px transparent solid;
 }
 
 .listItem > * {
@@ -26,6 +27,19 @@
   text-align: center;
 }
 
+.restoreBtn {
+  display: flex; /* Ensures the button content stays on a single line */
+  align-items: center; /* Centers the icon vertically */
+  justify-content: space-evenly; /* Centers the icon horizontally */
+  background-color: #0f40ab;
+  color: inherit; /* This makes the text color of our site more modular (e.g., dark/light mode would be easier to implement) */
+  width: 100px; /* Adjust the width as needed */
+  border: none;
+  padding: 8px !important; /* Adjust padding as needed */
+  border-radius: 8px;
+  cursor: pointer;
+}
+
 .checkboxWrapper {
   display: table-cell;
   vertical-align: middle; /* Ensures the checkbox is vertically aligned */

Frontend/speedcart-react/src/components/ShoppingListItem/ShoppingListItem.tsx

@@ -7,6 +7,7 @@ import { CrudMode } from '@constants/crudmodes';
 import styles from './ShoppingListItem.module.css';
 import inputStyles from '@modularStyles/inputs.module.css';
 import { useShoppingListContext } from '@customHooks/ShoppingListContext';
+import { FaTrashRestore } from 'react-icons/fa'
 
 function ShoppingListItem({ item, index, onItemChange, onRemoveItem, isEditing, crudMode = CrudMode.READ, className = '' }) {
   const { handleRestoreItem } = useShoppingListContext();
@@ -51,9 +52,6 @@ function ShoppingListItem({ item, index, onItemChange, onRemoveItem, isEditing,
                 🗑️
               </button>
             }
-            {crudMode === CrudMode.DELETE &&
-              <button onClick={() => handleRestoreItem(index)}>Restore</button>
-            }
           </div>
         </>
         : 
@@ -63,6 +61,11 @@ function ShoppingListItem({ item, index, onItemChange, onRemoveItem, isEditing,
               <div>{item.name}</div>
               <div>{item.quantity}</div>
               <div>{item.is_food ? "Yes" : "No"}</div>
+              {crudMode === CrudMode.DELETE &&
+                <button onClick={() => handleRestoreItem(index)} className={styles.restoreBtn}>
+                  Restore <FaTrashRestore />
+                </button>
+              }
             </>
           {/* Other elements for viewing */}
         </>)}

Frontend/speedcart-react/src/index.tsx

@@ -10,7 +10,7 @@ import { AuthProvider } from 'shared'; // Import AuthProvider
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <>
-    <GoogleOAuthProvider clientId='345095409372-ebua99dg2ok8dgt5bfpkacf4nclqhj08.apps.googleusercontent.com'>
+    <GoogleOAuthProvider clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID}>
       {/* This is our custom context for tracking the status of a user to see if
       they're logged in and see data saved about them if they actually are */}
       <AuthProvider>

Frontend/speedcart-react/src/pages/Dashboard/Dashboard.tsx

@@ -274,12 +274,6 @@ function Dashboard() {
                                                     <FaEdit className={styles.viewEditIcon} />
                                                     <span className={styles.tooltip}>View/Edit List</span>
                                                 </Link>
-                                                <button onClick={() => {
-                                                    // This state will display the modal for the sharing feature for that specific list
-                                                    setShareListId(list.list_id);
-                                                }} >
-                                                    <FaShare className={styles.faShare} />
-                                                </button>
                                             </span>
                                             <span className={styles.listName}>{list.name}</span>
                                             <div className={styles.listDetails}>