From b0b81ba40d9513867da002b8d96992fabf46c8fb Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 14:46:54 +0200 Subject: [PATCH 01/10] feature: fix table layout --- front/src/components/table/ColumnHead.tsx | 2 +- front/src/components/table/Table.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/front/src/components/table/ColumnHead.tsx b/front/src/components/table/ColumnHead.tsx index 37d4c82288..a62f75f2a1 100644 --- a/front/src/components/table/ColumnHead.tsx +++ b/front/src/components/table/ColumnHead.tsx @@ -11,7 +11,7 @@ const StyledTitle = styled.div` display: flex; flex-direction: row; align-items: center; - height: 40px; + height: ${(props) => props.theme.spacing(8)}; color: ${(props) => props.theme.text60}; font-weight: 500; padding-left: ${(props) => props.theme.spacing(2)}; diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx index 2e7624f0a8..79425ce359 100644 --- a/front/src/components/table/Table.tsx +++ b/front/src/components/table/Table.tsx @@ -28,7 +28,6 @@ const StyledTable = styled.table` border: 1px solid #f5f5f5; font-size: 12px; text-align: left; - padding: 11px 0 11px 4px; } `; From a843d7d76e18b199534dc5c0772f18eb1b70e31f Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 15:00:22 +0200 Subject: [PATCH 02/10] feature: add a left padding in cells --- front/src/components/table/ClickableCell.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/front/src/components/table/ClickableCell.tsx b/front/src/components/table/ClickableCell.tsx index a1ecb43af1..fdae76a337 100644 --- a/front/src/components/table/ClickableCell.tsx +++ b/front/src/components/table/ClickableCell.tsx @@ -1,3 +1,4 @@ +import styled from '@emotion/styled'; import * as React from 'react'; import { Link } from 'react-router-dom'; @@ -6,8 +7,16 @@ type OwnProps = { children?: React.ReactNode; }; +const Container = styled.span` + margin-left: 4px; +`; + function ClickableCell({ href, children }: OwnProps) { - return {children}; + return ( + + {children} + + ); } export default ClickableCell; From 0844490c134101f1030273bfe5fef040e27e681a Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 15:13:26 +0200 Subject: [PATCH 03/10] feature: wrap all elements in a cell --- .../HorizontalyAlignedContainer.tsx | 2 +- front/src/pages/people/People.tsx | 57 ++++++++++--------- 2 files changed, 32 insertions(+), 27 deletions(-) diff --git a/front/src/layout/containers/HorizontalyAlignedContainer.tsx b/front/src/layout/containers/HorizontalyAlignedContainer.tsx index 6892b2fa3d..1e0f63dc16 100644 --- a/front/src/layout/containers/HorizontalyAlignedContainer.tsx +++ b/front/src/layout/containers/HorizontalyAlignedContainer.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; type OwnProps = { - children: JSX.Element[]; + children: JSX.Element[] | JSX.Element; }; const StyledContainer = styled.div` diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index edd55f15fe..1be1a401ad 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -123,9 +123,11 @@ const columns = [ columnHelper.accessor('email', { header: () => , cell: (props) => ( - - {props.row.original.email} - + + + {props.row.original.email} + + ), }), columnHelper.accessor('company', { @@ -142,41 +144,44 @@ const columns = [ columnHelper.accessor('phone', { header: () => , cell: (props) => ( - - {parsePhoneNumber( - props.row.original.phone, - props.row.original.countryCode as CountryCode, - )?.formatInternational() || props.row.original.phone} - + + + {parsePhoneNumber( + props.row.original.phone, + props.row.original.countryCode as CountryCode, + )?.formatInternational() || props.row.original.phone} + + ), }), columnHelper.accessor('creationDate', { header: () => , - cell: (props) => - new Intl.DateTimeFormat(undefined, { - month: 'short', - day: 'numeric', - year: 'numeric', - }).format(props.row.original.creationDate), + cell: (props) => ( + + {new Intl.DateTimeFormat(undefined, { + month: 'short', + day: 'numeric', + year: 'numeric', + }).format(props.row.original.creationDate)} + + ), }), columnHelper.accessor('pipe', { header: () => , cell: (props) => ( - - - + {props.row.original.pipe.name} ), }), columnHelper.accessor('city', { header: () => , + cell: (props) => ( + {props.row.original.city} + ), }), ]; From 6f9506b924d55d7f494faae7f8eadcd871c1e072 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 15:19:10 +0200 Subject: [PATCH 04/10] feature: fix borders of table --- front/src/components/table/Table.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx index 79425ce359..3b0bdd67b6 100644 --- a/front/src/components/table/Table.tsx +++ b/front/src/components/table/Table.tsx @@ -20,14 +20,23 @@ type OwnProps = { const StyledTable = styled.table` min-width: 100%; border-radius: 4px; - border: 1px solid #f5f5f5; border-spacing: 0; - td, th { - border: 1px solid #f5f5f5; - font-size: 12px; + border-top: 1px solid #f5f5f5; + border-bottom: 1px solid #f5f5f5; text-align: left; + :not(:last-child) { + border-right: 1px solid #f5f5f5; + } + } + + td { + border-bottom: 1px solid #f5f5f5; + text-align: left; + :not(:last-child) { + border-right: 1px solid #f5f5f5; + } } `; From 6e9b6124095a35ba355c1810fe0ba78109f192fa Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 15:23:09 +0200 Subject: [PATCH 05/10] feature: fix color of border --- front/src/components/table/Table.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx index 3b0bdd67b6..1de801e5f7 100644 --- a/front/src/components/table/Table.tsx +++ b/front/src/components/table/Table.tsx @@ -23,19 +23,19 @@ const StyledTable = styled.table` border-spacing: 0; th { - border-top: 1px solid #f5f5f5; - border-bottom: 1px solid #f5f5f5; + border-top: 1px solid ${(props) => props.theme.primaryBorder}; + border-bottom: 1px solid ${(props) => props.theme.primaryBorder}; text-align: left; :not(:last-child) { - border-right: 1px solid #f5f5f5; + border-right: 1px solid ${(props) => props.theme.primaryBorder}; } } td { - border-bottom: 1px solid #f5f5f5; + border-bottom: 1px solid ${(props) => props.theme.primaryBorder}; text-align: left; :not(:last-child) { - border-right: 1px solid #f5f5f5; + border-right: 1px solid ${(props) => props.theme.primaryBorder}; } } `; From d1f05993be40865e2cdb1d963e3e4c63d6152343 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 15:24:18 +0200 Subject: [PATCH 06/10] feature: fix default padding of table --- front/src/components/table/Table.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx index 1de801e5f7..3c0c813ca7 100644 --- a/front/src/components/table/Table.tsx +++ b/front/src/components/table/Table.tsx @@ -23,6 +23,7 @@ const StyledTable = styled.table` border-spacing: 0; th { + padding: 0; border-top: 1px solid ${(props) => props.theme.primaryBorder}; border-bottom: 1px solid ${(props) => props.theme.primaryBorder}; text-align: left; @@ -32,6 +33,7 @@ const StyledTable = styled.table` } td { + padding: 0; border-bottom: 1px solid ${(props) => props.theme.primaryBorder}; text-align: left; :not(:last-child) { From 28af85fcb7b8f220aacb9b33565d24010701befe Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 15:28:41 +0200 Subject: [PATCH 07/10] feature: set table text colors --- front/src/components/table/ColumnHead.tsx | 1 - front/src/components/table/Table.tsx | 2 ++ front/src/layout/styles/themes.ts | 4 ++-- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/front/src/components/table/ColumnHead.tsx b/front/src/components/table/ColumnHead.tsx index a62f75f2a1..7603036c7c 100644 --- a/front/src/components/table/ColumnHead.tsx +++ b/front/src/components/table/ColumnHead.tsx @@ -12,7 +12,6 @@ const StyledTitle = styled.div` flex-direction: row; align-items: center; height: ${(props) => props.theme.spacing(8)}; - color: ${(props) => props.theme.text60}; font-weight: 500; padding-left: ${(props) => props.theme.spacing(2)}; `; diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx index 3c0c813ca7..5ca35bfd91 100644 --- a/front/src/components/table/Table.tsx +++ b/front/src/components/table/Table.tsx @@ -23,6 +23,7 @@ const StyledTable = styled.table` border-spacing: 0; th { + color: ${(props) => props.theme.text40}; padding: 0; border-top: 1px solid ${(props) => props.theme.primaryBorder}; border-bottom: 1px solid ${(props) => props.theme.primaryBorder}; @@ -33,6 +34,7 @@ const StyledTable = styled.table` } td { + color: ${(props) => props.theme.text80}; padding: 0; border-bottom: 1px solid ${(props) => props.theme.primaryBorder}; text-align: left; diff --git a/front/src/layout/styles/themes.ts b/front/src/layout/styles/themes.ts index 74eee0bda3..2a14bdc9b8 100644 --- a/front/src/layout/styles/themes.ts +++ b/front/src/layout/styles/themes.ts @@ -28,9 +28,9 @@ const lightThemeSpecific = { primaryBorder: 'rgba(0, 0, 0, 0.08)', text100: '#000', - text80: '#333', + text80: '#333333', text60: '#666', - text40: '#999', + text40: '#999999', text30: '#b3b3b3', text20: '#ccc', text0: '#fff', From a361d7732e2536d05fddde9b1210b75c77c01070 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 15:40:08 +0200 Subject: [PATCH 08/10] feature: remove border of table container --- front/src/layout/containers/WithTopBarContainer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/front/src/layout/containers/WithTopBarContainer.tsx b/front/src/layout/containers/WithTopBarContainer.tsx index f5a946d1e7..fce239b2ec 100644 --- a/front/src/layout/containers/WithTopBarContainer.tsx +++ b/front/src/layout/containers/WithTopBarContainer.tsx @@ -27,7 +27,6 @@ const ContentSubContainer = styled.div` display: flex; background: ${(props) => props.theme.primaryBackground}; border-radius: 8px; - border: 1px solid ${(props) => props.theme.primaryBorder}; flex: 1; `; From 0f779f9d434efa4aa0cd22cdb050ab12423ce064 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 15:45:46 +0200 Subject: [PATCH 09/10] feature: change the border color again --- front/src/components/table/ClickableCell.tsx | 2 +- front/src/components/table/Table.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/front/src/components/table/ClickableCell.tsx b/front/src/components/table/ClickableCell.tsx index fdae76a337..c57e020cab 100644 --- a/front/src/components/table/ClickableCell.tsx +++ b/front/src/components/table/ClickableCell.tsx @@ -8,7 +8,7 @@ type OwnProps = { }; const Container = styled.span` - margin-left: 4px; + margin-left: ${(props) => props.theme.spacing(2)}; `; function ClickableCell({ href, children }: OwnProps) { diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx index 5ca35bfd91..c504b21dc2 100644 --- a/front/src/components/table/Table.tsx +++ b/front/src/components/table/Table.tsx @@ -25,21 +25,21 @@ const StyledTable = styled.table` th { color: ${(props) => props.theme.text40}; padding: 0; - border-top: 1px solid ${(props) => props.theme.primaryBorder}; - border-bottom: 1px solid ${(props) => props.theme.primaryBorder}; + border-top: 1px solid ${(props) => props.theme.tertiaryBackground}; + border-bottom: 1px solid ${(props) => props.theme.tertiaryBackground}; text-align: left; :not(:last-child) { - border-right: 1px solid ${(props) => props.theme.primaryBorder}; + border-right: 1px solid ${(props) => props.theme.tertiaryBackground}; } } td { color: ${(props) => props.theme.text80}; padding: 0; - border-bottom: 1px solid ${(props) => props.theme.primaryBorder}; + border-bottom: 1px solid ${(props) => props.theme.tertiaryBackground}; text-align: left; :not(:last-child) { - border-right: 1px solid ${(props) => props.theme.primaryBorder}; + border-right: 1px solid ${(props) => props.theme.tertiaryBackground}; } } `; From 1a70a5ba65179ce099dd97b215945fe4fa33c31d Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 15:58:38 +0200 Subject: [PATCH 10/10] feature: update icons of People table --- front/src/pages/people/People.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index 1be1a401ad..3bf9790a64 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -2,10 +2,12 @@ import { faBuildings, faCalendar, faEnvelope, - faRectangleList, faUser, + faMapPin, + faPhone, + faRectangleHistory, + faList, } from '@fortawesome/pro-regular-svg-icons'; -import { faList, faMapPin, faPhone } from '@fortawesome/pro-solid-svg-icons'; import WithTopBarContainer from '../../layout/containers/WithTopBarContainer'; import Table from '../../components/table/Table'; import { Company } from '../../interfaces/company.interface'; @@ -172,7 +174,7 @@ const columns = [ ), }), columnHelper.accessor('pipe', { - header: () => , + header: () => , cell: (props) => ( {props.row.original.pipe.name} ),