Merge pull request #275 from trezor/fonts-refactoring

Fonts refactoring

src/components/Button/index.js

@@ -22,8 +22,8 @@ type Props = {
 const Wrapper = styled.button`
     padding: ${props => (props.icon ? '4px 24px 4px 15px' : '11px 24px')};
     border-radius: 3px;
-    font-size: ${FONT_SIZE.SMALL};
+    font-size: ${FONT_SIZE.BASE};
-    font-weight: ${FONT_WEIGHT.SMALLEST};
+    font-weight: ${FONT_WEIGHT.LIGHT};
     cursor: pointer;
     background: ${colors.GREEN_PRIMARY};
     color: ${colors.WHITE};

src/components/Checkbox/index.js

@@ -54,7 +54,7 @@ const Label = styled.div`
     padding-left: 10px;
     justify-content: center;
     ${colors.TEXT_SECONDARY};
-    font-size: ${FONT_SIZE.SMALL};
+    font-size: ${FONT_SIZE.BASE};
 
     &:hover,
     &:focus {

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, FONT_WEIGHT } from 'config/variables';
 
 const Wrapper = styled.div`
     position: relative;
@@ -56,8 +57,7 @@ const Name = styled.div`
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    font-weight: 500;
+    font-weight: ${FONT_WEIGHT.MEDIUM};
-    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.SMALL};
     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.SMALL};
     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.HUGE};
-    `}
+            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/Link/index.js

@@ -9,7 +9,7 @@ const A = styled.a`
     text-decoration: none;
     cursor: pointer;
     transition: ${TRANSITION.HOVER};
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
 
     ${props => props.isGreen && css`
         border-bottom: 1px solid ${colors.GREEN_PRIMARY};

src/components/Loader/index.js

@@ -37,7 +37,7 @@ const CircleWrapper = styled.circle`
 `;
 
 const StyledParagraph = styled(Paragraph)`
-    font-size: ${props => (props.isSmallText ? FONT_SIZE.SMALLER : FONT_SIZE.BASE)};
+    font-size: ${props => (props.isSmallText ? FONT_SIZE.SMALL : FONT_SIZE.BIG)};
     color: ${props => (props.isWhiteText ? colors.WHITE : colors.TEXT_PRIMARY)};
 `;
 

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, FONT_WEIGHT } from 'config/variables';
 
 type Props = {
     type: string;
@@ -38,9 +38,9 @@ const Wrapper = styled.button`
     padding: 12px 58px;
     border-radius: 3px;
     background: transparent;
-    font-size: 14px;
+    font-size: ${FONT_SIZE.BASE};
     position: relative;
-    font-weight: 300;
+    font-weight: ${FONT_WEIGHT.LIGHT};
     cursor: pointer;
     color: ${props => getPrimaryColor(props.type)};
     border: 1px solid ${props => getPrimaryColor(props.type)};

src/components/Notification/index.js

@@ -42,13 +42,13 @@ const Body = styled.div`
 
 const Message = styled.div`
     padding-bottom: 13px;
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
 `;
 
 const Title = styled.div`
     padding-bottom: 5px;
     padding-top: 1px;
-    font-weight: ${FONT_WEIGHT.BIGGER};
+    font-weight: ${FONT_WEIGHT.SEMIBOLD};
 `;
 
 const CloseClick = styled.div`

src/components/Paragraph/index.js

@@ -5,14 +5,14 @@ import colors from 'config/colors';
 import { FONT_SIZE, LINE_HEIGHT } from 'config/variables';
 
 const Wrapper = styled.p`
-    font-size: ${FONT_SIZE.BASE};
+    font-size: ${FONT_SIZE.BIG};
     line-height: ${LINE_HEIGHT.BASE};
     color: ${colors.TEXT_SECONDARY};
     padding: 0;
     margin: 0;
 
     ${props => props.isSmaller && css`
-        font-size: ${FONT_SIZE.SMALLER};
+        font-size: ${FONT_SIZE.SMALL};
     `}
 `;
 

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%;
@@ -27,8 +32,8 @@ const StyledTextarea = styled(Textarea)`
     font-family: ${FONT_FAMILY.MONOSPACE};
     color: ${colors.TEXT_PRIMARY};
     background: ${colors.WHITE};
-    font-weight: ${FONT_WEIGHT.BASE};
+    font-weight: ${FONT_WEIGHT.MEDIUM};
-    font-size: ${FONT_SIZE.SMALL};
+    font-size: ${FONT_SIZE.BASE};
     white-space: pre-wrap;       /* css-3 */
     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
     white-space: -pre-wrap;      /* Opera 4-6 */
@@ -104,7 +109,7 @@ const TopLabel = styled.span`
 `;
 
 const BottomText = styled.span`
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
     color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
 `;
 
@@ -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,9 +39,9 @@ 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.SMALLER}` : `${FONT_SIZE.SMALL}`)};
+    font-size: ${props => (props.isSmallText ? `${FONT_SIZE.SMALL}` : `${FONT_SIZE.BASE}`)};
-    font-weight: ${FONT_WEIGHT.BASE};
+    font-weight: ${FONT_WEIGHT.MEDIUM};
     color: ${props => (props.color ? props.color : colors.TEXT)};
 
     border-radius: 2px;
@@ -86,7 +87,7 @@ const StyledIcon = styled(Icon)`
 
 const BottomText = styled.span`
     margin-top: 10px;
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
     color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
 `;
 
@@ -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/components/modals/confirm/Address/index.js

@@ -27,7 +27,7 @@ const Content = styled.div`
 `;
 
 const Label = styled.div`
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
     color: ${colors.TEXT_SECONDARY};
 `;
 

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';
@@ -42,7 +42,7 @@ const StyledP = styled(P)`
 
 const Label = styled.div`
     padding-top: 5px;
-    font-size: 10px;
+    font-size: ${FONT_SIZE.SMALL};
     color: ${colors.TEXT_SECONDARY};
 `;
 

src/components/modals/device/Duplicate/index.js

@@ -61,14 +61,14 @@ const StyledButton = styled(Button)`
 const Label = styled.div`
     display: flex;
     text-align: left;
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
     flex-direction: column;
     padding-bottom: 5px;
 `;
 
 const ErrorMessage = styled.div`
     color: ${colors.ERROR_PRIMARY};
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
     padding-top: 5px;
     text-align: center;
     width: 100%;

src/components/modals/passphrase/Passphrase/index.js

@@ -37,7 +37,7 @@ const Wrapper = styled.div`
 
 const Label = styled.div`
     ${colors.TEXT_SECONDARY};
-    font-size: ${FONT_SIZE.SMALL};
+    font-size: ${FONT_SIZE.BASE};
     padding-bottom: 5px;
 `;
 
@@ -68,7 +68,7 @@ const LinkButton = styled(Button)`
     text-decoration: none;
     cursor: pointer;
     transition: ${TRANSITION.HOVER};
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
     border-radius: 0;
     border-bottom: 1px solid ${colors.GREEN_PRIMARY};
     background: transparent;

src/components/modals/pin/Pin/components/Button/index.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import colors from 'config/colors';
+import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 
 type Props = {
     onClick: () => void;
@@ -15,8 +16,8 @@ const Wrapper = styled.button`
     height: 80px;
     margin-top: 15px;
     margin-left: 10px;
-    font-size: 22px;
+    font-size: ${FONT_SIZE.BIGGER};
-    font-weight: 600;
+    font-weight: ${FONT_WEIGHT.SEMIBOLD};
     color: ${colors.TEXT_PRIMARY};
     border: 1px solid ${colors.DIVIDER};
     background: ${colors.WHITE};

src/components/modals/pin/Pin/components/Input/index.js

@@ -20,8 +20,8 @@ const Wrapper = styled.div`
 const StyledInput = styled.input`
     letter-spacing: 7px;
     width: 100%;
-    font-weight: ${FONT_WEIGHT.BIGGER};
+    font-weight: ${FONT_WEIGHT.SEMIBOLD};
-    font-size: ${FONT_SIZE.BIGGER};
+    font-size: ${FONT_SIZE.BIGGEST};
     padding: 5px 31px 10px 20px;
     color: ${colors.TEXT_PRIMARY};
     background: transparent;

src/config/variables.js

@@ -1,20 +1,40 @@
+//  OLD UNITS
+// SMALLEST: '10px',
+// SMALLER: '12px',
+// SMALL: '14px',
+// BASE: '16px',
+// TOP_MENU: '17px',
+// WALLET_TITLE: '18px',
+// BIG: '21px',
+// BIGGER: '32px',
+// BIGGEST: '36px',
+// H1: '18px',
+// H2: '16px',
+// H3: '14px',
+// H4: '12px',
+// COUNTER: '11px',
+
 export const FONT_SIZE = {
-    SMALLEST: '10px',
+    SMALL: '0.8571rem',
-    SMALLER: '12px',
+    BASE: '1rem',
-    SMALL: '14px',
+    BIG: '1.1428rem',
-    BASE: '16px',
+    BIGGER: '1.5rem',
-    TOP_MENU: '17px',
+    BIGGEST: '2.2857rem',
-    WALLET_TITLE: '18px',
+    HUGE: '2.5714rem',
-    BIG: '21px',
+    TOP_MENU: '1.2142rem',
-    BIGGER: '32px',
+    WALLET_TITLE: '1.2857rem',
-    BIGGEST: '36px',
+    H1: '1.2857rem',
+    H2: '1.1428rem',
+    H3: '1rem',
+    H4: '0.8571rem',
+    COUNTER: '0.7857rem',
 };
 
 export const FONT_WEIGHT = {
-    SMALLEST: '300',
+    LIGHT: '300',
-    SMALL: '400',
+    NORMAL: '400',
-    BASE: '500',
+    MEDIUM: '500',
-    BIGGER: '600',
+    SEMIBOLD: '600',
 };
 
 export const FONT_FAMILY = {
@@ -44,6 +64,7 @@ export const TRANSITION = {
 };
 
 export const LINE_HEIGHT = {
-    SMALL: '1.4',
+    SMALL: '1.42857143',
     BASE: '1.8',
+    TREZOR_ACTION: '37px',
 };

src/support/styles/Tooltip.js

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 import colors from 'config/colors';
+import { FONT_SIZE, LINE_HEIGHT } from 'config/variables';
 
 const tooltipStyles = css`
     .rc-tooltip {
@@ -18,8 +19,8 @@ const tooltipStyles = css`
     .rc-tooltip-inner {
         padding: 8px 10px;
         color: ${colors.WHITE};
-        font-size: 12px;
+        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/support/styles/index.js

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

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.BASE};
 `;
 
 const StyledButton = styled(Button)`

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

@@ -36,8 +36,8 @@ const ConnectTrezorWrapper = styled.div`
     top: 1px;
     animation: ${PULSATE} 1.3s ease-out infinite;
     color: ${colors.GREEN_PRIMARY};
-    font-size: ${FONT_SIZE.BASE};
+    font-size: ${FONT_SIZE.BIG};
-    font-weight: ${FONT_WEIGHT.BASE};
+    font-weight: ${FONT_WEIGHT.MEDIUM};
 `;
 
 const Image = styled.img`
@@ -58,7 +58,7 @@ const FooterText = styled.span`
 `;
 
 const StyledLink = styled(Link)`
-    font-size: ${FONT_SIZE.BASE};
+    font-size: ${FONT_SIZE.BIG};
 `;
 
 class ConnectDevice extends PureComponent<Props> {

src/views/Landing/views/InstallBridge/index.js

@@ -59,7 +59,7 @@ const Bottom = styled.div`
 
 const TitleHeader = styled(H1)`
     display: flex;
-    font-size: ${FONT_SIZE.BIGGEST};
+    font-size: ${FONT_SIZE.HUGE};
     justify-content: center;
     align-items: center;
 `;
@@ -69,8 +69,8 @@ const Version = styled.span`
     padding: 6px 10px;
     border: 1px solid ${colors.GREEN_PRIMARY};
     border-radius: 3px;
-    font-size: ${FONT_SIZE.SMALL};
+    font-size: ${FONT_SIZE.BASE};
-    font-weight: ${FONT_WEIGHT.SMALLEST};
+    font-weight: ${FONT_WEIGHT.LIGHT};
     margin-left: 24px;
 `;
 
@@ -109,7 +109,7 @@ const GoBack = styled.span`
 const Ol = styled.ul`
     margin: 0 auto;
     color: ${colors.TEXT_SECONDARY};
-    font-size: ${FONT_SIZE.BASE};
+    font-size: ${FONT_SIZE.BIG};
     padding: 10px 0 15px 25px;
     text-align: left;
 `;

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

@@ -21,13 +21,13 @@ const Loading = styled.div`
 `;
 
 const Text = styled.div`
-    font-size: ${FONT_SIZE.BIG};
+    font-size: ${FONT_SIZE.BIGGER};
     color: ${colors.TEXT_SECONDARY};
     margin-left: 10px;
 `;
 
 const Message = styled.div`
-    font-size: ${FONT_SIZE.SMALL};
+    font-size: ${FONT_SIZE.BASE};
     color: ${colors.TEXT_PRIMARY};
 `;
 

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

@@ -23,21 +23,17 @@ import RowCoin from '../RowCoin';
 const Wrapper = styled.div``;
 
 const Text = styled.span`
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
     color: ${colors.TEXT_SECONDARY};
 `;
 
-const TooltipContent = styled.div`
-    font-size: ${FONT_SIZE.SMALLEST};
-`;
-
 const RowAccountWrapper = styled.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding: ${LEFT_NAVIGATION_ROW.PADDING};
-    font-size: ${FONT_SIZE.SMALL};
+    font-size: ${FONT_SIZE.BASE};
     color: ${colors.TEXT_PRIMARY};
     border-left: ${BORDER_WIDTH.SELECTED} solid transparent;
     border-bottom: 1px solid ${colors.DIVIDER};
@@ -79,7 +75,7 @@ const DiscoveryStatusWrapper = styled.div`
     display: flex;
     flex-direction: column;
     width: 100%;
-    font-size: ${FONT_SIZE.SMALL};
+    font-size: ${FONT_SIZE.BASE};
     padding: ${LEFT_NAVIGATION_ROW.PADDING};
     white-space: nowrap;
     border-top: 1px solid ${colors.DIVIDER};
@@ -87,7 +83,7 @@ const DiscoveryStatusWrapper = styled.div`
 
 const DiscoveryStatusText = styled.div`
     display: block;
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
     color: ${colors.TEXT_SECONDARY};
     overflow: hidden;
     text-overflow: ellipsis;
@@ -97,7 +93,7 @@ const DiscoveryLoadingWrapper = styled.div`
     display: flex;
     align-items: center;
     padding: ${LEFT_NAVIGATION_ROW.PADDING};
-    font-size: ${FONT_SIZE.SMALL};
+    font-size: ${FONT_SIZE.BASE};
     white-space: nowrap;
     color: ${colors.TEXT_SECONDARY};
 `;
@@ -187,7 +183,7 @@ const AccountMenu = (props: Props) => {
             discoveryStatus = (
                 <Tooltip
                     maxWidth={200}
-                    content={<TooltipContent>To add a new account, last account must have some transactions.</TooltipContent>}
+                    content="To add a new account, last account must have some transactions."
                     placement="bottom"
                 >
                     <Row>

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

@@ -17,8 +17,7 @@ const Item = styled.div`
     padding: 4px 2px;
     display: flex;
     align-items: center;
-    font-size: ${FONT_SIZE.SMALL};
+    font-size: ${FONT_SIZE.BASE};
-    line-height: 24px;
     cursor: pointer;
     color: ${colors.TEXT_SECONDARY};    
 `;

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

@@ -9,7 +9,7 @@ const Wrapper = styled.div`
     display: flex;
     justify-content: space-between;
     padding: 8px 28px 8px 24px;
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
     color: ${colors.TEXT_SECONDARY};
     background: ${colors.LANDING};
     ${props => props.hasBorder && css`

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

@@ -18,7 +18,7 @@ const RowCoinWrapper = styled.div`
     padding: ${LEFT_NAVIGATION_ROW.PADDING};
     height: 50px;
     display: block;
-    font-size: ${FONT_SIZE.BASE};
+    font-size: ${FONT_SIZE.BIG};
     color: ${colors.TEXT_PRIMARY};
     transition: background-color 0.3s, color 0.3s;
     

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.SMALL};
     display: inline-block;
     padding: 8px;
     height: auto;

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

@@ -6,7 +6,7 @@ import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 
 const Wrapper = styled.div`
     font-size: ${FONT_SIZE.WALLET_TITLE};
-    font-weight: ${FONT_WEIGHT.BASE};
+    font-weight: ${FONT_WEIGHT.MEDIUM};
     color: ${colors.WALLET_TITLE};
     padding-bottom: 35px;
 `;

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

@@ -2,7 +2,7 @@
 
 import styled from 'styled-components';
 import React from 'react';
-import { FONT_SIZE } from 'config/variables';
+import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 import { NavLink } from 'react-router-dom';
 import colors from 'config/colors';
 
@@ -26,7 +26,7 @@ const Wrapper = styled.div`
 `;
 
 const StyledNavLink = styled(NavLink)`
-    font-weight: 500;
+    font-weight: ${FONT_WEIGHT.MEDIUM};
     font-size: ${FONT_SIZE.TOP_MENU};
     color: ${colors.TEXT_SECONDARY};
     margin: 0px 4px;

src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js

@@ -116,7 +116,7 @@ const Left = styled.div`
 const Right = styled.div`
     display: flex;
     flex-direction: row;
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
     cursor: pointer;
 `;
 

src/views/Wallet/views/Account/Send/ethereum/index.js

@@ -44,7 +44,7 @@ const SetMaxAmountButton = styled(Button)`
     align-items: center;
     justify-content: center;
 
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
     font-weight: ${FONT_WEIGHT.SMALLEST};
     color: ${colors.TEXT_SECONDARY};
 
@@ -99,7 +99,7 @@ const UpdateFeeWrapper = styled.span`
     margin-left: 8px;
     display: flex;
     align-items: center;
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
     color: ${colors.WARNING_PRIMARY};
 `;
 
@@ -127,12 +127,11 @@ const ToggleAdvancedSettingsButton = styled(Button)`
     padding: 0;
     display: flex;
     align-items: center;
-    font-weight: ${FONT_WEIGHT.BIGGER};
+    font-weight: ${FONT_WEIGHT.SEMIBOLD};
 `;
 
 const SendButton = styled(Button)`
     min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
-    font-size: 13px;
 
     @media screen and (max-width: ${SmallScreenWidth}) {
         margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)};

src/views/Wallet/views/Account/Send/ripple/index.js

@@ -30,7 +30,7 @@ const SetMaxAmountButton = styled(Button)`
     align-items: center;
     justify-content: center;
 
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
     font-weight: ${FONT_WEIGHT.SMALLEST};
     color: ${colors.TEXT_SECONDARY};
 
@@ -82,7 +82,6 @@ const ToggleAdvancedSettingsWrapper = styled.div`
 
 const SendButton = styled(Button)`
     min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
-    font-size: 13px;
 
     @media screen and (max-width: ${SmallScreenWidth}) {
         margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)};

src/views/Wallet/views/Account/Summary/components/Balance/index.js

@@ -51,16 +51,16 @@ const HideBalanceIconWrapper = styled.div`
 `;
 
 const FiatValue = styled.div`
-    font-weight: ${FONT_WEIGHT.BIGGER};
+    font-weight: ${FONT_WEIGHT.SEMIBOLD};
-    font-size: ${FONT_SIZE.BIG};
+    font-size: ${FONT_SIZE.BIGGER};
     margin: 7px 0;
     min-height: 25px;
     color: ${colors.TEXT_PRIMARY};
 `;
 
 const FiatValueRate = styled.div`
-    font-weight: ${FONT_WEIGHT.BIGGER};
+    font-weight: ${FONT_WEIGHT.SEMIBOLD};
-    font-size: ${FONT_SIZE.BASE};
+    font-size: ${FONT_SIZE.BIG};
     min-height: 25px;
     margin: 7px 0;
     display: flex;
@@ -77,12 +77,12 @@ const BalanceRateWrapper = styled(BalanceWrapper)`
 `;
 
 const CoinBalance = styled.div`
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
     color: ${colors.TEXT_SECONDARY};
 `;
 
 const Label = styled.div`
-    font-size: ${FONT_SIZE.SMALLER};
+    font-size: ${FONT_SIZE.SMALL};
     color: ${colors.TEXT_SECONDARY};
 `;
 

src/views/Wallet/views/FirmwareUpdate/index.js

@@ -37,7 +37,7 @@ const Wrapper = styled.section`
 const StyledNavLink = styled(Link)`
     color: ${colors.TEXT_SECONDARY};
     padding-top: 20px;
-    font-size: ${FONT_SIZE.SMALL};
+    font-size: ${FONT_SIZE.BASE};
 `;
 
 const Image = styled.div`