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

Merge pull request #54 from CPSC319-Winter-term-2/mbalsdon-homepage-touchups

Browse Source 
edit the homepage's styling
This commit is contained in:
Jincheng Lu 2022-03-29 23:13:23 -07:00 committed by GitHub
commit add5d90a83
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 45 additions and 34 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 ListItemText from "@mui/material/ListItemText";
import DetailedMeeting from "../../api-bodies/DetailedMeeting";
import Grid from "@mui/material/Grid";
import { useAppDispatch } from "../../redux/hooks";
import { open } from "../../redux/slices/meetingDetailsOpenSlice";
import { Box, Typography } from "@mui/material";
interface Props {
meeting: DetailedMeeting;
@ -17,15 +16,15 @@ function Meeting(props: Props) {
const dispatch = useAppDispatch();
return (
<ListItemButton component="a" onClick={() => dispatch(open(props.meeting))} className={"row meeting " + props.meetingClass}>
<Grid container>
<Grid item sm={9}>
<ListItemText primary={props.meetingName} secondary={props.meetingMembers} />
</Grid>
<Grid item sm={3}>
<ListItemText primary={props.meetingTime} />
</Grid>
</Grid>
<ListItemButton
onClick={() => dispatch(open(props.meeting))}
component="a"
className={"row meeting " + props.meetingClass}>
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography color="white" variant="h5">{props.meetingName}</Typography>
<Typography color="white" variant="h6">{props.meetingTime.toUpperCase()}</Typography>
<Typography color="mistyrose" variant="body1">{props.meetingMembers}</Typography>
</Box>
</ListItemButton>
);
}

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

@ -30,6 +30,7 @@ const MeetingsPanel: React.FC = () => {
// );
// participants.push(userLite);
// });
const [currentDate, setCurrentDate] = useState<Date>(new Date());
useEffect(() => {
@ -41,12 +42,12 @@ const MeetingsPanel: React.FC = () => {
return (
<div className="meetings-panel">
<div className="row panel-label">
<Typography className="mylabel" sx={{ ml: 1 }}>
Meetings in Progress
<Typography className="mylabel" variant="h5" sx={{ color: "white", ml: 1 }}>
Meetings in progress
</Typography>
</div>
<List style={{maxHeight: '100%', overflow: 'auto'}} >
<List style={{maxHeight: "100%", overflow: "auto"}} >
{meetings.map((meeting) => {
const meetingMembers: UserLite[] = [];
participants.forEach((userLite) => {
@ -61,8 +62,20 @@ const MeetingsPanel: React.FC = () => {
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) {
let lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
const lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
i += 1;
return (
<Meeting
@ -70,7 +83,7 @@ const MeetingsPanel: React.FC = () => {
meetingClass={"meeting-" + (i - 1) + lastMeetingClass}
meetingName={meeting.topic}
meetingTime={formatTimeFromDate(startDate) + " - " + formatTimeFromDate(endDate)}
meetingMembers={meetingMembers.map((userLite) => (" " + userLite.name + " ")).toString()}
meetingMembers={meetingMembersString()}
/>
);
}

6
src/components/home/ShortCuts.tsx
View File

@ -1,7 +1,5 @@
import PeopleIcon from "@mui/icons-material/People";
import AddIcon from "@mui/icons-material/Add";
import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
import CircleIcon from "@mui/icons-material/Circle";
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
@ -33,7 +31,7 @@ const ShortCuts: React.FC<Props> = ({ users }: Props) => {
<Button className="tile">
<PeopleIcon className="icon" />
</Button>
<Typography className="mylabel" sx={{ ml: 1 }}>
<Typography variant="h6" className="mylabel" sx={{ ml: 1 }}>
Schedule Meeting
</Typography>
</Grid>
@ -47,7 +45,7 @@ const ShortCuts: React.FC<Props> = ({ users }: Props) => {
onClose={handleClose}
users={users}
/>
<Typography className="mylabel" sx={{ ml: 1 }}>
<Typography variant="h6" className="mylabel" sx={{ ml: 1 }}>
Call Group
</Typography>
</Grid>

29
src/style/App.css
View File

@ -11,13 +11,13 @@ a {
}
.main-home .meetings-panel {
margin: auto;
margin-top: 15vh;
padding-bottom: 10vh;
border-style: solid;
border-color: #D3D3D3;
border-color: mistyrose;
border-width: 2px;
border-radius: 40px;
width: 65%;
width: 85%;
height: 65vh;
overflow: hidden;
}
@ -28,14 +28,14 @@ a {
.main-home .meetings-panel .panel-label {
text-align: center;
background-color: grey;
background-color: #AF000D;
padding-top: 2%;
padding-bottom: 2%;
}
.main-home .meetings-panel .meeting {
background-color: #D3D3D3;
text-align: center;
background-color: lightcoral;
text-align: left;
margin-top: 15px;
line-height: 2;
}
@ -54,23 +54,24 @@ a {
.main-home .short-cuts .mylabel {
display: inline-block;
margin: 0;
width: 100px;
margin-left: 25%;
width: 125px;
text-align: center;
}
.main-home .short-cuts .tile {
margin-right: 100%;
background-color: #D3D3D3;
width: 100px;
height: 100px;
margin-left: 25%;
margin-right: 50%;
background-color: mistyrose;
width: 125px;
height: 125px;
border-radius: 16px;
}
.main-home .short-cuts .tile .icon {
color: black;
width: 70%;
height: 70%;
width: 80%;
height: 80%;
}
.login .grid-container {