From 9a2da4b441ab94cd15a0ca7d88efa5c83ffe68d1 Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Wed, 30 Mar 2022 00:03:51 -0700
Subject: [PATCH] change contactspage styling

---
 .../contacts/contacts-components/Body.tsx         |  2 +-
 .../body-components/LowerBody.tsx                 |  8 +++++---
 .../body-components/UpperBody.tsx                 | 15 ++++++++-------
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/contacts/contacts-components/Body.tsx b/src/components/contacts/contacts-components/Body.tsx
index b477500..2706ab5 100644
--- a/src/components/contacts/contacts-components/Body.tsx
+++ b/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 />
diff --git a/src/components/contacts/contacts-components/body-components/LowerBody.tsx b/src/components/contacts/contacts-components/body-components/LowerBody.tsx
index f7645b2..5225536 100644
--- a/src/components/contacts/contacts-components/body-components/LowerBody.tsx
+++ b/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,
-              borderBottom: i === meetings.length - 1 ? 1 : 0,
+              backgroundColor: i % 2 ? "mistyrose" : "white",
             }}
             key={i}
           >
diff --git a/src/components/contacts/contacts-components/body-components/UpperBody.tsx b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
index 10b4560..b62526e 100644
--- a/src/components/contacts/contacts-components/body-components/UpperBody.tsx
+++ b/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>