From 7887e724d5a2ee234f1d071b5f430558f253fe20 Mon Sep 17 00:00:00 2001
From: Anders Borch <anders@cyborch.com>
Date: Wed, 12 Apr 2023 19:27:01 +0200
Subject: [PATCH] Add people styling

* Add styled PeopleHeader tag
* Add icon prefix to view name
---
 front/src/components/table/TableHeader.tsx |  1 +
 front/src/pages/people/People.tsx          | 43 +++++++++++++++++-----
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/front/src/components/table/TableHeader.tsx b/front/src/components/table/TableHeader.tsx
index 4a3ec93fd..553c421ba 100644
--- a/front/src/components/table/TableHeader.tsx
+++ b/front/src/components/table/TableHeader.tsx
@@ -13,6 +13,7 @@ const StyledTitle = styled.div`
   align-items: center;
   gap: 5px;
   color: ${(props) => props.theme.text60};
+  font-weight: 500;
 `;
 
 function TableHeader({ viewName, viewIcon }: OwnProps) {
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index 8bb9bd9fe..b828abfa3 100644
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@@ -1,9 +1,18 @@
-import { faUser } from '@fortawesome/free-regular-svg-icons';
+import {
+  faBuilding,
+  faCalendar,
+  faEnvelope,
+  faRectangleList,
+  faUser,
+} from '@fortawesome/free-regular-svg-icons';
+import { faList, faMapPin, faPhone } from '@fortawesome/free-solid-svg-icons';
 import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
 import Table from '../../components/table/Table';
 import { Company } from '../../interfaces/company.interface';
 import { Pipe } from '../../interfaces/pipe.interface';
 import { createColumnHelper } from '@tanstack/react-table';
+import styled from '@emotion/styled';
+import TableHeader from '../../components/table/TableHeader';
 
 type People = {
   fullName: string;
@@ -15,6 +24,15 @@ type People = {
   city: string;
 };
 
+const StyledPeopleContainer = styled.div`
+  padding: 8px;
+  width: 100%;
+
+  table {
+    margin-top: 8px;
+  }
+`;
+
 const defaultData: Array<People> = [
   {
     fullName: 'Alexandre Prot',
@@ -67,34 +85,41 @@ const columnHelper = createColumnHelper<People>();
 
 const columns = [
   columnHelper.accessor('fullName', {
-    header: () => 'People',
+    header: () => <TableHeader viewName="People" viewIcon={faUser} />,
   }),
   columnHelper.accessor('email', {
-    header: () => <span>Email</span>,
+    header: () => <TableHeader viewName="Email" viewIcon={faEnvelope} />,
   }),
   columnHelper.accessor('company', {
-    header: () => <span>Company</span>,
     cell: (props) => <span>{props.row.original.company.name}</span>,
+    header: () => <TableHeader viewName="Company" viewIcon={faBuilding} />,
   }),
   columnHelper.accessor('phone', {
-    header: () => <span>Phone</span>,
+    header: () => <TableHeader viewName="Phone" viewIcon={faPhone} />,
   }),
   columnHelper.accessor('creationDate', {
-    header: () => <span>Creation</span>,
+    header: () => <TableHeader viewName="Creation" viewIcon={faCalendar} />,
   }),
   columnHelper.accessor('pipe', {
-    header: () => <span>Pipe</span>,
     cell: (props) => <span>{props.row.original.pipe.name}</span>,
+    header: () => <TableHeader viewName="Pipe" viewIcon={faRectangleList} />,
   }),
   columnHelper.accessor('city', {
-    header: () => <span>City</span>,
+    header: () => <TableHeader viewName="City" viewIcon={faMapPin} />,
   }),
 ];
 
 function People() {
   return (
     <WithTopBarContainer title="People" icon={faUser}>
-      <Table data={defaultData} columns={columns} viewName="All People" />
+      <StyledPeopleContainer>
+        <Table
+          data={defaultData}
+          columns={columns}
+          viewName="All People"
+          viewIcon={faList}
+        />
+      </StyledPeopleContainer>
     </WithTopBarContainer>
   );
 }