Make many small frontend fixes (icons update, paddings, font-sizes) (#132)

front/src/pages/people/People.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { FaRegUser, FaList } from 'react-icons/fa';
+import { FaList } from 'react-icons/fa';
 import { v4 as uuidv4 } from 'uuid';
 import styled from '@emotion/styled';
 
@@ -27,6 +27,7 @@ import { BoolExpType } from '../../interfaces/entities/generic.interface';
 import { usePeopleColumns } from './people-columns';
 import { availableSorts } from './people-sorts';
 import { availableFilters } from './people-filters';
+import { TbUser } from 'react-icons/tb';
 
 const StyledPeopleContainer = styled.div`
   display: flex;
@@ -96,7 +97,7 @@ function People() {
   return (
     <WithTopBarContainer
       title="People"
-      icon={<FaRegUser />}
+      icon={<TbUser size={16} />}
       onAddButtonClick={addEmptyRow}
     >
       <>

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

@@ -1,12 +1,4 @@
 import { useMemo } from 'react';
-import {
-  FaRegBuilding,
-  FaCalendar,
-  FaEnvelope,
-  FaRegUser,
-  FaMapPin,
-  FaPhone,
-} from 'react-icons/fa';
 import { CellContext, createColumnHelper } from '@tanstack/react-table';
 
 import { SEARCH_COMPANY_QUERY } from '../../services/api/search/search';
@@ -30,6 +22,14 @@ import EditableRelation from '../../components/editable-cell/EditableRelation';
 import CompanyChip, {
   CompanyChipPropsType,
 } from '../../components/chips/CompanyChip';
+import {
+  TbBuilding,
+  TbCalendar,
+  TbMail,
+  TbMapPin,
+  TbPhone,
+  TbUser,
+} from 'react-icons/tb';
 
 const columnHelper = createColumnHelper<Person>();
 
@@ -55,7 +55,9 @@ export const usePeopleColumns = () => {
         ),
       },
       columnHelper.accessor('firstname', {
-        header: () => <ColumnHead viewName="People" viewIcon={<FaRegUser />} />,
+        header: () => (
+          <ColumnHead viewName="People" viewIcon={<TbUser size={16} />} />
+        ),
         cell: (props) => (
           <EditableFullName
             firstname={props.row.original.firstname || ''}
@@ -70,7 +72,9 @@ export const usePeopleColumns = () => {
         ),
       }),
       columnHelper.accessor('email', {
-        header: () => <ColumnHead viewName="Email" viewIcon={<FaEnvelope />} />,
+        header: () => (
+          <ColumnHead viewName="Email" viewIcon={<TbMail size={16} />} />
+        ),
         cell: (props) => (
           <EditableText
             placeholder="Email"
@@ -85,7 +89,7 @@ export const usePeopleColumns = () => {
       }),
       columnHelper.accessor('company', {
         header: () => (
-          <ColumnHead viewName="Company" viewIcon={<FaRegBuilding />} />
+          <ColumnHead viewName="Company" viewIcon={<TbBuilding size={16} />} />
         ),
         cell: (props) => (
           <EditableRelation<Company, CompanyChipPropsType>
@@ -123,7 +127,9 @@ export const usePeopleColumns = () => {
         ),
       }),
       columnHelper.accessor('phone', {
-        header: () => <ColumnHead viewName="Phone" viewIcon={<FaPhone />} />,
+        header: () => (
+          <ColumnHead viewName="Phone" viewIcon={<TbPhone size={16} />} />
+        ),
         cell: (props) => (
           <EditablePhone
             placeholder="Phone"
@@ -138,7 +144,7 @@ export const usePeopleColumns = () => {
       }),
       columnHelper.accessor('creationDate', {
         header: () => (
-          <ColumnHead viewName="Creation" viewIcon={<FaCalendar />} />
+          <ColumnHead viewName="Creation" viewIcon={<TbCalendar size={16} />} />
         ),
         cell: (props) => (
           <EditableDate
@@ -152,7 +158,9 @@ export const usePeopleColumns = () => {
         ),
       }),
       columnHelper.accessor('city', {
-        header: () => <ColumnHead viewName="City" viewIcon={<FaMapPin />} />,
+        header: () => (
+          <ColumnHead viewName="City" viewIcon={<TbMapPin size={16} />} />
+        ),
         cell: (props) => (
           <EditableText
             editModeHorizontalAlign="right"

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

@@ -1,4 +1,3 @@
-import { FaEnvelope, FaMapPin, FaUser, FaBuilding } from 'react-icons/fa';
 import { Person } from '../../interfaces/entities/person.interface';
 import { SEARCH_COMPANY_QUERY } from '../../services/api/search/search';
 import {
@@ -6,11 +5,12 @@ import {
   mapToCompany,
 } from '../../interfaces/entities/company.interface';
 import { FilterConfigType } from '../../interfaces/filters/interface';
+import { TbBuilding, TbMail, TbMapPin, TbUser } from 'react-icons/tb';
 
 export const fullnameFilter = {
   key: 'fullname',
   label: 'People',
-  icon: <FaUser />,
+  icon: <TbUser size={16} />,
   type: 'text',
   operands: [
     {
@@ -41,7 +41,7 @@ export const fullnameFilter = {
 export const companyFilter = {
   key: 'company_name',
   label: 'Company',
-  icon: <FaBuilding />,
+  icon: <TbBuilding size={16} />,
   type: 'relation',
   searchConfig: {
     query: SEARCH_COMPANY_QUERY,
@@ -75,7 +75,7 @@ export const companyFilter = {
 export const emailFilter = {
   key: 'email',
   label: 'Email',
-  icon: <FaEnvelope />,
+  icon: <TbMail size={16} />,
   type: 'text',
   operands: [
     {
@@ -98,7 +98,7 @@ export const emailFilter = {
 export const cityFilter = {
   key: 'city',
   label: 'City',
-  icon: <FaMapPin />,
+  icon: <TbMapPin size={16} />,
   type: 'text',
   operands: [
     {

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

@@ -1,19 +1,19 @@
-import {
-  FaRegBuilding,
-  FaCalendar,
-  FaEnvelope,
-  FaRegUser,
-  FaMapPin,
-  FaPhone,
-} from 'react-icons/fa';
 import { Order_By, People_Order_By } from '../../generated/graphql';
 import { SortType } from '../../interfaces/sorts/interface';
+import {
+  TbBuilding,
+  TbCalendar,
+  TbMail,
+  TbMapPin,
+  TbPhone,
+  TbUser,
+} from 'react-icons/tb';
 
 export const availableSorts = [
   {
     key: 'fullname',
     label: 'People',
-    icon: <FaRegUser />,
+    icon: <TbUser size={16} />,
     _type: 'custom_sort',
     orderByTemplate: (order: Order_By) => ({
       firstname: order,
@@ -23,32 +23,32 @@ export const availableSorts = [
   {
     key: 'company_name',
     label: 'Company',
-    icon: <FaRegBuilding />,
+    icon: <TbBuilding size={16} />,
     _type: 'custom_sort',
     orderByTemplate: (order: Order_By) => ({ company: { name: order } }),
   },
   {
     key: 'email',
     label: 'Email',
-    icon: <FaEnvelope />,
+    icon: <TbMail size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'phone',
     label: 'Phone',
-    icon: <FaPhone />,
+    icon: <TbPhone size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'created_at',
     label: 'Created at',
-    icon: <FaCalendar />,
+    icon: <TbCalendar size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'city',
     label: 'City',
-    icon: <FaMapPin />,
+    icon: <TbMapPin size={16} />,
     _type: 'default_sort',
   },
 ] satisfies Array<SortType<People_Order_By>>;