From d9997f40ad3c73e0d0e34ce79abf6a74dfb0c12f Mon Sep 17 00:00:00 2001
From: JamesNg <njames15@gmail.com>
Date: Mon, 12 May 2025 22:44:24 -0400
Subject: [PATCH 1/2] updated html components to mui components, and adopted
 css styles

---
 client/package.json       |  1 +
 client/src/pages/Home.jsx | 55 +++++++++++++++++++++++++++------------
 client/src/sass/Home.scss | 14 +++++-----
 3 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/client/package.json b/client/package.json
index 2e6c95dfb..ab5336bc3 100644
--- a/client/package.json
+++ b/client/package.json
@@ -7,6 +7,7 @@
     "@babel/plugin-transform-react-jsx-self": "^7.10.4",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@mui/base": "^5.0.0-beta.62",
     "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.16.7",
     "@mui/x-date-pickers": "^7.21.0",
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
index 98b890a22..a812c86f6 100644
--- a/client/src/pages/Home.jsx
+++ b/client/src/pages/Home.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import CheckInButtons from '../components/presentational/CheckInButtons';
 import CreateNewProfileButton from '../components/presentational/CreateNewProfileButton';
 import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend } from '../utils/globalSettings';
-import { CircularProgress, Box, Typography } from '@mui/material';
+import { CircularProgress, Box, Typography, Select, MenuItem, FormControl } from '@mui/material';
 
 import '../sass/Home.scss';
 
@@ -25,12 +25,27 @@ const h4sx = {
   fontSize: {xs: '1.8rem'},
 }
 
+// CSS for MUI label 
+const labelsx = {
+  fontFamily: 'aliseoregular',
+  fontSize: 18,
+}
+
+// CSS for MUI MenuItem
+const menuItemSx = {
+    width: '100%',
+    fontSize: 18,
+    color: 'rgb(250, 17, 79)',
+    backgroundColor: 'inhert',
+}
+
+
 const Home = () => {
   const [events, setEvents] = useState(null);
   const [selectedEvent, setSelectedEvent] = useState('');
 
   const handleEventChange = (e) => {
-    setSelectedEvent(e.currentTarget.value);
+    setSelectedEvent(e.target.value);
   };
 
   // Fetching only events with checkInReady = true
@@ -61,6 +76,8 @@ const Home = () => {
     );
   }
 
+  
+
   return (
       <Box className="home">
         <Box className="home-headers">
@@ -70,39 +87,43 @@ const Home = () => {
 
         {events && events.length > 0 ? (
           <Box className="meeting-select-container">
-            <form
+            <FormControl
               className="form-select-meeting"
               autoComplete="off"
               onSubmit={(e) => e.preventDefault()}
+              variant='standard'
             >
               <Box className="form-row">
                 <Box className="form-input-select">
-                  <label htmlFor={'meeting-checkin'}>
+                  <Typography sx={labelsx}>
                     Select a meeting to check-in:
-                  </label>
+                  </Typography>
                   <Box className="radio-buttons">
-                    <select
-                      name={'meeting-checkin'}
+                    <Select
+                      labelId='select-label'
                       className="select-meeting-dropdown"
+                      value={selectedEvent ? selectedEvent : "--SELECT ONE--"}
+                      renderValue={(selected) => (
+                        <Typography sx={{ color: 'red'}}>
+                          {selectedEvent ? selectedEvent : "--SELECT ONE--"}
+                        </Typography>
+                      )}
                       onChange={handleEventChange}
-                      required
-                      defaultValue="--SELECT ONE--"
                     >
-                      <option value="--SELECT ONE--" disabled hidden>
-                        --SELECT ONE--
-                      </option>
                       {events.map((event) => {
                         return (
-                          <option key={event._id || 0} value={event._id}>
-                            {event?.project?.name + ' - ' + event.name}
-                          </option>
+                          <MenuItem key={event._id || 0} value={event.project?.name + ' - ' + event.name} sx={menuItemSx}>
+                            <Typography sx={menuItemSx}>
+                              {event?.project?.name + ' - ' + event.name}
+                            </Typography>
+                          </MenuItem>
                         );
                       })}
-                    </select>
+                    </Select>
                   </Box>
                 </Box>
               </Box>
-            </form>
+            </FormControl>
           </Box>
         ):(
 
diff --git a/client/src/sass/Home.scss b/client/src/sass/Home.scss
index 147708055..29a01ca44 100644
--- a/client/src/sass/Home.scss
+++ b/client/src/sass/Home.scss
@@ -126,18 +126,18 @@
         }
     
         p {
-            text-align: left;
+            text-align: center;
             font-weight: bold;
-            letter-spacing: .05em;
+            letter-spacing: 0.075em;
         }
     }
 }
 
-// .radio-buttons {
-//     display: flex;
-//     justify-content: space-around;
-//     margin: 8px;
-// }
+.radio-buttons {
+    display: flex;
+    justify-content: space-around;
+    margin: 8px;
+}
 
 .select-meeting-dropdown:-webkit-autofill,
 .select-meeting-dropdown:-webkit-autofill:hover,

From f48ff2dad27475214228f53f86bef37a246255e4 Mon Sep 17 00:00:00 2001
From: JamesNg <njames15@gmail.com>
Date: Tue, 11 Feb 2025 15:49:20 -0500
Subject: [PATCH 2/2] removed custom CSS and fixed MUI comps

---
 client/package.json       |  1 -
 client/src/pages/Home.jsx | 26 ++++++--------------------
 2 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/client/package.json b/client/package.json
index ab5336bc3..2e6c95dfb 100644
--- a/client/package.json
+++ b/client/package.json
@@ -7,7 +7,6 @@
     "@babel/plugin-transform-react-jsx-self": "^7.10.4",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/base": "^5.0.0-beta.62",
     "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.16.7",
     "@mui/x-date-pickers": "^7.21.0",
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
index a812c86f6..e7feb4e28 100644
--- a/client/src/pages/Home.jsx
+++ b/client/src/pages/Home.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import CheckInButtons from '../components/presentational/CheckInButtons';
 import CreateNewProfileButton from '../components/presentational/CreateNewProfileButton';
 import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend } from '../utils/globalSettings';
-import { CircularProgress, Box, Typography, Select, MenuItem, FormControl } from '@mui/material';
+import { CircularProgress, Box, Typography, Select, MenuItem, FormControl, InputLabel } from '@mui/material';
 
 import '../sass/Home.scss';
 
@@ -25,20 +25,6 @@ const h4sx = {
   fontSize: {xs: '1.8rem'},
 }
 
-// CSS for MUI label 
-const labelsx = {
-  fontFamily: 'aliseoregular',
-  fontSize: 18,
-}
-
-// CSS for MUI MenuItem
-const menuItemSx = {
-    width: '100%',
-    fontSize: 18,
-    color: 'rgb(250, 17, 79)',
-    backgroundColor: 'inhert',
-}
-
 
 const Home = () => {
   const [events, setEvents] = useState(null);
@@ -95,12 +81,12 @@ const Home = () => {
             >
               <Box className="form-row">
                 <Box className="form-input-select">
-                  <Typography sx={labelsx}>
+                  <InputLabel id='select-meeting-label'>
                     Select a meeting to check-in:
-                  </Typography>
+                  </InputLabel>
                   <Box className="radio-buttons">
                     <Select
-                      labelId='select-label'
+                      labelId='select-meeting-label'
                       className="select-meeting-dropdown"
                       value={selectedEvent ? selectedEvent : "--SELECT ONE--"}
                       renderValue={(selected) => (
@@ -112,8 +98,8 @@ const Home = () => {
                     >
                       {events.map((event) => {
                         return (
-                          <MenuItem key={event._id || 0} value={event.project?.name + ' - ' + event.name} sx={menuItemSx}>
-                            <Typography sx={menuItemSx}>
+                          <MenuItem key={event._id || 0} value={event.project?.name + ' - ' + event.name}>
+                            <Typography>
                               {event?.project?.name + ' - ' + event.name}
                             </Typography>
                           </MenuItem>