Merge pull request #38 from twentyhq/cbo-table-styling

Improve Table Header style

front/src/components/table/ColumnHead.tsx

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+type OwnProps = {
+  viewName: string;
+  viewIcon?: IconProp;
+};
+
+const StyledTitle = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 40px;
+  color: ${(props) => props.theme.text60};
+  font-weight: 500;
+  padding-left: ${(props) => props.theme.spacing(2)};
+`;
+
+const StyledIcon = styled.div`
+  display: flex;
+  margin-right: ${(props) => props.theme.spacing(1)};
+`;
+
+function TableHeader({ viewName, viewIcon }: OwnProps) {
+  return (
+    <StyledTitle>
+      <StyledIcon>{viewIcon && <FontAwesomeIcon icon={viewIcon} />}</StyledIcon>
+      {viewName}
+    </StyledTitle>
+  );
+}
+
+export default TableHeader;

front/src/components/table/Table.tsx

@@ -32,6 +32,12 @@ const StyledTable = styled.table`
   }
 `;
 
+const StyledTableWithHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
 function Table({ data, columns, viewName, viewIcon }: OwnProps) {
   const table = useReactTable({
     data,
@@ -40,7 +46,7 @@ function Table({ data, columns, viewName, viewIcon }: OwnProps) {
   });
 
   return (
-    <div>
+    <StyledTableWithHeader>
       <TableHeader viewName={viewName} viewIcon={viewIcon} />
       <StyledTable>
         <thead>
@@ -92,7 +98,7 @@ function Table({ data, columns, viewName, viewIcon }: OwnProps) {
           </tfoot>
         )}
       </StyledTable>
-    </div>
+    </StyledTableWithHeader>
   );
 }
 

front/src/components/table/TableHeader.tsx

@@ -11,16 +11,47 @@ const StyledTitle = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 5px;
+  justify-content: space-between;
+  height: 40px;
   color: ${(props) => props.theme.text60};
   font-weight: 500;
+  padding-left: ${(props) => props.theme.spacing(2)};
+`;
+
+const StyledIcon = styled.div`
+  display: flex;
+  margin-right: ${(props) => props.theme.spacing(2)};
+`;
+
+const StyledViewSection = styled.div`
+  display: flex;
+`;
+
+const StyledFilters = styled.div`
+  display: flex;
+  font-weight: 400;
+  margin-right: ${(props) => props.theme.spacing(1)};
+`;
+
+const StyledFilterButton = styled.div`
+  display: flex;
+  margin-left: ${(props) => props.theme.spacing(4)};
 `;
 
 function TableHeader({ viewName, viewIcon }: OwnProps) {
   return (
     <StyledTitle>
-      {viewIcon && <FontAwesomeIcon icon={viewIcon} />}
+      <StyledViewSection>
+        <StyledIcon>
+          {viewIcon && <FontAwesomeIcon icon={viewIcon} size="lg" />}
+        </StyledIcon>
         {viewName}
+      </StyledViewSection>
+      <StyledFilters>
+        <StyledFilterButton>Filter</StyledFilterButton>
+        <StyledFilterButton>Sort</StyledFilterButton>
+        <StyledFilterButton>Settings</StyledFilterButton>
+      </StyledFilters>
     </StyledTitle>
   );
 }

front/src/pages/people/People.tsx

@@ -13,7 +13,7 @@ import { Pipe } from '../../interfaces/pipe.interface';
 import { createColumnHelper } from '@tanstack/react-table';
 import styled from '@emotion/styled';
 import CellLink from '../../components/table/CellLink';
-import TableHeader from '../../components/table/TableHeader';
+import ColumnHead from '../../components/table/ColumnHead';
 import personPlaceholder from './placeholder.png';
 import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
 
@@ -30,13 +30,11 @@ type Person = {
 };
 
 const StyledPeopleContainer = styled.div`
-  padding: 8px;
+  display: flex;
+  padding-left: ${(props) => props.theme.spacing(2)};
+  padding-right: ${(props) => props.theme.spacing(2)};
   width: 100%;
 
-  table {
-    margin-top: 8px;
-  }
-
   a {
     color: inherit;
     text-decoration: none;
@@ -105,7 +103,7 @@ const columnHelper = createColumnHelper<Person>();
 
 const columns = [
   columnHelper.accessor('fullName', {
-    header: () => <TableHeader viewName="People" viewIcon={faUser} />,
+    header: () => <ColumnHead viewName="People" viewIcon={faUser} />,
     cell: (props) => (
       <CellLink
         name={props.row.original.fullName}
@@ -115,7 +113,7 @@ const columns = [
     ),
   }),
   columnHelper.accessor('email', {
-    header: () => <TableHeader viewName="Email" viewIcon={faEnvelope} />,
+    header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
     cell: (props) => (
       <a href={`mailto:${props.row.original.email}`}>
         {props.row.original.email}
@@ -123,7 +121,7 @@ const columns = [
     ),
   }),
   columnHelper.accessor('company', {
-    header: () => <TableHeader viewName="Company" viewIcon={faBuildings} />,
+    header: () => <ColumnHead viewName="Company" viewIcon={faBuildings} />,
     cell: (props) => (
       <CellLink
         name={props.row.original.company.name}
@@ -133,7 +131,7 @@ const columns = [
     ),
   }),
   columnHelper.accessor('phone', {
-    header: () => <TableHeader viewName="Phone" viewIcon={faPhone} />,
+    header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
     cell: (props) => (
       <a
         href={parsePhoneNumber(
@@ -149,7 +147,7 @@ const columns = [
     ),
   }),
   columnHelper.accessor('creationDate', {
-    header: () => <TableHeader viewName="Creation" viewIcon={faCalendar} />,
+    header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
     cell: (props) =>
       new Intl.DateTimeFormat(undefined, {
         month: 'short',
@@ -158,7 +156,7 @@ const columns = [
       }).format(props.row.original.creationDate),
   }),
   columnHelper.accessor('pipe', {
-    header: () => <TableHeader viewName="Pipe" viewIcon={faRectangleList} />,
+    header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleList} />,
     cell: (props) => (
       <CellLink
         name={props.row.original.pipe.name}
@@ -168,7 +166,7 @@ const columns = [
     ),
   }),
   columnHelper.accessor('city', {
-    header: () => <TableHeader viewName="City" viewIcon={faMapPin} />,
+    header: () => <ColumnHead viewName="City" viewIcon={faMapPin} />,
   }),
 ];