From 612a937df971a87eee5d0928ad60b91dd4b7896e Mon Sep 17 00:00:00 2001 From: mbalsdon Date: Tue, 29 Mar 2022 22:41:56 -0700 Subject: [PATCH 1/7] small changes to obey eslint --- src/components/home/MeetingsPanel.tsx | 5 +++-- src/components/home/ShortCuts.tsx | 2 -- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx index d48a0ff..c6fda44 100644 --- a/src/components/home/MeetingsPanel.tsx +++ b/src/components/home/MeetingsPanel.tsx @@ -30,6 +30,7 @@ const MeetingsPanel: React.FC = () => { // ); // participants.push(userLite); // }); + const [currentDate, setCurrentDate] = useState(new Date()); useEffect(() => { @@ -46,7 +47,7 @@ const MeetingsPanel: React.FC = () => { - + {meetings.map((meeting) => { const meetingMembers: UserLite[] = []; participants.forEach((userLite) => { @@ -62,7 +63,7 @@ const MeetingsPanel: React.FC = () => { const currentDatemil = currentDate.getTime(); if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) { - let lastMeetingClass = meetings.length == i ? " lastMeeting" : ""; + const lastMeetingClass = meetings.length == i ? " lastMeeting" : ""; i += 1; return ( Date: Tue, 29 Mar 2022 22:53:09 -0700 Subject: [PATCH 2/7] homepage styling changes --- src/components/home/Meeting.tsx | 21 ++++++++++----------- src/components/home/MeetingsPanel.tsx | 18 +++++++++++++++--- src/style/App.css | 14 +++++++------- 3 files changed, 32 insertions(+), 21 deletions(-) diff --git a/src/components/home/Meeting.tsx b/src/components/home/Meeting.tsx index 24bf854..f908a1e 100644 --- a/src/components/home/Meeting.tsx +++ b/src/components/home/Meeting.tsx @@ -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 ( - dispatch(open(props.meeting))} className={"row meeting " + props.meetingClass}> - - - - - - - - + dispatch(open(props.meeting))} + component="a" + className={"row meeting " + props.meetingClass}> + + {props.meetingName} + {props.meetingTime.toUpperCase()} + {props.meetingMembers} + ); } diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx index c6fda44..f93fc15 100644 --- a/src/components/home/MeetingsPanel.tsx +++ b/src/components/home/MeetingsPanel.tsx @@ -42,8 +42,8 @@ const MeetingsPanel: React.FC = () => { return (
- - Meetings in Progress + + Meetings in progress
@@ -62,6 +62,18 @@ 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) { const lastMeetingClass = meetings.length == i ? " lastMeeting" : ""; i += 1; @@ -71,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()} /> ); } diff --git a/src/style/App.css b/src/style/App.css index 24fdd0e..1dd5f3d 100644 --- a/src/style/App.css +++ b/src/style/App.css @@ -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; } @@ -61,7 +61,7 @@ a { .main-home .short-cuts .tile { margin-right: 100%; - background-color: #D3D3D3; + background-color: mistyrose; width: 100px; height: 100px; border-radius: 16px; From 8fb6343b035e2510158be942226913d9cdb33ecb Mon Sep 17 00:00:00 2001 From: mbalsdon Date: Tue, 29 Mar 2022 23:01:57 -0700 Subject: [PATCH 3/7] center and enlargen homepage buttons --- src/components/home/ShortCuts.tsx | 4 ++-- src/style/App.css | 15 ++++++++------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/home/ShortCuts.tsx b/src/components/home/ShortCuts.tsx index 31d530a..fe6ab4e 100644 --- a/src/components/home/ShortCuts.tsx +++ b/src/components/home/ShortCuts.tsx @@ -31,7 +31,7 @@ const ShortCuts: React.FC = ({ users }: Props) => { - + Schedule Meeting @@ -45,7 +45,7 @@ const ShortCuts: React.FC = ({ users }: Props) => { onClose={handleClose} users={users} /> - + Call Group diff --git a/src/style/App.css b/src/style/App.css index 1dd5f3d..79d04c1 100644 --- a/src/style/App.css +++ b/src/style/App.css @@ -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%; + margin-left: 25%; + margin-right: 50%; background-color: mistyrose; - width: 100px; - height: 100px; + 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 { From 603452b046007e9cdc6a0ca64658bff39c1e9e43 Mon Sep 17 00:00:00 2001 From: CodeServer Date: Wed, 30 Mar 2022 07:12:27 +0100 Subject: [PATCH 4/7] removed unused mockdata --- src/components/home/CallFavouritesDialog.tsx | 19 +++++-------- src/components/home/Home.tsx | 15 +++++----- src/components/home/ShortCuts.tsx | 19 ++++--------- src/style/App.css | 29 ++++++++++---------- src/style/App.css.map | 2 +- src/style/modules/_mainHome.sass | 29 ++++++++++---------- 6 files changed, 50 insertions(+), 63 deletions(-) diff --git a/src/components/home/CallFavouritesDialog.tsx b/src/components/home/CallFavouritesDialog.tsx index 58d12c1..6156f70 100644 --- a/src/components/home/CallFavouritesDialog.tsx +++ b/src/components/home/CallFavouritesDialog.tsx @@ -15,25 +15,16 @@ import { useAppSelector } from "../../redux/hooks"; import { selectFavorites } from "../../redux/slices/favoritesSlice"; import { selectTeam, selectUsers } from "../../redux/slices/usersSlice"; import GroupSelect from "../sidebar/GroupSelect"; -import { SidebarUserObj } from "./Home"; interface Props { open: boolean; - selectedValue: SidebarUserObj; - onClose: (value: SidebarUserObj) => void; - users: SidebarUserObj[]; + handleClose: () => void; } const CallFavouritesDialog: React.FC = ({ open, - selectedValue, - onClose, - users, + handleClose, }: Props) => { - const handleClose = () => { - onClose(selectedValue); - }; - console.log(users); const [group, setGroup] = useState("Favorites"); const [inputText, setInputText] = useState(""); @@ -60,6 +51,10 @@ const CallFavouritesDialog: React.FC = ({ selectUsers(state, groupMembersUuids) ); + const handleCall = () => { + handleClose(); + }; + return ( Select who to call: @@ -107,7 +102,7 @@ const CallFavouritesDialog: React.FC = ({ - Call Group diff --git a/src/style/App.css b/src/style/App.css index 24fdd0e..79d04c1 100644 --- a/src/style/App.css +++ b/src/style/App.css @@ -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 { diff --git a/src/style/App.css.map b/src/style/App.css.map index e1734c0..8a09258 100644 --- a/src/style/App.css.map +++ b/src/style/App.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "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", + "mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AKlD5B,AAAA,UAAU,CAAC;EAGP,SAAS,EAAE,cAAc;CAuDO;;AA1DpC,AAII,UAJM,CAIN,eAAe,CAAC;EACZ,UAAU,EAAE,IAAI;EAChB,cAAc,EAAE,IAAI;EACpB,YAAY,EAAE,KAAK;EACnB,YAAY,EAAE,SAAS;EACvB,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;CAuBW;;AApCnC,AAcQ,UAdE,CAIN,eAAe,CAUX,IAAI,CAAC;EACD,KAAK,EAAE,IAAI;CAAG;;AAf1B,AAgBQ,UAhBE,CAIN,eAAe,CAYX,YAAY,CAAC;EACT,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,OAAO;EACzB,WAAW,EAAE,EAAE;EACf,cAAc,EAAE,EAAE;CAAG;;AApBjC,AA8BQ,UA9BE,CAIN,eAAe,CA0BX,QAAQ,CAAC;EACL,gBAAgB,EAAE,UAAU;EAC5B,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,CAAC;CAAG;;AAlC7B,AAmCQ,UAnCE,CAIN,eAAe,CA+BX,YAAY,CAAC;EACT,aAAa,EAAE,GAAG;CAAG;;AApCjC,AAsCQ,UAtCE,CAqCN,WAAW,CACP,MAAM,CAAC;EAEH,UAAU,EAAE,IAAI;CAAG;;AAxC/B,AAyCQ,UAzCE,CAqCN,WAAW,CAIP,MAAM,CAAC;EACH,UAAU,EAAE,GAAG;CAAG;;AA1C9B,AA2CQ,UA3CE,CAqCN,WAAW,CAMP,QAAQ,CAAC;EACL,OAAO,EAAE,YAAY;EACrB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;CAAG;;AA/CjC,AAgDQ,UAhDE,CAqCN,WAAW,CAWP,KAAK,CAAC;EACF,WAAW,EAAE,GAAG;EAChB,YAAY,EAAE,GAAG;EACjB,gBAAgB,EAAE,SAAS;EAC3B,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,IAAI;CAIC;;AA1DhC,AAuDY,UAvDF,CAqCN,WAAW,CAWP,KAAK,CAOD,KAAK,CAAC;EACF,KAAK,EAAE,KAAK;EACZ,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;CAAG;;AC1D9B,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAqBC;;AA1BlC,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,WAAW,CAAC;EACR,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;CAAG;;AAZ3B,AAaQ,MAbF,CACF,eAAe,CAYX,UAAU,CAAE;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,gBAAgB,EAAE,OAAO;CAAG;;AAhBxC,AAiBQ,MAjBF,CACF,eAAe,CAgBX,aAAa,CAAC;EACV,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;CAAG;;AArBhC,AAsBQ,MAtBF,CACF,eAAe,CAqBX,UAAU,CAAC;EACP,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CAEQ;;AA1BhC,AAyBY,MAzBN,CACF,eAAe,CAqBX,UAAU,CAGN,CAAC,CAAC;EACE,KAAK,EAAE,IAAI;CAAG", "sources": [ "App.sass", "_variables.sass", diff --git a/src/style/modules/_mainHome.sass b/src/style/modules/_mainHome.sass index c66df63..6841f07 100644 --- a/src/style/modules/_mainHome.sass +++ b/src/style/modules/_mainHome.sass @@ -3,20 +3,20 @@ // width: 100% !important max-width: 85% !important .meetings-panel - margin: auto margin-top: 15vh + padding-bottom: 10vh border-style: solid - border-color: $main-home-background-color + border-color: mistyrose border-width: 2px border-radius: 40px - width: 65% + width: 85% height: 65vh overflow: hidden .row width: 100% .panel-label text-align: center - background-color: grey + background-color: #AF000D padding-top: 2% padding-bottom: 2% // .current-time @@ -29,8 +29,8 @@ // background-color: grey // padding-bottom: 1% .meeting - background-color: $main-home-background-color - text-align: center + background-color: lightcoral + text-align: left margin-top: 15px line-height: 2 .lastMeeting @@ -43,16 +43,17 @@ margin-top: 5vh .mylabel display: inline-block - margin: 0 - width: 100px + margin-left: 25% + width: 125px text-align: center .tile - margin-right: 100% - background-color: $main-home-background-color - width: 100px - height: 100px + margin-left: 25% + margin-right: 50% + background-color: mistyrose + width: 125px + height: 125px border-radius: 16px .icon color: black - width: 70% - height: 70% \ No newline at end of file + width: 80% + height: 80% \ No newline at end of file From 9a2da4b441ab94cd15a0ca7d88efa5c83ffe68d1 Mon Sep 17 00:00:00 2001 From: mbalsdon Date: Wed, 30 Mar 2022 00:03:51 -0700 Subject: [PATCH 5/7] 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) => { flexDirection: "column", width: "100%", height: "100%", - mt: 2, + mt: 5, }} > 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) => { flexDirection: "column", border: 1, borderRadius: 2, + borderColor: "#af000d", + backgroundColor: "#af000d", width: "70%", height: "60%", alignSelf: "center", }} > - + Upcoming meetings + {/* */} {meetings.map((meeting, i) => ( = (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) => { flexDirection: "column", border: 1, borderRadius: 2, + borderColor: "#af000d", width: "70%", alignSelf: "center", mb: 2, @@ -59,7 +60,7 @@ const UpperBody: React.FC = (props) => { mx: 4, }} > - {props.contactInfo.name} + {props.contactInfo.name} {!favoritesUuids.includes(props.contactInfo.uuid) ? ( ) : (