Design fixes (#555)

* Change placeholder color and design fixes for show page / sidebar * Replace hardcoded border radiuses * Improve border display for middle of button group * Editor styling * Editor font size * Comment Bar positioning and remove scrollbar for 1px * Add Comments section title * Nit: match css style --------- Co-authored-by: Emilien <emilien.chauvet.enpc@gmail.com>
2023-07-10 20:24:20 +02:00
parent 3079747c83
commit 25eeada92c
37 changed files with 136 additions and 89 deletions
--- a/front/src/modules/command-menu/components/CommandMenuStyles.tsx
+++ b/front/src/modules/command-menu/components/CommandMenuStyles.tsx
@ -36,7 +36,7 @@ export const StyledInput = styled(Command.Input)`

 export const StyledMenuItem = styled(Command.Item)`
  align-items: center;
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
  color: ${({ theme }) => theme.font.color.primary};
  cursor: pointer;
  display: flex;
@ -122,14 +122,14 @@ export const StyledIconAndLabelContainer = styled.div`
 export const StyledIconContainer = styled.div`
  align-items: center;
  background: ${({ theme }) => theme.background.transparent.light};
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
  color: ${({ theme }) => theme.font.color.secondary};
  display: flex;
  padding: ${({ theme }) => theme.spacing(1)};
 `;
 export const StyledShortCut = styled.div`
  background-color: ${({ theme }) => theme.background.transparent.light};
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
  color: ${({ theme }) => theme.font.color.light};
  margin-left: ${({ theme }) => theme.spacing(1)};
  margin-right: ${({ theme }) => theme.spacing(1)};
--- a/front/src/modules/comments/components/comment-thread/CommentThreadBodyEditor.tsx
+++ b/front/src/modules/comments/components/comment-thread/CommentThreadBodyEditor.tsx
@ -46,7 +46,7 @@ export function CommentThreadBodyEditor({ commentThread, onChange }: OwnProps) {
    initialContent: commentThread.body
      ? JSON.parse(commentThread.body)
      : undefined,
-    editorDOMAttributes: { class: 'editor-edit-mode' },
+    editorDOMAttributes: { class: 'editor' },
    onEditorContentChange: (editor) => {
      debounceOnChange(JSON.stringify(editor.topLevelBlocks) ?? '');
    },
--- a/front/src/modules/comments/components/comment-thread/CommentThreadComments.tsx
+++ b/front/src/modules/comments/components/comment-thread/CommentThreadComments.tsx
@ -41,6 +41,13 @@ const StyledCommentActionBar = styled.div`
  width: calc(${({ theme }) => theme.rightDrawerWidth} - 48px - 24px);
 `;

+const StyledThreadCommentTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  text-transform: uppercase;
+`;
+
 export function CommentThreadComments({ commentThread }: OwnProps) {
  const [createCommentMutation] = useCreateCommentMutation();
  const currentUser = useRecoilValue(currentUserState);
@ -69,11 +76,14 @@ export function CommentThreadComments({ commentThread }: OwnProps) {
  return (
    <>
      {commentThread?.comments.length > 0 && (
-        <StyledThreadItemListContainer>
-          {commentThread?.comments?.map((comment, index) => (
-            <CommentThreadItem key={comment.id} comment={comment} />
-          ))}
-        </StyledThreadItemListContainer>
+        <>
+          <StyledThreadItemListContainer>
+            <StyledThreadCommentTitle>Comments</StyledThreadCommentTitle>
+            {commentThread?.comments?.map((comment, index) => (
+              <CommentThreadItem key={comment.id} comment={comment} />
+            ))}
+          </StyledThreadItemListContainer>
+        </>
      )}

      <StyledCommentActionBar>
--- a/front/src/modules/comments/components/comment-thread/CommentThreadTypeDropdown.tsx
+++ b/front/src/modules/comments/components/comment-thread/CommentThreadTypeDropdown.tsx
@ -6,7 +6,7 @@ import { IconNotes } from '@/ui/icons/index';

 export function CommentThreadTypeDropdown() {
  const options: DropdownOptionType[] = [
-    { label: 'Notes', icon: <IconNotes /> },
+    { label: 'Note', icon: <IconNotes /> },
    // { label: 'Call', icon: <IconPhone /> },
  ];

--- a/front/src/modules/comments/components/right-drawer/CommentThread.tsx
+++ b/front/src/modules/comments/components/right-drawer/CommentThread.tsx
@ -22,11 +22,21 @@ import { CommentThreadActionBar } from './CommentThreadActionBar';
 import '@blocknote/core/style.css';

 const StyledContainer = styled.div`
-  align-items: flex-start;
+  box-sizing: border-box;
  display: flex;
  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(4)};
+  height: 100%;
+  justify-content: space-between;
+  overflow-y: auto;
+`;

+const StyledUpperPartContainer = styled.div`
+  align-items: flex-start;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  gap: ${({ theme }) => theme.spacing(4)};
  justify-content: flex-start;
 `;

@ -59,7 +69,7 @@ const StyledEditableTitleInput = styled.input`
  line-height: ${({ theme }) => theme.text.lineHeight.md};
  outline: none;
  width: calc(100% - ${({ theme }) => theme.spacing(2)});
-  :placeholder {
+  &::placeholder {
    color: ${({ theme }) => theme.font.color.light};
  }
 `;
@ -133,39 +143,42 @@ export function CommentThread({

  return (
    <StyledContainer>
-      <StyledTopContainer>
-        <StyledTopActionsContainer>
-          <CommentThreadTypeDropdown />
-          <CommentThreadActionBar commentThreadId={commentThread?.id ?? ''} />
-        </StyledTopActionsContainer>
-        <StyledEditableTitleInput
-          placeholder="Note title (optional)"
-          onChange={(event) => {
-            setTitle(event.target.value);
-            debounceUpdateTitle(event.target.value);
-          }}
-          value={title ?? ''}
-        />
-        <PropertyBox>
-          <PropertyBoxItem
-            icon={<IconArrowUpRight />}
-            value={
-              <CommentThreadRelationPicker
-                commentThread={{
-                  id: commentThread.id,
-                  commentThreadTargets:
-                    commentThread.commentThreadTargets ?? [],
-                }}
-              />
-            }
-            label="Relations"
+      <StyledUpperPartContainer>
+        <StyledTopContainer>
+          <StyledTopActionsContainer>
+            <CommentThreadTypeDropdown />
+            <CommentThreadActionBar commentThreadId={commentThread?.id ?? ''} />
+          </StyledTopActionsContainer>
+          <StyledEditableTitleInput
+            placeholder="Note title (optional)"
+            onChange={(event) => {
+              setTitle(event.target.value);
+              debounceUpdateTitle(event.target.value);
+            }}
+            value={title ?? ''}
          />
-        </PropertyBox>
-      </StyledTopContainer>
-      <CommentThreadBodyEditor
-        commentThread={commentThread}
-        onChange={updateTitleFromBody}
-      />
+          <PropertyBox>
+            <PropertyBoxItem
+              icon={<IconArrowUpRight />}
+              value={
+                <CommentThreadRelationPicker
+                  commentThread={{
+                    id: commentThread.id,
+                    commentThreadTargets:
+                      commentThread.commentThreadTargets ?? [],
+                  }}
+                />
+              }
+              label="Relations"
+            />
+          </PropertyBox>
+        </StyledTopContainer>
+        <CommentThreadBodyEditor
+          commentThread={commentThread}
+          onChange={updateTitleFromBody}
+        />
+      </StyledUpperPartContainer>
+
      {showComment && (
        <CommentThreadComments
          commentThread={{
--- a/front/src/modules/comments/components/right-drawer/CommentThreadActionBar.tsx
+++ b/front/src/modules/comments/components/right-drawer/CommentThreadActionBar.tsx
@ -6,6 +6,7 @@ import { useRecoilState } from 'recoil';
 import { GET_COMMENT_THREADS_BY_TARGETS } from '@/comments/services';
 import { GET_COMPANIES } from '@/companies/services';
 import { GET_PEOPLE } from '@/people/services';
+import { Button } from '@/ui/components/buttons/Button';
 import { IconTrash } from '@/ui/icons';
 import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState';
 import { useDeleteCommentThreadMutation } from '~/generated/graphql';
@ -38,10 +39,12 @@ export function CommentThreadActionBar({ commentThreadId }: OwnProps) {

  return (
    <StyledContainer>
-      <IconTrash
-        size={theme.icon.size.sm}
-        stroke={theme.icon.stroke.md}
+      <Button
+        icon={
+          <IconTrash size={theme.icon.size.sm} stroke={theme.icon.stroke.md} />
+        }
        onClick={deleteCommentThread}
+        variant="tertiary"
      />
    </StyledContainer>
  );
--- a/front/src/modules/comments/components/right-drawer/RightDrawerTimeline.tsx
+++ b/front/src/modules/comments/components/right-drawer/RightDrawerTimeline.tsx
@ -19,7 +19,7 @@ export function RightDrawerTimeline() {

  return (
    <RightDrawerPage>
-      <RightDrawerTopBar title="Timeline" />
+      <RightDrawerTopBar />
      <RightDrawerBody>
        {commentableEntityArray.map((commentableEntity) => (
          <Timeline
--- a/front/src/modules/comments/components/timeline/Timeline.tsx
+++ b/front/src/modules/comments/components/timeline/Timeline.tsx
@ -86,7 +86,7 @@ const StyledItemTitleContainer = styled.div`
  display: flex;
  flex: 1 0 0;
  flex-wrap: wrap;
-  gap: 4px 8px;
+  gap: 4px;
  height: 20px;
  span {
    color: ${({ theme }) => theme.font.color.secondary};
@ -131,7 +131,7 @@ const StyledCard = styled.div`
  align-self: stretch;
  background: ${({ theme }) => theme.background.secondary};
  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
  display: flex;
  flex-direction: column;
  gap: 12px;
--- a/front/src/modules/people/components/PersonChip.tsx
+++ b/front/src/modules/people/components/PersonChip.tsx
@ -26,7 +26,7 @@ const baseStyle = ({ theme }: { theme: Theme }) => `
    filter: brightness(95%);
  }
  img {
-    border-radius: 100%;
+    border-radius: ${theme.border.radius.rounded};
    height: 14px;
    object-fit: cover;
    width: 14px;
--- a/front/src/modules/pipeline-progress/components/CompanyBoardCard.tsx
+++ b/front/src/modules/pipeline-progress/components/CompanyBoardCard.tsx
@ -14,7 +14,7 @@ const StyledBoardCard = styled.div<{ selected: boolean }>`
  background-color: ${({ theme, selected }) =>
    selected ? theme.selectedCard : theme.background.secondary};
  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
  box-shadow: ${({ theme }) => theme.boxShadow.light};
  color: ${({ theme }) => theme.font.color.primary};
  &:hover {
--- a/front/src/modules/ui/components/action-bar/ActionBar.tsx
+++ b/front/src/modules/ui/components/action-bar/ActionBar.tsx
@ -18,7 +18,7 @@ const StyledContainer = styled.div<StyledContainerProps>`
  align-items: center;
  background: ${({ theme }) => theme.background.secondary};
  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: 8px;
+  border-radius: ${({ theme }) => theme.border.radius.md};
  bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
  box-shadow: ${({ theme }) => theme.boxShadow.strong};
  display: flex;
--- a/front/src/modules/ui/components/buttons/Button.tsx
+++ b/front/src/modules/ui/components/buttons/Button.tsx
@ -45,11 +45,11 @@ const StyledButton = styled.button<
        return 'transparent';
    }
  }};
-  border: ${({ theme, variant }) => {
+  border-color: ${({ theme, variant }) => {
    switch (variant) {
      case 'primary':
      case 'secondary':
-        return `1px solid ${theme.background.transparent.medium}`;
+        return `${theme.background.transparent.medium}`;
      case 'tertiary':
      default:
        return 'none';
@ -67,6 +67,17 @@ const StyledButton = styled.button<
        return '4px';
    }
  }};
+  border-style: solid;
+  border-width: ${({ theme, variant, position }) => {
+    switch (variant) {
+      case 'primary':
+      case 'secondary':
+        return position === 'middle' ? `1px 0 1px 0` : `1px`;
+      case 'tertiary':
+      default:
+        return '0';
+    }
+  }};
  box-shadow: ${({ theme, variant }) => {
    switch (variant) {
      case 'primary':
--- a/front/src/modules/ui/components/buttons/ButtonGroup.tsx
+++ b/front/src/modules/ui/components/buttons/ButtonGroup.tsx
@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { ButtonPosition, ButtonProps } from './Button';

 const StyledButtonGroupContainer = styled.div`
-  border-radius: 8px;
+  border-radius: ${({ theme }) => theme.border.radius.md};
  display: flex;
 `;

--- a/front/src/modules/ui/components/buttons/DropdownButton.tsx
+++ b/front/src/modules/ui/components/buttons/DropdownButton.tsx
@ -19,7 +19,7 @@ const StyledButton = styled.button<ButtonProps>`
  align-items: center;
  background: ${({ theme }) => theme.background.tertiary};
  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
  color: ${({ theme }) => theme.font.color.secondary};
  display: flex;
  font-size: ${({ theme }) => theme.font.size.md};
--- a/front/src/modules/ui/components/buttons/MainButton.tsx
+++ b/front/src/modules/ui/components/buttons/MainButton.tsx
@ -32,7 +32,7 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
    }
  }};
  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: 8px;
+  border-radius: ${({ theme }) => theme.border.radius.md};
  box-shadow: ${({ theme }) => theme.boxShadow.light};
  color: ${({ theme, variant, disabled }) => {
    if (disabled) {
--- a/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx
+++ b/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx
@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 export const HoverableMenuItem = styled.div`
  align-items: center;
  background: ${({ theme }) => theme.background.primary};
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
--- a/front/src/modules/ui/components/editable-cell/types/EditableCellRelationCreateButton.tsx
+++ b/front/src/modules/ui/components/editable-cell/types/EditableCellRelationCreateButton.tsx
@ -4,7 +4,7 @@ export const EditableCellRelationCreateButton = styled.button`
  align-items: center;
  background: none;
  border: none;
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
  cursor: pointer;
  display: flex;
  font-family: 'Inter';
--- a/front/src/modules/ui/components/editor/BlockEditor.tsx
+++ b/front/src/modules/ui/components/editor/BlockEditor.tsx
@ -9,11 +9,11 @@ interface BlockEditorProps {
 const StyledEditor = styled.div`
  min-height: 200px;
  width: 100%;
-  & .editor-create-mode,
-  .editor-edit-mode {
+  & .editor {
    background: ${({ theme }) => theme.background.primary};
+    font-size: 13px;
  }
-  & .editor-create-mode [class^='_inlineContent']:before {
+  & .editor [class^='_inlineContent']:before {
    color: ${({ theme }) => theme.font.color.tertiary};
    font-style: normal !important;
  }
--- a/front/src/modules/ui/components/form/Checkbox.tsx
+++ b/front/src/modules/ui/components/form/Checkbox.tsx
@ -25,7 +25,7 @@ const StyledContainer = styled.div`

  input[type='checkbox']::before {
    border: 1px solid ${({ theme }) => theme.font.color.tertiary};
-    border-radius: 2px;
+    border-radius: ${({ theme }) => theme.border.radius.xs};
    content: '';
    display: block;
    height: 12px;
--- a/front/src/modules/ui/components/form/DatePicker.tsx
+++ b/front/src/modules/ui/components/form/DatePicker.tsx
@ -56,7 +56,7 @@ const StyledContainer = styled.div`
  & .react-datepicker__month-dropdown-container,
  & .react-datepicker__year-dropdown-container {
    text-align: left;
-    border-radius: 4px;
+    border-radius: ${({ theme }) => theme.border.radius.sm};
    margin-left: ${({ theme }) => theme.spacing(1)};
    margin-right: 0;
    padding: ${({ theme }) => theme.spacing(2)};
@ -121,7 +121,7 @@ const StyledContainer = styled.div`
    padding: ${({ theme }) => theme.spacing(2)}
      calc(${({ theme }) => theme.spacing(2)} - 2px);
    width: calc(100% - ${({ theme }) => theme.spacing(4)});
-    border-radius: 2px;
+    border-radius: ${({ theme }) => theme.border.radius.xs};
    color: ${({ theme }) => theme.font.color.secondary};
    cursor: pointer;
    margin: 2px;
@ -169,7 +169,7 @@ const StyledContainer = styled.div`
  & .react-datepicker__navigation--previous,
  & .react-datepicker__navigation--next {
    height: 34px;
-    border-radius: 4px;
+    border-radius: ${({ theme }) => theme.border.radius.sm};
    padding-top: 6px;
    &:hover {
      background: ${({ theme }) => theme.background.transparent.light};
--- a/front/src/modules/ui/components/inputs/TextInput.tsx
+++ b/front/src/modules/ui/components/inputs/TextInput.tsx
@ -26,7 +26,7 @@ const StyledLabel = styled.span`
 const StyledInput = styled.input<{ fullWidth: boolean }>`
  background-color: ${({ theme }) => theme.background.tertiary};
  border: none;
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};

  color: ${({ theme }) => theme.font.color.primary};
  font-family: ${({ theme }) => theme.font.family};
--- a/front/src/modules/ui/components/modal/Modal.tsx
+++ b/front/src/modules/ui/components/modal/Modal.tsx
@ -4,7 +4,7 @@ import { motion } from 'framer-motion';

 const ModalDiv = styled(motion.div)`
  background: ${({ theme }) => theme.background.primary};
-  border-radius: 8px;
+  border-radius: ${({ theme }) => theme.border.radius.md};
  z-index: 10000; // should be higher than Backdrop's z-index
 `;

--- a/front/src/modules/ui/components/property-box/PropertyBox.tsx
+++ b/front/src/modules/ui/components/property-box/PropertyBox.tsx
@ -4,7 +4,7 @@ const StyledPropertyBoxContainer = styled.div`
  align-self: stretch;
  background: ${({ theme }) => theme.background.secondary};
  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing(2)};
--- a/front/src/modules/ui/components/property-box/PropertyBoxItem.tsx
+++ b/front/src/modules/ui/components/property-box/PropertyBoxItem.tsx
@ -2,8 +2,10 @@ import { ReactNode } from 'react';
 import styled from '@emotion/styled';

 const StyledPropertyBoxItem = styled.div`
+  align-items: center;
  display: flex;
  gap: ${({ theme }) => theme.spacing(2)};
+  height: 32px;
 `;

 const StyledIconContainer = styled.div`
--- a/front/src/modules/ui/components/table/EntityTable.tsx
+++ b/front/src/modules/ui/components/table/EntityTable.tsx
@ -35,7 +35,7 @@ type OwnProps<TData extends { id: string }, SortField> = {
 const StyledTable = styled.table`
  border-collapse: collapse;

-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
  border-spacing: 0;
  margin-left: ${({ theme }) => theme.table.horizontalCellMargin};
  margin-right: ${({ theme }) => theme.table.horizontalCellMargin};
--- a/front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx
+++ b/front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx
@ -13,7 +13,7 @@ type StyledButtonProps = {
 };

 const StyledButton = styled.div<StyledButtonProps>`
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
  color: ${(props) =>
    props.type === 'warning'
      ? props.theme.color.red
--- a/front/src/modules/ui/components/table/table-header/DropdownButton.tsx
+++ b/front/src/modules/ui/components/table/table-header/DropdownButton.tsx
@ -32,7 +32,7 @@ type StyledDropdownButtonProps = {

 const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
  background: ${({ theme }) => theme.background.primary};
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
  color: ${(props) => (props.isActive ? props.theme.color.blue : 'none')};
  cursor: pointer;
  display: flex;
@ -52,7 +52,7 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
 const StyledDropdown = styled.ul`
  --outer-border-radius: calc(var(--wraper-border-radius) - 2px);
  --wraper-border: 1px;
-  --wraper-border-radius: 8px;
+  --wraper-border-radius: ${({ theme }) => theme.border.radius.md};

  border: var(--wraper-border) solid ${({ theme }) => theme.border.color.light};
  border-radius: var(--wraper-border-radius);
@ -79,7 +79,7 @@ const StyledDropdown = styled.ul`

 const StyledDropdownItem = styled.li`
  align-items: center;
-  border-radius: 2px;
+  border-radius: ${({ theme }) => theme.border.radius.xs};
  color: ${({ theme }) => theme.font.color.secondary};
  cursor: pointer;
  display: flex;
@ -139,7 +139,7 @@ const StyledSearchField = styled.li`

  user-select: none;
  input {
-    border-radius: 8px;
+    border-radius: ${({ theme }) => theme.border.radius.md};
    box-sizing: border-box;
    font-family: ${({ theme }) => theme.font.family};
    height: 36px;
--- a/front/src/modules/ui/inplace-inputs/components/InplaceInputDateEditMode.tsx
+++ b/front/src/modules/ui/inplace-inputs/components/InplaceInputDateEditMode.tsx
@ -17,7 +17,7 @@ export type StyledCalendarContainerProps = {
 const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
  background: ${({ theme }) => theme.background.secondary};
  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: 8px;
+  border-radius: ${({ theme }) => theme.border.radius.md};
  box-shadow: ${({ theme }) => theme.boxShadow.strong};
  left: -10px;
  position: absolute;
--- a/front/src/modules/ui/layout/Panel.tsx
+++ b/front/src/modules/ui/layout/Panel.tsx
@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 const StyledPanel = styled.div`
  background: ${({ theme }) => theme.background.primary};
  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: 8px;
+  border-radius: ${({ theme }) => theme.border.radius.md};
  display: flex;
  flex-direction: row;
  height: 100%;
--- a/front/src/modules/ui/layout/navbar/NavItem.tsx
+++ b/front/src/modules/ui/layout/navbar/NavItem.tsx
@ -25,7 +25,7 @@ const StyledItem = styled.button<StyledItemProps>`
  background: ${(props) =>
    props.active ? props.theme.background.transparent.light : 'inherit'};
  border: none;
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
  color: ${(props) => {
    if (props.active) {
      return props.theme.font.color.primary;
--- a/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx
+++ b/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx
@ -33,7 +33,7 @@ type StyledLogoProps = {
 const StyledLogo = styled.div<StyledLogoProps>`
  background: url(${(props) => props.logo});
  background-size: cover;
-  border-radius: 2px;
+  border-radius: ${({ theme }) => theme.border.radius.xs};
  height: 16px;
  width: 16px;
 `;
--- a/front/src/modules/ui/layout/right-drawer/components/RightDrawerBody.tsx
+++ b/front/src/modules/ui/layout/right-drawer/components/RightDrawerBody.tsx
@ -3,7 +3,9 @@ import styled from '@emotion/styled';
 export const RightDrawerBody = styled.div`
  display: flex;
  flex-direction: column;
-  height: calc(100vh - ${({ theme }) => theme.spacing(10)});
+  height: calc(
+    100vh - ${({ theme }) => theme.spacing(14)} - 1px
+  ); // (-1 for border)
  overflow: auto;
  position: relative;
 `;
--- a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx
+++ b/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx
@ -6,13 +6,14 @@ import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';

 const StyledRightDrawerTopBar = styled.div`
  align-items: center;
+  background: ${({ theme }) => theme.background.secondary};
  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
  color: ${({ theme }) => theme.font.color.secondary};
  display: flex;
  flex-direction: row;
  font-size: ${({ theme }) => theme.font.size.md};
+  height: 56px;
  justify-content: space-between;
-  min-height: 40px;
  padding-left: 8px;
  padding-right: 8px;
 `;
@ -24,7 +25,7 @@ const StyledTopBarTitle = styled.div`
 `;

 type OwnProps = {
-  title: string | null | undefined;
+  title?: string | null | undefined;
  onSave?: () => void;
 };

@ -36,7 +37,7 @@ export function RightDrawerTopBar({ title, onSave }: OwnProps) {
    <StyledRightDrawerTopBar>
      <RightDrawerTopBarCloseButton />
      <StyledTopBarTitle>{title}</StyledTopBarTitle>
-      {onSave && <Button title="Save" onClick={handleOnClick} />}
+      {onSave ? <Button title="Save" onClick={handleOnClick} /> : <div></div>}
    </StyledRightDrawerTopBar>
  );
 }
--- a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx
+++ b/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx
@ -9,7 +9,7 @@ const StyledButton = styled.button`
  align-items: center;
  background: none;
  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
  cursor: pointer;
  display: flex;
  flex-direction: row;
--- a/front/src/modules/ui/layout/show-page/ShowPageSummaryCard.tsx
+++ b/front/src/modules/ui/layout/show-page/ShowPageSummaryCard.tsx
@ -20,7 +20,7 @@ const StyledShowPageSummaryCard = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(3)};
+  gap: ${({ theme }) => theme.spacing(6)};
  justify-content: center;
  padding: ${({ theme }) => theme.spacing(6)} ${({ theme }) => theme.spacing(3)}
    ${({ theme }) => theme.spacing(3)} ${({ theme }) => theme.spacing(3)};
@ -30,6 +30,7 @@ const StyledInfoContainer = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
 `;

 const StyledDate = styled.div`
--- a/front/src/modules/ui/layout/show-page/containers/ShowPageLeftContainer.tsx
+++ b/front/src/modules/ui/layout/show-page/containers/ShowPageLeftContainer.tsx
@ -2,8 +2,12 @@ import styled from '@emotion/styled';

 export const ShowPageLeftContainer = styled.div`
  background: ${({ theme }) => theme.background.secondary};
-  border-radius: 8px;
+  border-bottom-left-radius: 8px;
  border-right: 1px solid ${({ theme }) => theme.border.color.light};
+  border-top-left-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
  padding: 0px ${({ theme }) => theme.spacing(3)};
  width: 320px;
 `;
--- a/front/src/modules/ui/layout/top-bar/TopBar.tsx
+++ b/front/src/modules/ui/layout/top-bar/TopBar.tsx
@ -31,7 +31,7 @@ const TitleContainer = styled.div`
 const AddButtonContainer = styled.div`
  align-items: center;
  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
  color: ${({ theme }) => theme.font.color.tertiary};
  cursor: pointer;
  display: flex;