From a1aaac022588edf10489f35d1c4add2fb62bccfb Mon Sep 17 00:00:00 2001
From: Bram Vanhoutte <bram.vanhoutte.x@gmail.com>
Date: Sat, 25 Jul 2020 12:50:43 +0200
Subject: [PATCH] create basic styles

---
 src/components/Table/Table.module.css           |  2 ++
 .../Table/TableCell/TableCell.module.css        | 17 ++++++++++++++++-
 src/components/Table/TableCell/TableCell.tsx    | 11 ++++++++---
 .../Table/TableHeader/TableHeader.tsx           |  2 +-
 .../TableHeaderCell/TableHeaderCell.module.css  | 15 ++++++++++++++-
 .../Table/TableHeaderCell/TableHeaderCell.tsx   |  9 +++++++--
 .../Table/TableRow/TableRow.module.css          |  7 +++++++
 7 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/components/Table/Table.module.css b/src/components/Table/Table.module.css
index a62a8e02..09ba68a5 100644
--- a/src/components/Table/Table.module.css
+++ b/src/components/Table/Table.module.css
@@ -1,3 +1,5 @@
 .table {
   width: 100%;
+  border-collapse: separate;
+  border-spacing: 0 8px;
 }
diff --git a/src/components/Table/TableCell/TableCell.module.css b/src/components/Table/TableCell/TableCell.module.css
index 1ef5db35..f809ddcd 100644
--- a/src/components/Table/TableCell/TableCell.module.css
+++ b/src/components/Table/TableCell/TableCell.module.css
@@ -1,3 +1,18 @@
-cell {
+.cell {
+  text-align: left;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 14px;
+}
+
+.cell:hover ~ .cell {
+  background-color: var(--color-primary-hover);
+}
+
+.cell:first-child {
+  border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
+}
 
+.cell:last-child {
+  border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
 }
diff --git a/src/components/Table/TableCell/TableCell.tsx b/src/components/Table/TableCell/TableCell.tsx
index f3cbaa5a..c329b251 100644
--- a/src/components/Table/TableCell/TableCell.tsx
+++ b/src/components/Table/TableCell/TableCell.tsx
@@ -6,12 +6,17 @@ import styles from './TableCell.module.css';
 type Props = {
   className?: string;
   children?: React.ReactNode;
+  colSpan?: number;
 };
 
-const TableCell: React.FC<Props> = ({ className, children }: Props) => {
-  const tableClassNames = classNames(styles.cell, className);
+const TableCell: React.FC<Props> = ({ className, children, colSpan }: Props) => {
+  const tableClassNames = classNames(styles.cell, styles.row, className);
 
-  return <td className={tableClassNames}> {children} </td>;
+  return (
+    <td colSpan={colSpan} className={tableClassNames}>
+      {children}
+    </td>
+  );
 };
 
 export default TableCell;
diff --git a/src/components/Table/TableHeader/TableHeader.tsx b/src/components/Table/TableHeader/TableHeader.tsx
index c86f77cf..0c7e34cf 100644
--- a/src/components/Table/TableHeader/TableHeader.tsx
+++ b/src/components/Table/TableHeader/TableHeader.tsx
@@ -13,7 +13,7 @@ const TableHeader: React.FC<Props> = ({ className, children }: Props) => {
 
   return (
     <thead className={tableClassNames}>
-      <tr>{children}</tr>
+      <tr className={styles.headerRow}>{children}</tr>
     </thead>
   );
 };
diff --git a/src/components/Table/TableHeaderCell/TableHeaderCell.module.css b/src/components/Table/TableHeaderCell/TableHeaderCell.module.css
index 4d18098f..03da701b 100644
--- a/src/components/Table/TableHeaderCell/TableHeaderCell.module.css
+++ b/src/components/Table/TableHeaderCell/TableHeaderCell.module.css
@@ -1,3 +1,16 @@
-headerCell {
+.headerCell {
+  background-color: var(--color-primary-hover);
+  text-align: left;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 14px;
+  color: var(--font-color-sub)
+}
+
+.headerCell:first-child {
+  border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
+}
 
+.headerCell:last-child {
+  border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
 }
diff --git a/src/components/Table/TableHeaderCell/TableHeaderCell.tsx b/src/components/Table/TableHeaderCell/TableHeaderCell.tsx
index 4452d4df..60ea1d86 100644
--- a/src/components/Table/TableHeaderCell/TableHeaderCell.tsx
+++ b/src/components/Table/TableHeaderCell/TableHeaderCell.tsx
@@ -6,12 +6,17 @@ import styles from './TableHeaderCell.module.css';
 type Props = {
   className?: string;
   children?: React.ReactNode;
+  colSpan?: number;
 };
 
-const TableHeaderCell: React.FC<Props> = ({ className, children }: Props) => {
+const TableHeaderCell: React.FC<Props> = ({ className, children, colSpan }: Props) => {
   const tableHeaderCellClassNames = classNames(styles.headerCell, className);
 
-  return <th className={tableHeaderCellClassNames}> {children} </th>;
+  return (
+    <th colSpan={colSpan} className={tableHeaderCellClassNames}>
+      {children}
+    </th>
+  );
 };
 
 export default TableHeaderCell;
diff --git a/src/components/Table/TableRow/TableRow.module.css b/src/components/Table/TableRow/TableRow.module.css
index e69de29b..8ffa2f29 100644
--- a/src/components/Table/TableRow/TableRow.module.css
+++ b/src/components/Table/TableRow/TableRow.module.css
@@ -0,0 +1,7 @@
+.row:nth-of-type(even) td {
+  background-color: var(--color-primary);
+}
+
+.row:hover td {
+  background-color: var(--color-primary-hover);
+}