homepage styling changes

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

@@ -42,8 +42,8 @@ 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>
 
@@ -62,6 +62,18 @@ 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) {
             const lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
             i += 1;
@@ -71,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/style/App.css

@@ -11,13 +11,13 @@ a {
 }
 
 .main-home .meetings-panel {
-  margin: auto;
   margin-top: 15vh;
+  padding-bottom: 10vh;
   border-style: solid;
-  border-color: #D3D3D3;
+  border-color: mistyrose;
   border-width: 2px;
   border-radius: 40px;
-  width: 65%;
+  width: 85%;
   height: 65vh;
   overflow: hidden;
 }
@@ -28,14 +28,14 @@ a {
 
 .main-home .meetings-panel .panel-label {
   text-align: center;
-  background-color: grey;
+  background-color: #AF000D;
   padding-top: 2%;
   padding-bottom: 2%;
 }
 
 .main-home .meetings-panel .meeting {
-  background-color: #D3D3D3;
-  text-align: center;
+  background-color: lightcoral;
+  text-align: left;
   margin-top: 15px;
   line-height: 2;
 }
@@ -61,7 +61,7 @@ a {
 
 .main-home .short-cuts .tile {
   margin-right: 100%;
-  background-color: #D3D3D3;
+  background-color: mistyrose;
   width: 100px;
   height: 100px;
   border-radius: 16px;