M frontend/containers/DrawerMenu/DrawerMenuItem.tsx → frontend/containers/DrawerMenu/DrawerMenuItem.tsx

@@ -13,17 +13,14 @@ 
 const DrawerMenuItem = ({Icon, title, onClick, active}: Props) => {
   const classes = useStyles({active});
   return (
-    <Box className={classes.drawerMenuItem}>
-      <Button className={classes.button} color="inherit" onClick={onClick}>
+    <Button className={classes.drawerMenuButton} onClick={onClick}>
+      <Box className={classes.icon} color="inherit">
         {Icon}
-      </Button>
-      <Typography
-        color="inherit"
-        className={classes.drawerText}
-      >
+      </Box>
+      <Typography color="inherit" className={classes.drawerText}>
         {title}
       </Typography>
-    </Box>
+    </Button>
   );
 };
 

M frontend/containers/DrawerMenu/index.tsx → frontend/containers/DrawerMenu/index.tsx

@@ -6,7 +6,6 @@ import DrawerMenuItem from './DrawerMenuItem';
 import useStyles from './styles';
 import useBannerStore from '../../stores/useBannerStore';
 import useEventStore from '../../stores/useEventStore';
-import Box from '@material-ui/core/Box';
 
 const DrawerMenu = () => {
   const {t} = useTranslation();
@@ -29,18 +28,15 @@ }}
         Icon={<Icon>directions_car</Icon>}
         active={router.pathname == `/e/[uuid]`}
       />
-      <Box mb={1.5}>
-        <DrawerMenuItem
-          title={t('drawer.waitingList')}
-          onClick={() => {
-            router.push(`/e/${uuid}/waitingList`, null, {shallow: true});
-            setAreDetailsOpened(false);
-          }}
-          Icon={<Icon>group</Icon>}
-          active={router.pathname == `/e/[uuid]/waitingList`}
-        />
-      </Box>
-
+      <DrawerMenuItem
+        title={t('drawer.waitingList')}
+        onClick={() => {
+          router.push(`/e/${uuid}/waitingList`, null, {shallow: true});
+          setAreDetailsOpened(false);
+        }}
+        Icon={<Icon>group</Icon>}
+        active={router.pathname == `/e/[uuid]/waitingList`}
+      />
       <DrawerMenuItem
         title={t('drawer.information')}
         onClick={() => setAreDetailsOpened(true)}

M frontend/containers/DrawerMenu/styles.ts → frontend/containers/DrawerMenu/styles.ts

@@ -26,18 +26,20 @@ flexDirection: 'row',
       },
     },
   }),
-  button: {
+  icon: {
+    position: 'relative',
+    display: 'block',
     width: '100%',
     height: '100%',
-    minWidth: 0,
     padding: 0,
-    borderRadius: '50%',
   },
-  drawerMenuItem: ({active}) => ({
+  drawerMenuButton: ({active}) => ({
+    display: 'block',
     position: 'relative',
-    margin: `${theme.spacing(3)}px auto`,
-    width: `calc(${theme.mixins.toolbar.minHeight}px - 16px)`,
-    height: `calc(${theme.mixins.toolbar.minHeight}px - 16px)`,
+    minWidth: 0,
+    margin: 0,
+    width: '84px',
+    height: '84px',
     textAlign: 'center',
     color: active
       ? theme.palette.background.default
@@ -45,6 +47,8 @@ : 'rgba(256, 256, 256, .76)',
 
     [theme.breakpoints.down('sm')]: {
       margin: '0 auto',
+      height: '56px',
+      width: '100%',
     },
   }),
   drawerText: {