convert missing pxs to rem

ui/src/components/button/index.js

@@ -1,9 +1,5 @@
-import {
-  Baseline,
-  typography,
-  paperEffect
-} from '../../shared/composers';
 import { colors, boxes } from '../../shared/constants';
+import { Baseline, typography, paperEffect } from '../../shared/composers';
 import { remcalc } from '../../shared/functions';
 import isString from 'lodash.isstring';
 import match from '../../shared/match';
@@ -140,7 +136,7 @@ const StyledButton = styled.button`
   // Need to use HTML element selector, as adjecent buttons may have
   // different class names if they are primary/secondary/disabled
   & + button {
-    margin-left: 20px;
+    margin-left: ${remcalc(20)};
   }
 `;
 

ui/src/components/colors/story.js

@@ -6,18 +6,18 @@ import Column from '../column';
 import Row from '../row';
 
 const StyledWrapper = styled.div`
-  margin-left: 20px;
-  margin-bottom: 20px;
-  border: solid 1px ${colors.base.grey};
-  padding: 18px;
+  margin-left: ${remcalc(20)};
+  margin-bottom: ${remcalc(20)};
+  border: solid ${remcalc(1)} ${colors.base.grey};
+  padding: ${remcalc(18)};
 
 `;
 
 const Square = styled.div`
   display: inline-block;
-  border: solid 1px ${colors.base.grey};
+  border: solid ${remcalc(1)} ${colors.base.grey};
   width: 100%;
-  height: 100px;
+  height: ${remcalc(100)};
 `;
 
 const StyledP = styled.p`

ui/src/components/horizontal-list/li.js

@@ -18,7 +18,7 @@ const Li = styled.li`
     &.active {
       cursor: default;
       color: ${colors.base.primary};
-      border-bottom: 2px solid ${colors.base.primary};
+      border-bottom: ${remcalc(2)} solid ${colors.base.primary};
     }
   }
 `;

ui/src/components/metric/full/select.js

@@ -10,13 +10,13 @@ const SelectWrapper = styled.div`
   text-align: right !important;
 
   &:after {
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-top: 5px solid ${colors.base.white};
+    border-left: ${remcalc(5)} solid transparent;
+    border-right: ${remcalc(5)} solid transparent;
+    border-top: ${remcalc(5)} solid ${colors.base.white};
 
     ${pseudoEl({
-      top: '28px',
-      right: '18px'
+      top: remcalc(28),
+      right: remcalc(18)
     })}
   }
 `;
@@ -24,7 +24,7 @@ const SelectWrapper = styled.div`
 const StyledSelect = styled.select`
   padding: ${remcalc(18)} ${remcalc(24)};
   min-width: ${remcalc(154)};
-  font-size:16px;
+  font-size: ${remcalc(16)};
   text-align: right !important;
   border-radius: 0;
   color: ${colors.base.white};

ui/src/components/metric/full/view.js

@@ -11,7 +11,7 @@ const Container = styled.div`
   width: 100%;
   max-width: ${remcalc(940)};
   box-shadow: ${boxes.bottomShaddow};
-  border: 1px solid ${colors.base.grey};
+  border: ${remcalc(1)} solid ${colors.base.grey};
   background-color: ${colors.base.white};
 `;
 

ui/src/components/table-data-table/table-head.js

@@ -15,7 +15,7 @@ const StyledTableHeadItem = styled.td`
 
 const StyledTableHead = styled.thead`
   background: #fafafa;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 ${remcalc(2)}; 0 0 rgba(0, 0, 0, 0.05);
   border: solid ${remcalc(1)} ${colors.base.grey};
 
   ${breakpoints.smallOnly`

ui/src/components/table-simple-table/table-body.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import React from 'react';
 
 const StyledTableBody = styled.article`
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05);
   ${clearfix}
 `;
 

ui/src/components/table-simple-table/table-head.js

@@ -5,7 +5,7 @@ import React from 'react';
 
 const StyledTableHead = styled.header`
   background: #fafafa;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05);
   padding: ${remcalc(24)} 0;
 
   ${clearfix}

ui/src/components/table-simple-table/table-row.js

@@ -8,7 +8,7 @@ const StyledTableRow = styled.div`
   ${clearfix}
 
   padding: ${remcalc(24)} 0;
-  border-bottom: solid 1px ${colors.base.grey};
+  border-bottom: solid ${remcalc(1)} ${colors.base.grey};
 
   & > .table-item {
     text-align: center;

ui/src/components/table-simple-table/table.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import React from 'react';
 
 const StyledTableWrapper = styled.section`
-  border: solid 1px ${colors.base.grey}
+  border: solid ${remcalc(1)} ${colors.base.grey}
   font-family: 'LibreFranklin', sans-serif;
 	font-style: normal;
 `;

ui/src/components/tabs/tab/index.js

@@ -36,7 +36,7 @@ const StyledLabel = styled.label`
   font-size: ${remcalc(20)};
   margin: 0 0.5rem 0 0;
   vertical-align: bottom;
-  box-shadow: inset ${remcalc(2)} -6px 10px 0px rgba(0,0,0,0.06);
+  box-shadow: inset ${remcalc(2)} ${remcalc(-6)} ${remcalc(10)} 0 rgba(0,0,0,0.06);
 `;
 
 const StyledPanel = styled.div`

ui/src/components/tooltip/index.js

@@ -30,7 +30,8 @@ const StyledList = styled.ul`
   /*min-width: ${remcalc(200)};*/
 
   position: absolute;
-  top: 4px;
+  top: ${remcalc(4)};
+
   ${(props) => {
     return props.arrowPosition.left ?
       `left: -${getMeasurement(props.arrowPosition.left)}` :