Icon refactoring (#287)

* Refactor icons

* Fix additional icons

front/src/pages/people/People.tsx

@@ -1,6 +1,4 @@
 import { useCallback, useState } from 'react';
-import { FaList } from 'react-icons/fa';
-import { TbUser } from 'react-icons/tb';
 import styled from '@emotion/styled';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -18,6 +16,7 @@ import {
 } from '@/people/services';
 import { EntityTableActionBar } from '@/ui/components/table/action-bar/EntityTableActionBar';
 import { EntityTable } from '@/ui/components/table/EntityTable';
+import { IconList, IconUser } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
 import { BoolExpType } from '@/utils/interfaces/generic.interface';
 import { AppPage } from '~/AppPage';
@@ -76,7 +75,7 @@ export function People() {
     <AppPage>
       <WithTopBarContainer
         title="People"
-        icon={<TbUser size={16} />}
+        icon={<IconUser size={16} />}
         onAddButtonClick={handleAddButtonClick}
       >
         <>
@@ -85,7 +84,7 @@ export function People() {
               data={people}
               columns={peopleColumns}
               viewName="All People"
-              viewIcon={<FaList />}
+              viewIcon={<IconList />}
               availableSorts={availableSorts}
               availableFilters={availableFilters}
               onSortsUpdate={updateSorts}

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

@@ -1,12 +1,4 @@
 import { useMemo } from 'react';
-import {
-  TbBuilding,
-  TbCalendar,
-  TbMail,
-  TbMapPin,
-  TbPhone,
-  TbUser,
-} from 'react-icons/tb';
 import { createColumnHelper } from '@tanstack/react-table';
 
 import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
@@ -17,6 +9,14 @@ import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
 import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone';
 import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
+import {
+  IconBuilding,
+  IconCalendar,
+  IconMail,
+  IconMapPin,
+  IconPhone,
+  IconUser,
+} from '@/ui/icons/index';
 import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn';
 
 const columnHelper = createColumnHelper<Person>();
@@ -27,7 +27,7 @@ export const usePeopleColumns = () => {
       getCheckBoxColumn(),
       columnHelper.accessor('firstname', {
         header: () => (
-          <ColumnHead viewName="People" viewIcon={<TbUser size={16} />} />
+          <ColumnHead viewName="People" viewIcon={<IconUser size={16} />} />
         ),
         cell: (props) => (
           <>
@@ -46,7 +46,7 @@ export const usePeopleColumns = () => {
       }),
       columnHelper.accessor('email', {
         header: () => (
-          <ColumnHead viewName="Email" viewIcon={<TbMail size={16} />} />
+          <ColumnHead viewName="Email" viewIcon={<IconMail size={16} />} />
         ),
         cell: (props) => (
           <EditableText
@@ -63,14 +63,17 @@ export const usePeopleColumns = () => {
       }),
       columnHelper.accessor('company', {
         header: () => (
-          <ColumnHead viewName="Company" viewIcon={<TbBuilding size={16} />} />
+          <ColumnHead
+            viewName="Company"
+            viewIcon={<IconBuilding size={16} />}
+          />
         ),
         cell: (props) => <PeopleCompanyCell people={props.row.original} />,
         size: 150,
       }),
       columnHelper.accessor('phone', {
         header: () => (
-          <ColumnHead viewName="Phone" viewIcon={<TbPhone size={16} />} />
+          <ColumnHead viewName="Phone" viewIcon={<IconPhone size={16} />} />
         ),
         cell: (props) => (
           <EditablePhone
@@ -87,7 +90,10 @@ export const usePeopleColumns = () => {
       }),
       columnHelper.accessor('createdAt', {
         header: () => (
-          <ColumnHead viewName="Creation" viewIcon={<TbCalendar size={16} />} />
+          <ColumnHead
+            viewName="Creation"
+            viewIcon={<IconCalendar size={16} />}
+          />
         ),
         cell: (props) => (
           <EditableDate
@@ -103,7 +109,7 @@ export const usePeopleColumns = () => {
       }),
       columnHelper.accessor('city', {
         header: () => (
-          <ColumnHead viewName="City" viewIcon={<TbMapPin size={16} />} />
+          <ColumnHead viewName="City" viewIcon={<IconMapPin size={16} />} />
         ),
         cell: (props) => (
           <EditableText

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

@@ -1,12 +1,3 @@
-import {
-  TbBuilding,
-  TbCalendar,
-  TbMail,
-  TbMapPin,
-  TbPhone,
-  TbUser,
-} from 'react-icons/tb';
-
 import {
   Company,
   mapToCompany,
@@ -14,12 +5,20 @@ import {
 import { FilterConfigType } from '@/filters-and-sorts/interfaces/filters/interface';
 import { Person } from '@/people/interfaces/person.interface';
 import { SEARCH_COMPANY_QUERY } from '@/search/services/search';
+import {
+  IconBuilding,
+  IconCalendar,
+  IconMail,
+  IconMapPin,
+  IconPhone,
+  IconUser,
+} from '@/ui/icons/index';
 import { QueryMode } from '~/generated/graphql';
 
 export const fullnameFilter = {
   key: 'fullname',
   label: 'People',
-  icon: <TbUser size={16} />,
+  icon: <IconUser size={16} />,
   type: 'text',
   operands: [
     {
@@ -72,7 +71,7 @@ export const fullnameFilter = {
 export const emailFilter = {
   key: 'email',
   label: 'Email',
-  icon: <TbMail size={16} />,
+  icon: <IconMail size={16} />,
   type: 'text',
   operands: [
     {
@@ -102,7 +101,7 @@ export const emailFilter = {
 export const companyFilter = {
   key: 'company_name',
   label: 'Company',
-  icon: <TbBuilding size={16} />,
+  icon: <IconBuilding size={16} />,
   type: 'relation',
   searchConfig: {
     query: SEARCH_COMPANY_QUERY,
@@ -136,7 +135,7 @@ export const companyFilter = {
 export const phoneFilter = {
   key: 'phone',
   label: 'Phone',
-  icon: <TbPhone size={16} />,
+  icon: <IconPhone size={16} />,
   type: 'text',
   operands: [
     {
@@ -166,7 +165,7 @@ export const phoneFilter = {
 export const createdAtFilter = {
   key: 'createdAt',
   label: 'Created At',
-  icon: <TbCalendar size={16} />,
+  icon: <IconCalendar size={16} />,
   type: 'date',
   operands: [
     {
@@ -193,7 +192,7 @@ export const createdAtFilter = {
 export const cityFilter = {
   key: 'city',
   label: 'City',
-  icon: <TbMapPin size={16} />,
+  icon: <IconMapPin size={16} />,
   type: 'text',
   operands: [
     {

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

@@ -1,13 +1,12 @@
-import {
-  TbBuilding,
-  TbCalendar,
-  TbMail,
-  TbMapPin,
-  TbPhone,
-  TbUser,
-} from 'react-icons/tb';
-
 import { SortType } from '@/filters-and-sorts/interfaces/sorts/interface';
+import {
+  IconBuilding,
+  IconCalendar,
+  IconMail,
+  IconMapPin,
+  IconPhone,
+  IconUser,
+} from '@/ui/icons/index';
 import {
   PersonOrderByWithRelationInput as People_Order_By,
   SortOrder as Order_By,
@@ -17,7 +16,7 @@ export const availableSorts = [
   {
     key: 'fullname',
     label: 'People',
-    icon: <TbUser size={16} />,
+    icon: <IconUser size={16} />,
     _type: 'custom_sort',
     orderByTemplates: [
       (order: Order_By) => ({
@@ -31,32 +30,32 @@ export const availableSorts = [
   {
     key: 'company_name',
     label: 'Company',
-    icon: <TbBuilding size={16} />,
+    icon: <IconBuilding size={16} />,
     _type: 'custom_sort',
     orderByTemplates: [(order: Order_By) => ({ company: { name: order } })],
   },
   {
     key: 'email',
     label: 'Email',
-    icon: <TbMail size={16} />,
+    icon: <IconMail size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'phone',
     label: 'Phone',
-    icon: <TbPhone size={16} />,
+    icon: <IconPhone size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'createdAt',
     label: 'Created at',
-    icon: <TbCalendar size={16} />,
+    icon: <IconCalendar size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'city',
     label: 'City',
-    icon: <TbMapPin size={16} />,
+    icon: <IconMapPin size={16} />,
     _type: 'default_sort',
   },
 ] satisfies Array<SortType<People_Order_By>>;

front/src/pages/people/table/TableActionBarButtonDeletePeople.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 { useDeletePeopleMutation } from '~/generated/graphql';
@@ -28,7 +28,7 @@ export function TableActionBarButtonDeletePeople() {
   return (
     <EntityTableActionBarButton
       label="Delete"
-      icon={<TbTrash size={16} />}
+      icon={<IconTrash size={16} />}
       type="warning"
       onClick={handleDeleteClick}
     />