minor fixes

src/components/contacts/contacts-components/body-components/LowerBody.tsx

@@ -25,13 +25,16 @@ const LowerBody: React.FC<Props> = (props) => {
         border: 1,
         borderRadius: 2,
         borderColor: "#af000d",
-        backgroundColor: "#af000d",
         width: "70%",
         height: "60%",
         alignSelf: "center",
       }}
     >
-      <Typography sx={{ color: "white", my: 1 }} variant="h4" textAlign="center">
+      <Typography
+        sx={{ color: "white", my: 1 }}
+        variant="h4"
+        textAlign="center"
+      >
         Upcoming meetings
       </Typography>
       {meetings.length === 0 ? (

src/components/contacts/contacts-components/body-components/UpperBody.tsx

@@ -96,7 +96,7 @@ const UpperBody: React.FC<Props> = ({ contactInfo }) => {
           </Button>
         ) : (
           <Button
-            variant="contained"
+            variant="outlined"
             color="secondary"
             startIcon={<RemoveIcon />}
             onClick={() =>
@@ -133,7 +133,9 @@ const UpperBody: React.FC<Props> = ({ contactInfo }) => {
           </IconButton>
         </Box>
         <Box sx={{ display: "flex", flexDirection: "column" }}>
-          <Typography variant="button" sx={{ textAlign: "right" }}>{meetingStatus}</Typography>
+          <Typography variant="button" sx={{ textAlign: "right" }}>
+            {meetingStatus}
+          </Typography>
           {detailedMeeting ? (
             <Typography variant="h6">{detailedMeeting.topic}</Typography>
           ) : null}

src/components/home/MeetingsPanel.tsx

@@ -28,7 +28,7 @@ const MeetingsPanel: React.FC = () => {
   //   );
   //   participants.push(userLite);
   // });
-  
+
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
 
   useEffect(() => {
@@ -40,7 +40,11 @@ const MeetingsPanel: React.FC = () => {
   return (
     <div className="meetings-panel">
       <div className="row panel-label">
-        <Typography className="mylabel" variant="h5" sx={{ color: "white", ml: 1 }}>
+        <Typography
+          className="mylabel"
+          variant="h5"
+          sx={{ color: "white", ml: 1 }}
+        >
           Meetings in progress
         </Typography>
       </div>
@@ -65,16 +69,25 @@ const MeetingsPanel: React.FC = () => {
 
           const meetingMembersString = () => {
             if (meetingMembers.length > 3) {
-              return "Participants: " + 
+              return (
-              meetingMembers[0].name + ", " + 
+                "Participants: " +
-              meetingMembers[1].name + ", " +
+                meetingMembers[0].name +
-              meetingMembers[2].name + ", and " + 
+                ", " +
-              (meetingMembers.length - 3).toString() + " more...";
+                meetingMembers[1].name +
+                ", " +
+                meetingMembers[2].name +
+                ", and " +
+                (meetingMembers.length - 3).toString() +
+                " more..."
+              );
             } else {
-              return "Participants: " + meetingMembers.map((userLite) => (" " + userLite.name)).toString();
+              return (
+                "Participants: " +
+                meetingMembers.map((userLite) => " " + userLite.name).toString()
+              );
             }
           };
-
+          console.log(meetingMembersString);
           if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) {
             const lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
             i += 1;

src/components/meeting-details/meeting-details-components/Body.tsx

@@ -13,7 +13,6 @@ import DetailedMeeting from "../../../api-bodies/DetailedMeeting";
 import { useAppSelector } from "../../../redux/hooks";
 import { selectUsers } from "../../../redux/slices/usersSlice";
 import UserLite from "../../../api-bodies/UserLite";
-import { getMeetingDuration } from "../Utils";
 
 enum MeetingStatus {
   Live = "Live",
@@ -45,21 +44,41 @@ const Body: React.FC<Props> = ({ meeting }) => {
     selectUsers(state, meeting.registrantIds)
   );
   const liveParticipants: UserLite[] = useAppSelector((state) =>
-    selectUsers(state, props.meeting.liveParticipantIds)
+    selectUsers(state, meeting.liveParticipantIds)
   );
 
   const parseIsoString = (s: string) => {
-    const month = ["January", "February", "March", "April", 
+    const month = [
-      "May", "June", "July", "August", 
+      "January",
-      "September", "October", "November", "December"][parseInt(s.slice(5,7)) - 1];
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ][parseInt(s.slice(5, 7)) - 1];
     const day = s.slice(8, 10);
     const isoTime: string = s.slice(11, 16);
     const hour: number = parseInt(isoTime.slice(0, 2));
     const hourMod: string = hour % 12 == 0 ? "12" : (hour % 12).toString();
-    return month + " " + day + ", " + hourMod + ":" + isoTime.slice(3, 5) + (hour > 11 ? "PM" : "AM");
+    return (
+      month +
+      " " +
+      day +
+      ", " +
+      hourMod +
+      ":" +
+      isoTime.slice(3, 5) +
+      (hour > 11 ? "PM" : "AM")
+    );
   };
-  
+
-  const start = props.meeting.start;
+  const start = meeting.startTime;
   const startDateString = parseIsoString(start);
   const listLiveParticipants = () => {
     const s: string[] = liveParticipants.map((user) => user.name + ", ");
@@ -83,16 +102,29 @@ const Body: React.FC<Props> = ({ meeting }) => {
           flexDirection: "column",
           width: "70%",
           height: "100%",
-          mt: 10
+          mt: 10,
         }}
       >
-        <Typography sx={{ pl: 5 }} variant="overline">Meeting ID: {meeting.meetingId}</Typography>
+        <Typography sx={{ pl: 5 }} variant="overline">
-        <Typography sx={{ pl: 5, color: "#af000d" }} variant="h2">{meeting.topic}</Typography>
+          Meeting ID: {meeting.meetingId}
+        </Typography>
+        <Typography sx={{ pl: 5, color: "#af000d" }} variant="h2">
+          {meeting.topic}
+        </Typography>
         <Divider sx={{ mb: 3 }} />
-        <Typography sx={{ pl: 5 }} variant="h4">Start: {startDateString}</Typography>
+        <Typography sx={{ pl: 5 }} variant="h4">
-        <Typography sx={{ pl: 5 }} variant="h4">Duration: {meeting.duration.toString() + " minutes"}</Typography>
+          Start: {startDateString}
-        <Typography sx= {{ my: 1 }} />
+        </Typography>
-        <Typography sx={{ pl: 5 }} variant="button">Currently inside: {listLiveParticipants()}</Typography>
+        <Typography sx={{ pl: 5 }} variant="h4">
+          Duration: {meeting.duration.toString() + " minutes"}
+        </Typography>
+        <Typography sx={{ my: 1 }} />
+        <Typography sx={{ pl: 5 }} variant="button">
+          Currently inside: {listLiveParticipants()}
+        </Typography>
+        <Typography sx={{ pl: 5 }} variant="button">
+          Status: {meetingStatus}
+        </Typography>
       </Box>
       <Box
         sx={{