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

Merge pull request #38 from CPSC319-Winter-term-2/mbalsdon-sidebar-overlap-fix

Browse Source 
(mostly) fix gear icon overlap bug
This commit is contained in:
cth0604 2022-03-25 00:04:54 -07:00 committed by GitHub
commit 478ebc7881
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/sidebar/Sidebar.tsx
View File

@ -16,7 +16,7 @@ import SidebarUser from "./SidebarUser";
// TODO: toolbar on top of sidebar since it goes under the navbar
const drawerWidth = 200;
const drawerWidth = "200px";
const Sidebar: React.FC = () => {
const [group, setGroup] = useState<string>("Favorites");
@ -33,15 +33,16 @@ const Sidebar: React.FC = () => {
selectUserStatuses(state, groupMembersUuids)
);
console.log(group);
return (
<Drawer
sx={{
width: drawerWidth,
"& .MuiDrawer-paper": {
width: drawerWidth,
position: "static",
height: "100%",
},
height: "100%",
}}
variant="permanent"
anchor="right"

6
src/components/sidebar/SidebarUser.tsx
View File

@ -11,7 +11,7 @@ interface Props {
const SidebarUser: React.FC<Props> = ({ user, status }: Props) => {
return (
<Box sx={{ display: "flex", flexDirection: "row", p: 1 }}>
<Box sx={{ width: "100%", display: "flex", flexDirection: "row", p: 1 }}>
<Box
bgcolor={getStatusColor(
status.inMeeting
@ -20,7 +20,7 @@ const SidebarUser: React.FC<Props> = ({ user, status }: Props) => {
)}
sx={{ p: 1 }}
/>
<Box sx={{ display: "flex", flexDirection: "column", ml: 1 }}>
<Box sx={{ width: "80%", display: "flex", flexDirection: "column", ml: 1 }}>
<Typography variant="h6">{user.name}</Typography>
<Typography variant="caption">
{status.inMeeting
@ -28,8 +28,10 @@ const SidebarUser: React.FC<Props> = ({ user, status }: Props) => {
: MeetingStatus.NOT_IN_MEETING}
</Typography>
</Box>
<Box sx={{ width: "20%" }}>
<SettingsButton user={user} status={status} />
</Box>
</Box>
);
};