Feat/add right drawer (#159)

* Added right drawer component and logic

* Refactored layout to accept right drawer

front/src/pages/companies/Companies.tsx

@@ -28,6 +28,7 @@ import { availableFilters } from './companies-filters';
 import { TbBuilding } from 'react-icons/tb';
 import { EntityTableActionBar } from '../../components/table/action-bar/EntityTableActionBar';
 import { TableActionBarButtonDeleteCompanies } from './table/TableActionBarButtonDeleteCompanies';
+import { TableActionBarButtonToggleComments } from '../../components/table/action-bar/TableActionBarButtonOpenComments';
 
 const StyledCompaniesContainer = styled.div`
   display: flex;
@@ -91,6 +92,7 @@ function Companies() {
           />
         </StyledCompaniesContainer>
         <EntityTableActionBar>
+          <TableActionBarButtonToggleComments />
           <TableActionBarButtonDeleteCompanies />
         </EntityTableActionBar>
       </>

front/src/pages/companies/table/TableActionBarButtonDeleteCompanies.tsx

@@ -4,9 +4,11 @@ import { useDeleteCompaniesMutation } from '../../../generated/graphql';
 import { selectedRowIdsState } from '../../../modules/ui/tables/states/selectedRowIdsState';
 import { useRecoilValue } from 'recoil';
 import { useResetTableRowSelection } from '../../../modules/ui/tables/hooks/useResetTableRowSelection';
+import { useTheme } from '@emotion/react';
 
 export function TableActionBarButtonDeleteCompanies() {
   const selectedRowIds = useRecoilValue(selectedRowIdsState);
+  const theme = useTheme();
 
   const resetRowSelection = useResetTableRowSelection();
 
@@ -28,6 +30,7 @@ export function TableActionBarButtonDeleteCompanies() {
     <EntityTableActionBarButton
       label="Delete"
       icon={<TbTrash size={16} />}
+      type="warning"
       onClick={handleDeleteClick}
     />
   );

front/src/pages/people/People.tsx

@@ -28,6 +28,7 @@ import { availableFilters } from './people-filters';
 import { TbUser } from 'react-icons/tb';
 import { EntityTableActionBar } from '../../components/table/action-bar/EntityTableActionBar';
 import { TableActionBarButtonDeletePeople } from './table/TableActionBarButtonDeletePeople';
+import { TableActionBarButtonToggleComments } from '../../components/table/action-bar/TableActionBarButtonOpenComments';
 
 const StyledPeopleContainer = styled.div`
   display: flex;
@@ -93,6 +94,7 @@ function People() {
           />
         </StyledPeopleContainer>
         <EntityTableActionBar>
+          <TableActionBarButtonToggleComments />
           <TableActionBarButtonDeletePeople />
         </EntityTableActionBar>
       </>

front/src/pages/people/table/TableActionBarButtonDeletePeople.tsx

@@ -28,6 +28,7 @@ export function TableActionBarButtonDeletePeople() {
     <EntityTableActionBarButton
       label="Delete"
       icon={<TbTrash size={16} />}
+      type="warning"
       onClick={handleDeleteClick}
     />
   );