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