Merge pull request #275 from trezor/fonts-refactoring

Fonts refactoring
6 years ago · 436723ae58
parent a6f798ee0a 0623e1423e
commit 436723ae58
38 changed files with 138 additions and 113 deletions
--- a/src/components/Button/index.js
+++ b/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-weight: ${FONT_WEIGHT.SMALLEST};
+    font-size: ${FONT_SIZE.BASE};
+    font-weight: ${FONT_WEIGHT.LIGHT};
    cursor: pointer;
    background: ${colors.GREEN_PRIMARY};
    color: ${colors.WHITE};
--- a/src/components/Checkbox/index.js
+++ b/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 {
--- a/src/components/DeviceHeader/index.js
+++ b/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-size: 14px;
+    font-weight: ${FONT_WEIGHT.MEDIUM};
    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};
 `;

--- a/src/components/Footer/index.js
+++ b/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;
--- a/src/components/Heading/index.js
+++ b/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`
-        font-size: 36px;
-        padding-bottom: 24px
-    `}
+    ${props => props.claim
+        && css`
+            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,
-    H2,
-    H3,
-    H4,
-};
+    H1, H2, H3, H4,
+};
--- a/src/components/Link/index.js
+++ b/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};
--- a/src/components/Loader/index.js
+++ b/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)};
 `;

--- a/src/components/Notification/components/NotificationButton/index.js
+++ b/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)};
--- a/src/components/Notification/index.js
+++ b/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`
--- a/src/components/Paragraph/index.js
+++ b/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};
    `}
 `;

--- 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%;
@ -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-size: ${FONT_SIZE.SMALL};
+    font-weight: ${FONT_WEIGHT.MEDIUM};
+    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);
 `;
--- 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,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;
-    font-size: ${props => (props.isSmallText ? `${FONT_SIZE.SMALLER}` : `${FONT_SIZE.SMALL}`)};
-    font-weight: ${FONT_WEIGHT.BASE};
+    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)};

    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);
 `;
--- a/src/components/modals/confirm/Address/index.js
+++ b/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};
 `;

--- a/src/components/modals/confirm/SignTx/index.js
+++ b/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};
 `;

--- a/src/components/modals/device/Duplicate/index.js
+++ b/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%;
--- a/src/components/modals/passphrase/Passphrase/index.js
+++ b/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;
--- a/src/components/modals/pin/Pin/components/Button/index.js
+++ b/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-weight: 600;
+    font-size: ${FONT_SIZE.BIGGER};
+    font-weight: ${FONT_WEIGHT.SEMIBOLD};
    color: ${colors.TEXT_PRIMARY};
    border: 1px solid ${colors.DIVIDER};
    background: ${colors.WHITE};
--- a/src/components/modals/pin/Pin/components/Input/index.js
+++ b/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-size: ${FONT_SIZE.BIGGER};
+    font-weight: ${FONT_WEIGHT.SEMIBOLD};
+    font-size: ${FONT_SIZE.BIGGEST};
    padding: 5px 31px 10px 20px;
    color: ${colors.TEXT_PRIMARY};
    background: transparent;
--- a/src/config/variables.js
+++ b/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',
-    SMALLER: '12px',
-    SMALL: '14px',
-    BASE: '16px',
-    TOP_MENU: '17px',
-    WALLET_TITLE: '18px',
-    BIG: '21px',
-    BIGGER: '32px',
-    BIGGEST: '36px',
+    SMALL: '0.8571rem',
+    BASE: '1rem',
+    BIG: '1.1428rem',
+    BIGGER: '1.5rem',
+    BIGGEST: '2.2857rem',
+    HUGE: '2.5714rem',
+    TOP_MENU: '1.2142rem',
+    WALLET_TITLE: '1.2857rem',
+    H1: '1.2857rem',
+    H2: '1.1428rem',
+    H3: '1rem',
+    H4: '0.8571rem',
+    COUNTER: '0.7857rem',
 };

 export const FONT_WEIGHT = {
-    SMALLEST: '300',
-    SMALL: '400',
-    BASE: '500',
-    BIGGER: '600',
+    LIGHT: '300',
+    NORMAL: '400',
+    MEDIUM: '500',
+    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',
 };
--- a/src/support/styles/Tooltip.js
+++ b/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;
-        line-height: 1.5;
+        font-size: ${FONT_SIZE.SMALL};
+        line-height: ${LINE_HEIGHT.SMALL};
        text-align: left;
        text-decoration: none;
        background-color: ${colors.TOOLTIP_BACKGROUND};
@ -160,4 +161,4 @@ const tooltipStyles = css`
    }
 `;

-export default tooltipStyles;
+export default tooltipStyles;
--- a/src/support/styles/index.js
+++ b/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};
    }
@ -73,4 +74,4 @@ const baseStyles = createGlobalStyle`
    ${tooltipStyles};
 `;

-export default baseStyles;
+export default baseStyles;
--- a/src/views/Landing/components/BetaDisclaimer/index.js
+++ b/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)`
--- a/src/views/Landing/components/ConnectDevice/index.js
+++ b/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-weight: ${FONT_WEIGHT.BASE};
+    font-size: ${FONT_SIZE.BIG};
+    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> {
--- a/src/views/Landing/views/InstallBridge/index.js
+++ b/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-weight: ${FONT_WEIGHT.SMALLEST};
+    font-size: ${FONT_SIZE.BASE};
+    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;
 `;
--- a/src/views/Wallet/components/Content/index.js
+++ b/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};
 `;

--- a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
+++ b/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>
--- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
+++ b/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};
-    line-height: 24px;
+    font-size: ${FONT_SIZE.BASE};
    cursor: pointer;
    color: ${colors.TEXT_SECONDARY};    
 `;
--- a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js
+++ b/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`
--- a/src/views/Wallet/components/LeftNavigation/components/RowCoin/index.js
+++ b/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;
    
--- a/src/views/Wallet/components/LeftNavigation/index.js
+++ b/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;
--- a/src/views/Wallet/components/Title/index.js
+++ b/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;
 `;
--- a/src/views/Wallet/components/TopNavigationAccount/index.js
+++ b/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;
--- a/src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js
+++ b/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;
 `;

--- a/src/views/Wallet/views/Account/Send/ethereum/index.js
+++ b/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)};
--- a/src/views/Wallet/views/Account/Send/index.js
+++ b/src/views/Wallet/views/Account/Send/index.js
@ -25,4 +25,4 @@ export default connect((state: State): BaseProps => ({
        default:
            return null;
    }
-});
+});
--- a/src/views/Wallet/views/Account/Send/ripple/index.js
+++ b/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)};
--- a/src/views/Wallet/views/Account/Summary/components/Balance/index.js
+++ b/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-size: ${FONT_SIZE.BIG};
+    font-weight: ${FONT_WEIGHT.SEMIBOLD};
+    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-size: ${FONT_SIZE.BASE};
+    font-weight: ${FONT_WEIGHT.SEMIBOLD};
+    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};
 `;

--- a/src/views/Wallet/views/FirmwareUpdate/index.js
+++ b/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`