Icon refactoring (#287)

* Refactor icons

* Fix additional icons

front/src/modules/ui/components/board/BoardNewButton.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
-import { IconPlus } from '@tabler/icons-react';
+
+import { IconPlus } from '@/ui/icons/index';
 
 const StyledButton = styled.button`
   display: flex;

front/src/modules/ui/components/editable-cell/types/EditableRelation.tsx

@@ -1,11 +1,11 @@
 import { ChangeEvent, ComponentType, useEffect, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { FaPlus } from 'react-icons/fa';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { SearchConfigType } from '@/search/interfaces/interface';
 import { useSearch } from '@/search/services/search';
+import { IconPlus } from '@/ui/icons/index';
 import { textInputStyle } from '@/ui/layout/styles/themes';
 import { isSomeInputInEditModeState } from '@/ui/tables/states/isSomeInputInEditModeState';
 import { AnyEntity } from '@/utils/interfaces/generic.interface';
@@ -252,7 +252,7 @@ export function EditableRelation<
                     onClick={handleCreateNewRelationButtonClick}
                   >
                     <StyledCreateButtonIcon>
-                      <FaPlus />
+                      <IconPlus />
                     </StyledCreateButtonIcon>
                     <StyledCreateButtonText>Create new</StyledCreateButtonText>
                   </EditableRelationCreateButton>

front/src/modules/ui/components/inputs/AutosizeTextInput.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { HotkeysEvent } from 'react-hotkeys-hook/dist/types';
-import { HiArrowSmRight } from 'react-icons/hi';
 import TextareaAutosize from 'react-textarea-autosize';
 import styled from '@emotion/styled';
 
 import { IconButton } from '@/ui/components/buttons/IconButton';
+import { IconArrowRight } from '@/ui/icons/index';
 
 const MAX_ROWS = 5;
 
@@ -132,7 +132,7 @@ export function AutosizeTextInput({
         <StyledBottomRightIconButton>
           <IconButton
             onClick={handleOnClickSendButton}
-            icon={<HiArrowSmRight size={15} />}
+            icon={<IconArrowRight size={15} />}
             disabled={isSendButtonDisabled}
           />
         </StyledBottomRightIconButton>

front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { IconCheck } from '@tabler/icons-react';
 
+import { IconCheck } from '@/ui/icons/index';
 import { hoverBackground } from '@/ui/layout/styles/themes';
 
 import { DropdownMenuButton } from './DropdownMenuButton';

front/src/modules/ui/components/menu/stories/DropdownMenu.stories.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
-import { IconPlus } from '@tabler/icons-react';
 
+import { IconPlus } from '@/ui/icons/index';
 import { Avatar } from '@/users/components/Avatar';
 import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 

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