Merge pull request #56 from CPSC319-Winter-term-2/mbalsdon-contacts-touchups

change contactspage styling
also fixes some minor spacing issues

src/components/contacts/contacts-components/Body.tsx

@@ -16,7 +16,7 @@ const Body: React.FC<Props> = (props) => {
         flexDirection: "column",
         width: "100%",
         height: "100%",
-        mt: 2,
+        mt: 5,
       }}
     >
       <Toolbar />

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

@@ -24,14 +24,17 @@ const LowerBody: React.FC<Props> = (props) => {
         flexDirection: "column",
         border: 1,
         borderRadius: 2,
+        borderColor: "#af000d",
+        backgroundColor: "#af000d",
         width: "70%",
         height: "60%",
         alignSelf: "center",
       }}
     >
-      <Typography variant="h4" textAlign="center">
+      <Typography sx={{ color: "white", my: 1 }} variant="h4" textAlign="center">
         Upcoming meetings
       </Typography>
+      {/* <Divider color="indianred" /> */}
       <List sx={{ maxHeight: "100%", overflow: "auto" }}>
         {meetings.map((meeting, i) => (
           <Box
@@ -40,8 +43,7 @@ const LowerBody: React.FC<Props> = (props) => {
               justifyContent: "space-between",
               height: "50px",
               px: "10px",
-              borderTop: 1,
+              backgroundColor: i % 2 ? "mistyrose" : "white",
-              borderBottom: i === meetings.length - 1 ? 1 : 0,
             }}
             key={i}
           >

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

@@ -45,6 +45,7 @@ const UpperBody: React.FC<Props> = (props) => {
         flexDirection: "column",
         border: 1,
         borderRadius: 2,
+        borderColor: "#af000d",
         width: "70%",
         alignSelf: "center",
         mb: 2,
@@ -59,7 +60,7 @@ const UpperBody: React.FC<Props> = (props) => {
           mx: 4,
         }}
       >
-        <Typography variant="h3">{props.contactInfo.name}</Typography>
+        <Typography sx={{ pt: 2 }} variant="h3">{props.contactInfo.name}</Typography>
         {!favoritesUuids.includes(props.contactInfo.uuid) ? (
           <Button
             variant="outlined"
@@ -75,7 +76,7 @@ const UpperBody: React.FC<Props> = (props) => {
           </Button>
         ) : (
           <Button
-            variant="outlined"
+            variant="contained"
             color="secondary"
             startIcon={<RemoveIcon />}
             onClick={() =>
@@ -103,23 +104,23 @@ const UpperBody: React.FC<Props> = (props) => {
       >
         <Box>
           <IconButton
-            sx={{ border: 1, mr: 1, backgroundColor: "secondary" }}
+            sx={{ border: 1, backgroundColor: "white", mr: 1 }}
             size="large"
             color="secondary"
           >
             <PhoneIcon fontSize="large" />
           </IconButton>
-          <IconButton sx={{ border: 1, mr: 1 }} size="large" color="secondary">
+          <IconButton sx={{ border: 1, backgroundColor: "white", mr: 1 }} size="large" color="secondary">
             <VideocamIcon fontSize="large" />
           </IconButton>
-          <IconButton sx={{ border: 1, mr: 1 }} size="large" color="secondary">
+          <IconButton sx={{ border: 1, backgroundColor: "white", mr: 1 }} size="large" color="secondary">
             <GroupsIcon fontSize="large" />
           </IconButton>
         </Box>
         <Box sx={{ display: "flex", flexDirection: "column" }}>
-          <Typography sx={{ textAlign: "right" }}>{meetingStatus}</Typography>
+          <Typography variant="button" sx={{ textAlign: "right" }}>{meetingStatus}</Typography>
           {detailedMeeting ? (
-            <Typography>{detailedMeeting.topic}</Typography>
+            <Typography variant="h6">{detailedMeeting.topic}</Typography>
           ) : null}
         </Box>
       </Box>