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

homepage styling changes

Browse Source
This commit is contained in:
mbalsdon 2022-03-29 22:53:09 -07:00
parent 612a937df9
commit 34815793e9
3 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/home/Meeting.tsx
View File

@ -1,9 +1,8 @@
import ListItemButton from "@mui/material/ListItemButton"; import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import DetailedMeeting from "../../api-bodies/DetailedMeeting"; import DetailedMeeting from "../../api-bodies/DetailedMeeting";
import Grid from "@mui/material/Grid";
import { useAppDispatch } from "../../redux/hooks"; import { useAppDispatch } from "../../redux/hooks";
import { open } from "../../redux/slices/meetingDetailsOpenSlice"; import { open } from "../../redux/slices/meetingDetailsOpenSlice";
import { Box, Typography } from "@mui/material";
interface Props { interface Props {
meeting: DetailedMeeting; meeting: DetailedMeeting;
@ -17,15 +16,15 @@ function Meeting(props: Props) {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
return ( return (
<ListItemButton component="a" onClick={() => dispatch(open(props.meeting))} className={"row meeting " + props.meetingClass}> <ListItemButton
<Grid container> onClick={() => dispatch(open(props.meeting))}
<Grid item sm={9}> component="a"
<ListItemText primary={props.meetingName} secondary={props.meetingMembers} /> className={"row meeting " + props.meetingClass}>
</Grid> <Box sx={{ display: "flex", flexDirection: "column" }}>
<Grid item sm={3}> <Typography color="white" variant="h5">{props.meetingName}</Typography>
<ListItemText primary={props.meetingTime} /> <Typography color="white" variant="h6">{props.meetingTime.toUpperCase()}</Typography>
</Grid> <Typography color="mistyrose" variant="body1">{props.meetingMembers}</Typography>
</Grid> </Box>
</ListItemButton> </ListItemButton>
); );
} }

18
src/components/home/MeetingsPanel.tsx
View File

@ -42,8 +42,8 @@ const MeetingsPanel: React.FC = () => {
return ( return (
<div className="meetings-panel"> <div className="meetings-panel">
<div className="row panel-label"> <div className="row panel-label">
<Typography className="mylabel" sx={{ ml: 1 }}> <Typography className="mylabel" variant="h5" sx={{ color: "white", ml: 1 }}>
Meetings in Progress Meetings in progress
</Typography> </Typography>
</div> </div>
@ -62,6 +62,18 @@ const MeetingsPanel: React.FC = () => {
const currentDatemil = currentDate.getTime(); const currentDatemil = currentDate.getTime();
const meetingMembersString = () => {
if (meetingMembers.length > 3) {
return "Participants: " +
meetingMembers[0].name + ", " +
meetingMembers[1].name + ", " +
meetingMembers[2].name + ", and " +
(meetingMembers.length - 3).toString() + " more...";
} else {
return "Participants: " + meetingMembers.map((userLite) => (" " + userLite.name)).toString();
}
};
if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) { if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) {
const lastMeetingClass = meetings.length == i ? " lastMeeting" : ""; const lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
i += 1; i += 1;
@ -71,7 +83,7 @@ const MeetingsPanel: React.FC = () => {
meetingClass={"meeting-" + (i - 1) + lastMeetingClass} meetingClass={"meeting-" + (i - 1) + lastMeetingClass}
meetingName={meeting.topic} meetingName={meeting.topic}
meetingTime={formatTimeFromDate(startDate) + " - " + formatTimeFromDate(endDate)} meetingTime={formatTimeFromDate(startDate) + " - " + formatTimeFromDate(endDate)}
meetingMembers={meetingMembers.map((userLite) => (" " + userLite.name + " ")).toString()} meetingMembers={meetingMembersString()}
/> />
); );
} }

14
src/style/App.css
View File

@ -11,13 +11,13 @@ a {
} }
.main-home .meetings-panel { .main-home .meetings-panel {
margin: auto;
margin-top: 15vh; margin-top: 15vh;
padding-bottom: 10vh;
border-style: solid; border-style: solid;
border-color: #D3D3D3; border-color: mistyrose;
border-width: 2px; border-width: 2px;
border-radius: 40px; border-radius: 40px;
width: 65%; width: 85%;
height: 65vh; height: 65vh;
overflow: hidden; overflow: hidden;
} }
@ -28,14 +28,14 @@ a {
.main-home .meetings-panel .panel-label { .main-home .meetings-panel .panel-label {
text-align: center; text-align: center;
background-color: grey; background-color: #AF000D;
padding-top: 2%; padding-top: 2%;
padding-bottom: 2%; padding-bottom: 2%;
} }
.main-home .meetings-panel .meeting { .main-home .meetings-panel .meeting {
background-color: #D3D3D3; background-color: lightcoral;
text-align: center; text-align: left;
margin-top: 15px; margin-top: 15px;
line-height: 2; line-height: 2;
} }
@ -61,7 +61,7 @@ a {
.main-home .short-cuts .tile { .main-home .short-cuts .tile {
margin-right: 100%; margin-right: 100%;
background-color: #D3D3D3; background-color: mistyrose;
width: 100px; width: 100px;
height: 100px; height: 100px;
border-radius: 16px; border-radius: 16px;