Design fixes (#665)

front/src/AppNavbar.tsx

@@ -10,24 +10,23 @@ import {
   IconTargetArrow,
   IconUser,
 } from '@/ui/icons/index';
-import NavItemsContainer from '@/ui/layout/navbar/NavItemsContainer';
+import { useIsSubNavbarDisplayed } from '@/ui/layout/hooks/useIsSubNavbarDisplayed';
+import MainNavbar from '@/ui/layout/navbar/MainNavbar';
 
 import NavItem from './modules/ui/layout/navbar/NavItem';
 import NavTitle from './modules/ui/layout/navbar/NavTitle';
-import NavWorkspaceButton from './modules/ui/layout/navbar/NavWorkspaceButton';
 
 export function AppNavbar() {
   const theme = useTheme();
   const currentPath = useLocation().pathname;
 
-  const shouldDiplaySubNavBar = currentPath.match(/\/settings\//g) !== null;
+  const isSubNavbarDisplayed = useIsSubNavbarDisplayed();
 
   return (
     <>
-      {!shouldDiplaySubNavBar ? (
+      {!isSubNavbarDisplayed ? (
-        <>
+        <MainNavbar>
-          <NavWorkspaceButton />
+          <>
-          <NavItemsContainer>
             <NavItem
               label="Search"
               to="/search"
@@ -64,8 +63,8 @@ export function AppNavbar() {
               icon={<IconTargetArrow size={theme.icon.size.md} />}
               active={currentPath === '/opportunities'}
             />
-          </NavItemsContainer>
+          </>
-        </>
+        </MainNavbar>
       ) : (
         <SettingsNavbar />
       )}

front/src/modules/comments/components/timeline/Timeline.tsx

@@ -6,7 +6,7 @@ import { useOpenCommentThreadRightDrawer } from '@/comments/hooks/useOpenComment
 import { useOpenCreateCommentThreadDrawer } from '@/comments/hooks/useOpenCreateCommentThreadDrawer';
 import { CommentableEntity } from '@/comments/types/CommentableEntity';
 import { CommentThreadForDrawer } from '@/comments/types/CommentThreadForDrawer';
-import { IconCirclePlus, IconNotes } from '@/ui/icons/index';
+import { IconNotes } from '@/ui/icons/index';
 import {
   beautifyExactDate,
   beautifyPastDateRelativeToNow,
@@ -221,10 +221,6 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
     <StyledMainContainer>
       <StyledTopActionBar>
         <StyledTimelineItemContainer>
-          <StyledIconContainer>
-            <IconCirclePlus />
-          </StyledIconContainer>
-
           <CommentThreadCreateButton
             onNoteClick={() => openCreateCommandThread(entity)}
           />

front/src/modules/settings/components/SettingsNavbar.tsx

@@ -11,9 +11,8 @@ import {
   IconUsers,
 } from '@/ui/icons/index';
 import NavItem from '@/ui/layout/navbar/NavItem';
-import NavItemsContainer from '@/ui/layout/navbar/NavItemsContainer';
 import NavTitle from '@/ui/layout/navbar/NavTitle';
-import SubNavbarContainer from '@/ui/layout/navbar/sub-navbar/SubNavBarContainer';
+import SubNavbar from '@/ui/layout/navbar/sub-navbar/SubNavbar';
 
 export function SettingsNavbar() {
   const theme = useTheme();
@@ -25,8 +24,8 @@ export function SettingsNavbar() {
   }, [logout]);
 
   return (
-    <SubNavbarContainer backButtonTitle="Settings">
+    <SubNavbar backButtonTitle="Settings">
-      <NavItemsContainer>
+      <>
         <NavTitle label="User" />
         <NavItem
           label="Profile"
@@ -81,7 +80,7 @@ export function SettingsNavbar() {
           icon={<IconLogout size={theme.icon.size.md} />}
           danger={true}
         />
-      </NavItemsContainer>
+      </>
-    </SubNavbarContainer>
+    </SubNavbar>
   );
 }

front/src/modules/ui/components/buttons/IconButton.tsx

@@ -1,33 +1,118 @@
+import React from 'react';
 import styled from '@emotion/styled';
 
-const StyledIconButton = styled.button`
+export type IconButtonVariant = 'transparent' | 'border' | 'shadow' | 'white';
+
+export type IconButtonSize = 'large' | 'medium' | 'small';
+
+export type ButtonProps = {
+  icon?: React.ReactNode;
+  variant?: IconButtonVariant;
+  size?: IconButtonSize;
+} & React.ComponentProps<'button'>;
+
+const StyledIconButton = styled.button<Pick<ButtonProps, 'variant' | 'size'>>`
   align-items: center;
-  background: ${({ theme }) => theme.color.blue};
+  background: ${({ theme, variant, disabled }) => {
-  border: none;
+    switch (variant) {
+      case 'shadow':
+      case 'white':
+        return theme.background.transparent.lighter;
+      case 'transparent':
+      case 'border':
+      default:
+        return 'transparent';
+    }
+  }};
+  border-color: ${({ theme, variant }) => {
+    switch (variant) {
+      case 'border':
+        return theme.border.color.medium;
+      case 'shadow':
+      case 'white':
+      case 'transparent':
+      default:
+        return 'none';
+    }
+  }};
+  transition: background 0.1s ease;
+  border-radius: ${({ theme }) => {
+    return theme.border.radius.sm;
+  }};
+  border-width: ${({ variant }) => {
+    switch (variant) {
+      case 'border':
+        return '1px';
+      case 'shadow':
+      case 'white':
+      case 'transparent':
+      default:
+        return 0;
+    }
+  }};
+  color: ${({ theme, disabled }) => {
+    if (disabled) {
+      return theme.font.color.extraLight;
+    }
 
-  border-radius: 50%;
+    return theme.font.color.tertiary;
-  color: ${({ theme }) => theme.font.color.inverted};
+  }};
-
+  border-style: solid;
-  cursor: pointer;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  height: ${({ size }) => {
+    switch (size) {
+      case 'large':
+        return '32px';
+      case 'medium':
+        return '24px';
+      case 'small':
+      default:
+        return '20px';
+    }
+  }};
   display: flex;
-  height: 20px;
-
   justify-content: center;
-
   padding: 0;
-  transition: color 0.1s ease-in-out, background 0.1s ease-in-out;
+  width: ${({ size }) => {
-  width: 20px;
+    switch (size) {
-
+      case 'large':
-  &:disabled {
+        return '32px';
-    background: ${({ theme }) => theme.background.quaternary};
+      case 'medium':
-    color: ${({ theme }) => theme.font.color.tertiary};
+        return '24px';
-    cursor: default;
+      case 'small':
+      default:
+        return '20px';
+    }
+  }};
+  flex-shrink: 0;
+  &:hover {
+    background: ${({ theme, disabled }) => {
+      return disabled ? 'auto' : theme.background.transparent.light;
+    }};
   }
+  user-select: none;
+  &:active {
+    background: ${({ theme, disabled }) => {
+      return disabled ? 'auto' : theme.background.transparent.medium;
+    }};
 `;
 
 export function IconButton({
   icon,
+  title,
+  variant = 'transparent',
+  size = 'medium',
+  disabled = false,
   ...props
-}: { icon: React.ReactNode } & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+}: ButtonProps) {
-  return <StyledIconButton {...props}>{icon}</StyledIconButton>;
+  return (
+    <StyledIconButton
+      variant={variant}
+      size={size}
+      disabled={disabled}
+      {...props}
+    >
+      {icon}
+    </StyledIconButton>
+  );
 }

front/src/modules/ui/components/buttons/RoundedIconButton.tsx

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+
+const StyledIconButton = styled.button`
+  align-items: center;
+  background: ${({ theme }) => theme.color.blue};
+  border: none;
+
+  border-radius: 50%;
+  color: ${({ theme }) => theme.font.color.inverted};
+
+  cursor: pointer;
+  display: flex;
+  height: 20px;
+
+  justify-content: center;
+
+  padding: 0;
+  transition: color 0.1s ease-in-out, background 0.1s ease-in-out;
+  width: 20px;
+
+  &:disabled {
+    background: ${({ theme }) => theme.background.quaternary};
+    color: ${({ theme }) => theme.font.color.tertiary};
+    cursor: default;
+  }
+`;
+
+export function RoundedIconButton({
+  icon,
+  ...props
+}: { icon: React.ReactNode } & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <StyledIconButton {...props}>{icon}</StyledIconButton>;
+}

front/src/modules/ui/components/buttons/__stories__/IconButton.stories.tsx

@@ -1,33 +1,153 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { withKnobs } from '@storybook/addon-knobs';
 import { expect, jest } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
-import { IconArrowRight } from '@/ui/icons';
+import { IconUser } from '@/ui/icons';
 import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 
 import { IconButton } from '../IconButton';
 
+type IconButtonProps = React.ComponentProps<typeof IconButton>;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 800px;
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+const StyledTitle = styled.h1`
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledDescription = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  text-align: center;
+  text-transform: uppercase;
+`;
+
+const StyledLine = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+`;
+
+const StyledIconButtonContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(2)};
+  width: 50px;
+`;
+
 const meta: Meta<typeof IconButton> = {
   title: 'UI/Buttons/IconButton',
   component: IconButton,
+  decorators: [withKnobs],
 };
 
 export default meta;
 type Story = StoryObj<typeof IconButton>;
 
+const variants: IconButtonProps['variant'][] = [
+  'transparent',
+  'border',
+  'shadow',
+  'white',
+];
+
 const clickJestFn = jest.fn();
 
-export const Default: Story = {
+const states = {
+  default: {
+    description: 'Default',
+    extraProps: (variant: string) => ({
+      'data-testid': `${variant}-button-default`,
+      onClick: clickJestFn,
+    }),
+  },
+  hover: {
+    description: 'Hover',
+    extraProps: (variant: string) => ({
+      id: `${variant}-button-hover`,
+      'data-testid': `${variant}-button-hover`,
+    }),
+  },
+  pressed: {
+    description: 'Pressed',
+    extraProps: (variant: string) => ({
+      id: `${variant}-button-pressed`,
+      'data-testid': `${variant}-button-pressed`,
+    }),
+  },
+  disabled: {
+    description: 'Disabled',
+    extraProps: (variant: string) => ({
+      'data-testid': `${variant}-button-disabled`,
+      disabled: true,
+    }),
+  },
+};
+
+function IconButtonRow({ variant, size, ...props }: IconButtonProps) {
+  const iconSize = size === 'small' ? 14 : 16;
+  return (
+    <>
+      {Object.entries(states).map(([state, { description, extraProps }]) => (
+        <StyledIconButtonContainer key={`${variant}-container-${state}`}>
+          <StyledDescription>{description}</StyledDescription>
+          <IconButton
+            {...props}
+            {...extraProps(variant ?? '')}
+            variant={variant}
+            size={size}
+            icon={<IconUser size={iconSize} />}
+          />
+        </StyledIconButtonContainer>
+      ))}
+    </>
+  );
+}
+
+const generateStory = (
+  size: IconButtonProps['size'],
+  LineComponent: React.ComponentType<IconButtonProps>,
+): Story => ({
   render: getRenderWrapperForComponent(
-    <IconButton onClick={clickJestFn} icon={<IconArrowRight size={15} />} />,
+    <StyledContainer>
+      {variants.map((variant) => (
+        <div key={variant}>
+          <StyledTitle>{variant}</StyledTitle>
+          <StyledLine>
+            <LineComponent size={size} variant={variant} />
+          </StyledLine>
+        </div>
+      ))}
+    </StyledContainer>,
   ),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const button = canvas.getByTestId(`transparent-button-default`);
-    const button = canvas.getByRole('button');
-    await userEvent.click(button);
 
-    expect(clickJestFn).toHaveBeenCalledTimes(1);
+    const numberOfClicks = clickJestFn.mock.calls.length;
+    await userEvent.click(button);
+    expect(clickJestFn).toHaveBeenCalledTimes(numberOfClicks + 1);
   },
-};
+});
+
+export const LargeSize = generateStory('large', IconButtonRow);
+export const MediumSize = generateStory('medium', IconButtonRow);
+export const SmallSize = generateStory('small', IconButtonRow);

front/src/modules/ui/components/buttons/__stories__/RoundedIconButton.stories.tsx

@@ -0,0 +1,36 @@
+import { expect, jest } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { IconArrowRight } from '@/ui/icons';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { RoundedIconButton } from '../RoundedIconButton';
+
+const meta: Meta<typeof RoundedIconButton> = {
+  title: 'UI/Buttons/RoundedIconButton',
+  component: RoundedIconButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof RoundedIconButton>;
+
+const clickJestFn = jest.fn();
+
+export const Default: Story = {
+  render: getRenderWrapperForComponent(
+    <RoundedIconButton
+      onClick={clickJestFn}
+      icon={<IconArrowRight size={15} />}
+    />,
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};

front/src/modules/ui/components/inputs/AutosizeTextInput.tsx

@@ -4,7 +4,7 @@ import { HotkeysEvent } from 'react-hotkeys-hook/dist/types';
 import TextareaAutosize from 'react-textarea-autosize';
 import styled from '@emotion/styled';
 
-import { IconButton } from '@/ui/components/buttons/IconButton';
+import { RoundedIconButton } from '@/ui/components/buttons/RoundedIconButton';
 import { IconArrowRight } from '@/ui/icons/index';
 
 const MAX_ROWS = 5;
@@ -47,7 +47,7 @@ const StyledTextArea = styled(TextareaAutosize)`
 `;
 
 // TODO: this messes with the layout, fix it
-const StyledBottomRightIconButton = styled.div`
+const StyledBottomRightRoundedIconButton = styled.div`
   height: 0;
   position: relative;
   right: 26px;
@@ -129,13 +129,13 @@ export function AutosizeTextInput({
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
         />
-        <StyledBottomRightIconButton>
+        <StyledBottomRightRoundedIconButton>
-          <IconButton
+          <RoundedIconButton
             onClick={handleOnClickSendButton}
             icon={<IconArrowRight size={15} />}
             disabled={isSendButtonDisabled}
           />
-        </StyledBottomRightIconButton>
+        </StyledBottomRightRoundedIconButton>
       </StyledContainer>
     </>
   );

front/src/modules/ui/components/table/EntityTableBody.tsx

@@ -2,6 +2,7 @@ import { useRecoilValue } from 'recoil';
 
 import { TableColumn } from '@/people/table/components/peopleColumns';
 import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
+import { isNavbarSwitchingSizeState } from '@/ui/layout/states/isNavbarSwitchingSizeState';
 import { isFetchingEntityTableDataState } from '@/ui/tables/states/isFetchingEntityTableDataState';
 import { RowContext } from '@/ui/tables/states/RowContext';
 import { tableRowIdsState } from '@/ui/tables/states/tableRowIdsState';
@@ -11,13 +12,15 @@ import { EntityTableRow } from './EntityTableRow';
 export function EntityTableBody({ columns }: { columns: Array<TableColumn> }) {
   const rowIds = useRecoilValue(tableRowIdsState);
 
+  const isNavbarSwitchingSize = useRecoilValue(isNavbarSwitchingSizeState);
+
   const isFetchingEntityTableData = useRecoilValue(
     isFetchingEntityTableDataState,
   );
 
   return (
     <tbody>
-      {!isFetchingEntityTableData
+      {!isFetchingEntityTableData && !isNavbarSwitchingSize
         ? rowIds.map((rowId, index) => (
             <RecoilScope SpecificContext={RowContext} key={rowId}>
               <EntityTableRow columns={columns} rowId={rowId} index={index} />

front/src/modules/ui/layout/DefaultLayout.tsx

@@ -7,7 +7,7 @@ import { AppNavbar } from '~/AppNavbar';
 
 import { MOBILE_VIEWPORT } from '../themes/themes';
 
-import { NavbarContainer } from './navbar/NavbarContainer';
+import { NavbarAnimatedContainer } from './navbar/NavbarAnimatedContainer';
 import { isNavbarOpenedState } from './states/isNavbarOpenedState';
 
 const StyledLayout = styled.div`
@@ -47,9 +47,9 @@ export function DefaultLayout({ children }: OwnProps) {
       {userIsAuthenticated ? (
         <>
           <CommandMenu />
-          <NavbarContainer>
+          <NavbarAnimatedContainer>
             <AppNavbar />
-          </NavbarContainer>
+          </NavbarAnimatedContainer>
           <MainContainer>{children}</MainContainer>
         </>
       ) : (

front/src/modules/ui/layout/hooks/useIsSubNavbarDisplayed.ts

@@ -0,0 +1,6 @@
+import { useLocation } from 'react-router-dom';
+
+export function useIsSubNavbarDisplayed() {
+  const currentPath = useLocation().pathname;
+  return currentPath.match(/\/settings\//g) !== null;
+}

front/src/modules/ui/layout/navbar/MainNavbar.tsx

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+
+import NavItemsContainer from './NavItemsContainer';
+import NavWorkspaceButton from './NavWorkspaceButton';
+
+type OwnProps = {
+  children: JSX.Element;
+};
+
+const StyledContainer = styled.div`
+  width: 220px;
+`;
+
+export default function MainNavbar({ children }: OwnProps) {
+  return (
+    <StyledContainer>
+      <NavWorkspaceButton />
+      <NavItemsContainer>{children}</NavItemsContainer>
+    </StyledContainer>
+  );
+}

front/src/modules/ui/layout/navbar/NavItemsContainer.tsx

@@ -8,7 +8,6 @@ const StyledNavItemsContainer = styled.div`
   display: flex;
   flex-direction: column;
   margin-top: 40px;
-  min-width: 220px;
 `;
 
 function NavItemsContainer({ children }: OwnProps) {

front/src/modules/ui/layout/navbar/NavbarAnimatedContainer.tsx

@@ -0,0 +1,57 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
+
+import { useIsSubNavbarDisplayed } from '../hooks/useIsSubNavbarDisplayed';
+import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
+import { isNavbarSwitchingSizeState } from '../states/isNavbarSwitchingSizeState';
+
+const StyledNavbarContainer = styled(motion.div)`
+  align-items: end;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow: hidden;
+  padding: ${({ theme }) => theme.spacing(2)};
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    width: ${(props) =>
+      useRecoilValue(isNavbarOpenedState)
+        ? `calc(100% - ` + props.theme.spacing(4) + `)`
+        : '0'};
+  }
+`;
+
+type NavbarProps = {
+  children: React.ReactNode;
+  layout?: string;
+};
+
+export function NavbarAnimatedContainer({ children, layout }: NavbarProps) {
+  const isMenuOpened = useRecoilValue(isNavbarOpenedState);
+  const [, setIsNavbarSwitchingSize] = useRecoilState(
+    isNavbarSwitchingSizeState,
+  );
+  const isSubNavbarDisplayed = useIsSubNavbarDisplayed();
+  const theme = useTheme();
+
+  return (
+    <StyledNavbarContainer
+      onAnimationComplete={() => {
+        setIsNavbarSwitchingSize(false);
+      }}
+      animate={{
+        width: isMenuOpened ? (isSubNavbarDisplayed ? '520px' : '220px') : '0',
+        opacity: isMenuOpened ? 1 : 0,
+      }}
+      transition={{
+        duration: theme.animation.duration.visible,
+      }}
+    >
+      {children}
+    </StyledNavbarContainer>
+  );
+}

front/src/modules/ui/layout/navbar/NavbarContainer.tsx

@@ -1,38 +0,0 @@
-import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
-
-import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
-
-import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
-
-const StyledNavbarContainer = styled.div`
-  flex-direction: column;
-  flex-shrink: 0;
-  overflow: hidden;
-  padding: ${({ theme }) => theme.spacing(2)};
-  width: ${(props) => (useRecoilValue(isNavbarOpenedState) ? 'auto' : '0')};
-
-  @media (max-width: ${MOBILE_VIEWPORT}px) {
-    width: ${(props) =>
-      useRecoilValue(isNavbarOpenedState)
-        ? `calc(100% - ` + props.theme.spacing(4) + `)`
-        : '0'};
-  }
-`;
-
-const NavbarContent = styled.div`
-  display: ${() => (useRecoilValue(isNavbarOpenedState) ? 'block' : 'none')};
-`;
-
-type NavbarProps = {
-  children: React.ReactNode;
-  layout?: string;
-};
-
-export function NavbarContainer({ children, layout }: NavbarProps) {
-  return (
-    <StyledNavbarContainer>
-      <NavbarContent>{children}</NavbarContent>
-    </StyledNavbarContainer>
-  );
-}

front/src/modules/ui/layout/navbar/sub-navbar/NavBackButton.tsx

@@ -1,8 +1,10 @@
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
 
 import { IconChevronLeft } from '@/ui/icons/index';
 
+import { isNavbarSwitchingSizeState } from '../../states/isNavbarSwitchingSizeState';
 import NavCollapseButton from '../NavCollapseButton';
 
 type OwnProps = {
@@ -32,12 +34,18 @@ const StyledContainer = styled.div`
 
 export default function NavBackButton({ title }: OwnProps) {
   const navigate = useNavigate();
+  const [, setIsNavbarSwitchingSize] = useRecoilState(
+    isNavbarSwitchingSizeState,
+  );
 
   return (
     <>
       <StyledContainer>
         <IconAndButtonContainer
-          onClick={() => navigate('/', { replace: true })}
+          onClick={() => {
+            setIsNavbarSwitchingSize(true);
+            navigate('/', { replace: true });
+          }}
         >
           <IconChevronLeft />
           <span>{title}</span>

front/src/modules/ui/layout/navbar/sub-navbar/SubNavbar.tsx

@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import NavItemsContainer from '../NavItemsContainer';
+
 import NavBackButton from './NavBackButton';
 
 type OwnProps = {
@@ -10,23 +12,15 @@ type OwnProps = {
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
-  padding-left: 300px;
   padding-top: ${({ theme }) => theme.spacing(6)};
+  width: 220px;
 `;
 
-const StyledNavItemsContainer = styled.div`
+export default function SubNavbar({ children, backButtonTitle }: OwnProps) {
-  display: flex;
-  flex-direction: column;
-`;
-
-export default function SubNavbarContainer({
-  children,
-  backButtonTitle,
-}: OwnProps) {
   return (
     <StyledContainer>
       <NavBackButton title={backButtonTitle} />
-      <StyledNavItemsContainer>{children}</StyledNavItemsContainer>
+      <NavItemsContainer>{children}</NavItemsContainer>
     </StyledContainer>
   );
 }

front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx

@@ -1,5 +1,7 @@
 import { useRef } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 import { useRecoilState } from 'recoil';
 
 import {
@@ -13,16 +15,15 @@ import { rightDrawerPageState } from '../states/rightDrawerPageState';
 
 import { RightDrawerRouter } from './RightDrawerRouter';
 
-const StyledContainer = styled.div`
+const StyledContainer = styled(motion.div)`
   background: ${({ theme }) => theme.background.primary};
   box-shadow: ${({ theme }) => theme.boxShadow.strong};
   height: 100%;
   overflow-x: hidden;
   position: fixed;
+
   right: 0;
   top: 0;
-  transition: width 0.5s;
-  width: ${({ theme }) => theme.rightDrawerWidth};
   z-index: 2;
 `;
 
@@ -45,17 +46,23 @@ export function RightDrawer() {
     callback: () => setIsRightDrawerOpen(false),
     mode: OutsideClickAlerterMode.absolute,
   });
-  if (!isRightDrawerOpen || !isDefined(rightDrawerPage)) {
+  const theme = useTheme();
+  if (!isDefined(rightDrawerPage)) {
     return <></>;
   }
 
   return (
-    <>
+    <StyledContainer
-      <StyledContainer>
+      animate={{
-        <StyledRightDrawer ref={rightDrawerRef}>
+        width: isRightDrawerOpen ? theme.rightDrawerWidth : '0',
-          <RightDrawerRouter />
+      }}
-        </StyledRightDrawer>
+      transition={{
-      </StyledContainer>
+        duration: theme.animation.duration.visible,
-    </>
+      }}
+    >
+      <StyledRightDrawer ref={rightDrawerRef}>
+        <RightDrawerRouter />
+      </StyledRightDrawer>
+    </StyledContainer>
   );
 }

front/src/modules/ui/layout/states/isNavbarSwitchingSizeState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isNavbarSwitchingSizeState = atom({
+  key: 'ui/isNavbarSwitchingSizeState',
+  default: true,
+});

front/src/modules/ui/layout/top-bar/TopBar.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 
+import { IconButton } from '@/ui/components/buttons/IconButton';
 import { IconPlus } from '@/ui/icons/index';
 
 import NavCollapseButton from '../navbar/NavCollapseButton';
@@ -16,6 +17,7 @@ const TopBarContainer = styled.div`
   font-size: 14px;
   min-height: ${TOP_BAR_MIN_HEIGHT}px;
   padding: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(3)};
 `;
 
 const TitleContainer = styled.div`
@@ -26,22 +28,6 @@ const TitleContainer = styled.div`
   width: 100%;
 `;
 
-const AddButtonContainer = styled.div`
-  align-items: center;
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ theme }) => theme.font.color.tertiary};
-  cursor: pointer;
-  display: flex;
-  flex-shrink: 0;
-  height: 28px;
-  justify-content: center;
-  justify-self: flex-end;
-  margin-right: ${({ theme }) => theme.spacing(1)};
-  user-select: none;
-  width: 28px;
-`;
-
 type OwnProps = {
   title: string;
   icon: ReactNode;
@@ -56,12 +42,13 @@ export function TopBar({ title, icon, onAddButtonClick }: OwnProps) {
         {icon}
         <TitleContainer data-testid="top-bar-title">{title}</TitleContainer>
         {onAddButtonClick && (
-          <AddButtonContainer
+          <IconButton
+            icon={<IconPlus size={16} />}
+            size="large"
             data-testid="add-button"
             onClick={onAddButtonClick}
-          >
+            variant="border"
-            <IconPlus size={16} />
+          />
-          </AddButtonContainer>
         )}
       </TopBarContainer>
     </>

front/src/modules/ui/themes/animation.ts

@@ -0,0 +1,6 @@
+export const animation = {
+  duration: {
+    instant: 0.1,
+    visible: 0.3,
+  },
+};

front/src/modules/ui/themes/themes.ts

@@ -1,3 +1,4 @@
+import { animation } from './animation';
 import { backgroundDark, backgroundLight } from './background';
 import { blur } from './blur';
 import { borderDark, borderLight } from './border';
@@ -13,6 +14,7 @@ const common = {
   icon: icon,
   text: text,
   blur: blur,
+  animation: animation,
   snackBar: {
     success: {
       background: '#16A26B',