From 74990a3686518ca48d8362d73859da63a3da42f9 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 16:19:35 +0200 Subject: [PATCH 1/5] feature: clickableCell left space should be inside the border --- front/src/components/table/ClickableCell.tsx | 2 +- front/src/pages/people/People.tsx | 10 ++++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/front/src/components/table/ClickableCell.tsx b/front/src/components/table/ClickableCell.tsx index c57e020ca..6c5405604 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: ${(props) => props.theme.spacing(2)}; + padding-left: ${(props) => props.theme.spacing(2)}; `; function ClickableCell({ href, children }: OwnProps) { diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index 3bf9790a6..114fa3868 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -113,12 +113,10 @@ const columns = [ id={`person-selected-${props.row.original.email}`} name={`person-selected${props.row.original.email}`} /> - - - + ), }), From 05c5272c93f9cabdef392adfc0902be41caa4be3 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 16:47:34 +0200 Subject: [PATCH 2/5] feature: make border transparent instead of 0px --- front/src/components/table/Table.tsx | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx index c504b21dc..eff7a45e3 100644 --- a/front/src/components/table/Table.tsx +++ b/front/src/components/table/Table.tsx @@ -21,25 +21,33 @@ const StyledTable = styled.table` min-width: 100%; border-radius: 4px; border-spacing: 0; + border-collapse: collapse; th { + border-collapse: collapse; color: ${(props) => props.theme.text40}; padding: 0; - border-top: 1px solid ${(props) => props.theme.tertiaryBackground}; - border-bottom: 1px solid ${(props) => props.theme.tertiaryBackground}; + border: 1px solid ${(props) => props.theme.tertiaryBackground}; text-align: left; - :not(:last-child) { - border-right: 1px solid ${(props) => props.theme.tertiaryBackground}; + :last-child { + border-right-color: transparent; + } + :first-child { + border-left-color: transparent; } } td { + border-collapse: collapse; color: ${(props) => props.theme.text80}; padding: 0; - border-bottom: 1px solid ${(props) => props.theme.tertiaryBackground}; + border: 1px solid ${(props) => props.theme.tertiaryBackground}; text-align: left; - :not(:last-child) { - border-right: 1px solid ${(props) => props.theme.tertiaryBackground}; + :last-child { + border-right-color: transparent; + } + :first-child { + border-left-color: transparent; } } `; From 71c18e864f8845a0915f5bd827c6be3ef2fe314e Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 17:10:37 +0200 Subject: [PATCH 3/5] feature: move TD creation to cells --- front/src/components/table/ClickableCell.tsx | 15 +++++--- front/src/components/table/Table.tsx | 11 +++--- front/src/pages/people/People.tsx | 38 +++++++++++--------- 3 files changed, 39 insertions(+), 25 deletions(-) diff --git a/front/src/components/table/ClickableCell.tsx b/front/src/components/table/ClickableCell.tsx index 6c5405604..7f1e9a4cb 100644 --- a/front/src/components/table/ClickableCell.tsx +++ b/front/src/components/table/ClickableCell.tsx @@ -4,18 +4,25 @@ import { Link } from 'react-router-dom'; type OwnProps = { href: string; + id: string; children?: React.ReactNode; }; +const TD = styled.td` + position: relative; +`; + const Container = styled.span` padding-left: ${(props) => props.theme.spacing(2)}; `; -function ClickableCell({ href, children }: OwnProps) { +function ClickableCell({ href, children, id }: OwnProps) { return ( - - {children} - + + + {children} + + ); } diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx index eff7a45e3..8f909edce 100644 --- a/front/src/components/table/Table.tsx +++ b/front/src/components/table/Table.tsx @@ -88,11 +88,12 @@ function Table({ data, columns, viewName, viewIcon }: OwnProps) { {table.getRowModel().rows.map((row) => ( - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} + {row.getVisibleCells().map((cell) => { + return flexRender( + cell.column.columnDef.cell, + cell.getContext(), + ); + })} ))} diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index 114fa3868..54d2a13ed 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -108,22 +108,24 @@ const columns = [ columnHelper.accessor('fullName', { header: () => , cell: (props) => ( - - - - + + + + + + ), }), columnHelper.accessor('email', { header: () => , cell: (props) => ( - + {props.row.original.email} @@ -133,7 +135,7 @@ const columns = [ columnHelper.accessor('company', { header: () => , cell: (props) => ( - + , cell: (props) => ( - + , cell: (props) => ( - + {new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', @@ -174,13 +176,17 @@ const columns = [ columnHelper.accessor('pipe', { header: () => , cell: (props) => ( - {props.row.original.pipe.name} + + {props.row.original.pipe.name} + ), }), columnHelper.accessor('city', { header: () => , cell: (props) => ( - {props.row.original.city} + + {props.row.original.city} + ), }), ]; From b4915895feba5822341c5a0c1ad38b2d98d8af6f Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 17:20:18 +0200 Subject: [PATCH 4/5] feature: display a border when hovering the component --- front/src/components/table/ClickableCell.tsx | 18 ++++++++++++++++++ front/src/layout/styles/themes.ts | 6 +++--- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/front/src/components/table/ClickableCell.tsx b/front/src/components/table/ClickableCell.tsx index 7f1e9a4cb..f4738ed66 100644 --- a/front/src/components/table/ClickableCell.tsx +++ b/front/src/components/table/ClickableCell.tsx @@ -10,6 +10,24 @@ type OwnProps = { const TD = styled.td` position: relative; + box-sizing: border-box; + + ::before { + content: ''; + position: absolute; + top: -1px; + left: -1px; + width: calc(100% + 2px); + height: calc(100% + 2px); + border: 1px solid ${(props) => props.theme.text20}; + box-sizing: border-box; + border-radius: 4px; + display: none; + } + + :hover::before { + display: block; + } `; const Container = styled.span` diff --git a/front/src/layout/styles/themes.ts b/front/src/layout/styles/themes.ts index 2a14bdc9b..fd8f3fba8 100644 --- a/front/src/layout/styles/themes.ts +++ b/front/src/layout/styles/themes.ts @@ -32,7 +32,7 @@ const lightThemeSpecific = { text60: '#666', text40: '#999999', text30: '#b3b3b3', - text20: '#ccc', + text20: '#cccccc', text0: '#fff', blue: '#1961ed', @@ -58,11 +58,11 @@ const darkThemeSpecific = { primaryBorder: 'rgba(255, 255, 255, 0.08)', text100: '#ffffff', - text80: '#ccc', + text80: '#cccccc', text60: '#999', text40: '#666', text30: '#4c4c4c', - text20: '#333', + text20: '#333333', text0: '#000', blue: '#6895ec', From 8fa9c7f1dbae27b9dbb19ef37b16ef6b816ca47c Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 17:26:18 +0200 Subject: [PATCH 5/5] chore: make sure darktheme implement sames keys as light theme --- front/src/layout/styles/themes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/src/layout/styles/themes.ts b/front/src/layout/styles/themes.ts index fd8f3fba8..ed6a692a1 100644 --- a/front/src/layout/styles/themes.ts +++ b/front/src/layout/styles/themes.ts @@ -42,7 +42,7 @@ const lightThemeSpecific = { yellow: '#cc660a', }; -const darkThemeSpecific = { +const darkThemeSpecific: typeof lightThemeSpecific = { noisyBackground: '#191919 url(data:image/png;base64,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);', primaryBackground: '#141414',