Lucas/t 366 on comment drawer when i have comments on the selected (#201)

* Fixed right drawer width and shared in theme

* Added date packages and tooltip

* Added date utils and tests

* Added comment thread components

* Fixed comment chip

* Fix from rebase

* Fix from rebase

* Fix margin right

* Fixed CSS and graphql

front/src/modules/ui/layout/containers/WithTopBarContainer.tsx

@@ -30,10 +30,9 @@ const MainContainer = styled.div`
   background: ${(props) => props.theme.noisyBackground};
   padding-right: ${(props) => props.theme.spacing(3)};
   padding-bottom: ${(props) => props.theme.spacing(3)};
+  gap: ${(props) => props.theme.spacing(2)};
 `;
 
-const RIGHT_DRAWER_WIDTH = '300px';
-
 type LeftContainerProps = {
   isRightDrawerOpen?: boolean;
 };
@@ -41,7 +40,11 @@ type LeftContainerProps = {
 const LeftContainer = styled.div<LeftContainerProps>`
   display: flex;
   width: calc(
-    100% - ${(props) => (props.isRightDrawerOpen ? RIGHT_DRAWER_WIDTH : '0px')}
+    100% -
+      ${(props) =>
+        props.isRightDrawerOpen
+          ? `${props.theme.rightDrawerWidth} - ${props.theme.spacing(2)}`
+          : '0px'}
   );
   position: relative;
 `;

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

@@ -12,8 +12,7 @@ import { RightDrawerRouter } from './RightDrawerRouter';
 const StyledRightDrawer = styled.div`
   display: flex;
   flex-direction: row;
-  width: 300px;
-  margin-left: ${(props) => props.theme.spacing(2)};
+  width: ${(props) => props.theme.rightDrawerWidth};
 `;
 
 export function RightDrawer() {

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

@@ -3,6 +3,4 @@ import styled from '@emotion/styled';
 export const RightDrawerBody = styled.div`
   display: flex;
   flex-direction: column;
-
-  padding: 8px;
 `;

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

@@ -23,6 +23,8 @@ const commonTheme = {
   },
 
   borderRadius: '4px',
+
+  rightDrawerWidth: '300px',
 };
 
 const lightThemeSpecific = {
@@ -38,6 +40,7 @@ const lightThemeSpecific = {
   purpleBackground: '#e0e0ff',
   yellowBackground: '#fff2e7',
 
+  primaryBackgroundTransparent: 'rgba(255, 255, 255, 0.8)',
   secondaryBackgroundTransparent: 'rgba(252, 252, 252, 0.8)',
 
   primaryBorder: 'rgba(0, 0, 0, 0.08)',
@@ -77,6 +80,7 @@ const darkThemeSpecific: typeof lightThemeSpecific = {
   purpleBackground: '#1111b7',
   yellowBackground: '#cc660a',
 
+  primaryBackgroundTransparent: 'rgba(20, 20, 20, 0.8)',
   secondaryBackgroundTransparent: 'rgba(23, 23, 23, 0.8)',
 
   clickableElementBackgroundHover: 'rgba(0, 0, 0, 0.04)',