feat: update dashboard nav item styles

packages/client/components/Dashboard/DashSidebar.tsx

@@ -44,7 +44,8 @@ const DashHR = styled('div')({
 })
 
 const NavItem = styled(LeftDashNavItem)({
-  paddingLeft: 16
+  borderRadius: 44,
+  paddingLeft: 15
 })
 
 const NavList = styled(DashNavList)({
@@ -146,14 +147,16 @@ const DashSidebar = (props: Props) => {
 
   return (
     <Wrapper>
-      <SideBarStartMeetingButton isOpen={isOpen} />
+      <div className='px-3'>
+        <SideBarStartMeetingButton isOpen={isOpen} />
+      </div>
       <Nav isOpen={isOpen}>
         <Contents>
-          <NavItemsWrap>
+          <div className='px-3'>
             <NavItem icon={'forum'} href={'/meetings'} label={'Meetings'} />
             <NavItem icon={'timeline'} href={'/me'} label={'History'} exact />
             <NavItem icon={'playlist_add_check'} href={'/me/tasks'} label={'Tasks'} />
-          </NavItemsWrap>
+          </div>
           <DashHR />
           <NavMain>
             <NavList organizationsRef={organizations} />

packages/client/components/Dashboard/LeftDashNavItem.tsx

@@ -18,60 +18,58 @@ import React from 'react'
 import {useHistory, useRouteMatch} from 'react-router'
 import PlainButton from '~/components/PlainButton/PlainButton'
 import {PALETTE} from '~/styles/paletteV3'
-import {Breakpoint, NavSidebar} from '~/types/constEnums'
-import makeMinWidthMediaQuery from '~/utils/makeMinWidthMediaQuery'
+import {NavSidebar} from '~/types/constEnums'
 
 const NavItem = styled(PlainButton)<{isActive: boolean}>(({isActive}) => ({
   alignItems: 'center',
   backgroundColor: isActive ? PALETTE.SLATE_300 : undefined,
   borderRadius: 4,
-  color: PALETTE.SLATE_700,
+  color: isActive ? PALETTE.SLATE_900 : PALETTE.SLATE_800,
   display: 'flex',
   fontSize: NavSidebar.FONT_SIZE,
   fontWeight: 600,
   lineHeight: NavSidebar.LINE_HEIGHT,
-  marginBottom: 8,
-  marginTop: 8,
-  padding: 8,
+  marginBottom: 2,
+  marginTop: 2,
+  paddingBottom: 5,
+  paddingRight: 8,
+  paddingTop: 5,
   textDecoration: 'none',
   transition: `background-color 100ms ease-in`,
   userSelect: 'none',
   width: '100%',
-  [makeMinWidthMediaQuery(Breakpoint.SIDEBAR_LEFT)]: {
-    borderRadius: '0 4px 4px 0'
-  },
   ':hover': {
     backgroundColor: PALETTE.SLATE_300
   }
 }))
 
-const StyledIcon = styled('div')({
-  height: 24,
-  width: 24,
-  color: PALETTE.SLATE_700,
-  marginRight: 16,
-  opacity: 0.5
-})
+const StyledIcon = styled('div')<{isActive: boolean}>(({isActive}) => ({
+  fontSize: 18,
+  height: 18,
+  width: 18,
+  color: isActive ? PALETTE.SLATE_700 : PALETTE.SLATE_600,
+  marginRight: 11
+}))
 
 const Label = styled('div')({
   flex: 1,
   wordBreak: 'break-word'
 })
 
 const iconLookup = {
-  magic: <AutoAwesome />,
-  arrowBack: <ArrowBack />,
-  creditScore: <CreditScore />,
-  forum: <Forum />,
-  playlist_add_check: <PlaylistAddCheck />,
-  add: <Add />,
-  exit_to_app: <ExitToApp />,
-  group: <Group />,
-  groups: <Groups />,
-  warning: <Warning />,
-  work: <WorkOutline />,
-  timeline: <Timeline />,
-  key: <Key />
+  magic: <AutoAwesome fontSize='inherit' />,
+  arrowBack: <ArrowBack fontSize='inherit' />,
+  creditScore: <CreditScore fontSize='inherit' />,
+  forum: <Forum fontSize='inherit' />,
+  playlist_add_check: <PlaylistAddCheck fontSize='inherit' />,
+  add: <Add fontSize='inherit' />,
+  exit_to_app: <ExitToApp fontSize='inherit' />,
+  group: <Group fontSize='inherit' />,
+  groups: <Groups fontSize='inherit' />,
+  warning: <Warning fontSize='inherit' />,
+  work: <WorkOutline fontSize='inherit' />,
+  timeline: <Timeline fontSize='inherit' />,
+  key: <Key fontSize='inherit' />
 }
 
 interface Props {
@@ -99,7 +97,9 @@ const LeftDashNavItem = (props: Props) => {
       onClick={handleClick}
       isActive={!!match && (match?.isExact || !props.exact)}
     >
-      <StyledIcon>{iconLookup[icon]}</StyledIcon>
+      <StyledIcon isActive={!!match && (match?.isExact || !props.exact)}>
+        {iconLookup[icon]}
+      </StyledIcon>
       <Label>{label}</Label>
     </NavItem>
   )

packages/client/components/SideBarStartMeetingButton.tsx

@@ -9,21 +9,24 @@ const Button = styled(FlatPrimaryButton)<{isOpen: boolean}>(({isOpen}) => ({
   height: 48,
   overflow: 'hidden',
   padding: 0,
-  width: isOpen ? 160 : 48,
-  marginLeft: 7,
+  width: isOpen ? '100%' : 48,
+  // marginLeft: 7,
   marginTop: 15,
   marginBottom: 15,
   transition: `all 300ms ${BezierCurve.DECELERATE}`,
-  justifyContent: 'flex-start'
+  justifyContent: isOpen ? 'center' : 'flex-start'
+  // width: NavSidebar.WIDTH
 }))
 
 const MeetingIcon = styled(Add)({
-  margin: '0px 11px'
+  margin: '0px 0px 0px 11px'
 })
 
 const MeetingLabel = styled('div')<{isOpen: boolean}>(({isOpen}) => ({
   fontSize: 16,
   fontWeight: 600,
+  paddingLeft: 4,
+  paddingRight: 11,
   transition: `all 300ms ${BezierCurve.DECELERATE}`,
   opacity: isOpen ? 1 : 0
 }))

packages/client/types/constEnums.ts

@@ -274,9 +274,9 @@ export const enum MeetingTypes {
 export const enum NavSidebar {
   FONT_SIZE = 14,
   LEFT_BORDER_WIDTH = '3px',
-  LINE_HEIGHT = '24px',
+  LINE_HEIGHT = '22px',
   SUB_FONT_SIZE = 14,
-  SUB_LINE_HEIGHT = '24px',
+  SUB_LINE_HEIGHT = '22px',
   WIDTH = 256
 }