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>

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)};

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) ?? '');
     },

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) => (
+          <StyledThreadItemListContainer>
-            <CommentThreadItem key={comment.id} comment={comment} />
+            <StyledThreadCommentTitle>Comments</StyledThreadCommentTitle>
-          ))}
+            {commentThread?.comments?.map((comment, index) => (
-        </StyledThreadItemListContainer>
+              <CommentThreadItem key={comment.id} comment={comment} />
+            ))}
+          </StyledThreadItemListContainer>
+        </>
       )}
 
       <StyledCommentActionBar>

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 /> },
   ];
 

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>
+      <StyledUpperPartContainer>
-        <StyledTopActionsContainer>
+        <StyledTopContainer>
-          <CommentThreadTypeDropdown />
+          <StyledTopActionsContainer>
-          <CommentThreadActionBar commentThreadId={commentThread?.id ?? ''} />
+            <CommentThreadTypeDropdown />
-        </StyledTopActionsContainer>
+            <CommentThreadActionBar commentThreadId={commentThread?.id ?? ''} />
-        <StyledEditableTitleInput
+          </StyledTopActionsContainer>
-          placeholder="Note title (optional)"
+          <StyledEditableTitleInput
-          onChange={(event) => {
+            placeholder="Note title (optional)"
-            setTitle(event.target.value);
+            onChange={(event) => {
-            debounceUpdateTitle(event.target.value);
+              setTitle(event.target.value);
-          }}
+              debounceUpdateTitle(event.target.value);
-          value={title ?? ''}
+            }}
-        />
+            value={title ?? ''}
-        <PropertyBox>
-          <PropertyBoxItem
-            icon={<IconArrowUpRight />}
-            value={
-              <CommentThreadRelationPicker
-                commentThread={{
-                  id: commentThread.id,
-                  commentThreadTargets:
-                    commentThread.commentThreadTargets ?? [],
-                }}
-              />
-            }
-            label="Relations"
           />
-        </PropertyBox>
+          <PropertyBox>
-      </StyledTopContainer>
+            <PropertyBoxItem
-      <CommentThreadBodyEditor
+              icon={<IconArrowUpRight />}
-        commentThread={commentThread}
+              value={
-        onChange={updateTitleFromBody}
+                <CommentThreadRelationPicker
-      />
+                  commentThread={{
+                    id: commentThread.id,
+                    commentThreadTargets:
+                      commentThread.commentThreadTargets ?? [],
+                  }}
+                />
+              }
+              label="Relations"
+            />
+          </PropertyBox>
+        </StyledTopContainer>
+        <CommentThreadBodyEditor
+          commentThread={commentThread}
+          onChange={updateTitleFromBody}
+        />
+      </StyledUpperPartContainer>
+
       {showComment && (
         <CommentThreadComments
           commentThread={{

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
+      <Button
-        size={theme.icon.size.sm}
+        icon={
-        stroke={theme.icon.stroke.md}
+          <IconTrash size={theme.icon.size.sm} stroke={theme.icon.stroke.md} />
+        }
         onClick={deleteCommentThread}
+        variant="tertiary"
       />
     </StyledContainer>
   );

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

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;

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;

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 {

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;

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':

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;
 `;
 

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};

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) {

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;

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';

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 {
-  .editor-edit-mode {
     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;
   }

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;

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};

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};

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
 `;
 

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)};

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`

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};

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

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;

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;

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%;

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;

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;
 `;

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;
 `;

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>
   );
 }

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;

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`

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;
 `;

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;