Merge pull request #48 from twentyhq/sammy/t-101-i-see-a-more-compact-table-view-to-match

Sammy/t 101 i see a more compact table view to match

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 <Link to={href}>{children}</Link>;
+  return (
+    <Link to={href}>
+      <Container>{children}</Container>
+    </Link>
+  );
 }
 
 export default ClickableCell;

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)};
 `;

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};
+    }
   }
 `;
 

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`

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;
 `;
 

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',

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: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
     cell: (props) => (
-      <a href={`mailto:${props.row.original.email}`}>
-        {props.row.original.email}
-      </a>
+      <ClickableCell href="#">
+        <a href={`mailto:${props.row.original.email}`}>
+          {props.row.original.email}
+        </a>
+      </ClickableCell>
     ),
   }),
   columnHelper.accessor('company', {
@@ -142,41 +146,44 @@ const columns = [
   columnHelper.accessor('phone', {
     header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
     cell: (props) => (
-      <a
-        href={parsePhoneNumber(
-          props.row.original.phone,
-          props.row.original.countryCode as CountryCode,
-        )?.getURI()}
-      >
-        {parsePhoneNumber(
-          props.row.original.phone,
-          props.row.original.countryCode as CountryCode,
-        )?.formatInternational() || props.row.original.phone}
-      </a>
+      <ClickableCell href="#">
+        <a
+          href={parsePhoneNumber(
+            props.row.original.phone,
+            props.row.original.countryCode as CountryCode,
+          )?.getURI()}
+        >
+          {parsePhoneNumber(
+            props.row.original.phone,
+            props.row.original.countryCode as CountryCode,
+          )?.formatInternational() || props.row.original.phone}
+        </a>
+      </ClickableCell>
     ),
   }),
   columnHelper.accessor('creationDate', {
     header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
-    cell: (props) =>
-      new Intl.DateTimeFormat(undefined, {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
-      }).format(props.row.original.creationDate),
-  }),
-  columnHelper.accessor('pipe', {
-    header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleList} />,
     cell: (props) => (
       <ClickableCell href="#">
-        <CompanyChip
-          name={props.row.original.pipe.name}
-          picture={props.row.original.pipe.icon}
-        />
+        {new Intl.DateTimeFormat(undefined, {
+          month: 'short',
+          day: 'numeric',
+          year: 'numeric',
+        }).format(props.row.original.creationDate)}
       </ClickableCell>
     ),
   }),
+  columnHelper.accessor('pipe', {
+    header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleHistory} />,
+    cell: (props) => (
+      <ClickableCell href="#">{props.row.original.pipe.name}</ClickableCell>
+    ),
+  }),
   columnHelper.accessor('city', {
     header: () => <ColumnHead viewName="City" viewIcon={faMapPin} />,
+    cell: (props) => (
+      <ClickableCell href="#">{props.row.original.city}</ClickableCell>
+    ),
   }),
 ];