diff --git a/front/src/components/table/ClickableCell.tsx b/front/src/components/table/ClickableCell.tsx index a1ecb43af1..c57e020cab 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: ${(props) => props.theme.spacing(2)}; +`; + function ClickableCell({ href, children }: OwnProps) { - return {children}; + return ( + + {children} + + ); } export default ClickableCell; diff --git a/front/src/components/table/ColumnHead.tsx b/front/src/components/table/ColumnHead.tsx index 37d4c82288..7603036c7c 100644 --- a/front/src/components/table/ColumnHead.tsx +++ b/front/src/components/table/ColumnHead.tsx @@ -11,8 +11,7 @@ const StyledTitle = styled.div` display: flex; flex-direction: row; align-items: center; - height: 40px; - color: ${(props) => props.theme.text60}; + height: ${(props) => props.theme.spacing(8)}; 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..c504b21dc2 100644 --- a/front/src/components/table/Table.tsx +++ b/front/src/components/table/Table.tsx @@ -20,15 +20,27 @@ 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; + color: ${(props) => props.theme.text40}; + padding: 0; + border-top: 1px solid ${(props) => props.theme.tertiaryBackground}; + border-bottom: 1px solid ${(props) => props.theme.tertiaryBackground}; text-align: left; - padding: 11px 0 11px 4px; + :not(:last-child) { + border-right: 1px solid ${(props) => props.theme.tertiaryBackground}; + } + } + + td { + color: ${(props) => props.theme.text80}; + padding: 0; + border-bottom: 1px solid ${(props) => props.theme.tertiaryBackground}; + text-align: left; + :not(:last-child) { + border-right: 1px solid ${(props) => props.theme.tertiaryBackground}; + } } `; 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/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; `; 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', diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index edd55f15fe..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'; @@ -123,9 +125,11 @@ const columns = [ columnHelper.accessor('email', { header: () => , cell: (props) => ( - - {props.row.original.email} - + + + {props.row.original.email} + + ), }), columnHelper.accessor('company', { @@ -142,41 +146,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), - }), - columnHelper.accessor('pipe', { - header: () => , 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} + ), }), ];