line-height refactoring

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);
 `;

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);
 `;

src/config/variables.js

@@ -64,6 +64,6 @@ export const TRANSITION = {
 };
 
 export const LINE_HEIGHT = {
-    SMALL: '1.4',
+    SMALL: '1.42857143',
     BASE: '1.8',
 };

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};

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};    
 `;