fix: standardise spacing within Time Travel component

weaveworks · Dec 10, 2018 · 4a34bb4 · 4a34bb4
1 parent 3fb4810
commit 4a34bb4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/src/components/TimeTravel/_RangeSelector.js b/src/components/TimeTravel/_RangeSelector.js
@@ -3,7 +3,9 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-const HEIGHT_PX = 27;
+import { spacing } from '../../theme/selectors';
+
+const HEIGHT_PX = 29;
 
 const RangeSelectorWrapper = styled.div`
   border-left: 1px solid ${props => props.theme.colors.gray200};
@@ -13,7 +15,7 @@ const RangeSelectorWrapper = styled.div`
 const SelectedRangeWrapper = styled.div`
   background-color: transparent;
   cursor: pointer;
-  padding: 3px 8px;
+  padding: ${spacing('xxs')} ${spacing('xs')};
   display: flex;
   justify-content: space-between;
   line-height: 21px;
@@ -45,7 +47,7 @@ const CaretIconsContainer = styled.span`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-left: 8px;
+  margin-left: ${spacing('xs')};
 
   i {
     font-size: ${props => props.theme.fontSizes.tiny};
@@ -56,7 +58,7 @@ const CaretIconsContainer = styled.span`
 const RangeOption = styled.div`
   line-height: ${HEIGHT_PX}px;
   cursor: pointer;
-  padding: 0 8px;
+  padding: ${spacing('none')} ${spacing('xs')};
 
   &:hover {
     background-color: ${props => props.theme.colors.gray50};

diff --git a/src/components/TimeTravel/_TimelinePanButton.js b/src/components/TimeTravel/_TimelinePanButton.js
@@ -2,14 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
+import { spacing } from '../../theme/selectors';
+
 const PanButton = styled.button`
   background-color: transparent;
   color: ${props => props.theme.colors.purple400};
   font-size: ${props => props.theme.fontSizes.small};
   cursor: pointer;
   pointer-events: all;
-  padding: 5px 0;
-  margin: 0 5px;
+  padding: ${spacing('xxs')} 0;
+  margin: 0 ${spacing('xxs')};
   width: 20px;
   outline: 0;
   border: 0;

diff --git a/src/components/TimeTravel/_TimestampInput.js b/src/components/TimeTravel/_TimestampInput.js
@@ -4,10 +4,12 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import AutosizeInput from 'react-input-autosize';
 
+import { spacing } from '../../theme/selectors';
+
 const TimestampInputWrapper = styled.div`
   font-size: ${props => props.theme.fontSizes.small};
   align-items: baseline;
-  padding: 3px 8px;
+  padding: ${spacing('xxs')} ${spacing('xs')};
   pointer-events: all;
   opacity: 0.8;
   display: flex;
@@ -18,7 +20,7 @@ const TimestampInputContainer = styled(AutosizeInput)`
     font-size: ${props => props.theme.fontSizes.normal};
     font-family: ${props => props.theme.fontFamilies.monospace};
     background-color: transparent;
-    margin-right: 3px;
+    margin-right: ${spacing('xxs')};
     text-align: left;
     min-width: 195px;
     max-width: 300px;