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/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={{

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

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