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