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

partially fix bug where gear icon overlapped w/ names (still happens on very small viewports since flexShrink only adds a linebreak where there are spaces in text)

Browse Source
This commit is contained in:
mbalsdon 2022-03-24 18:30:26 -07:00
parent b0c38934f8
commit 0a8546f6f7
2 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
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 // TODO: toolbar on top of sidebar since it goes under the navbar
const drawerWidth = 200; const drawerWidth = "12.5%";
const Sidebar: React.FC = () => { const Sidebar: React.FC = () => {
const [group, setGroup] = useState<string>("Favorites"); const [group, setGroup] = useState<string>("Favorites");

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

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