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

front/src/pages/opportunities/Opportunities.tsx

@@ -1,5 +1,4 @@
-import { FaBullseye } from 'react-icons/fa';
-
+import { IconTarget } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
 import { AppPage } from '~/AppPage';
 
@@ -12,7 +11,7 @@ import { Board } from '../../modules/opportunities/components/Board';
 export function Opportunities() {
   return (
     <AppPage>
-      <WithTopBarContainer title="Opportunities" icon={<FaBullseye />}>
+      <WithTopBarContainer title="Opportunities" icon={<IconTarget />}>
         <Board initialBoard={initialBoard} items={items} />
       </WithTopBarContainer>
     </AppPage>

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