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

front/src/pages/companies/Companies.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
-import { FaRegBuilding, FaList } from 'react-icons/fa';
+import { FaList } from 'react-icons/fa';
 import styled from '@emotion/styled';
 import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
 import { v4 as uuidv4 } from 'uuid';
@@ -27,6 +27,7 @@ import { BoolExpType } from '../../interfaces/entities/generic.interface';
 import { useCompaniesColumns } from './companies-columns';
 import { availableSorts } from './companies-sorts';
 import { availableFilters } from './companies-filters';
+import { TbBuilding } from 'react-icons/tb';
 
 const StyledCompaniesContainer = styled.div`
   display: flex;
@@ -94,7 +95,7 @@ function Companies() {
   return (
     <WithTopBarContainer
       title="Companies"
-      icon={<FaRegBuilding />}
+      icon={<TbBuilding size={16} />}
       onAddButtonClick={addEmptyRow}
     >
       <>

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

@@ -1,12 +1,4 @@
 import { useMemo } from 'react';
-import {
-  FaRegBuilding,
-  FaCalendar,
-  FaLink,
-  FaMapPin,
-  FaRegUser,
-  FaUsers,
-} from 'react-icons/fa';
 import { CellContext, createColumnHelper } from '@tanstack/react-table';
 
 import { SEARCH_USER_QUERY } from '../../services/api/search/search';
@@ -27,6 +19,14 @@ import PersonChip, {
   PersonChipPropsType,
 } from '../../components/chips/PersonChip';
 import CompanyChip from '../../components/chips/CompanyChip';
+import {
+  TbBuilding,
+  TbCalendar,
+  TbLink,
+  TbMapPin,
+  TbSum,
+  TbUser,
+} from 'react-icons/tb';
 
 const columnHelper = createColumnHelper<Company>();
 
@@ -53,7 +53,7 @@ export const useCompaniesColumns = () => {
       },
       columnHelper.accessor('name', {
         header: () => (
-          <ColumnHead viewName="Name" viewIcon={<FaRegBuilding />} />
+          <ColumnHead viewName="Name" viewIcon={<TbBuilding size={16} />} />
         ),
         cell: (props) => (
           <EditableChip
@@ -71,7 +71,7 @@ export const useCompaniesColumns = () => {
       }),
       columnHelper.accessor('employees', {
         header: () => (
-          <ColumnHead viewName="Employees" viewIcon={<FaUsers />} />
+          <ColumnHead viewName="Employees" viewIcon={<TbSum size={16} />} />
         ),
         cell: (props) => (
           <EditableText
@@ -91,7 +91,9 @@ export const useCompaniesColumns = () => {
         ),
       }),
       columnHelper.accessor('domainName', {
-        header: () => <ColumnHead viewName="URL" viewIcon={<FaLink />} />,
+        header: () => (
+          <ColumnHead viewName="URL" viewIcon={<TbLink size={16} />} />
+        ),
         cell: (props) => (
           <EditableText
             content={props.row.original.domainName || ''}
@@ -104,7 +106,9 @@ export const useCompaniesColumns = () => {
         ),
       }),
       columnHelper.accessor('address', {
-        header: () => <ColumnHead viewName="Address" viewIcon={<FaMapPin />} />,
+        header: () => (
+          <ColumnHead viewName="Address" viewIcon={<TbMapPin size={16} />} />
+        ),
         cell: (props) => (
           <EditableText
             content={props.row.original.address || ''}
@@ -118,7 +122,7 @@ export const useCompaniesColumns = () => {
       }),
       columnHelper.accessor('creationDate', {
         header: () => (
-          <ColumnHead viewName="Creation" viewIcon={<FaCalendar />} />
+          <ColumnHead viewName="Creation" viewIcon={<TbCalendar size={16} />} />
         ),
         cell: (props) => (
           <EditableDate
@@ -133,7 +137,10 @@ export const useCompaniesColumns = () => {
       }),
       columnHelper.accessor('accountOwner', {
         header: () => (
-          <ColumnHead viewName="Account Owner" viewIcon={<FaRegUser />} />
+          <ColumnHead
+            viewName="Account Owner"
+            viewIcon={<TbUser size={16} />}
+          />
         ),
         cell: (props) => (
           <EditableRelation<User, PersonChipPropsType>

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

@@ -1,17 +1,17 @@
-import { Company } from '../../interfaces/entities/company.interface';
 import {
-  FaLink,
-  FaBuilding,
-  FaMapPin,
-  FaUsers,
-  FaCalendar,
-} from 'react-icons/fa';
+  TbBuilding,
+  TbCalendar,
+  TbLink,
+  TbMapPin,
+  TbSum,
+} from 'react-icons/tb';
+import { Company } from '../../interfaces/entities/company.interface';
 import { FilterConfigType } from '../../interfaces/filters/interface';
 
 export const nameFilter = {
   key: 'company_name',
   label: 'Company',
-  icon: <FaBuilding />,
+  icon: <TbBuilding size={16} />,
   type: 'text',
   operands: [
     {
@@ -34,7 +34,7 @@ export const nameFilter = {
 export const urlFilter = {
   key: 'company_domain_name',
   label: 'Url',
-  icon: <FaLink />,
+  icon: <TbLink size={16} />,
   type: 'text',
   operands: [
     {
@@ -57,7 +57,7 @@ export const urlFilter = {
 export const addressFilter = {
   key: 'company_address',
   label: 'Address',
-  icon: <FaMapPin />,
+  icon: <TbMapPin size={16} />,
   type: 'text',
   operands: [
     {
@@ -80,7 +80,7 @@ export const addressFilter = {
 export const employeesFilter = {
   key: 'company_employees',
   label: 'Employees',
-  icon: <FaUsers />,
+  icon: <TbSum size={16} />,
   type: 'text',
   operands: [
     {
@@ -107,7 +107,7 @@ export const employeesFilter = {
 export const creationDateFilter = {
   key: 'company_created_at',
   label: 'Created At',
-  icon: <FaCalendar />,
+  icon: <TbCalendar size={16} />,
   type: 'date',
   operands: [
     {

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

@@ -1,10 +1,10 @@
 import {
-  FaCalendar,
-  FaLink,
-  FaMapPin,
-  FaUsers,
-  FaBuilding,
-} from 'react-icons/fa';
+  TbBuilding,
+  TbCalendar,
+  TbLink,
+  TbMapPin,
+  TbSum,
+} from 'react-icons/tb';
 import { Companies_Order_By } from '../../generated/graphql';
 import { SortType } from '../../interfaces/sorts/interface';
 
@@ -12,31 +12,31 @@ export const availableSorts = [
   {
     key: 'name',
     label: 'Name',
-    icon: <FaBuilding />,
+    icon: <TbBuilding size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'employees',
     label: 'Employees',
-    icon: <FaUsers />,
+    icon: <TbSum size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'domain_name',
     label: 'Url',
-    icon: <FaLink />,
+    icon: <TbLink size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'address',
     label: 'Address',
-    icon: <FaMapPin />,
+    icon: <TbMapPin size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'created_at',
     label: 'Creation',
-    icon: <FaCalendar />,
+    icon: <TbCalendar size={16} />,
     _type: 'default_sort',
   },
 ] satisfies Array<SortType<Companies_Order_By>>;

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>>;