From d5d59b32b8f6fe5208a3181d70282eb42fe5b6e2 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Thu, 13 Dec 2018 14:16:14 +0100
Subject: [PATCH] line-height refactoring

---
 src/components/Textarea/index.js                         | 9 +++++++--
 src/components/inputs/Input/index.js                     | 5 +++--
 src/config/variables.js                                  | 2 +-
 src/support/styles/Tooltip.js                            | 4 ++--
 .../components/DeviceMenu/components/MenuItems/index.js  | 1 -
 5 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js
index d65dfec8..b0dbad2c 100644
--- a/src/components/Textarea/index.js
+++ b/src/components/Textarea/index.js
@@ -3,7 +3,12 @@ import Textarea from 'react-textarea-autosize';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import colors from 'config/colors';
-import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables';
+import {
+    FONT_SIZE,
+    FONT_WEIGHT,
+    LINE_HEIGHT,
+    FONT_FAMILY,
+} from 'config/variables';
 
 const Wrapper = styled.div`
     width: 100%;
@@ -130,7 +135,7 @@ const TrezorAction = styled.div`
     bottom: -25px;
     color: ${colors.WHITE};
     border-radius: 5px;
-    line-height: 37px;
+    line-height: ${LINE_HEIGHT.TREZOR_ACTION};
     z-index: 10002;
     transform: translate(-1px, -1px);
 `;
diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js
index 054e87a8..8fe3468a 100644
--- a/src/components/inputs/Input/index.js
+++ b/src/components/inputs/Input/index.js
@@ -7,6 +7,7 @@ import Icon from 'components/Icon';
 import {
     FONT_SIZE,
     FONT_WEIGHT,
+    LINE_HEIGHT,
     TRANSITION,
 } from 'config/variables';
 
@@ -38,7 +39,7 @@ const StyledInput = styled.input`
     height: ${props => (props.height ? `${props.height}px` : '40px')};
     padding: 5px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px;
 
-    line-height: 1.42857143;
+    line-height: ${LINE_HEIGHT.SMALL};
     font-size: ${props => (props.isSmallText ? `${FONT_SIZE.SMALL}` : `${FONT_SIZE.BASE}`)};
     font-weight: ${FONT_WEIGHT.MEDIUM};
     color: ${props => (props.color ? props.color : colors.TEXT)};
@@ -116,7 +117,7 @@ const TrezorAction = styled.div`
     background: black;
     color: ${colors.WHITE};
     border-radius: 5px;
-    line-height: 37px;
+    line-height: ${LINE_HEIGHT.TREZOR_ACTION};
     z-index: 10002;
     transform: translate(-1px, -1px);
 `;
diff --git a/src/config/variables.js b/src/config/variables.js
index e920877e..5197a094 100644
--- a/src/config/variables.js
+++ b/src/config/variables.js
@@ -64,6 +64,6 @@ export const TRANSITION = {
 };
 
 export const LINE_HEIGHT = {
-    SMALL: '1.4',
+    SMALL: '1.42857143',
     BASE: '1.8',
 };
diff --git a/src/support/styles/Tooltip.js b/src/support/styles/Tooltip.js
index d12cf936..0422a5fe 100644
--- a/src/support/styles/Tooltip.js
+++ b/src/support/styles/Tooltip.js
@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 import colors from 'config/colors';
-import { FONT_SIZE } from 'config/variables';
+import { FONT_SIZE, LINE_HEIGHT } from 'config/variables';
 
 const tooltipStyles = css`
     .rc-tooltip {
@@ -20,7 +20,7 @@ const tooltipStyles = css`
         padding: 8px 10px;
         color: ${colors.WHITE};
         font-size: ${FONT_SIZE.SMALL};
-        line-height: 1.5;
+        line-height: ${LINE_HEIGHT.SMALL};
         text-align: left;
         text-decoration: none;
         background-color: ${colors.TOOLTIP_BACKGROUND};
diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
index 4ebce664..53fc615b 100644
--- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
@@ -18,7 +18,6 @@ const Item = styled.div`
     display: flex;
     align-items: center;
     font-size: ${FONT_SIZE.BASE};
-    line-height: 24px;
     cursor: pointer;
     color: ${colors.TEXT_SECONDARY};    
 `;