admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Replace Fontawesome Pro by React-Icons/FA (#93)

Browse Source 
* Fontawesome -> ReactIcons cleanup

* No need for npmrc anymore

* Complete migration

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Félix Malfait
2023-05-03 17:24:07 +02:00
committed by GitHub
parent f28edd405f
commit 9bc3aa1fb9
30 changed files with 813 additions and 881 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
front/src/pages/companies/Companies.tsx
View File

@ -1,4 +1,4 @@
import { faBuildings, faList } from '@fortawesome/pro-regular-svg-icons';
import { FaRegBuilding, FaList } from 'react-icons/fa';
import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
import styled from '@emotion/styled';
import { useState, useCallback } from 'react';
@ -29,13 +29,13 @@ function Companies() {
const { data } = useCompaniesQuery(orderBy);
return (
<WithTopBarContainer title="Companies" icon={faBuildings}>
<WithTopBarContainer title="Companies" icon={<FaRegBuilding />}>
<StyledCompaniesContainer>
<Table
data={data ? data.companies.map(mapCompany) : []}
columns={companiesColumns}
viewName="All Companies"
viewIcon={faList}
viewIcon={<FaList />}
onSortsUpdate={updateSorts}
availableSorts={sortsAvailable}
/>

32
front/src/pages/companies/companies-table.tsx
View File

@ -8,14 +8,14 @@ import CompanyChip from '../../components/chips/CompanyChip';
import EditableCell from '../../components/table/EditableCell';
import PipeChip from '../../components/chips/PipeChip';
import {
faBuildings,
faCalendar,
faLinkSimple,
faMapPin,
faRectangleHistory,
faSigma,
faUser,
} from '@fortawesome/pro-regular-svg-icons';
FaRegBuilding,
FaCalendar,
FaLink,
FaMapPin,
FaStream,
FaRegUser,
FaUsers,
} from 'react-icons/fa';
import ClickableCell from '../../components/table/ClickableCell';
import PersonChip from '../../components/chips/PersonChip';
import { SortType } from '../../components/table/table-header/interface';
@ -36,7 +36,7 @@ export const sortsAvailable = [
const columnHelper = createColumnHelper<Company>();
export const companiesColumns = [
columnHelper.accessor('name', {
header: () => <ColumnHead viewName="Name" viewIcon={faBuildings} />,
header: () => <ColumnHead viewName="Name" viewIcon={<FaRegBuilding />} />,
cell: (props) => (
<HorizontalyAlignedContainer>
<Checkbox
@ -51,7 +51,7 @@ export const companiesColumns = [
),
}),
columnHelper.accessor('employees', {
header: () => <ColumnHead viewName="Employees" viewIcon={faSigma} />,
header: () => <ColumnHead viewName="Employees" viewIcon={<FaUsers />} />,
cell: (props) => (
<EditableCell
content={props.row.original.employees.toFixed(0)}
@ -64,7 +64,7 @@ export const companiesColumns = [
),
}),
columnHelper.accessor('domain_name', {
header: () => <ColumnHead viewName="URL" viewIcon={faLinkSimple} />,
header: () => <ColumnHead viewName="URL" viewIcon={<FaLink />} />,
cell: (props) => (
<EditableCell
content={props.row.original.domain_name}
@ -77,7 +77,7 @@ export const companiesColumns = [
),
}),
columnHelper.accessor('address', {
header: () => <ColumnHead viewName="Address" viewIcon={faMapPin} />,
header: () => <ColumnHead viewName="Address" viewIcon={<FaMapPin />} />,
cell: (props) => (
<EditableCell
content={props.row.original.address}
@ -91,7 +91,7 @@ export const companiesColumns = [
}),
columnHelper.accessor('opportunities', {
header: () => (
<ColumnHead viewName="Opportunities" viewIcon={faRectangleHistory} />
<ColumnHead viewName="Opportunities" viewIcon={<FaStream />} />
),
cell: (props) => (
<ClickableCell href="#">
@ -102,7 +102,7 @@ export const companiesColumns = [
),
}),
columnHelper.accessor('creationDate', {
header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
header: () => <ColumnHead viewName="Creation" viewIcon={<FaCalendar />} />,
cell: (props) => (
<ClickableCell href="#">
{new Intl.DateTimeFormat(undefined, {
@ -114,7 +114,9 @@ export const companiesColumns = [
),
}),
columnHelper.accessor('accountOwner', {
header: () => <ColumnHead viewName="Account Owner" viewIcon={faUser} />,
header: () => (
<ColumnHead viewName="Account Owner" viewIcon={<FaRegUser />} />
),
cell: (props) => (
<ClickableCell href="#">
<>

4
front/src/pages/opportunities/Opportunities.tsx
View File

@ -1,9 +1,9 @@
import { faBullseyeArrow } from '@fortawesome/pro-regular-svg-icons';
import { FaBullseye } from 'react-icons/fa';
import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
function Opportunities() {
return (
<WithTopBarContainer title="Opportunities" icon={faBullseyeArrow}>
<WithTopBarContainer title="Opportunities" icon={<FaBullseye />}>
<></>
</WithTopBarContainer>
);

6
front/src/pages/people/People.tsx
View File

@ -1,4 +1,4 @@
import { faUser, faList } from '@fortawesome/pro-regular-svg-icons';
import { FaRegUser, FaList } from 'react-icons/fa';
import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
import Table from '../../components/table/Table';
import styled from '@emotion/styled';
@ -34,14 +34,14 @@ function People() {
const { data } = usePeopleQuery(orderBy);
return (
<WithTopBarContainer title="People" icon={faUser}>
<WithTopBarContainer title="People" icon={<FaRegUser />}>
<StyledPeopleContainer>
{
<Table
data={data ? data.people.map(mapPerson) : []}
columns={peopleColumns}
viewName="All People"
viewIcon={faList}
viewIcon={<FaList />}
onSortsUpdate={updateSorts}
availableSorts={availableSorts}
availableFilters={availableFilters}

56
front/src/pages/people/people-table.tsx
View File

@ -1,12 +1,12 @@
import {
faBuildings,
faCalendar,
faEnvelope,
faUser,
faMapPin,
faPhone,
faRectangleHistory,
} from '@fortawesome/pro-regular-svg-icons';
FaRegBuilding,
FaCalendar,
FaEnvelope,
FaRegUser,
FaMapPin,
FaPhone,
FaStream,
} from 'react-icons/fa';
import { createColumnHelper } from '@tanstack/react-table';
import ClickableCell from '../../components/table/ClickableCell';
import ColumnHead from '../../components/table/ColumnHead';
@ -28,56 +28,56 @@ export const availableSorts = [
{
key: 'fullname',
label: 'People',
icon: faUser,
icon: <FaRegUser />,
},
{
key: 'company_name',
label: 'Company',
icon: faBuildings,
icon: <FaRegBuilding />,
},
{
key: 'email',
label: 'Email',
icon: faEnvelope,
icon: <FaEnvelope />,
},
{ key: 'phone', label: 'Phone', icon: faPhone },
{ key: 'phone', label: 'Phone', icon: <FaPhone /> },
{
key: 'created_at',
label: 'Created at',
icon: faCalendar,
icon: <FaCalendar />,
},
{ key: 'city', label: 'City', icon: faMapPin },
{ key: 'city', label: 'City', icon: <FaMapPin /> },
] satisfies Array<SortType<OrderByFields>>;
export const availableFilters = [
{
key: 'fullname',
label: 'People',
icon: faUser,
icon: <FaRegUser />,
},
{
key: 'company_name',
label: 'Company',
icon: faBuildings,
icon: <FaRegBuilding />,
},
{
key: 'email',
label: 'Email',
icon: faEnvelope,
icon: <FaEnvelope />,
},
{ key: 'phone', label: 'Phone', icon: faPhone },
{ key: 'phone', label: 'Phone', icon: <FaPhone /> },
{
key: 'created_at',
label: 'Created at',
icon: faCalendar,
icon: <FaCalendar />,
},
{ key: 'city', label: 'City', icon: faMapPin },
{ key: 'city', label: 'City', icon: <FaMapPin /> },
] satisfies FilterType[];
const columnHelper = createColumnHelper<Person>();
export const peopleColumns = [
columnHelper.accessor('fullName', {
header: () => <ColumnHead viewName="People" viewIcon={faUser} />,
header: () => <ColumnHead viewName="People" viewIcon={<FaRegUser />} />,
cell: (props) => (
<>
<HorizontalyAlignedContainer>
@ -94,7 +94,7 @@ export const peopleColumns = [
),
}),
columnHelper.accessor('email', {
header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
header: () => <ColumnHead viewName="Email" viewIcon={<FaEnvelope />} />,
cell: (props) => (
<EditableCell
content={props.row.original.email}
@ -107,7 +107,9 @@ export const peopleColumns = [
),
}),
columnHelper.accessor('company', {
header: () => <ColumnHead viewName="Company" viewIcon={faBuildings} />,
header: () => (
<ColumnHead viewName="Company" viewIcon={<FaRegBuilding />} />
),
cell: (props) => (
<ClickableCell href="#">
<CompanyChip
@ -118,7 +120,7 @@ export const peopleColumns = [
),
}),
columnHelper.accessor('phone', {
header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
header: () => <ColumnHead viewName="Phone" viewIcon={<FaPhone />} />,
cell: (props) => (
<ClickableCell
href={parsePhoneNumber(
@ -134,7 +136,7 @@ export const peopleColumns = [
),
}),
columnHelper.accessor('creationDate', {
header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
header: () => <ColumnHead viewName="Creation" viewIcon={<FaCalendar />} />,
cell: (props) => (
<ClickableCell href="#">
{new Intl.DateTimeFormat(undefined, {
@ -146,7 +148,7 @@ export const peopleColumns = [
),
}),
columnHelper.accessor('pipe', {
header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleHistory} />,
header: () => <ColumnHead viewName="Pipe" viewIcon={<FaStream />} />,
cell: (props) => (
<ClickableCell href="#">
<PipeChip
@ -157,7 +159,7 @@ export const peopleColumns = [
),
}),
columnHelper.accessor('city', {
header: () => <ColumnHead viewName="City" viewIcon={faMapPin} />,
header: () => <ColumnHead viewName="City" viewIcon={<FaMapPin />} />,
cell: (props) => (
<ClickableCell href="#">{props.row.original.city}</ClickableCell>
),