feat: add Settings/Accounts/Emails page (#2867)

Closes #2819

front/src/modules/ui/layout/page/RightDrawerContainer.tsx

@@ -18,8 +18,7 @@ const StyledMainContainer = styled.div`
   flex-direction: row;
   gap: ${({ theme }) => theme.spacing(2)};
   min-height: 0;
-  padding-bottom: ${({ theme }) => theme.spacing(4)};
-  padding-right: ${({ theme }) => theme.spacing(3)};
+  padding: ${({ theme }) => theme.spacing(0, 3)};
   width: 100%;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {

front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx

@@ -16,7 +16,7 @@ type SubMenuTopBarContainerProps = {
 const StyledContainer = styled.div<{ isMobile: boolean }>`
   display: flex;
   flex-direction: column;
-  padding-top: ${({ theme, isMobile }) => (!isMobile ? theme.spacing(4) : 0)};
+  padding-top: ${({ theme, isMobile }) => (!isMobile ? theme.spacing(3) : 0)};
   width: 100%;
 `;
 

front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx

@@ -14,7 +14,6 @@ const StyledWrapper = styled.nav`
   font-size: ${({ theme }) => theme.font.size.lg};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
   gap: ${({ theme }) => theme.spacing(2)};
-  height: ${({ theme }) => theme.spacing(6)};
   line-height: ${({ theme }) => theme.text.lineHeight.md};
 `;
 

front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx

@@ -31,16 +31,16 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(10)};
+  gap: ${({ theme }) => theme.spacing(8)};
   height: 100%;
   min-width: ${desktopNavDrawerWidths.menu};
-  padding: ${({ theme }) => theme.spacing(2)};
-  padding-bottom: ${({ theme }) => theme.spacing(4)};
+  padding: ${({ theme }) => theme.spacing(3, 2, 4)};
 
   ${({ isSubMenu, theme }) =>
     isSubMenu
       ? css`
-          padding-top: ${theme.spacing(11)};
+          padding-right: ${theme.spacing(8)};
+          padding-top: 41px;
         `
       : ''}
 
@@ -52,6 +52,7 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
 const StyledItemsContainer = styled.div`
   display: flex;
   flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(8)};
   margin-bottom: auto;
 `;
 

front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx

@@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
@@ -19,7 +20,8 @@ const StyledIconAndButtonContainer = styled.button`
   flex-direction: row;
   font-size: ${({ theme }) => theme.font.size.lg};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  gap: ${({ theme }) => theme.spacing(1)};
+  gap: ${({ theme }) => theme.spacing(2)};
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
   padding: ${({ theme }) => theme.spacing(1)};
   width: 100%;
 `;
@@ -33,6 +35,7 @@ const StyledContainer = styled.div`
 export const NavigationDrawerBackButton = ({
   title,
 }: NavigationDrawerBackButtonProps) => {
+  const theme = useTheme();
   const navigate = useNavigate();
   const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
 
@@ -43,7 +46,10 @@ export const NavigationDrawerBackButton = ({
           navigate(navigationMemorizedUrl, { replace: true });
         }}
       >
-        <IconChevronLeft />
+        <IconChevronLeft
+          size={theme.icon.size.md}
+          stroke={theme.icon.stroke.lg}
+        />
         <span>{title}</span>
       </StyledIconAndButtonContainer>
     </StyledContainer>

front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx

@@ -8,9 +8,8 @@ const StyledContainer = styled.div`
   align-items: center;
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
-  height: 34px;
+  height: ${({ theme }) => theme.spacing(6)};
   padding: ${({ theme }) => theme.spacing(1)};
-  padding-bottom: ${({ theme }) => theme.spacing(2)};
   user-select: none;
 `;
 

front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -11,6 +11,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 type NavigationDrawerItemProps = {
   className?: string;
   label: string;
+  level?: 1 | 2;
   to?: string;
   onClick?: () => void;
   Icon: IconComponent;
@@ -24,6 +25,7 @@ type NavigationDrawerItemProps = {
 type StyledItemProps = {
   active?: boolean;
   danger?: boolean;
+  level: 1 | 2;
   soon?: boolean;
 };
 
@@ -50,7 +52,7 @@ const StyledItem = styled.div<StyledItemProps>`
   font-family: 'Inter';
   font-size: ${({ theme }) => theme.font.size.md};
   gap: ${({ theme }) => theme.spacing(2)};
-  margin-bottom: calc(${({ theme }) => theme.spacing(1)} / 2);
+  margin-left: ${({ level, theme }) => theme.spacing((level - 1) * 4)};
   padding-bottom: ${({ theme }) => theme.spacing(1)};
   padding-left: ${({ theme }) => theme.spacing(1)};
   padding-right: ${({ theme }) => theme.spacing(1)};
@@ -86,7 +88,6 @@ const StyledSoonPill = styled.div`
   font-size: ${({ theme }) => theme.font.size.xs};
   height: 16px;
   justify-content: center;
-  margin-left: auto;
   padding-left: ${({ theme }) => theme.spacing(2)};
   padding-right: ${({ theme }) => theme.spacing(2)};
 `;
@@ -120,6 +121,7 @@ const StyledKeyBoardShortcut = styled.div`
 export const NavigationDrawerItem = ({
   className,
   label,
+  level = 1,
   Icon,
   to,
   onClick,
@@ -152,6 +154,7 @@ export const NavigationDrawerItem = ({
   return (
     <StyledItem
       className={className}
+      level={level}
       onClick={handleItemClick}
       active={active}
       aria-selected={active}

front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemGroup.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+const StyledGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(0.5)};
+`;
+
+export { StyledGroup as NavigationDrawerItemGroup };

front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+const StyledSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export { StyledSection as NavigationDrawerSection };

front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx

@@ -9,9 +9,8 @@ const StyledTitle = styled.div`
   display: flex;
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  padding-bottom: ${({ theme }) => theme.spacing(2)};
-  padding-left: ${({ theme }) => theme.spacing(1)};
-  padding-top: ${({ theme }) => theme.spacing(8)};
+  padding: ${({ theme }) => theme.spacing(1)};
+  padding-top: 0;
   text-transform: uppercase;
 `;
 

front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx

@@ -2,11 +2,14 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { Favorites } from '@/favorites/components/Favorites';
 import {
+  IconAt,
   IconBell,
   IconBuildingSkyscraper,
+  IconCalendarEvent,
   IconCheckbox,
   IconColorSwatch,
   IconLogout,
+  IconMail,
   IconSearch,
   IconSettings,
   IconTargetArrow,
@@ -21,6 +24,8 @@ import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { NavigationDrawer } from '../NavigationDrawer';
 import { NavigationDrawerItem } from '../NavigationDrawerItem';
 import { NavigationDrawerSectionTitle } from '../NavigationDrawerSectionTitle';
+import { NavigationDrawerSection } from '../NavigationDrawerSection';
+import { NavigationDrawerItemGroup } from '../NavigationDrawerItemGroup';
 
 const meta: Meta<typeof NavigationDrawer> = {
   title: 'UI/Navigation/NavigationDrawer/NavigationDrawer',
@@ -37,33 +42,39 @@ export const Default: Story = {
   args: {
     children: (
       <>
-        <NavigationDrawerItem label="Search" Icon={IconSearch} active />
-        <NavigationDrawerItem
-          label="Notifications"
-          to="/inbox"
-          Icon={IconBell}
-          soon={true}
-        />
-        <NavigationDrawerItem
-          label="Settings"
-          to="/settings/profile"
-          Icon={IconSettings}
-        />
-        <NavigationDrawerItem
-          label="Tasks"
-          to="/tasks"
-          Icon={IconCheckbox}
-          count={2}
-        />
+        <NavigationDrawerSection>
+          <NavigationDrawerItem label="Search" Icon={IconSearch} active />
+          <NavigationDrawerItem
+            label="Notifications"
+            to="/inbox"
+            Icon={IconBell}
+            soon={true}
+          />
+          <NavigationDrawerItem
+            label="Settings"
+            to="/settings/profile"
+            Icon={IconSettings}
+          />
+          <NavigationDrawerItem
+            label="Tasks"
+            to="/tasks"
+            Icon={IconCheckbox}
+            count={2}
+          />
+        </NavigationDrawerSection>
+
         <Favorites />
-        <NavigationDrawerSectionTitle label="Workspace" />
-        <NavigationDrawerItem
-          label="Companies"
-          to="/companies"
-          Icon={IconBuildingSkyscraper}
-        />
-        <NavigationDrawerItem label="People" to="/people" Icon={IconUser} />
-        <NavigationDrawerItem label="Opportunities" Icon={IconTargetArrow} />
+
+        <NavigationDrawerSection>
+          <NavigationDrawerSectionTitle label="Workspace" />
+          <NavigationDrawerItem
+            label="Companies"
+            to="/companies"
+            Icon={IconBuildingSkyscraper}
+          />
+          <NavigationDrawerItem label="People" to="/people" Icon={IconUser} />
+          <NavigationDrawerItem label="Opportunities" Icon={IconTargetArrow} />
+        </NavigationDrawerSection>
       </>
     ),
     footer: null,
@@ -76,32 +87,58 @@ export const Submenu: Story = {
     title: 'Settings',
     children: (
       <>
-        <NavigationDrawerSectionTitle label="User" />
-        <NavigationDrawerItem
-          label="Profile"
-          to="/settings/profile"
-          Icon={IconUserCircle}
-          active
-        />
-        <NavigationDrawerItem
-          label="Appearance"
-          to="/settings/profile/appearance"
-          Icon={IconColorSwatch}
-        />
-        <NavigationDrawerSectionTitle label="Workspace" />
-        <NavigationDrawerItem
-          label="General"
-          to="/settings/workspace"
-          Icon={IconSettings}
-        />
-        <NavigationDrawerItem
-          label="Members"
-          to="/settings/workspace-members"
-          Icon={IconUsers}
-        />
+        <NavigationDrawerSection>
+          <NavigationDrawerSectionTitle label="User" />
+          <NavigationDrawerItem
+            label="Profile"
+            to="/settings/profile"
+            Icon={IconUserCircle}
+            active
+          />
+          <NavigationDrawerItem
+            label="Appearance"
+            to="/settings/profile/appearance"
+            Icon={IconColorSwatch}
+          />
+          <NavigationDrawerItemGroup>
+            <NavigationDrawerItem
+              label="Accounts"
+              to="/settings/accounts"
+              Icon={IconAt}
+            />
+            <NavigationDrawerItem
+              level={2}
+              label="Emails"
+              to="/settings/accounts/emails"
+              Icon={IconMail}
+            />
+            <NavigationDrawerItem
+              level={2}
+              label="Calendars"
+              Icon={IconCalendarEvent}
+              soon
+            />
+          </NavigationDrawerItemGroup>
+        </NavigationDrawerSection>
 
-        <NavigationDrawerSectionTitle label="Other" />
-        <NavigationDrawerItem label="Logout" Icon={IconLogout} />
+        <NavigationDrawerSection>
+          <NavigationDrawerSectionTitle label="Workspace" />
+          <NavigationDrawerItem
+            label="General"
+            to="/settings/workspace"
+            Icon={IconSettings}
+          />
+          <NavigationDrawerItem
+            label="Members"
+            to="/settings/workspace-members"
+            Icon={IconUsers}
+          />
+        </NavigationDrawerSection>
+
+        <NavigationDrawerSection>
+          <NavigationDrawerSectionTitle label="Other" />
+          <NavigationDrawerItem label="Logout" Icon={IconLogout} />
+        </NavigationDrawerSection>
       </>
     ),
     footer: <GithubVersionLink />,

front/src/modules/ui/theme/constants/theme.ts

@@ -35,7 +35,8 @@ const common = {
     },
   },
   spacingMultiplicator: 4,
-  spacing: (multiplicator: number) => `${multiplicator * 4}px`,
+  spacing: (...args: number[]) =>
+    args.map((multiplicator) => `${multiplicator * 4}px`).join(' '),
   betweenSiblingsGap: `2px`,
   table: {
     horizontalCellMargin: '8px',