Icon refactoring (#287)

* Refactor icons

* Fix additional icons

front/src/modules/ui/components/table/action-bar/TableActionBarButtonOpenComments.tsx

@@ -1,4 +1,4 @@
-import { FaRegComment } from 'react-icons/fa';
+import { IconComment } from '@/ui/icons/index';
 
 import { EntityTableActionBarButton } from './EntityTableActionBarButton';
 
@@ -10,7 +10,7 @@ export function TableActionBarButtonToggleComments({ onClick }: OwnProps) {
   return (
     <EntityTableActionBarButton
       label="Comment"
-      icon={<FaRegComment size={16} />}
+      icon={<IconComment size={16} />}
       onClick={onClick}
     />
   );

front/src/modules/ui/components/table/table-header/DropdownButton.tsx

@@ -1,7 +1,8 @@
 import { ReactNode, useRef } from 'react';
-import { FaAngleDown } from 'react-icons/fa';
 import styled from '@emotion/styled';
 
+import { IconChevronDown } from '@/ui/icons/index';
+
 import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter';
 import {
   overlayBackground,
@@ -196,7 +197,7 @@ const StyleAngleDownContainer = styled.div`
 function DropdownTopOptionAngleDown() {
   return (
     <StyleAngleDownContainer>
-      <FaAngleDown />
+      <IconChevronDown />
     </StyleAngleDownContainer>
   );
 }

front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx

@@ -1,4 +1,3 @@
-import { FaArrowDown, FaArrowUp } from 'react-icons/fa';
 import styled from '@emotion/styled';
 
 import {
@@ -6,6 +5,7 @@ import {
   SelectedFilterType,
 } from '@/filters-and-sorts/interfaces/filters/interface';
 import { SelectedSortType } from '@/filters-and-sorts/interfaces/sorts/interface';
+import { IconArrowNarrowDown, IconArrowNarrowUp } from '@/ui/icons/index';
 
 import SortOrFilterChip from './SortOrFilterChip';
 
@@ -74,7 +74,13 @@ function SortAndFilterBar<SortField, TData extends FilterableFieldsType>({
               key={sort.key}
               labelValue={sort.label}
               id={sort.key}
-              icon={sort.order === 'desc' ? <FaArrowDown /> : <FaArrowUp />}
+              icon={
+                sort.order === 'desc' ? (
+                  <IconArrowNarrowDown />
+                ) : (
+                  <IconArrowNarrowUp />
+                )
+              }
               onRemove={() => onRemoveSort(sort.key)}
             />
           );

front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
-import { TbX } from 'react-icons/tb';
 import styled from '@emotion/styled';
 
+import { IconX } from '@/ui/icons/index';
+
 type OwnProps = {
   id: string;
   labelKey?: string;
@@ -55,7 +56,7 @@ function SortOrFilterChip({
       {labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>}
       {labelValue}
       <StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}>
-        <TbX />
+        <IconX />
       </StyledDelete>
     </StyledChip>
   );

front/src/modules/ui/components/table/table-header/__stories__/TableHeader.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { FaList } from 'react-icons/fa';
 import { ApolloProvider } from '@apollo/client';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
+import { IconList } from '@/ui/icons/index';
 import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
 import { mockedClient } from '~/testing/mockedClient';
 
@@ -25,7 +25,7 @@ export const Empty: Story = {
       <FullHeightStorybookLayout>
         <TableHeader
           viewName="ViewName"
-          viewIcon={<FaList />}
+          viewIcon={<IconList />}
           availableSorts={availableSorts}
           availableFilters={availableFilters}
         />
@@ -40,7 +40,7 @@ export const WithSortsAndFilters: Story = {
       <FullHeightStorybookLayout>
         <TableHeader
           viewName="ViewName"
-          viewIcon={<FaList />}
+          viewIcon={<IconList />}
           availableSorts={availableSorts}
           availableFilters={availableFilters}
         />