Sidebar tweaks to align with design

constants/index.js

@@ -23,7 +23,7 @@ import {
   TOTALS,
   TRUE_STRING,
 } from './vars'
-import { THEME, FontSize14InRem } from './theme'
+import { THEME, fontSize } from './theme'
 
 export {
   ADMIN_ROLE,
@@ -39,7 +39,7 @@ export {
   FALSE_STRING,
   EMAIL_REGEX,
   FILTER_CATEGORIES,
-  FontSize14InRem,
+  fontSize,
   MIN_WIDTH,
   N_A,
   NOTIFICATION_DEFAULT,

constants/styles.js

@@ -41,5 +41,5 @@ export const baseInnerWidth = 768
 export const TABLE_ROW_HEIGHT = 48
 export const ADMIN_TABLE_MAX_WIDTH = 960
 export const ADMIN_TABLE_COLUMN_NUMBER = 6
-export const DRAWER_WIDTH = 200
+export const DRAWER_WIDTH = 248
 export const MIN_WIDTH = 620

constants/theme.js

@@ -26,4 +26,8 @@ export const THEME = {
   },
 }
 
-export const FontSize14InRem = '0.875rem'
+export const fontSize = {
+  12: '0.75rem',
+  14: '0.875rem',
+  16: '1rem',
+}

views/components/Sidebar/NavItem.jsx

@@ -5,10 +5,16 @@ import SidebarLink from './SidebarLink'
 const NavItem = ({ to, Icon, label }) => {
   return (
     <ListItem component={SidebarLink} to={to}>
-      <ListItemIcon sx={{ minWidth: 40, alignSelf: 'center' }}>
-        <Icon />
+      <ListItemIcon
+        sx={{ minWidth: 20, width: 20, height: 20, alignSelf: 'center' }}
+      >
+        <Icon sx={{ height: 20, width: 20 }} />
       </ListItemIcon>
-      <ListItemText primary={label} sx={{ color: 'text.primary' }} />
+      <ListItemText
+        primary={label}
+        sx={{ color: 'text.primary' }}
+        primaryTypographyProps={{ sx: { fontWeight: 500 } }}
+      />
     </ListItem>
   )
 }

views/components/Sidebar/SideNavigation.jsx

@@ -10,11 +10,10 @@ import {
 } from '@mui/icons-material'
 import NavItem from './NavItem'
 import { routes } from '../../routes/routes'
-import './SideNavigation.css'
 
 const SideNavigation = ({ user }) => {
   return (
-    <nav className="SideNavigation_nav" data-testid="nav">
+    <nav data-testid="nav">
       <List>
         <NavItem Icon={SpaceDashboard} to={routes.main} label="Dashboard" />
         <NavItem Icon={Group} to={routes.participants} label="Participants" />

views/components/Sidebar/SidebarFooter.css

@@ -1,8 +1,17 @@
+.SidebarFooter_container {
+  margin-top: auto;
+  padding-left: 24px;
+}
+
+.SidebarFooter_content {
+  padding: 8px 0;
+}
+
 .SidebarFooter_actions {
   display: flex;
-  justify-content: space-around;
+  gap: 16px;
 }
+
 .SidebarFooter_version {
-  height: 50px;
   padding: 16px;
 }

views/components/Sidebar/SidebarFooter.jsx

@@ -10,51 +10,62 @@ import {
 } from '@mui/material'
 import { Link } from 'react-router-dom'
 import { routes } from '../../routes/routes'
-import { FontSize14InRem } from '../../../constants'
+import { fontSize } from '../../../constants'
 import './SidebarFooter.css'
 
 const SidebarFooter = ({ user, onLogout }) => {
   return (
-    <Card sx={{ border: 0, boxShadow: 0, color: 'text.primary' }}>
+    <Card sx={{ border: 0, boxShadow: 0, marginTop: 'auto' }}>
       <CardHeader
         avatar={<Avatar alt={user.display_name[0]} src={user.icon} />}
+        sx={{ pb: '8px' }}
       />
-      <CardContent sx={{ pt: 0 }}>
-        <Typography sx={{ fontWeight: 600 }} variant="h5">
-          {user.display_name}
-        </Typography>
+      <CardContent sx={{ pt: 0, pb: '8px' }}>
+        <Typography sx={{ fontWeight: 600 }}>{user.display_name}</Typography>
         <Typography
-          sx={{ fontSize: FontSize14InRem, color: 'grey.A200' }}
+          sx={{ fontSize: fontSize[14], color: 'grey.A200' }}
           variant="subtitle1"
         >
           Title {user.title}
         </Typography>
       </CardContent>
       <CardActions
-        sx={{ fontSize: FontSize14InRem }}
+        sx={{ fontSize: fontSize[14], p: '16px' }}
         className="SidebarFooter_actions"
       >
         <Button
           variant="outlined"
           component={Link}
           to={routes.userAccount}
-          sx={{ borderColor: 'text.primary', color: 'text.primary' }}
+          sx={{
+            borderColor: '#DDDEE0',
+            color: 'text.primary',
+            fontSize: fontSize[14],
+            textTransform: 'none',
+            borderRadius: '8px',
+            padding: '2px 12px',
+          }}
         >
           Edit Profile
         </Button>
         <Button
           variant="text"
-          sx={{ color: 'text.primary' }}
+          sx={{
+            color: 'text.primary',
+            fontSize: fontSize[14],
+            textTransform: 'none',
+            padding: '2px 12px',
+          }}
           onClick={() => onLogout()}
         >
-          Log Out
+          Log out
         </Button>
       </CardActions>
-      <div className="SidebarFooter_version">
+      <CardContent>
         <Typography variant="caption" sx={{ color: 'grey.A100' }}>
           DpDash v{process.env.DPDASH_VERSION}
         </Typography>
-      </div>
+      </CardContent>
     </Card>
   )
 }

views/components/Sidebar/SidebarLink.css

@@ -1,19 +1,23 @@
 .SidebarLink_link {
+  border-radius: 8px;
   display: flex;
+  gap: 20px;
   text-decoration: none;
-  padding: 6px;
+  padding: 6px 12px;
+
   &:visited&:focus {
     text-decoration: none;
   }
 }
 
 .SidebarLink_link-active {
-  display: flex;
-  text-decoration: none;
-  padding: 6px;
-  &:visited&:focus {
-    text-decoration: none;
-  }
   background-color: var(--primary-main);
-  border-radius: 8px;
+}
+
+.SidebarLink_link-active .MuiListItemIcon-root {
+  color: #054DA7;
+}
+
+.SidebarLink_link-active .MuiListItemText-root {
+  color: #054DA7;
 }

views/components/Sidebar/SidebarLink.jsx

@@ -1,13 +1,14 @@
 import React, { forwardRef } from 'react'
 import { NavLink } from 'react-router-dom'
 import './SidebarLink.css'
+import classNames from 'classnames'
 
 const SidebarLink = forwardRef((props, ref) => (
   <NavLink
     ref={ref}
     to={props.to}
     className={({ isActive }) =>
-      isActive ? 'SidebarLink_link-active' : 'SidebarLink_link'
+      classNames('SidebarLink_link', { 'SidebarLink_link-active': isActive })
     }
   >
     {props.children}

views/components/Sidebar/SidebarLogo.css

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 32px 27px;
+  padding: 32px 16px;
 }
 .SidebarLogo_image {
   height: 45px;

views/components/Sidebar/index.jsx

@@ -6,7 +6,17 @@ import SidebarFooter from './SidebarFooter'
 
 const Sidebar = ({ user, sidebarOpen, onLogout }) => {
   return (
-    <Drawer variant="permanent" open={sidebarOpen}>
+    <Drawer
+      variant="permanent"
+      open={sidebarOpen}
+      sx={{
+        flexShrink: 0,
+        boxSizing: 'border-box',
+        width: '248px',
+        height: '100vh',
+      }}
+      PaperProps={{ sx: { padding: '8px' } }}
+    >
       <SidebarLogo />
       <SideNavigation user={user} />
       <SidebarFooter user={user} onLogout={onLogout} />

views/layouts/MainLayout/MainLayout.css

@@ -0,0 +1,3 @@
+.MainLayout_container {
+  display: flex;
+}

views/layouts/MainLayout.jsx → views/layouts/MainLayout/index.jsx

@@ -1,14 +1,15 @@
 import React, { useState, useEffect, useContext } from 'react'
 import { Outlet, useNavigate } from 'react-router-dom'
-import { Box } from '@mui/material'
-import Sidebar from '../components/Sidebar/'
+import Sidebar from '../../components/Sidebar'
 import {
   AuthContext,
   ConfigurationsContext,
   NotificationContext,
-} from '../contexts'
-import api from '../api'
-import { routes } from '../routes/routes'
+} from '../../contexts'
+import api from '../../api'
+import { routes } from '../../routes/routes'
+import './MainLayout.css'
+import { Box } from '@mui/material'
 
 const MainLayout = () => {
   const [configurations, setConfigurations] = useContext(ConfigurationsContext)
@@ -49,21 +50,23 @@ const MainLayout = () => {
   }, [])
 
   return (
-    <Box sx={{ display: 'flex', justifyContent: 'right' }}>
+    <div className="MainLayout_container">
       <Sidebar sidebarOpen={true} user={user} onLogout={handleLogout} />
-      <Outlet
-        context={{
-          configurations,
-          navigate,
-          setConfigurations,
-          setNotification,
-          setUser,
-          setUsers,
-          user,
-          users,
-        }}
-      />
-    </Box>
+      <div>
+        <Outlet
+          context={{
+            configurations,
+            navigate,
+            setConfigurations,
+            setNotification,
+            setUser,
+            setUsers,
+            user,
+            users,
+          }}
+        />
+      </div>
+    </div>
   )
 }
 export default MainLayout