From 569b3182dd261ee9d2d0e181f7243d4c7997c771 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 20 Jan 2017 14:37:19 +0000
Subject: [PATCH] adding padding to td`s

---
 ui/src/components/table-data-table/table-head.js | 13 ++++---------
 ui/src/components/table-data-table/table-row.js  |  6 +++++-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/table-data-table/table-head.js b/ui/src/components/table-data-table/table-head.js
index 15d4f26c..6364b0f8 100644
--- a/ui/src/components/table-data-table/table-head.js
+++ b/ui/src/components/table-data-table/table-head.js
@@ -13,19 +13,14 @@ const {
 
 const StyledTableHeadItem = styled.td`
   ${props => `width: ${props.width}`}
-  padding-top: ${remcalc(24)};
-  padding-bottom: ${remcalc(24)};
   border-bottom: none;
+  padding: ${remcalc(24)};
 `;
 
 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;
+  border: solid ${remcalc(1)} #d8d8d8;
 `;
 
 const TableHeader = ({
@@ -48,9 +43,9 @@ const TableHeader = ({
 
   return (
     <StyledTableHead>
-      <StyledTableHeadRow>
+      <tr>
         {titles}
-      </StyledTableHeadRow>
+      </tr>
     </StyledTableHead>
   );
 };
diff --git a/ui/src/components/table-data-table/table-row.js b/ui/src/components/table-data-table/table-row.js
index 83f05a40..50e231e1 100644
--- a/ui/src/components/table-data-table/table-row.js
+++ b/ui/src/components/table-data-table/table-row.js
@@ -15,6 +15,10 @@ const StyledRow = styled.tr`
   border: solid ${remcalc(1)} #d8d8d8;
 `;
 
+const StyledTaleItem = styled.td`
+  padding: ${remcalc(24)};
+`;
+
 const Row = ({
   dataItem = {}
 }) => {
@@ -23,7 +27,7 @@ const Row = ({
   const rowItems = Object.keys(_dataItem).map( (item, i) => {
     const value = _dataItem[item];
 
-    return <td key={i}>{value}</td>;
+    return <StyledTaleItem key={i}>{value}</StyledTaleItem>;
   });
 
   return (