From 82f09061248c2fafe871922e26abca51edf042a9 Mon Sep 17 00:00:00 2001
From: Taehee Choi <cth5545cth5545@gmail.com>
Date: Sun, 6 Mar 2022 16:43:45 -0800
Subject: [PATCH 1/3] meeting details page implemented and api bodies included

---
 src/App.tsx                                   | 15 +++-
 src/api-bodies/DetailedMeeting.tsx            | 12 +++
 src/api-bodies/NewMeeting.tsx                 | 10 +++
 src/api-bodies/UserFull.tsx                   |  9 +++
 src/api-bodies/UserLite.tsx                   |  8 ++
 src/components/contacts/Contacts.tsx          | 15 +++-
 .../{ => contacts-components}/Body.tsx        | 12 ++-
 .../{ => contacts-components}/Sidebar.tsx     |  6 +-
 .../body-components}/LowerBody.tsx            | 19 +++--
 .../body-components}/UpperBody.tsx            |  2 +-
 .../sidebar-components}/ContactItem.tsx       |  4 +-
 .../meeting-details/MeetingDetails.tsx        | 20 +++++
 .../meeting-details-components/Body.tsx       | 74 +++++++++++++++++++
 .../meeting-details-components/Header.tsx     | 36 +++++++++
 14 files changed, 219 insertions(+), 23 deletions(-)
 create mode 100644 src/api-bodies/DetailedMeeting.tsx
 create mode 100644 src/api-bodies/NewMeeting.tsx
 create mode 100644 src/api-bodies/UserFull.tsx
 create mode 100644 src/api-bodies/UserLite.tsx
 rename src/components/contacts/{ => contacts-components}/Body.tsx (57%)
 rename src/components/contacts/{ => contacts-components}/Sidebar.tsx (94%)
 rename src/components/contacts/{ => contacts-components/body-components}/LowerBody.tsx (71%)
 rename src/components/contacts/{ => contacts-components/body-components}/UpperBody.tsx (97%)
 rename src/components/contacts/{ => contacts-components/sidebar-components}/ContactItem.tsx (90%)
 create mode 100644 src/components/meeting-details/MeetingDetails.tsx
 create mode 100644 src/components/meeting-details/meeting-details-components/Body.tsx
 create mode 100644 src/components/meeting-details/meeting-details-components/Header.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 638d685..371756d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,9 +12,14 @@ import Theme from "./Theme";
 
 import "./style/App.css";
 import Sidebar from "./components/sidebar/Sidebar";
-import { MeetingStatus, SidebarUserObj } from "./components/sidebar/SidebarUser";
+import {
+  MeetingStatus,
+  SidebarUserObj,
+} from "./components/sidebar/SidebarUser";
+import MeetingDetails from "./components/meeting-details/MeetingDetails";
 
 const App: React.FC = () => {
+  const [meetingInfoOpen, setMeetingInfoOpen] = useState(false);
 
   /* Temporary data */
   const [sidebarUsers] = useState<SidebarUserObj[]>([
@@ -43,14 +48,18 @@ const App: React.FC = () => {
 
   return (
     <ThemeProvider theme={Theme}>
-      <Sidebar users={sidebarUsers} />
       <Router>
+        <Sidebar users={sidebarUsers} />
         <Navbar />
         <Routes>
           <Route path="/" element={<Home />} />
-          <Route path="/contacts" element={<Contacts />} />
+          <Route
+            path="/contacts"
+            element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />}
+          />
           <Route path="/calendar" element={<Calendar />} />
         </Routes>
+        <MeetingDetails open={meetingInfoOpen} setOpen={setMeetingInfoOpen} />
       </Router>
     </ThemeProvider>
   );
diff --git a/src/api-bodies/DetailedMeeting.tsx b/src/api-bodies/DetailedMeeting.tsx
new file mode 100644
index 0000000..eb64a19
--- /dev/null
+++ b/src/api-bodies/DetailedMeeting.tsx
@@ -0,0 +1,12 @@
+interface DetailedMeeting {
+  meetingId: string; // primary key
+  liveParticipantIds: string[];
+  registrantIds: string[];
+  start: string;
+  duration: number;
+  timezone: string;
+  joinUrl: string;
+  topic: string;
+}
+
+export default DetailedMeeting;
diff --git a/src/api-bodies/NewMeeting.tsx b/src/api-bodies/NewMeeting.tsx
new file mode 100644
index 0000000..a36bc0b
--- /dev/null
+++ b/src/api-bodies/NewMeeting.tsx
@@ -0,0 +1,10 @@
+interface NewMeeting {
+  uuid: string;
+  startTime: string;
+  duration: number;
+  timezone: string;
+  topic: string;
+  registrantsIds: string[];
+}
+
+export default NewMeeting;
diff --git a/src/api-bodies/UserFull.tsx b/src/api-bodies/UserFull.tsx
new file mode 100644
index 0000000..c67dbc7
--- /dev/null
+++ b/src/api-bodies/UserFull.tsx
@@ -0,0 +1,9 @@
+import UserLite from "./UserLite";
+
+interface UserFull {
+  userInfo: UserLite;
+  manager: UserLite;
+  directReports: UserLite[];
+}
+
+export default UserFull;
diff --git a/src/api-bodies/UserLite.tsx b/src/api-bodies/UserLite.tsx
new file mode 100644
index 0000000..6882238
--- /dev/null
+++ b/src/api-bodies/UserLite.tsx
@@ -0,0 +1,8 @@
+interface UserLite {
+  uuid: string;
+  emailAddress: string;
+  name: string;
+  role: string;
+}
+
+export default UserLite;
diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx
index 7fcc7e6..c95afe8 100644
--- a/src/components/contacts/Contacts.tsx
+++ b/src/components/contacts/Contacts.tsx
@@ -1,11 +1,15 @@
 import { Box } from "@mui/material";
 import React from "react";
-import Body from "./Body";
+import Body from "./contacts-components/Body";
 
 import ContactInfo from "./ContactInfo";
-import Sidebar from "./Sidebar";
+import Sidebar from "./contacts-components/Sidebar";
 
-const Contacts: React.FC = () => {
+interface Props {
+  setMeetingInfoOpen: (open: boolean) => void;
+}
+
+const Contacts: React.FC<Props> = (props) => {
   const [contactSelected, setContactSelected] =
     React.useState<ContactInfo | null>(null);
 
@@ -13,7 +17,10 @@ const Contacts: React.FC = () => {
     <Box sx={{ display: "flex", height: "100%" }}>
       <Sidebar setContactSelected={setContactSelected} />
       {contactSelected !== null ? (
-        <Body contactSelected={contactSelected} />
+        <Body
+          contactSelected={contactSelected}
+          setMeetingInfoOpen={props.setMeetingInfoOpen}
+        />
       ) : null}
     </Box>
   );
diff --git a/src/components/contacts/Body.tsx b/src/components/contacts/contacts-components/Body.tsx
similarity index 57%
rename from src/components/contacts/Body.tsx
rename to src/components/contacts/contacts-components/Body.tsx
index f4f6a66..fd4de4a 100644
--- a/src/components/contacts/Body.tsx
+++ b/src/components/contacts/contacts-components/Body.tsx
@@ -1,11 +1,12 @@
 import { Box, Toolbar } from "@mui/material";
 import React from "react";
-import UpperBody from "./UpperBody";
-import LowerBody from "./LowerBody";
-import ContactInfo from "./ContactInfo";
+import UpperBody from "./body-components/UpperBody";
+import LowerBody from "./body-components/LowerBody";
+import ContactInfo from "../ContactInfo";
 
 interface Props {
   contactSelected: ContactInfo;
+  setMeetingInfoOpen: (open: boolean) => void;
 }
 
 const Body: React.FC<Props> = (props) => {
@@ -20,7 +21,10 @@ const Body: React.FC<Props> = (props) => {
     >
       <Toolbar />
       <UpperBody contactInfo={props.contactSelected} />
-      <LowerBody contactInfo={props.contactSelected} />
+      <LowerBody
+        contactInfo={props.contactSelected}
+        setMeetingInfoOpen={props.setMeetingInfoOpen}
+      />
     </Box>
   );
 };
diff --git a/src/components/contacts/Sidebar.tsx b/src/components/contacts/contacts-components/Sidebar.tsx
similarity index 94%
rename from src/components/contacts/Sidebar.tsx
rename to src/components/contacts/contacts-components/Sidebar.tsx
index 8253a0e..f4007f4 100644
--- a/src/components/contacts/Sidebar.tsx
+++ b/src/components/contacts/contacts-components/Sidebar.tsx
@@ -9,9 +9,9 @@ import {
 } from "@mui/material";
 import React from "react";
 import { ExpandLess, ExpandMore } from "@mui/icons-material";
-import ContactInfo from "./ContactInfo";
-import Status from "./Status";
-import ContactItem from "./ContactItem";
+import ContactInfo from "../ContactInfo";
+import Status from "../Status";
+import ContactItem from "./sidebar-components/ContactItem";
 
 const contacts: ContactInfo[] = [
   { name: "Taehee ...", status: Status.Online },
diff --git a/src/components/contacts/LowerBody.tsx b/src/components/contacts/contacts-components/body-components/LowerBody.tsx
similarity index 71%
rename from src/components/contacts/LowerBody.tsx
rename to src/components/contacts/contacts-components/body-components/LowerBody.tsx
index 35bb6cc..d0645eb 100644
--- a/src/components/contacts/LowerBody.tsx
+++ b/src/components/contacts/contacts-components/body-components/LowerBody.tsx
@@ -1,6 +1,6 @@
-import { Box, List, Typography } from "@mui/material";
+import { Box, Button, List, Typography } from "@mui/material";
 import React from "react";
-import ContactInfo from "./ContactInfo";
+import ContactInfo from "../../ContactInfo";
 
 const meetings: { name: string; duration: string }[] = [
   { name: "Kanban Meeting", duration: "10:45 am - 11:45 am" },
@@ -12,9 +12,10 @@ const meetings: { name: string; duration: string }[] = [
 
 interface Props {
   contactInfo: ContactInfo;
+  setMeetingInfoOpen: (open: boolean) => void;
 }
 
-const LowerBody: React.FC<Props> = () => {
+const LowerBody: React.FC<Props> = (props) => {
   return (
     <Box
       sx={{
@@ -23,7 +24,7 @@ const LowerBody: React.FC<Props> = () => {
         border: 1,
         borderRadius: 2,
         width: "70%",
-        height: "70%",
+        height: "60%",
         alignSelf: "center",
       }}
     >
@@ -43,8 +44,14 @@ const LowerBody: React.FC<Props> = () => {
             }}
             key={i}
           >
-            <Typography sx={{ pt: "12px" }}>{meeting.name}</Typography>
-            <Typography sx={{ pt: "12px" }}>{meeting.duration}</Typography>
+            <Button
+              variant="text"
+              color="secondary"
+              onClick={() => props.setMeetingInfoOpen(true)}
+            >
+              {meeting.name}
+            </Button>
+            <Typography sx={{ pt: 1.5 }}>{meeting.duration}</Typography>
           </Box>
         ))}
       </List>
diff --git a/src/components/contacts/UpperBody.tsx b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
similarity index 97%
rename from src/components/contacts/UpperBody.tsx
rename to src/components/contacts/contacts-components/body-components/UpperBody.tsx
index 0c53c2a..cb44baa 100644
--- a/src/components/contacts/UpperBody.tsx
+++ b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
@@ -3,7 +3,7 @@ import React from "react";
 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 ContactInfo from "../../ContactInfo";
 
 interface Props {
   contactInfo: ContactInfo;
diff --git a/src/components/contacts/ContactItem.tsx b/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx
similarity index 90%
rename from src/components/contacts/ContactItem.tsx
rename to src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx
index 36f5043..c8d9e48 100644
--- a/src/components/contacts/ContactItem.tsx
+++ b/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx
@@ -2,8 +2,8 @@ import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
 import React from "react";
 import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
 import CircleIcon from "@mui/icons-material/Circle";
-import ContactInfo from "./ContactInfo";
-import { returnStatusColor } from "./Utils";
+import ContactInfo from "../../ContactInfo";
+import { returnStatusColor } from "../../Utils";
 
 interface Props {
   contactInfo: ContactInfo;
diff --git a/src/components/meeting-details/MeetingDetails.tsx b/src/components/meeting-details/MeetingDetails.tsx
new file mode 100644
index 0000000..dcca058
--- /dev/null
+++ b/src/components/meeting-details/MeetingDetails.tsx
@@ -0,0 +1,20 @@
+import { Dialog } from "@mui/material";
+import React from "react";
+import Body from "./meeting-details-components/Body";
+import Header from "./meeting-details-components/Header";
+
+interface Props {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const MeetingDetails: React.FC<Props> = (props) => {
+  return (
+    <Dialog fullScreen open={props.open} onClose={() => props.setOpen(false)}>
+      <Header setOpen={props.setOpen} />
+      <Body />
+    </Dialog>
+  );
+};
+
+export default MeetingDetails;
diff --git a/src/components/meeting-details/meeting-details-components/Body.tsx b/src/components/meeting-details/meeting-details-components/Body.tsx
new file mode 100644
index 0000000..632ac39
--- /dev/null
+++ b/src/components/meeting-details/meeting-details-components/Body.tsx
@@ -0,0 +1,74 @@
+import {
+  Box,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+} from "@mui/material";
+import React from "react";
+import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
+
+const Body: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        width: "80%",
+        alignSelf: "center",
+        mt: 2,
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          width: "70%",
+          height: "100%",
+        }}
+      >
+        <Typography>Feb 10, 2022 10:45 am - 11:00 am</Typography>
+        <Typography>Status: Live</Typography>
+        <Typography>
+          Topic: Lorem Ipsum is simply dummy text of the printing and
+          typesetting industry. Lorem Ipsum has been the industrys standard
+          dummy text ever since the 1500s. Topic: Lorem Ipsum is simply dummy
+          text of the printing and typesetting industry. Lorem Ipsum has been
+          the industrys standard dummy text ever since the 1500s.
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          flexGrow: 1,
+          borderLeft: 1,
+          ml: 4,
+        }}
+      >
+        <List>
+          <ListItem sx={{ borderBottom: 1 }}>
+            <ListItemText primary="Invited" />
+          </ListItem>
+          <ListItem>
+            <ListItemIcon>
+              <PersonOutlineIcon />
+            </ListItemIcon>
+            <ListItemText primary="Taehee Choi" />
+          </ListItem>
+        </List>
+        <List>
+          <ListItem>
+            <ListItemIcon>
+              <PersonOutlineIcon />
+            </ListItemIcon>
+            <ListItemText primary="Taehee Choi" />
+          </ListItem>
+        </List>
+      </Box>
+    </Box>
+  );
+};
+
+export default Body;
diff --git a/src/components/meeting-details/meeting-details-components/Header.tsx b/src/components/meeting-details/meeting-details-components/Header.tsx
new file mode 100644
index 0000000..5f40cd8
--- /dev/null
+++ b/src/components/meeting-details/meeting-details-components/Header.tsx
@@ -0,0 +1,36 @@
+import { AppBar, Button, IconButton, Toolbar, Typography } from "@mui/material";
+import React from "react";
+import CloseIcon from "@mui/icons-material/Close";
+
+interface Props {
+  setOpen: (open: boolean) => void;
+}
+
+const Header: React.FC<Props> = (props) => {
+  return (
+    <AppBar sx={{ position: "relative" }}>
+      <Toolbar>
+        <Typography variant="h6" sx={{ flexGrow: 1 }}>
+          Kanban Meeting
+        </Typography>
+        <Button variant="contained" color="secondary">
+          Join
+        </Button>
+        <Button variant="contained" color="secondary" sx={{ ml: 1 }}>
+          Recording
+        </Button>
+        <IconButton
+          edge="start"
+          color="inherit"
+          aria-label="close"
+          onClick={() => props.setOpen(false)}
+          sx={{ ml: 1 }}
+        >
+          <CloseIcon />
+        </IconButton>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Header;

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 2/3] 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>

From 6f8b36bf871cc504a0a3fbf43a106ec114d9b33f Mon Sep 17 00:00:00 2001
From: Taehee Choi <cth5545cth5545@gmail.com>
Date: Thu, 10 Mar 2022 18:27:01 -0800
Subject: [PATCH 3/3] sidebar position fixed

---
 src/App.tsx                                   | 25 +++---
 .../body-components/UpperBody.tsx             |  1 -
 src/components/home/Home.tsx                  | 20 ++---
 src/components/home/Meeting.tsx               | 34 +++++----
 src/components/home/MeetingsPanel.tsx         | 28 +++----
 src/components/home/ShortCuts.tsx             | 76 +++++++++----------
 src/components/login/Login.tsx                | 12 +--
 src/components/sidebar/Sidebar.tsx            | 20 +++--
 8 files changed, 116 insertions(+), 100 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 371756d..2d36b0e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,6 +17,7 @@ import {
   SidebarUserObj,
 } from "./components/sidebar/SidebarUser";
 import MeetingDetails from "./components/meeting-details/MeetingDetails";
+import { Box } from "@mui/material";
 
 const App: React.FC = () => {
   const [meetingInfoOpen, setMeetingInfoOpen] = useState(false);
@@ -49,16 +50,22 @@ const App: React.FC = () => {
   return (
     <ThemeProvider theme={Theme}>
       <Router>
-        <Sidebar users={sidebarUsers} />
         <Navbar />
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route
-            path="/contacts"
-            element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />}
-          />
-          <Route path="/calendar" element={<Calendar />} />
-        </Routes>
+        <Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
+          <Box sx={{ flexGrow: 1 }}>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route
+                path="/contacts"
+                element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />}
+              />
+              <Route path="/calendar" element={<Calendar />} />
+            </Routes>
+          </Box>
+          <Box>
+            <Sidebar users={sidebarUsers} />
+          </Box>
+        </Box>
         <MeetingDetails open={meetingInfoOpen} setOpen={setMeetingInfoOpen} />
       </Router>
     </ThemeProvider>
diff --git a/src/components/contacts/contacts-components/body-components/UpperBody.tsx b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
index 6d808a3..18ead7a 100644
--- a/src/components/contacts/contacts-components/body-components/UpperBody.tsx
+++ b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
@@ -5,7 +5,6 @@ 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;
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index da75841..c50a231 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -5,16 +5,16 @@ import Grid from "@mui/material/Grid";
 
 const Home: React.FC = () => {
   return (
-        <Container className="main-home">
-          <Grid container>
-            <Grid item sm={8}>
-              <MeetingsPanel />
-            </Grid>
-            <Grid item sm={4}>
-              <ShortCuts />
-            </Grid>
-          </Grid>
-        </Container>
+    <Container className="main-home">
+      <Grid container>
+        <Grid item sm={8}>
+          <MeetingsPanel />
+        </Grid>
+        <Grid item sm={4}>
+          <ShortCuts />
+        </Grid>
+      </Grid>
+    </Container>
   );
 };
 
diff --git a/src/components/home/Meeting.tsx b/src/components/home/Meeting.tsx
index 4c4771a..eba7669 100644
--- a/src/components/home/Meeting.tsx
+++ b/src/components/home/Meeting.tsx
@@ -1,17 +1,21 @@
-function Meeting(props: any) {
-    return (
+interface Props {
+  meetingName: string;
+  meetingTime: string;
+}
 
-        <div className="row meeting">
-            <div className="col-12">
-                <div className="row">
-                <label>{props.meetingName}</label>
-                </div>
-                <div className="row">
-                <label>{props.meetingTime}</label>
-                </div>
-            </div>
+function Meeting(props: Props) {
+  return (
+    <div className="row meeting">
+      <div className="col-12">
+        <div className="row">
+          <label>{props.meetingName}</label>
         </div>
-    );
-  };
-  
-  export default Meeting;  
\ No newline at end of file
+        <div className="row">
+          <label>{props.meetingTime}</label>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Meeting;
diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx
index 56f5042..7a310a8 100644
--- a/src/components/home/MeetingsPanel.tsx
+++ b/src/components/home/MeetingsPanel.tsx
@@ -1,19 +1,19 @@
 import Meeting from "./Meeting";
 
 const MeetingsPanel: React.FC = () => {
-    return (
-        <div className="meetings-panel">
-            <div className="row current-time">
-            <label>10:34 AM</label>
-            </div>
-            <div className="row current-date">
-            <label>Sunday, 03 Feb 2022</label>
-            </div>
+  return (
+    <div className="meetings-panel">
+      <div className="row current-time">
+        <label>10:34 AM</label>
+      </div>
+      <div className="row current-date">
+        <label>Sunday, 03 Feb 2022</label>
+      </div>
 
-            <Meeting meetingName="first meeting" meetingTime="time" />
-            <Meeting meetingName="second meeting" meetingTime="time" />
-        </div>
-    );
-  };
+      <Meeting meetingName="first meeting" meetingTime="time" />
+      <Meeting meetingName="second meeting" meetingTime="time" />
+    </div>
+  );
+};
   
-  export default MeetingsPanel;  
\ No newline at end of file
+export default MeetingsPanel;  
\ No newline at end of file
diff --git a/src/components/home/ShortCuts.tsx b/src/components/home/ShortCuts.tsx
index 2ea7277..61afba9 100644
--- a/src/components/home/ShortCuts.tsx
+++ b/src/components/home/ShortCuts.tsx
@@ -1,43 +1,43 @@
-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 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";
 
 const ShortCuts: React.FC = () => {
-    return (
-        <div className="short-cuts" >
-            <Grid className="row-1" container spacing={1}>
-                <Grid item sm={6}>
-                    <Button className="tile">
-                        <PeopleIcon className="icon" />
-                    </Button>
-                    <label>New Meeting</label>
-                </Grid>
-                <Grid item sm={6}>
-                    <Button className="tile">
-                        <AddIcon className="icon" />
-                    </Button>
-                    <label>Join</label>
-                </Grid>
-            </Grid>
-            <Grid className="row-2" container spacing={1}>
-                <Grid item sm={6}>
-                    <Button className="tile">
-                        <PhoneEnabledIcon className="icon" />
-                    </Button>
-                    <label>Call Favourites</label>
-                </Grid>
-                <Grid item sm={6}>
-                    <Button className="tile">
-                        <CircleIcon className="icon" />
-                    </Button>
-                    <label>Recordings</label>
-                </Grid>
-            </Grid>
-        </div>
-    );
-  };
+  return (
+    <div className="short-cuts" >
+      <Grid className="row-1" container spacing={1}>
+        <Grid item sm={6}>
+          <Button className="tile">
+            <PeopleIcon className="icon" />
+          </Button>
+          <label>New Meeting</label>
+        </Grid>
+        <Grid item sm={6}>
+          <Button className="tile">
+            <AddIcon className="icon" />
+          </Button>
+          <label>Join</label>
+        </Grid>
+      </Grid>
+      <Grid className="row-2" container spacing={1}>
+        <Grid item sm={6}>
+          <Button className="tile">
+            <PhoneEnabledIcon className="icon" />
+          </Button>
+          <label>Call Favourites</label>
+        </Grid>
+        <Grid item sm={6}>
+          <Button className="tile">
+            <CircleIcon className="icon" />
+          </Button>
+          <label>Recordings</label>
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
   
-  export default ShortCuts;
\ No newline at end of file
+export default ShortCuts;
\ No newline at end of file
diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
index ba95b2e..4da970e 100644
--- a/src/components/login/Login.tsx
+++ b/src/components/login/Login.tsx
@@ -1,11 +1,11 @@
 import Container from "@mui/material/Container";
 
 const Login: React.FC = () => {
-    return (
-        <Container className="login">
+  return (
+    <Container className="login">
             Login
-        </Container>
-    );
-  };
+    </Container>
+  );
+};
   
-  export default Login;
\ No newline at end of file
+export default Login;
\ No newline at end of file
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 08cb47b..8a544bb 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -1,13 +1,20 @@
-import { Divider, Drawer, List, ListItem, ListSubheader } from "@mui/material";
+import {
+  Divider,
+  Drawer,
+  List,
+  ListItem,
+  ListSubheader,
+  Toolbar,
+} from "@mui/material";
 import GroupSelect from "./GroupSelect";
 import SidebarUser, { SidebarUserObj } from "./SidebarUser";
 
 // TODO: toolbar on top of sidebar since it goes under the navbar
 
-const drawerWidth = 240;
+const drawerWidth = 200;
 
 interface Props {
-  users: SidebarUserObj[],
+  users: SidebarUserObj[];
 }
 
 const Sidebar: React.FC<Props> = ({ users }: Props) => {
@@ -15,22 +22,21 @@ const Sidebar: React.FC<Props> = ({ users }: Props) => {
     <Drawer
       sx={{
         width: drawerWidth,
-        flexShrink: 0,
         "& .MuiDrawer-paper": {
           width: drawerWidth,
-          boxSizing: "border-box",
         },
       }}
       variant="permanent"
       anchor="right"
     >
+      <Toolbar />
       <List disablePadding sx={{ height: "80%", overflow: "auto" }}>
         <ListSubheader disableGutters>
           <GroupSelect />
         </ListSubheader>
         {users.map((user) => (
           <ListItem disablePadding key={user.id}>
-            <SidebarUser user={user} /> 
+            <SidebarUser user={user} />
           </ListItem>
         ))}
       </List>
@@ -39,4 +45,4 @@ const Sidebar: React.FC<Props> = ({ users }: Props) => {
   );
 };
 
-export default Sidebar;
\ No newline at end of file
+export default Sidebar;