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',
     }),