From 792d254ff7d6c0d784c87ac6116843946b6a1893 Mon Sep 17 00:00:00 2001
From: Taehee Choi <cth5545cth5545@gmail.com>
Date: Tue, 8 Mar 2022 12:42:07 -0800
Subject: [PATCH] small design change

---
 .../body-components/LowerBody.tsx             |  2 +-
 .../body-components/UpperBody.tsx             | 35 +++++++++++--------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/contacts/contacts-components/body-components/LowerBody.tsx b/src/components/contacts/contacts-components/body-components/LowerBody.tsx
index d0645eb..a43d74f 100644
--- a/src/components/contacts/contacts-components/body-components/LowerBody.tsx
+++ b/src/components/contacts/contacts-components/body-components/LowerBody.tsx
@@ -46,7 +46,7 @@ const LowerBody: React.FC<Props> = (props) => {
           >
             <Button
               variant="text"
-              color="secondary"
+              color="info"
               onClick={() => props.setMeetingInfoOpen(true)}
             >
               {meeting.name}
diff --git a/src/components/contacts/contacts-components/body-components/UpperBody.tsx b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
index cb44baa..6d808a3 100644
--- a/src/components/contacts/contacts-components/body-components/UpperBody.tsx
+++ b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
@@ -4,6 +4,8 @@ import PhoneIcon from "@mui/icons-material/Phone";
 import VideocamIcon from "@mui/icons-material/Videocam";
 import GroupsIcon from "@mui/icons-material/Groups";
 import ContactInfo from "../../ContactInfo";
+import AddIcon from "@mui/icons-material/Add";
+import { textAlign } from "@mui/system";
 
 interface Props {
   contactInfo: ContactInfo;
@@ -26,40 +28,45 @@ const UpperBody: React.FC<Props> = (props) => {
         sx={{
           display: "flex",
           flexDirection: "row",
-          justifyContent: "space-evenly",
+          justifyContent: "space-between",
           alignItems: "center",
+          mx: 4,
         }}
       >
         <Typography variant="h3">{props.contactInfo.name}</Typography>
+        <Button variant="outlined" color="success" startIcon={<AddIcon />}>
+          favorites
+        </Button>
       </Box>
       <Box
         sx={{
           display: "flex",
           flexDirection: "row",
           alignItems: "center",
+          justifyContent: "space-between",
           my: 2,
+          mx: 4,
         }}
       >
-        <Box
-          sx={{
-            ml: "5%",
-          }}
-        >
-          <IconButton sx={{ border: 1, mr: 1 }} size="large">
+        <Box>
+          <IconButton
+            sx={{ border: 1, mr: 1, backgroundColor: "secondary" }}
+            size="large"
+            color="secondary"
+          >
             <PhoneIcon fontSize="large" />
           </IconButton>
-          <IconButton sx={{ border: 1, mr: 1 }} size="large">
+          <IconButton sx={{ border: 1, mr: 1 }} size="large" color="secondary">
             <VideocamIcon fontSize="large" />
           </IconButton>
-          <IconButton sx={{ border: 1, mr: 1 }} size="large">
+          <IconButton sx={{ border: 1, mr: 1 }} size="large" color="secondary">
             <GroupsIcon fontSize="large" />
           </IconButton>
-          <Button variant="outlined" color="success">
-            Add to favorites
-          </Button>
         </Box>
-        <Box sx={{ display: "flex", flexDirection: "column", ml: "10%" }}>
-          <Typography>{props.contactInfo.status}</Typography>
+        <Box sx={{ display: "flex", flexDirection: "column" }}>
+          <Typography sx={{ textAlign: "right" }}>
+            {props.contactInfo.status}
+          </Typography>
           <Typography>MeetingName-1372</Typography>
         </Box>
       </Box>