starting to style data table

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>
+    <StyledTableHead>
-      <tr>
+      <StyledTableHeadRow>
         {titles}
-      </tr>
+      </StyledTableHeadRow>
-    </thead>
+    </StyledTableHead>
   );
 };
 
 TableHeader.propTypes = {
-  columns: React.PropTypes.object
+  columns: React.PropTypes.array
 };
 
 module.exports = TableHeader;

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