Merge branch 'main' into home

src/components/home/Meeting.tsx

@@ -1,9 +1,8 @@
 import ListItemButton from "@mui/material/ListItemButton";
-import ListItemText from "@mui/material/ListItemText";
 import DetailedMeeting from "../../api-bodies/DetailedMeeting";
-import Grid from "@mui/material/Grid";
 import { useAppDispatch } from "../../redux/hooks";
 import { open } from "../../redux/slices/meetingDetailsOpenSlice";
+import { Box, Typography } from "@mui/material";
 
 interface Props {
   meeting: DetailedMeeting;
@@ -17,15 +16,15 @@ function Meeting(props: Props) {
   const dispatch = useAppDispatch();
 
   return (
-    <ListItemButton component="a" onClick={() => dispatch(open(props.meeting))} className={"row meeting " + props.meetingClass}>
-      <Grid container>
-        <Grid item sm={9}>
-          <ListItemText primary={props.meetingName} secondary={props.meetingMembers} />
-        </Grid>
-        <Grid item sm={3}>
-          <ListItemText primary={props.meetingTime} />
-        </Grid>
-      </Grid>
+    <ListItemButton 
+      onClick={() => dispatch(open(props.meeting))} 
+      component="a" 
+      className={"row meeting " + props.meetingClass}>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
+        <Typography color="white" variant="h5">{props.meetingName}</Typography>
+        <Typography color="white" variant="h6">{props.meetingTime.toUpperCase()}</Typography>
+        <Typography color="mistyrose" variant="body1">{props.meetingMembers}</Typography>
+      </Box>
     </ListItemButton>
   );
 }

src/components/home/MeetingsPanel.tsx

@@ -30,6 +30,7 @@ const MeetingsPanel: React.FC = () => {
   //   );
   //   participants.push(userLite);
   // });
+  
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
 
   useEffect(() => {
@@ -41,12 +42,12 @@ const MeetingsPanel: React.FC = () => {
   return (
     <div className="meetings-panel">
       <div className="row panel-label">
-        <Typography className="mylabel" sx={{ ml: 1 }}>
-          Meetings in Progress
+        <Typography className="mylabel" variant="h5" sx={{ color: "white", ml: 1 }}>
+          Meetings in progress
         </Typography>
       </div>
 
-      <List style={{maxHeight: '100%', overflow: 'auto'}} >
+      <List style={{maxHeight: "100%", overflow: "auto"}} >
         {meetings.map((meeting) => {
           const meetingMembers: UserLite[] = [];
           participants.forEach((userLite) => {
@@ -61,8 +62,20 @@ const MeetingsPanel: React.FC = () => {
 
           const currentDatemil = currentDate.getTime();
 
+          const meetingMembersString = () => {
+            if (meetingMembers.length > 3) {
+              return "Participants: " + 
+              meetingMembers[0].name + ", " + 
+              meetingMembers[1].name + ", " +
+              meetingMembers[2].name + ", and " + 
+              (meetingMembers.length - 3).toString() + " more...";
+            } else {
+              return "Participants: " + meetingMembers.map((userLite) => (" " + userLite.name)).toString();
+            }
+          };
+
           if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) {
-            let lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
+            const lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
             i += 1;
             return (
               <Meeting 
@@ -70,7 +83,7 @@ const MeetingsPanel: React.FC = () => {
                 meetingClass={"meeting-" + (i - 1) + lastMeetingClass}
                 meetingName={meeting.topic} 
                 meetingTime={formatTimeFromDate(startDate) + " - " + formatTimeFromDate(endDate)} 
-                meetingMembers={meetingMembers.map((userLite) => (" " + userLite.name + " ")).toString()} 
+                meetingMembers={meetingMembersString()} 
               />
             );
           }

src/components/home/ShortCuts.tsx

@@ -26,7 +26,7 @@ const ShortCuts: React.FC = () => {
           <Button className="tile">
             <PeopleIcon className="icon" />
           </Button>
-          <Typography className="mylabel" sx={{ ml: 1 }}>
+          <Typography variant="h6" className="mylabel" sx={{ ml: 1 }}>
             Schedule Meeting
           </Typography>
         </Grid>
@@ -38,7 +38,7 @@ const ShortCuts: React.FC = () => {
             open={open}
             handleClose={handleClose}
           />
-          <Typography className="mylabel" sx={{ ml: 1 }}>
+          <Typography variant="h6" className="mylabel" sx={{ ml: 1 }}>
             Call Group
           </Typography>
         </Grid>