Icon refactoring (#287)

* Refactor icons

* Fix additional icons

front/src/pages/companies/Companies.tsx

@@ -1,6 +1,4 @@
 import { useCallback, useState } from 'react';
-import { FaList } from 'react-icons/fa';
-import { TbBuilding } from 'react-icons/tb';
 import styled from '@emotion/styled';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -21,6 +19,8 @@ import {
 import { SelectedFilterType } from '@/filters-and-sorts/interfaces/filters/interface';
 import { EntityTableActionBar } from '@/ui/components/table/action-bar/EntityTableActionBar';
 import { EntityTable } from '@/ui/components/table/EntityTable';
+import { IconBuilding } from '@/ui/icons/index';
+import { IconList } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
 import { BoolExpType } from '@/utils/interfaces/generic.interface';
 import { AppPage } from '~/AppPage';
@@ -78,7 +78,7 @@ export function Companies() {
     <AppPage>
       <WithTopBarContainer
         title="Companies"
-        icon={<TbBuilding size={16} />}
+        icon={<IconBuilding size={16} />}
         onAddButtonClick={handleAddButtonClick}
       >
         <>
@@ -87,7 +87,7 @@ export function Companies() {
               data={companies}
               columns={companiesColumns}
               viewName="All Companies"
-              viewIcon={<FaList />}
+              viewIcon={<IconList />}
               availableSorts={availableSorts}
               availableFilters={availableFilters}
               onSortsUpdate={updateSorts}

front/src/pages/companies/companies-columns.tsx

@@ -1,12 +1,4 @@
 import { useMemo } from 'react';
-import {
-  TbBuilding,
-  TbCalendar,
-  TbLink,
-  TbMapPin,
-  TbSum,
-  TbUser,
-} from 'react-icons/tb';
 import { createColumnHelper } from '@tanstack/react-table';
 
 import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell';
@@ -22,6 +14,14 @@ import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
 import { EditableRelation } from '@/ui/components/editable-cell/types/EditableRelation';
 import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
+import {
+  IconBuilding,
+  IconCalendar,
+  IconLink,
+  IconMapPin,
+  IconSum,
+  IconUser,
+} from '@/ui/icons/index';
 import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn';
 import { mapToUser, User } from '@/users/interfaces/user.interface';
 import { QueryMode } from '~/generated/graphql';
@@ -34,7 +34,7 @@ export const useCompaniesColumns = () => {
       getCheckBoxColumn(),
       columnHelper.accessor('name', {
         header: () => (
-          <ColumnHead viewName="Name" viewIcon={<TbBuilding size={16} />} />
+          <ColumnHead viewName="Name" viewIcon={<IconBuilding size={16} />} />
         ),
         cell: (props) => (
           <CompanyEditableNameChipCell company={props.row.original} />
@@ -43,7 +43,7 @@ export const useCompaniesColumns = () => {
       }),
       columnHelper.accessor('domainName', {
         header: () => (
-          <ColumnHead viewName="URL" viewIcon={<TbLink size={16} />} />
+          <ColumnHead viewName="URL" viewIcon={<IconLink size={16} />} />
         ),
         cell: (props) => (
           <EditableText
@@ -60,7 +60,7 @@ export const useCompaniesColumns = () => {
       }),
       columnHelper.accessor('employees', {
         header: () => (
-          <ColumnHead viewName="Employees" viewIcon={<TbSum size={16} />} />
+          <ColumnHead viewName="Employees" viewIcon={<IconSum size={16} />} />
         ),
         cell: (props) => (
           <EditableText
@@ -83,7 +83,7 @@ export const useCompaniesColumns = () => {
       }),
       columnHelper.accessor('address', {
         header: () => (
-          <ColumnHead viewName="Address" viewIcon={<TbMapPin size={16} />} />
+          <ColumnHead viewName="Address" viewIcon={<IconMapPin size={16} />} />
         ),
         cell: (props) => (
           <EditableText
@@ -100,7 +100,10 @@ export const useCompaniesColumns = () => {
       }),
       columnHelper.accessor('createdAt', {
         header: () => (
-          <ColumnHead viewName="Creation" viewIcon={<TbCalendar size={16} />} />
+          <ColumnHead
+            viewName="Creation"
+            viewIcon={<IconCalendar size={16} />}
+          />
         ),
         cell: (props) => (
           <EditableDate
@@ -118,7 +121,7 @@ export const useCompaniesColumns = () => {
         header: () => (
           <ColumnHead
             viewName="Account Owner"
-            viewIcon={<TbUser size={16} />}
+            viewIcon={<IconUser size={16} />}
           />
         ),
         cell: (props) => (

front/src/pages/companies/companies-filters.tsx

@@ -1,22 +1,21 @@
-import {
-  TbBuilding,
-  TbCalendar,
-  TbLink,
-  TbMapPin,
-  TbSum,
-  TbUser,
-} from 'react-icons/tb';
-
 import { Company } from '@/companies/interfaces/company.interface';
 import { FilterConfigType } from '@/filters-and-sorts/interfaces/filters/interface';
 import { SEARCH_USER_QUERY } from '@/search/services/search';
+import {
+  IconBuilding,
+  IconCalendar,
+  IconLink,
+  IconMapPin,
+  IconSum,
+  IconUser,
+} from '@/ui/icons/index';
 import { mapToUser, User } from '@/users/interfaces/user.interface';
 import { QueryMode } from '~/generated/graphql';
 
 export const nameFilter = {
   key: 'name',
   label: 'Name',
-  icon: <TbBuilding size={16} />,
+  icon: <IconBuilding size={16} />,
   type: 'text',
   operands: [
     {
@@ -46,7 +45,7 @@ export const nameFilter = {
 export const employeesFilter = {
   key: 'employees',
   label: 'Employees',
-  icon: <TbSum size={16} />,
+  icon: <IconSum size={16} />,
   type: 'text',
   operands: [
     {
@@ -73,7 +72,7 @@ export const employeesFilter = {
 export const urlFilter = {
   key: 'domainName',
   label: 'Url',
-  icon: <TbLink size={16} />,
+  icon: <IconLink size={16} />,
   type: 'text',
   operands: [
     {
@@ -106,7 +105,7 @@ export const urlFilter = {
 export const addressFilter = {
   key: 'address',
   label: 'Address',
-  icon: <TbMapPin size={16} />,
+  icon: <IconMapPin size={16} />,
   type: 'text',
   operands: [
     {
@@ -136,7 +135,7 @@ export const addressFilter = {
 export const ccreatedAtFilter = {
   key: 'createdAt',
   label: 'Created At',
-  icon: <TbCalendar size={16} />,
+  icon: <IconCalendar size={16} />,
   type: 'date',
   operands: [
     {
@@ -163,7 +162,7 @@ export const ccreatedAtFilter = {
 export const accountOwnerFilter = {
   key: 'accountOwner',
   label: 'Account Owner',
-  icon: <TbUser size={16} />,
+  icon: <IconUser size={16} />,
   type: 'relation',
   searchConfig: {
     query: SEARCH_USER_QUERY,

front/src/pages/companies/companies-sorts.tsx

@@ -1,43 +1,42 @@
-import {
-  TbBuilding,
-  TbCalendar,
-  TbLink,
-  TbMapPin,
-  TbSum,
-} from 'react-icons/tb';
-
 import { SortType } from '@/filters-and-sorts/interfaces/sorts/interface';
+import {
+  IconBuilding,
+  IconCalendar,
+  IconLink,
+  IconMapPin,
+  IconSum,
+} from '@/ui/icons/index';
 import { CompanyOrderByWithRelationInput as Companies_Order_By } from '~/generated/graphql';
 
 export const availableSorts = [
   {
     key: 'name',
     label: 'Name',
-    icon: <TbBuilding size={16} />,
+    icon: <IconBuilding size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'employees',
     label: 'Employees',
-    icon: <TbSum size={16} />,
+    icon: <IconSum size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'domainName',
     label: 'Url',
-    icon: <TbLink size={16} />,
+    icon: <IconLink size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'address',
     label: 'Address',
-    icon: <TbMapPin size={16} />,
+    icon: <IconMapPin size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'createdAt',
     label: 'Creation',
-    icon: <TbCalendar size={16} />,
+    icon: <IconCalendar size={16} />,
     _type: 'default_sort',
   },
 ] satisfies Array<SortType<Companies_Order_By>>;

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

@@ -1,7 +1,7 @@
-import { TbTrash } from 'react-icons/tb';
 import { useRecoilValue } from 'recoil';
 
 import { EntityTableActionBarButton } from '@/ui/components/table/action-bar/EntityTableActionBarButton';
+import { IconTrash } from '@/ui/icons/index';
 import { useResetTableRowSelection } from '@/ui/tables/hooks/useResetTableRowSelection';
 import { selectedRowIdsState } from '@/ui/tables/states/selectedRowIdsState';
 import { useDeleteCompaniesMutation } from '~/generated/graphql';
@@ -28,7 +28,7 @@ export function TableActionBarButtonDeleteCompanies() {
   return (
     <EntityTableActionBarButton
       label="Delete"
-      icon={<TbTrash size={16} />}
+      icon={<IconTrash size={16} />}
       type="warning"
       onClick={handleDeleteClick}
     />