convert every px measure into rem

frontend/src/components/header/index.js

@@ -23,10 +23,15 @@ const {
 const {
   remcalc
 } = fns;
+
 const {
   pseudoEl
 } = composers;
 
+const borderSide = props => props.toggled
+  ? 'bottom'
+  : 'top';
+
 const StyledHeader = styled.header`
   background-color: #ffffff;
   padding-top: ${remcalc(21)};
@@ -34,7 +39,7 @@ const StyledHeader = styled.header`
 `;
 
 const StyledLogo = styled.img`
-  padding-top: ${remcalc(10)}
+  padding-top: ${remcalc(10)};
 `;
 
 const StyledProfileWrapper = styled.div`
@@ -43,26 +48,26 @@ const StyledProfileWrapper = styled.div`
 
 const StyledAvatarWrapper = styled.div`
   &:after {
-    border-left: 5px solid transparent;
+    border-left: ${remcalc(5)} solid transparent;
-    border-right: 5px solid transparent;
+    border-right: ${remcalc(5)} solid transparent;
-    border-${props => props.toggled ? 'bottom' : 'top'}: 5px solid black;
+    border-${borderSide}: ${remcalc(5)} solid black;
 
     ${pseudoEl({
       top: '50%',
-      right: '10px'
+      right: remcalc(10)
     })}
   }
 `;
 
 const StyledTooltipWrapper = styled.div`
   position: absolute;
-  left: -40px;
+  left: ${remcalc(-40)};
-  bottom: -180px;
+  bottom: ${remcalc(-180)};
 `;
 
 const StyledName = styled.span`
   position: relative;
-  top: -12px;
+  top: ${remcalc(-12)};
 `;
 
 const EmptyButton = styled.button`
@@ -71,7 +76,7 @@ const EmptyButton = styled.button`
 `;
 
 const StyledAvatar = styled(Avatar)`
-  marginLeft: 12px;
+  marginLeft: ${remcalc(12)};
 `;
 
 const arrowPosition = {

ui/src/components/add-metric/tile.js

@@ -28,7 +28,7 @@ const StyledTile = styled.div`
   width: ${remcalc(300)};
   height: ${remcalc(247)};
   box-shadow: ${boxes.bottomShaddow};
-  border: 1px solid ${colors.borderSecondary};
+  border: ${remcalc(1)} solid ${colors.borderSecondary};
   background-color: ${colors.brandSecondary};
 
   ${breakpoints.small`

ui/src/components/base/index.js

@@ -15,10 +15,10 @@ const {
 } = Styled;
 
 const {
-  generateFonts
+  generateFonts,
+  remcalc
 } = fncs;
 
-
 // The name that will be used in the 'font-family' property
 const fontFamilies = [
   'LibreFranklin'
@@ -156,7 +156,7 @@ module.exports = styled.div`
   }
 
   & figure {
-    margin: 1em 40px;
+    margin: 1em ${remcalc(40)};
   }
 
   & hr {
@@ -208,12 +208,12 @@ module.exports = styled.div`
   & [type="button"]:-moz-focusring,
   & [type="reset"]:-moz-focusring,
   & [type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
+    outline: ${remcalc(1)} dotted ButtonText;
   }
 
   & fieldset {
-    border: 1px solid #c0c0c0;
+    border: ${remcalc(1)} solid #c0c0c0;
-    margin: 0 2px;
+    margin: 0 ${remcalc(2)};
     padding: 0.35em 0.625em 0.75em;
   }
 
@@ -245,7 +245,7 @@ module.exports = styled.div`
 
   & [type="search"] {
     -webkit-appearance: textfield;
-    outline-offset: -2px;
+    outline-offset: ${remcalc(-2)};
   }
 
   & [type="search"]::-webkit-search-cancel-button,
@@ -302,7 +302,7 @@ module.exports = styled.div`
   & abbr[title],
   & abbr[data-original-title] {
     cursor: help;
-    border-bottom: 1px dotted ${typography.abbrBorderColor};
+    border-bottom: ${remcalc(1)} dotted ${typography.abbrBorderColor};
   }
 
   & address {
@@ -352,8 +352,8 @@ module.exports = styled.div`
     }
 
     &:focus {
-      outline: 5px auto -webkit-focus-ring-color;
+      outline: ${remcalc(5)} auto -webkit-focus-ring-color;
-      outline-offset: -2px;
+      outline-offset: ${remcalc(-2)};
     }
   }
 
@@ -444,8 +444,8 @@ module.exports = styled.div`
   }
 
   & button:focus {
-    outline: 1px dotted;
+    outline: ${remcalc(1)} dotted;
-    outline: 5px auto -webkit-focus-ring-color;
+    outline: ${remcalc(5)} auto -webkit-focus-ring-color;
   }
 
   & input,

ui/src/components/button/index.js

@@ -96,7 +96,7 @@ const style = css`
   background-image: none;
   background-color: ${background};
   border-radius: ${borderRadius};
-  border: solid 1px ${border};
+  border: solid ${remcalc(1)} ${border};
 
   box-shadow: ${boxes.bottomShaddow};
 
@@ -104,12 +104,12 @@ const style = css`
     outline: 0;
     text-decoration: none;
     background-color: ${background};
-    border: solid 1px ${border};
+    border: solid ${remcalc(1)} ${border};
   }
 
   &:hover {
     background-color: ${backgroundHover};
-    border: solid 1px ${borderHover};
+    border: solid ${remcalc(1)} ${borderHover};
   }
 
   &:active,
@@ -119,7 +119,7 @@ const style = css`
     outline: 0;
 
     background-color: ${backgroundActive};
-    border: solid 1px ${borderActive};
+    border: solid ${remcalc(1)} ${borderActive};
   }
 
   &[disabled] {

ui/src/components/checkbox/index.js

@@ -1,11 +1,16 @@
-const React = require('react');
 const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const React = require('react');
 const Styled = require('styled-components');
 
 const {
   boxes
 } = constants;
 
+const {
+  remcalc
+} = fns;
+
 const {
   default: styled,
 } = Styled;
@@ -26,8 +31,8 @@ const StyledInput = styled.input`
 const StyledLabel = styled.label`
   color: rgb(100, 100, 100);
   position: absolute;
-  width: 24px;
+  width: ${remcalc(24)};
-  height: 24px;
+  height: ${remcalc(24)};
   top: 0;
   border-radius: ${boxes.borderRadius};
   background-color: rgb(255, 255, 255);
@@ -38,12 +43,12 @@ const StyledLabel = styled.label`
     opacity: 0;
     content: '';
     position: absolute;
-    width: 9px;
+    width: ${remcalc(9)};
-    height: 4px;
+    height: ${remcalc(4)};
     background: transparent;
-    top: 7px;
+    top: ${remcalc(7)};
-    left: 7px;
+    left: ${remcalc(7)};
-    border: 3px solid #333;
+    border: ${remcalc(3)} solid #333;
     border-top: none;
     border-right: none;
     transform: rotate(-45deg);
@@ -57,8 +62,8 @@ const StyledLabel = styled.label`
 `;
 
 const StyledDiv = styled.div`
-  width: 24px;
+  width: ${remcalc(24)};
-  height: 24px;
+  height: ${remcalc(24)};
   position: relative;
 `;
 

ui/src/components/h1/index.js

@@ -15,5 +15,5 @@ module.exports = styled.h1`
   font-style: normal;
   font-stretch: normal;
   color: #364acd;
-  border-bottom: 1px solid #d8d8d8;
+  border-bottom: ${remcalc(1)} solid #d8d8d8;
 `;

ui/src/components/input/index.js

@@ -25,9 +25,9 @@ const {
 
 const successBakcground = css`
   background-color: ${colors.brandSecondary};
-  background-image: url("./input-confirm.svg");
+  background-image: url('./input-confirm.svg');
   background-repeat: no-repeat;
-  background-position: 98% 20px;
+  background-position: 98% ${remcalc(20)};
 `;
 
 const defaultBackground = css`
@@ -46,7 +46,7 @@ const InputField = styled.input`
   border-color: ${props => props.error ? colors.alert : 'auto'}
   color: ${props => props.error ? colors.alert : colors.fonts.semibold}
   display: block;
-  font-size: 16px;
+  font-size: ${remcalc(16)};
   padding: ${remcalc('15 18')};
   visibility: visible;
   width: 100%;

ui/src/components/list/header.js

@@ -20,7 +20,7 @@ const StyledItem = styled(Item)`
   position: absolute;
 
   background-color: ${colors.brandPrimary};
-  border: solid 1px ${colors.borderPrimary};
+  border: solid ${remcalc(1)} ${colors.borderPrimary};
   box-shadow: none;
 
   width: calc(100% + ${remcalc(2)});

ui/src/components/list/item.js

@@ -19,10 +19,10 @@ const {
 } = Styled;
 
 const paper = `
-  0 8px 0 -5px #fafafa,
+  0 ${remcalc(8)} 0 ${remcalc(-5)} #fafafa,
-  0 8px 1px -4px ${colors.borderSecondary},
+  0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.borderSecondary},
-  0 16px 0 -10px #fafafa,
+  0 ${remcalc(16)} 0 ${remcalc(-10)} #fafafa,
-  0 16px 1px -9px ${colors.borderSecondary};
+  0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.borderSecondary};
 `;
 
 const height = (props) => props.collapsed
@@ -52,7 +52,7 @@ const Item = styled(Row)`
   height: ${height};
   min-height: ${minHeight};
   box-shadow: ${shadow};
-  border: 1px solid ${colors.borderSecondary};
+  border: ${remcalc(1)} solid ${colors.borderSecondary};
   background-color: ${colors.brandSecondary};
   margin-bottom: ${marginBottom};
 `;

ui/src/components/list/options.js

@@ -27,7 +27,7 @@ const borderLeftColor = (props) => !props.fromHeader
 
 const Nav = styled.nav`
   flex: 0 0 ${remcalc(47)};
-  border-left: 1px solid ${borderLeftColor};
+  border-left: ${remcalc(1)} solid ${borderLeftColor};
 `;
 
 const StyledButton = styled(Button)`

ui/src/components/list/subtitle.js

@@ -35,7 +35,7 @@ const Span = styled.span`
   font-weight: normal;
   font-style: normal;
   font-stretch: normal;
-  font-size: 14px;
+  font-size: ${remcalc(14)};
   color: ${color};
 
   justify-content: flex-end;

ui/src/components/modal/index.js

@@ -1,3 +1,5 @@
+const fns = require('../../shared/functions');
+
 const constants = require('../../shared/constants');
 const React = require('react');
 const Styled = require('styled-components');
@@ -8,6 +10,10 @@ const {
   colors
 } = constants;
 
+const {
+  remcalc
+} = fns;
+
 const {
   default: styled
 } = Styled;
@@ -17,7 +23,7 @@ const StyledModal = styled.div`
   display: block;
   left: 50%;
   margin: 0 auto;
-  padding: 20px;
+  padding: ${remcalc(20)};
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);

ui/src/components/modal/story.js

@@ -1,9 +1,15 @@
-const React = require('react');
 const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const React = require('react');
+
 const {
   colors
 } = constants;
 
+const {
+  remcalc
+} = fns;
+
 const {
   storiesOf
 } = require('@kadira/storybook');
@@ -12,7 +18,7 @@ const Base= require('../base');
 const Modal = require('./');
 
 const _customCloseStyle = `
-  border: solid ${colors.alert} 5px;
+  border: solid ${colors.alert} ${remcalc(5)};
   border-radius: 50%;
 `;
 

ui/src/components/pagination/index.js

@@ -13,7 +13,8 @@ const {
 } = constants;
 
 const {
-  rndId
+  rndId,
+  remcalc
 } = fns;
 
 const {
@@ -36,12 +37,12 @@ const StyledLi = styled.li`
   cursor: pointer;
   display: flex;
   float: left;
-  height: 50px;
+  height: ${remcalc(50)};
   justify-content: center;
-  margin-right: 10px;
+  margin-right: ${remcalc(10)};
-  min-width: 50px;
+  min-width: ${remcalc(50)};
-  padding-left: 15px;
+  padding-left: ${remcalc(15)};
-  padding-right: 15px;
+  padding-right: ${remcalc(15)};
   position: relative;
 
   ${baseBox()}

ui/src/components/radio/index.js

@@ -46,12 +46,12 @@ const StyledSpan = styled.span`
   &::before {
     content: '';
     position: absolute;
-    width: 10px;
+    width: ${remcalc(10)};
-    height: 10px;
+    height: ${remcalc(10)};
-    box-shadow: 0 0 0 1px #646464;
+    box-shadow: 0 0 0 ${remcalc(1)} #646464;
-    border: 8px solid ${colors.brandInactive};
+    border: ${remcalc(8)} solid ${colors.brandInactive};
-    top: 5px;
+    top: ${remcalc(5)};
-    left: 5px;
+    left: ${remcalc(5)};
     border-radius: 100%;
   }
 

ui/src/components/range-slider/index.js

@@ -38,7 +38,7 @@ const rangeThumb = css`
   cursor: pointer;
   height: ${remcalc(24)};
   position: relative;
-  top: -10px;
+  top: ${remcalc(-10)};
   width: ${remcalc(36)};
 
   ${baseBox()}
@@ -46,7 +46,7 @@ const rangeThumb = css`
 
 const rangeLower = css`
   background: ${colors.brandPrimary};
-  height: 6px;
+  height: ${remcalc(6)};
 
   ${baseBox({
     radius: remcalc(50),
@@ -56,7 +56,7 @@ const rangeLower = css`
 
 const rangeUpper = css`
   background: #E6E6E6;
-  height: 6px;
+  height: ${remcalc(6)};
 
   ${baseBox({
     radius: remcalc(50)

ui/src/components/select/index.js

@@ -26,27 +26,27 @@ const SelectWrapper = styled.div`
   display: inline-block;
 
   &:after {
-    border-left: 5px solid transparent;
+    border-left: ${remcalc(5)} solid transparent;
-    border-right: 5px solid transparent;
+    border-right: ${remcalc(5)} solid transparent;
-    border-bottom: 5px solid black;
+    border-bottom: ${remcalc(5)} solid black;
 
     ${pseudoEl({
-      top: '25px',
+      top: remcalc(25),
-      right: '20px'
+      right: remcalc(20)
     })}
   }
 `;
 
 
 const StyledSelect = styled.select`
-  font-size:16px;
+  font-size: ${remcalc(16)};
   min-width: ${remcalc(288)};
   min-height: ${remcalc(54)};
-  border-radius: 4px;
+  border-radius: ${remcalc(4)};
   padding-left: ${remcalc(20)};
   background-color: #FFFFFF;
-  box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05);
-  border: solid 1px #D8D8D8;
+  border: solid ${remcalc(1)} #D8D8D8;
   -webkit-appearance: none;
 
   &:before {

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

@@ -34,9 +34,9 @@ const StyledTab = styled.div`
 
 const StyledRadio = styled.input`
   clip: rect(0 0 0 0);
-  height: 1px;
+  height: ${remcalc(1)};
   opacity: 0;
-  width: 1px;
+  width: ${remcalc(1)};
 
   ${moveZ({
     position: 'fixed',
@@ -61,7 +61,7 @@ const StyledRadio = styled.input`
 
 const StyledLabel = styled.label`
   background: transparent;
-  border: 1px solid #D8D8D8;
+  border: ${remcalc(1)} solid #D8D8D8;
   display: inline-block;
   font-size: ${remcalc(20)};
   padding: ${remcalc('12 25')};
@@ -81,7 +81,7 @@ const StyledContent = styled.div`
   background: ${colors.brandInactive};
   border: ${boxes.border.unchecked};
   box-sizing: border-box;
-  box-shadow: 0 -1px 26px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 ${remcalc(-1)} ${remcalc(26)} 0 rgba(0, 0, 0, 0.2);
   display: block;
   float: left;
   font-size: ${remcalc(16)};

ui/src/components/textarea/index.js

@@ -30,7 +30,7 @@ const InputField = styled.textarea`
   background: ${colors.brandSecondary};
   color: ${props => props.error ? colors.alert : colors.fonts.semibold}
   display: block;
-  font-size: 16px;
+  font-size: ${remcalc(16)};
   padding: ${remcalc('15 18')};
   visibility: visible;
   width: 100%;

ui/src/components/toggle/index.js

@@ -50,13 +50,12 @@ const StyledInput0 = styled.input`
                 transparent 50%,
                 ${colors.brandSecondary} 50%);
     background-position: left bottom;
-    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
+    box-shadow: inset ${remcalc(-7)} 0 ${remcalc(9)} ${remcalc(-7)} rgba(0,0,0,0.4);
 
     ${inputStyled}
   }
 
   &:checked {
-      
     & + span {
       background-position: right bottom;
     }
@@ -76,7 +75,6 @@ const StyledInput1 = styled.input`
   }
 
   &:checked {
-      
     & + span {
       background-position: left bottom;
     }

ui/src/components/tooltip/index.js

@@ -56,14 +56,14 @@ const StyledList = styled.ul`
   &:after {
     border-color: rgba(255, 255, 255, 0);
     border-bottom-color: #fff;
-    border-width: 10px;
+    border-width: ${remcalc(10)};
-    margin-left: -10px;
+    margin-left: ${remcalc(-10)};
   }
   &:before {
     border-color: rgba(216, 216, 216, 0);
     border-bottom-color: #d8d8d8;
-    border-width: 12px;
+    border-width: ${remcalc(12)};
-    margin-left: -12px;
+    margin-left: ${remcalc(-12)};
   }
 `;
 module.exports = ({

ui/src/components/topology/index.js

@@ -1,12 +1,17 @@
 const constants = require('../../shared/constants');
+const d3 = require('d3');
+const fns = require('../../shared/functions');
 const React = require('react');
 const Styled = require('styled-components');
-const d3 = require('d3');
 
 const {
   colors
 } = constants;
 
+const {
+  remcalc
+} = fns;
+
 const {
   default: styled
 } = Styled;
@@ -77,7 +82,7 @@ const StyledSVGContainer = styled.svg`
 
     .health, .health_warn {
       font-family: "Libre Franklin";
-      font-size: 12px;
+      font-size: ${remcalc(12)};
       font-weight: bold;
       font-style: normal;
       font-stretch: normal;
@@ -85,12 +90,12 @@ const StyledSVGContainer = styled.svg`
     }
 
     .health_warn {
-      font-size: 15px;
+      font-size: ${remcalc(15)};
     }
 
     .stat {
       font-family: "Libre Franklin";
-      font-size: 12px;
+      font-size: ${remcalc(12)};
       font-weight: normal;
       font-style: normal;
       font-stretch: normal;
@@ -99,7 +104,7 @@ const StyledSVGContainer = styled.svg`
 
     .node_statistics {
       font-family: "Libre Franklin";
-      font-size: 12px;
+      font-size: ${remcalc(12)};
       font-weight: normal;
       font-style: normal;
       font-stretch: normal;
@@ -113,7 +118,7 @@ const StyledSVGContainer = styled.svg`
 
     .primary, .secondary {
       font-family: "Libre Franklin";
-      font-size: 12px;
+      font-size: ${remcalc(12)};
       font-weight: normal;
       font-style: normal;
       font-stretch: normal;
@@ -122,7 +127,7 @@ const StyledSVGContainer = styled.svg`
 
     .info_text {
       font-family: "Libre Franklin";
-      font-size: 16px;
+      font-size: ${remcalc(16)};
       font-weight: 600;
       font-style: normal;
       font-stretch: normal;
@@ -177,7 +182,7 @@ class TopologyGraph extends React.Component {
       .selectAll('line')
       .data(graph.links)
       .enter().append('line')
-        .attr('stroke-width', '2px');
+        .attr('stroke-width', remcalc(12));
 
     // And svg group, to contain all of the attributes in @antonas' first prototype
     svg.selectAll('.node')
@@ -272,10 +277,10 @@ class TopologyGraph extends React.Component {
           .width + paddingLeft;
       })
       .attr('cy', '24')
-      .attr('stroke-width', '0px')
+      .attr('stroke-width', 0)
       .attr('fill', (d) =>
         d.id === 'Memcached' ? 'rgb(217, 77, 68)' : 'rgb(0,175,102)')
-      .attr('r', '9px');
+      .attr('r', remcalc(9));
 
     // An icon or label that exists within the circle, inside the infobox
     health.append('text')
@@ -298,7 +303,7 @@ class TopologyGraph extends React.Component {
     .attr('class', 'node')
       .attr('d', d)
       .attr('stroke', '#343434')
-      .attr('stroke-width', '1px')
+      .attr('stroke-width', remcalc(1))
       .attr('fill', '#464646');
 
     const html = stats
@@ -339,7 +344,7 @@ class TopologyGraph extends React.Component {
     .attr('class', 'node')
       .attr('d', topRoundedRect('0', '0', width, topHeight, radius))
       .attr('stroke', colors.topologyBackground)
-      .attr('stroke-width', '1px')
+      .attr('stroke-width', remcalc(1))
       .attr('fill', colors.brandSecondaryColor);
 
     const text = elm.append('g');

ui/src/components/topology/view.js

@@ -1,4 +1,5 @@
 const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
 const React = require('react');
 const Styled = require('styled-components');
 
@@ -6,12 +7,16 @@ const {
   colors
 } = constants;
 
+const {
+  remcalc
+} = fns;
+
 const {
   default: styled
 } = Styled;
 
 const TopologyView = styled.div`
-  border: 1px solid ${colors.borderSecondary};
+  border: ${remcalc(1)} solid ${colors.borderSecondary};
   background-color: ${colors.brandSecondary};
 `;
 

ui/src/components/widget/index.js

@@ -8,7 +8,8 @@ const {
 } = constants;
 
 const {
-  rndId
+  rndId,
+  remcalc
 } = fns;
 
 const {
@@ -40,7 +41,7 @@ const StyledInput = styled.input`
 
 const StyledContent = styled.div`
   border: ${boxes.border.unchecked};
-  border-radius: 4px;
+  border-radius: ${remcalc(4)};
   cursor: pointer;
   padding: remcalc(36);
 

ui/src/shared/constants/boxes.js

@@ -1,15 +1,18 @@
 const colors = require('./colors');
+const fns = require('../functions');
 
-const boxes = {
+const {
-  borderRadius: '4px',
+  remcalc
-  bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)',
+} = fns;
-  bottomShaddowDarker: '0 2px 0 0 rgba(0, 0, 0, 0.1)',
+
-  insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)',
+module.exports = {
+  borderRadius: remcalc(4),
+  bottomShaddow: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`,
+  bottomShaddowDarker: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`,
+  insetShaddow: `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`,
   border: {
-    checked: `1px solid ${colors.brandPrimary}`,
+    checked: `${remcalc(1)} solid ${colors.brandPrimary}`,
-    unchecked: `1px solid ${colors.borderSecondary}`,
+    unchecked: `${remcalc(1)} solid ${colors.borderSecondary}`,
-    confirmed: `1px solid ${colors.confirmation}`
+    confirmed: `${remcalc(1)} solid ${colors.confirmation}`
   }
 };
-
-module.exports = boxes;