use const font sizes instead of values

src/components/DeviceHeader/index.js

@@ -9,6 +9,7 @@ import {
 } from 'utils/device';
 import TrezorImage from 'components/images/TrezorImage';
 import colors from 'config/colors';
+import { FONT_SIZE } from 'config/variables';
 
 const Wrapper = styled.div`
     position: relative;
@@ -57,7 +58,6 @@ const Name = styled.div`
     overflow: hidden;
     white-space: nowrap;
     font-weight: 500;
-    font-size: 14px;
     color: ${colors.TEXT_PRIMARY};
 `;
 
@@ -66,7 +66,7 @@ const Status = styled.div`
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    font-size: 12px;
+    font-size: ${FONT_SIZE.SMALLER};
     color: ${colors.TEXT_SECONDARY};
 `;
 

src/components/Footer/index.js

@@ -9,6 +9,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import colors from 'config/colors';
+import { FONT_SIZE } from 'config/variables';
 import * as LogActions from 'actions/LogActions';
 
 declare var COMMITHASH: string;
@@ -21,7 +22,7 @@ type Props = {
 
 const Wrapper = styled.div`
     width: 100%;
-    font-size: 12px;
+    font-size: ${FONT_SIZE.SMALLER};
     background: ${colors.LANDING};
     color: ${colors.TEXT_SECONDARY};
     padding: 22px 48px;

src/components/Heading/index.js

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import colors from 'config/colors';
+import { FONT_SIZE } from 'config/variables';
 
 const baseStyles = css`
     -webkit-font-smoothing: antialiased;
@@ -12,36 +13,34 @@ const baseStyles = css`
 
 const H1 = styled.h1`
     ${baseStyles};
-    font-size: 18px;
+    font-size: ${FONT_SIZE.H1};
     padding-bottom: 10px;
 `;
 
 const H2 = styled.h2`
     ${baseStyles};
-    font-size: 16px;
+    font-size: ${FONT_SIZE.H2};
     padding-bottom: 10px;
 
-    ${props => props.claim && css`
+    ${props => props.claim
-        font-size: 36px;
+        && css`
-        padding-bottom: 24px
+            font-size: ${FONT_SIZE.BIGGEST};
-    `}
+            padding-bottom: 24px;
+        `};
 `;
 
 const H3 = styled.h3`
     ${baseStyles};
-    font-size: 14px;
+    font-size: ${FONT_SIZE.H3};
     margin-bottom: 10px;
 `;
 
 const H4 = styled.h4`
     ${baseStyles};
-    font-size: 12px;
+    font-size: ${FONT_SIZE.H4};
     padding-bottom: 10px;
 `;
 
 export {
-    H1,
+    H1, H2, H3, H4,
-    H2,
+};
-    H3,
-    H4,
-};

src/components/Notification/components/NotificationButton/index.js

@@ -7,7 +7,7 @@ import Icon from 'components/Icon';
 import colors from 'config/colors';
 import { getPrimaryColor, getSecondaryColor } from 'utils/notification';
 import Loader from 'components/Loader';
-import { TRANSITION } from 'config/variables';
+import { TRANSITION, FONT_SIZE } from 'config/variables';
 
 type Props = {
     type: string;
@@ -38,7 +38,7 @@ const Wrapper = styled.button`
     padding: 12px 58px;
     border-radius: 3px;
     background: transparent;
-    font-size: 14px;
+    font-size: ${FONT_SIZE.SMALL};
     position: relative;
     font-weight: 300;
     cursor: pointer;

src/components/modals/confirm/SignTx/index.js

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 
 import icons from 'config/icons';
 import colors from 'config/colors';
-import { LINE_HEIGHT } from 'config/variables';
+import { LINE_HEIGHT, FONT_SIZE } from 'config/variables';
 
 import P from 'components/Paragraph';
 import Icon from 'components/Icon';
@@ -43,7 +43,7 @@ const StyledP = styled(P)`
 
 const Label = styled.div`
     padding-top: 5px;
-    font-size: 10px;
+    font-size: ${FONT_SIZE.SMALLER};
     color: ${colors.TEXT_SECONDARY};
 `;
 

src/config/variables.js

@@ -8,6 +8,11 @@ export const FONT_SIZE = {
     BIG: '21px',
     BIGGER: '32px',
     BIGGEST: '36px',
+    H1: '18px',
+    H2: '16px',
+    H3: '14px',
+    H4: '12px',
+    COUNTER: '11px',
 };
 
 export const FONT_WEIGHT = {

src/support/styles/Tooltip.js

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 import colors from 'config/colors';
+import { FONT_SIZE } from 'config/variables';
 
 const tooltipStyles = css`
     .rc-tooltip {
@@ -18,7 +19,7 @@ const tooltipStyles = css`
     .rc-tooltip-inner {
         padding: 8px 10px;
         color: ${colors.WHITE};
-        font-size: 12px;
+        font-size: ${FONT_SIZE.SMALLER};
         line-height: 1.5;
         text-align: left;
         text-decoration: none;
@@ -160,4 +161,4 @@ const tooltipStyles = css`
     }
 `;
 
-export default tooltipStyles;
+export default tooltipStyles;

src/support/styles/index.js

@@ -1,5 +1,6 @@
 import { createGlobalStyle } from 'styled-components';
 import colors from 'config/colors';
+import { FONT_SIZE } from 'config/variables';
 
 import tooltipStyles from './Tooltip';
 import animationStyles from './Animations';
@@ -11,7 +12,7 @@ const baseStyles = createGlobalStyle`
         position: relative;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
         font-weight: 400;
-        font-size: 14px;
+        font-size: ${FONT_SIZE.SMALL};
         color: ${colors.TEXT};
     }
 
@@ -73,4 +74,4 @@ const baseStyles = createGlobalStyle`
     ${tooltipStyles};
 `;
 
-export default baseStyles;
+export default baseStyles;

src/views/Landing/components/BetaDisclaimer/index.js

@@ -7,6 +7,7 @@ import { bindActionCreators } from 'redux';
 
 import colors from 'config/colors';
 import icons from 'config/icons';
+import { FONT_SIZE } from 'config/variables';
 
 import Icon from 'components/Icon';
 import Button from 'components/Button';
@@ -40,7 +41,7 @@ const ModalWindow = styled.div`
 
 const StyledP = styled(P)`
     padding: 10px 0px;
-    font-size: 14px;
+    font-size: ${FONT_SIZE.SMALL};
 `;
 
 const StyledButton = styled(Button)`

src/views/Wallet/components/LeftNavigation/index.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import colors from 'config/colors';
+import { FONT_SIZE } from 'config/variables';
 import Icon from 'components/Icon';
 import WalletTypeIcon from 'components/images/WalletType';
 import icons from 'config/icons';
@@ -30,7 +31,7 @@ const Counter = styled.div`
     height: 24px;
     line-height: 22px;
     text-align: center;
-    font-size: 11px;
+    font-size: ${FONT_SIZE.COUNTER};
     margin-right: 8px;
 `;
 
@@ -68,7 +69,7 @@ const Help = styled.div`
 
 const A = styled.a`
     color: ${colors.TEXT_SECONDARY};
-    font-size: 12px;
+    font-size: ${FONT_SIZE.SMALLER};
     display: inline-block;
     padding: 8px;
     height: auto;