From a315a9cff222e17114c2421a0bcb78318ee564a9 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 20 Jan 2017 14:23:19 +0000
Subject: [PATCH] starting to style data table

---
 .../components/table-data-table/table-head.js | 29 +++++++++++++++----
 .../components/table-data-table/table-row.js  | 19 ++++++++++--
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/table-data-table/table-head.js b/ui/src/components/table-data-table/table-head.js
index 2a46b547..15d4f26c 100644
--- a/ui/src/components/table-data-table/table-head.js
+++ b/ui/src/components/table-data-table/table-head.js
@@ -1,12 +1,31 @@
 const React = require('react');
 const Styled = require('styled-components');
 
+const fns = require('../../shared/functions');
+
+const {
+  remcalc
+} = fns;
+
 const {
   default: styled
 } = Styled;
 
 const StyledTableHeadItem = styled.td`
   ${props => `width: ${props.width}`}
+  padding-top: ${remcalc(24)};
+  padding-bottom: ${remcalc(24)};
+  border-bottom: none;
+`;
+
+const StyledTableHead = styled.thead`
+  background: #fafafa;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+`;
+
+const StyledTableHeadRow = styled.tr`
+  border-left: solid ${remcalc(24)} transparent;
+  border-right: solid ${remcalc(24)} transparent;
 `;
 
 const TableHeader = ({
@@ -28,16 +47,16 @@ const TableHeader = ({
   });
 
   return (
-    <thead>
-      <tr>
+    <StyledTableHead>
+      <StyledTableHeadRow>
         {titles}
-      </tr>
-    </thead>
+      </StyledTableHeadRow>
+    </StyledTableHead>
   );
 };
 
 TableHeader.propTypes = {
-  columns: React.PropTypes.object
+  columns: React.PropTypes.array
 };
 
 module.exports = TableHeader;
\ No newline at end of file
diff --git a/ui/src/components/table-data-table/table-row.js b/ui/src/components/table-data-table/table-row.js
index 34dc65d4..83f05a40 100644
--- a/ui/src/components/table-data-table/table-row.js
+++ b/ui/src/components/table-data-table/table-row.js
@@ -1,4 +1,19 @@
 const React = require('react');
+const Styled = require('styled-components');
+
+const fns = require('../../shared/functions');
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const StyledRow = styled.tr`
+  border: solid ${remcalc(1)} #d8d8d8;
+`;
 
 const Row = ({
   dataItem = {}
@@ -12,9 +27,9 @@ const Row = ({
   });
 
   return (
-    <tr>
+    <StyledRow>
       {rowItems}
-    </tr>
+    </StyledRow>
   );
 };