UBC/Alley-HSBC-Frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

change contactspage styling

Browse Source
This commit is contained in:
mbalsdon 2022-03-30 00:03:51 -07:00
parent 67a7216c95
commit 9a2da4b441
3 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/contacts/contacts-components/Body.tsx
View File

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

8
src/components/contacts/contacts-components/body-components/LowerBody.tsx
View File

@ -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}
>

15
src/components/contacts/contacts-components/body-components/UpperBody.tsx
View File

@ -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>