Merge pull request #54 from CPSC319-Winter-term-2/mbalsdon-homepage-touchups

edit the homepage's styling

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

@@ -1,7 +1,5 @@
 import PeopleIcon from "@mui/icons-material/People";
-import AddIcon from "@mui/icons-material/Add";
 import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
-import CircleIcon from "@mui/icons-material/Circle";
 import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
@@ -33,7 +31,7 @@ const ShortCuts: React.FC<Props> = ({ users }: Props) => {
           <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>
@@ -47,7 +45,7 @@ const ShortCuts: React.FC<Props> = ({ users }: Props) => {
             onClose={handleClose}
             users={users}
           />
-          <Typography className="mylabel" sx={{ ml: 1 }}>
+          <Typography variant="h6" className="mylabel" sx={{ ml: 1 }}>
             Call Group
           </Typography>
         </Grid>

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;
 }
@@ -54,23 +54,24 @@ a {
 
 .main-home .short-cuts .mylabel {
   display: inline-block;
-  margin: 0;
-  width: 100px;
+  margin-left: 25%;
+  width: 125px;
   text-align: center;
 }
 
 .main-home .short-cuts .tile {
-  margin-right: 100%;
-  background-color: #D3D3D3;
-  width: 100px;
-  height: 100px;
+  margin-left: 25%;
+  margin-right: 50%;
+  background-color: mistyrose;
+  width: 125px;
+  height: 125px;
   border-radius: 16px;
 }
 
 .main-home .short-cuts .tile .icon {
   color: black;
-  width: 70%;
-  height: 70%;
+  width: 80%;
+  height: 80%;
 }
 
 .login .grid-container {