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

front/src/components/editable-cell/EditableCellWrapper.tsx

@@ -19,6 +19,8 @@ const StyledWrapper = styled.div`
   display: flex;
   align-items: center;
   width: 100%;
+  cursor: pointer;
+  user-select: none;
 `;
 
 type StyledEditModeContainerProps = {

front/src/components/editable-cell/EditableDate.tsx

@@ -3,6 +3,7 @@ import { forwardRef, useState } from 'react';
 import EditableCellWrapper from './EditableCellWrapper';
 import DatePicker from '../form/DatePicker';
 import { modalBackground } from '../../layout/styles/themes';
+import { humanReadableDate } from '../../services/utils';
 
 export type EditableDateProps = {
   value: Date;
@@ -42,12 +43,7 @@ function EditableDate({
   const DateDisplay = forwardRef<HTMLDivElement, DivProps>(
     ({ value, onClick }, ref) => (
       <div onClick={onClick} ref={ref}>
-        {value &&
-          new Intl.DateTimeFormat(undefined, {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-          }).format(new Date(value as string))}
+        {value && humanReadableDate(new Date(value as string))}
       </div>
     ),
   );
@@ -81,14 +77,7 @@ function EditableDate({
       }
       nonEditModeContent={
         <StyledContainer>
-          <div>
-            {inputValue &&
-              new Intl.DateTimeFormat(undefined, {
-                month: 'short',
-                day: 'numeric',
-                year: 'numeric',
-              }).format(inputValue)}
-          </div>
+          <div>{inputValue && humanReadableDate(inputValue)}</div>
         </StyledContainer>
       }
     ></EditableCellWrapper>

front/src/components/editable-cell/EditableRelation.tsx

@@ -46,6 +46,7 @@ const StyledEditModeResultItem = styled.div`
   display: flex;
   align-items: center;
   cursor: pointer;
+  user-select: none;
 `;
 
 export type EditableRelationProps<

front/src/components/form/Checkbox.tsx

@@ -15,6 +15,8 @@ const StyledContainer = styled.span`
     margin: 8px;
     height: 14px;
     width: 14px;
+    cursor: pointer;
+    user-select: none;
   }
 
   input[type='checkbox']::before {

front/src/components/form/DatePicker.tsx

@@ -20,6 +20,7 @@ const StyledContainer = styled.div`
     font-size: ${(props) => props.theme.fontSizeMedium};
     border: none;
     display: block;
+    font-weight: 400;
   }
 
   & .react-datepicker-popper {

front/src/components/table/action-bar/ActionBar.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import ActionBarButton from './ActionBarButton';
-import { FaTrash } from 'react-icons/fa';
+import { TbTrash } from 'react-icons/tb';
 
 type OwnProps = {
   onDeleteClick: () => void;
@@ -29,7 +29,7 @@ function ActionBar({ onDeleteClick }: OwnProps) {
     <StyledContainer>
       <ActionBarButton
         label="Delete"
-        icon={<FaTrash />}
+        icon={<TbTrash size={16} />}
         onClick={onDeleteClick}
       />
     </StyledContainer>

front/src/components/table/action-bar/ActionBarButton.tsx

@@ -10,6 +10,7 @@ type OwnProps = {
 const StyledButton = styled.div`
   display: flex;
   cursor: pointer;
+  user-select: none;
 
   justify-content: center;
 
@@ -21,15 +22,16 @@ const StyledButton = styled.div`
   }
 `;
 
-const StyledButtonabel = styled.div`
+const StyledButtonLabel = styled.div`
   margin-left: ${(props) => props.theme.spacing(2)};
+  font-weight: 500;
 `;
 
 function ActionBarButton({ label, icon, onClick }: OwnProps) {
   return (
     <StyledButton onClick={onClick}>
       {icon}
-      <StyledButtonabel>{label}</StyledButtonabel>
+      <StyledButtonLabel>{label}</StyledButtonLabel>
     </StyledButton>
   );
 }

front/src/components/table/table-header/DropdownButton.tsx

@@ -29,6 +29,7 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
   display: flex;
   margin-left: ${(props) => props.theme.spacing(3)};
   cursor: pointer;
+  user-select: none;
   background: ${(props) => props.theme.primaryBackground};
   color: ${(props) => (props.isActive ? props.theme.blue : 'none')};
   padding: ${(props) => props.theme.spacing(1)};
@@ -77,6 +78,7 @@ const StyledDropdownItem = styled.li`
     calc(${(props) => props.theme.spacing(2)} - 2px);
   margin: 2px;
   cursor: pointer;
+  user-select: none;
   color: ${(props) => props.theme.text60};
 
   &:hover {
@@ -91,6 +93,7 @@ const StyledDropdownTopOption = styled.li`
   padding: calc(${(props) => props.theme.spacing(2)} + 2px)
     calc(${(props) => props.theme.spacing(2)});
   cursor: pointer;
+  user-select: none;
   color: ${(props) => props.theme.text60};
   font-weight: ${(props) => props.theme.fontWeightBold};
 
@@ -114,6 +117,7 @@ const StyledSearchField = styled.li`
   justify-content: space-between;
 
   cursor: pointer;
+  user-select: none;
   color: ${(props) => props.theme.text60};
   font-weight: ${(props) => props.theme.fontWeightBold};
 

front/src/components/table/table-header/FilterDropdownButton.tsx

@@ -12,6 +12,7 @@ import {
 } from '../../../services/api/search/search';
 import DatePicker from '../../form/DatePicker';
 import styled from '@emotion/styled';
+import { humanReadableDate } from '../../../services/utils';
 
 type OwnProps<TData extends FilterableFieldsType> = {
   isFilterSelected: boolean;
@@ -164,7 +165,7 @@ export const FilterDropdownButton = <TData extends FilterableFieldsType>({
                   key: selectedFilter.key,
                   label: selectedFilter.label,
                   value: date.toISOString(),
-                  displayValue: date.toLocaleDateString(),
+                  displayValue: humanReadableDate(date),
                   icon: selectedFilter.icon,
                   operand: selectedFilterOperand,
                 });

front/src/components/table/table-header/SortAndFilterBar.tsx

@@ -37,6 +37,7 @@ const StyledCancelButton = styled.button`
   font-weight: 500;
   margin-right: ${(props) => props.theme.spacing(2)};
   cursor: pointer;
+  user-select: none;
 
   &:hover {
     border-radius: ${(props) => props.theme.spacing(1)};

front/src/components/table/table-header/SortOrFilterChip.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { FaTimes } from 'react-icons/fa';
+import { TbX } from 'react-icons/tb';
 import { ReactNode } from 'react';
 
 type OwnProps = {
@@ -30,8 +30,11 @@ const StyledIcon = styled.div`
 const StyledDelete = styled.div`
   margin-left: ${(props) => props.theme.spacing(2)};
   cursor: pointer;
+  user-select: none;
   display: flex;
   align-items: center;
+  font-size: ${(props) => props.theme.fontSizeSmall};
+  margin-top: 1px;
 `;
 
 const StyledLabelKey = styled.div`
@@ -51,7 +54,7 @@ function SortOrFilterChip({
       {labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>}
       {labelValue}
       <StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}>
-        <FaTimes />
+        <TbX />
       </StyledDelete>
     </StyledChip>
   );

front/src/components/table/table-header/__stories__/SortDropdownButton.stories.tsx

@@ -1,17 +1,17 @@
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../../layout/styles/themes';
-import {
-  FaRegBuilding,
-  FaCalendar,
-  FaEnvelope,
-  FaMapPin,
-  FaPhone,
-  FaRegUser,
-} from 'react-icons/fa';
 import { SortDropdownButton } from '../SortDropdownButton';
 import styled from '@emotion/styled';
 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';
 
 const component = {
   title: 'SortDropdownButton',
@@ -28,31 +28,41 @@ const availableSorts = [
   {
     key: 'fullname',
     label: 'People',
-    icon: <FaRegUser />,
+    icon: <TbUser size={16} />,
     _type: 'custom_sort',
     orderByTemplate: () => ({ email: Order_By.Asc }),
   },
   {
     key: 'company_name',
     label: 'Company',
-    icon: <FaRegBuilding />,
+    icon: <TbBuilding size={16} />,
     _type: 'custom_sort',
     orderByTemplate: () => ({ email: Order_By.Asc }),
   },
   {
     key: 'email',
     label: 'Email',
-    icon: <FaEnvelope />,
+    icon: <TbMail size={16} />,
+    _type: 'default_sort',
+  },
+  {
+    key: 'phone',
+    label: 'Phone',
+    icon: <TbPhone size={16} />,
     _type: 'default_sort',
   },
-  { key: 'phone', label: 'Phone', icon: <FaPhone />, _type: 'default_sort' },
   {
     key: 'created_at',
     label: 'Created at',
-    icon: <FaCalendar />,
+    icon: <TbCalendar size={16} />,
+    _type: 'default_sort',
+  },
+  {
+    key: 'city',
+    label: 'City',
+    icon: <TbMapPin size={16} />,
     _type: 'default_sort',
   },
-  { key: 'city', label: 'City', icon: <FaMapPin />, _type: 'default_sort' },
 ] satisfies SortType<People_Order_By>[];
 
 const StyleDiv = styled.div`

front/src/components/table/table-header/__stories__/SortOrFilterChip.stories.tsx

@@ -1,7 +1,8 @@
 import SortOrFilterChip from '../SortOrFilterChip';
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../../layout/styles/themes';
-import { FaArrowDown, FaRegUser } from 'react-icons/fa';
+import { FaArrowDown } from 'react-icons/fa';
+import { TbUser } from 'react-icons/tb';
 
 const component = {
   title: 'SortOrFilterChip',
@@ -19,7 +20,7 @@ export const RegularFilterChip = ({ removeFunction }: OwnProps) => {
     <ThemeProvider theme={lightTheme}>
       <SortOrFilterChip
         id="test_sort"
-        icon={<FaRegUser />}
+        icon={<TbUser size={16} />}
         labelKey="Account owner"
         labelValue="is Charles"
         onRemove={removeFunction}

front/src/components/table/table-header/__stories__/TableHeader.stories.tsx

@@ -1,10 +1,10 @@
 import TableHeader from '../TableHeader';
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../../layout/styles/themes';
-import { FaRegBuilding, FaCalendar } from 'react-icons/fa';
 import { SortType } from '../../../../interfaces/sorts/interface';
 import { MockedProvider } from '@apollo/client/testing';
 import { EMPTY_QUERY } from '../../../../services/api/search/search';
+import { TbBuilding, TbCalendar } from 'react-icons/tb';
 
 const component = {
   title: 'TableHeader',
@@ -33,7 +33,7 @@ export const RegularTableHeader = () => {
     {
       key: 'created_at',
       label: 'Created at',
-      icon: <FaCalendar />,
+      icon: <TbCalendar size={16} />,
       _type: 'default_sort',
     },
   ];
@@ -42,7 +42,7 @@ export const RegularTableHeader = () => {
       <ThemeProvider theme={lightTheme}>
         <TableHeader
           viewName="Test"
-          viewIcon={<FaRegBuilding />}
+          viewIcon={<TbBuilding size={16} />}
           availableSorts={availableSorts}
         />
       </ThemeProvider>

front/src/components/table/table-header/__tests__/SortDropdownButton.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render } from '@testing-library/react';
 import { RegularSortDropdownButton } from '../__stories__/SortDropdownButton.stories';
-import { FaEnvelope, FaRegBuilding } from 'react-icons/fa';
+import { TbBuilding, TbMail } from 'react-icons/tb';
 
 it('Checks the default top option is Ascending', async () => {
   const setSorts = jest.fn();
@@ -17,7 +17,7 @@ it('Checks the default top option is Ascending', async () => {
   expect(setSorts).toHaveBeenCalledWith({
     label: 'Email',
     key: 'email',
-    icon: <FaEnvelope />,
+    icon: <TbMail size={16} />,
     order: 'asc',
     _type: 'default_sort',
   });
@@ -44,7 +44,7 @@ it('Checks the selection of Descending', async () => {
   expect(setSorts).toHaveBeenCalledWith({
     label: 'Email',
     key: 'email',
-    icon: <FaEnvelope />,
+    icon: <TbMail size={16} />,
     order: 'desc',
     _type: 'default_sort',
   });
@@ -66,7 +66,7 @@ it('Checks custom_sort is working', async () => {
     expect.objectContaining({
       key: 'company_name',
       label: 'Company',
-      icon: <FaRegBuilding />,
+      icon: <TbBuilding size={16} />,
       _type: 'custom_sort',
       order: 'asc',
     }),

front/src/layout/navbar/NavItem.tsx

@@ -19,6 +19,7 @@ const StyledItem = styled.button<StyledItemProps>`
   border: none;
   font-size: ${(props) => props.theme.fontSizeMedium};
   cursor: pointer;
+  user-select: none;
   background: ${(props) => (props.active ? 'rgba(0, 0, 0, 0.04)' : 'inherit')};
   padding-top: ${(props) => props.theme.spacing(1)};
   padding-bottom: ${(props) => props.theme.spacing(1)};

front/src/layout/navbar/NavTitle.tsx

@@ -11,7 +11,7 @@ const StyledTitle = styled.div`
   font-size: ${(props) => props.theme.fontSizeExtraSmall};
   font-weight: 600;
   padding-top: ${(props) => props.theme.spacing(1)};
-  padding-bottom: ${(props) => props.theme.spacing(1)};
+  padding-bottom: ${(props) => props.theme.spacing(2)};
   padding-left: ${(props) => props.theme.spacing(1)};
 `;
 

front/src/layout/navbar/Navbar.tsx

@@ -5,7 +5,7 @@ import { Workspace } from '../../interfaces/entities/workspace.interface';
 import NavItem from './NavItem';
 import NavTitle from './NavTitle';
 import WorkspaceContainer from './WorkspaceContainer';
-import { FaRegUser, FaRegBuilding } from 'react-icons/fa';
+import { TbBuilding, TbUser } from 'react-icons/tb';
 
 const NavbarContainer = styled.div`
   display: flex;
@@ -36,7 +36,7 @@ function Navbar({ workspace }: OwnProps) {
           <NavItem
             label="People"
             to="/people"
-            icon={<FaRegUser />}
+            icon={<TbUser size={16} />}
             active={
               !!useMatch({
                 path: useResolvedPath('/people').pathname,
@@ -47,7 +47,7 @@ function Navbar({ workspace }: OwnProps) {
           <NavItem
             label="Companies"
             to="/companies"
-            icon={<FaRegBuilding />}
+            icon={<TbBuilding size={16} />}
             active={
               !!useMatch({
                 path: useResolvedPath('/companies').pathname,

front/src/layout/navbar/WorkspaceContainer.tsx

@@ -10,6 +10,7 @@ const StyledContainer = styled.button`
   height: 34px;
   align-items: center;
   cursor: pointer;
+  user-select: none;
   border: 0;
   background: inherit;
   border: 1px solid ${(props) => props.theme.primaryBorder};

front/src/layout/navbar/__stories__/NavItem.stories.tsx

@@ -1,9 +1,9 @@
 import { MemoryRouter } from 'react-router-dom';
-import { FaRegUser } from 'react-icons/fa';
 import { ThemeProvider } from '@emotion/react';
 
 import NavItem from '../../../layout/navbar/NavItem';
 import { lightTheme } from '../../styles/themes';
+import { TbUser } from 'react-icons/tb';
 
 const component = {
   title: 'NavItem',
@@ -15,7 +15,7 @@ export default component;
 export const NavItemDefault = () => (
   <ThemeProvider theme={lightTheme}>
     <MemoryRouter>
-      <NavItem label="Test" to="/test" icon={<FaRegUser />} />
+      <NavItem label="Test" to="/test" icon={<TbUser size={16} />} />
     </MemoryRouter>
   </ThemeProvider>
 );
@@ -23,7 +23,12 @@ export const NavItemDefault = () => (
 export const NavItemActive = () => (
   <ThemeProvider theme={lightTheme}>
     <MemoryRouter initialEntries={['/test']}>
-      <NavItem label="Test" to="/test" active={true} icon={<FaRegUser />} />
+      <NavItem
+        label="Test"
+        to="/test"
+        active={true}
+        icon={<TbUser size={16} />}
+      />
     </MemoryRouter>
   </ThemeProvider>
 );

front/src/layout/top-bar/TopBar.tsx

@@ -26,13 +26,14 @@ const AddButtonContainer = styled.div`
   display: flex;
   justify-self: flex-end;
   border: 1px solid ${(props) => props.theme.primaryBorder};
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
-  color: ${(props) => props.theme.text60};
+  color: ${(props) => props.theme.text80};
   cursor: pointer;
+  user-select: none;
   margin-right: ${(props) => props.theme.spacing(1)};
 `;
 
@@ -53,7 +54,7 @@ function TopBar({ title, icon, onAddButtonClick }: OwnProps) {
             data-testid="add-button"
             onClick={onAddButtonClick}
           >
-            <TbPlus />
+            <TbPlus size={16} />
           </AddButtonContainer>
         )}
       </TopBarContainer>

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

front/src/services/utils.ts

@@ -0,0 +1,7 @@
+export const humanReadableDate = (date: Date) => {
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(date);
+};