From dc528e82e381ef386c5a33eb630e126d2ac051fa Mon Sep 17 00:00:00 2001
From: nora-zajzon <nzajzon@ucsd.edu>
Date: Thu, 27 Jun 2024 14:01:24 -0700
Subject: [PATCH 1/2] Replaced HTML components with MUI applicable components

---
 client/src/components/auth/HandleAuth.js      |   9 +-
 client/src/components/user-admin/EditUsers.js | 109 +++++++++---------
 2 files changed, 57 insertions(+), 61 deletions(-)

diff --git a/client/src/components/auth/HandleAuth.js b/client/src/components/auth/HandleAuth.js
index 4c9d6abb4..240a683f3 100644
--- a/client/src/components/auth/HandleAuth.js
+++ b/client/src/components/auth/HandleAuth.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Redirect } from 'react-router-dom';
 import { isValidToken } from '../../services/user.service';
 import { authLevelRedirect } from '../../utils/authUtils';
+import { Box, Typography, CircularProgress } from '@mui/material';
 
 import '../../sass/MagicLink.scss';
 import useAuth from '../../hooks/useAuth';
@@ -43,7 +44,7 @@ const HandleAuth = (props) => {
     setIsLoaded(true);
   }, [isMagicLinkValid, setIsLoaded, auth]);
 
-  if (!isLoaded) return <div>Loading...</div>;
+  if (!isLoaded) return <Box display="flex" justifyContent="center" alignItems="center" height="100vh"><CircularProgress /></Box>;
 
   const Delayed = ({ children, waitBeforeShow = 500 }) => {
     const [isShown, setIsShown] = useState(false);
@@ -65,12 +66,12 @@ const HandleAuth = (props) => {
   }
 
   return (
-    <div className="flex-container">
+    <Box className="flex-container">
       <Delayed waitBeforeShow={1000}>
-        <div>Sorry, the link is not valid anymore.</div>
+        <Typography variant="body1">Sorry, the link is not valid anymore.</Typography>
       </Delayed>
       {auth?.user && <Redirect to={loginRedirect} /> /* Redirect to /welcome */}
-    </div>
+    </Box>
   );
 };
 
diff --git a/client/src/components/user-admin/EditUsers.js b/client/src/components/user-admin/EditUsers.js
index 1e5f72e93..e6b873f54 100644
--- a/client/src/components/user-admin/EditUsers.js
+++ b/client/src/components/user-admin/EditUsers.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import '../../sass/UserAdmin.scss';
-import { FormGroup, FormControlLabel, Switch } from '@mui/material'
+import { FormGroup, FormControlLabel, Switch, Box, Typography, Button, MenuItem, Select, List, ListItem, IconButton } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 // child of UserAdmin. Displays form to update users.
 const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUserActiveStatus }) => {
@@ -65,74 +66,68 @@ const EditUsers = ({ userToEdit, backToSearch, updateUserDb, projects, updateUse
   }
 
   return (
-    <div className="edit-users">
-      <div className="ua-row">
-        <div className="user-display-column-left">Name:</div>
-        <div className="user-display-column-right">{userName}</div>
-      </div>
-      <div className="ua-row">
-        <div className="user-display-column-left">Email:</div>
-        <div className="user-display-column-right">{userEmail}</div>
-      </div>
-      <div className="ua-row is-active-flex">
-        <div className="user-is-active-column-left">Is Active:</div>
-        <div className="is-active-flex">
-          <span className="active-status">{isActive.toString()}</span>
+    <Box className="edit-users">
+      <Box className="ua-row">
+        <Box className="user-display-column-left">Name:</Box>
+        <Box className="user-display-column-right">{userName}</Box>
+      </Box>
+      <Box className="ua-row">
+        <Box className="user-display-column-left">Email:</Box>
+        <Box className="user-display-column-right">{userEmail}</Box>
+      </Box>
+      <Box className="ua-row is-active-flex">
+        <Box className="user-is-active-column-left">Is Active:</Box>
+        <Box className="is-active-flex">
+          <Typography className="active-status">{isActive.toString()}</Typography>
           <FormGroup>
-            <FormControlLabel control={<Switch checked={isActive} />} onClick={() => handleSetIsActive()} />
+            <FormControlLabel control={<Switch checked={isActive} onClick={handleSetIsActive} />} />
           </FormGroup>
-        </div>
-      </div>
-      <div className="ua-row">
-        <div className="user-display-column-left">Projects:</div>
-        <div className="user-display-column-right">
-          <ul className="project-list">
-            {userProjectsToDisplay.map((result) => {
-              return (
-                <li key={`remove_${result[0]}`}>
-                  {result[1]}
-                  <button
-                    type="button"
-                    className="button-remove"
-                    onClick={() => handleRemoveProject(result[0])}
-                  >
-                    (remove)
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-      </div>
-      <div>
+        </Box>
+      </Box>
+      <Box className="ua-row">
+        <Box className="user-display-column-left">Projects:</Box>
+        <Box className="user-display-column-right">
+          <List className="project-list">
+            {userProjectsToDisplay.map((result) => (
+              <ListItem key={`remove_${result[0]}`} secondaryAction={
+                <IconButton edge="end" aria-label="delete" onClick={() => handleRemoveProject(result[0])}>
+                  <DeleteIcon />
+                </IconButton>
+              }>
+                {result[1]}
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+      </Box>
+      <Box>
         <form onSubmit={onSubmit}>
-          <select
+          <Select
             className="project-select"
             value={projectValue}
             onChange={(event) => {
               setProjectValue(event.target.value);
             }}
+            displayEmpty
           >
-            <option value="default">Select a project..</option>
-            {activeProjects.map((result) => {
-              return (
-                <option key={`select_${result[0]}`} value={result[0]}>
-                  {result[1]}
-                </option>
-              );
-            })}
-          </select>
-          <button className="button-add" type="submit">
+            <MenuItem value="default">Select a project..</MenuItem>
+            {activeProjects.map((result) => (
+              <MenuItem key={`select_${result[0]}`} value={result[0]}>
+                {result[1]}
+              </MenuItem>
+            ))}
+          </Select>
+          <Button className="button-add" type="submit" variant="contained" color="primary">
             Add project
-          </button>
+          </Button>
         </form>
-        <div>
-          <button type="button" className="button-back" onClick={backToSearch}>
+        <Box>
+          <Button className="button-back" onClick={backToSearch} variant="outlined">
             Back to search
-          </button>
-        </div>
-      </div>
-    </div>
+          </Button>
+        </Box>
+      </Box>
+    </Box>
   );
 };
 

From 72f2e99dc1d11a15ca7bfecdc27333cd8af1aede Mon Sep 17 00:00:00 2001
From: nora-zajzon <nzajzon@ucsd.edu>
Date: Sun, 7 Jul 2024 10:29:01 -0700
Subject: [PATCH 2/2] Updated HTML components to MUI components

---
 .../src/components/dashboard/AddTeamMember.js | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/client/src/components/dashboard/AddTeamMember.js b/client/src/components/dashboard/AddTeamMember.js
index 61e8143d8..8dca61c9d 100644
--- a/client/src/components/dashboard/AddTeamMember.js
+++ b/client/src/components/dashboard/AddTeamMember.js
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { Box, Button, TextField, Typography } from "@mui/material";
 import "../../sass/AddTeamMember.scss";
 
 const AddTeamMember = (props) => {
@@ -7,17 +8,17 @@ const AddTeamMember = (props) => {
     const handleInputChange = (e) => setEmail(e.currentTarget.value);
 
     return (
-        <div className="flex-container">
-            <div className="addmember-container">
+        <Box className="flex-container">
+            <Box className="addmember-container">
                 <form
                 className="form-add-member"
                 autoComplete="off"
                 onSubmit={(e) => props.addToTeamHandler(e, email)}
                 >
-                <div className="form-row">
-                    <div className="form-input-text">
-                    <label htmlFor="email">Add team member:</label>
-                    <input
+                <Box className="form-row">
+                    <Box className="form-input-text">
+                    <TextField
+                        label = "Add team member"
                         type="email"
                         name="email"
                         placeholder="Email Address"
@@ -27,22 +28,22 @@ const AddTeamMember = (props) => {
                         autoComplete="none"
                         required="required"
                     />
-                    </div>
-                </div>
+                    </Box>
+                </Box>
 
-                <div className="form-input-button">
-                    <button
+                <Box className="form-input-button">
+                    <Button
                     type="submit"
                     className="addmember-button"
                     >
                     Add
-                    </button>
-                </div>
+                    </Button>
+                </Box>
                 </form>
-                {props.isSuccess ? <p className="addmember-success">User Added</p> : null}
-                <div className="addmember-warning">{props.isError ? props.errorMessage : null}</div>
-            </div>
-        </div>
+                {props.isSuccess && <Typography className="addmember-success">User Added</Typography>}
+                {props.isError && <Typography className="addmember-warning">{props.errorMessage}</Typography>}
+            </Box>
+        </Box>
     );
 };