From 4a34bb48831839d44fae2d5a0451345988dc0f68 Mon Sep 17 00:00:00 2001
From: bia <get.bianca@gmail.com>
Date: Mon, 10 Dec 2018 19:09:19 +0100
Subject: [PATCH] fix: standardise spacing within Time Travel component

---
 src/components/TimeTravel/_RangeSelector.js     | 10 ++++++----
 src/components/TimeTravel/_TimelinePanButton.js |  6 ++++--
 src/components/TimeTravel/_TimestampInput.js    |  6 ++++--
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/TimeTravel/_RangeSelector.js b/src/components/TimeTravel/_RangeSelector.js
index ae7edaa3..dee5a46f 100644
--- 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
index 01639955..f305ae20 100644
--- 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
index 79a3aba7..dee51d3c 100644
--- 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;