From 3c6ee60e9ca41247cb9c18a9b2e7d855f81bd82d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maro=C5=A1=20=C5=A0pak?= Date: Tue, 11 Dec 2018 15:12:58 +0100 Subject: [PATCH 01/17] fix send button font-size --- src/views/Wallet/views/Account/Send/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/views/Wallet/views/Account/Send/index.js b/src/views/Wallet/views/Account/Send/index.js index 319a53b0..55796839 100644 --- a/src/views/Wallet/views/Account/Send/index.js +++ b/src/views/Wallet/views/Account/Send/index.js @@ -132,7 +132,6 @@ const ToggleAdvancedSettingsButton = styled(Button)` 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)}; From 42945c78c52f9a2fe30d28333157a1d9f159ae93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maro=C5=A1=20=C5=A0pak?= Date: Tue, 11 Dec 2018 15:16:36 +0100 Subject: [PATCH 02/17] use const font sizes instead of values --- src/components/DeviceHeader/index.js | 4 +-- src/components/Footer/index.js | 3 ++- src/components/Heading/index.js | 25 +++++++++---------- .../components/NotificationButton/index.js | 4 +-- src/components/modals/confirm/SignTx/index.js | 4 +-- src/config/variables.js | 5 ++++ src/support/styles/Tooltip.js | 5 ++-- src/support/styles/index.js | 5 ++-- .../components/BetaDisclaimer/index.js | 3 ++- .../Wallet/components/LeftNavigation/index.js | 5 ++-- 10 files changed, 36 insertions(+), 27 deletions(-) diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index f680d496..c393dfd8 100644 --- 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 } 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}; `; diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index 134a3f06..70a29bf9 100644 --- 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.SMALLER}; background: ${colors.LANDING}; color: ${colors.TEXT_SECONDARY}; padding: 22px 48px; diff --git a/src/components/Heading/index.js b/src/components/Heading/index.js index 426ffe5e..1746520b 100644 --- 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.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, - H2, - H3, - H4, -}; \ No newline at end of file + H1, H2, H3, H4, +}; diff --git a/src/components/Notification/components/NotificationButton/index.js b/src/components/Notification/components/NotificationButton/index.js index 4954f72a..bc34f262 100644 --- 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 } 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; diff --git a/src/components/modals/confirm/SignTx/index.js b/src/components/modals/confirm/SignTx/index.js index 4668979f..fd7becf5 100644 --- 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'; @@ -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}; `; diff --git a/src/config/variables.js b/src/config/variables.js index af2beb2e..1787f25d 100644 --- a/src/config/variables.js +++ b/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 = { diff --git a/src/support/styles/Tooltip.js b/src/support/styles/Tooltip.js index 34a602e8..5d5a4a88 100644 --- 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 } 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; \ No newline at end of file +export default tooltipStyles; diff --git a/src/support/styles/index.js b/src/support/styles/index.js index c85be567..42ccc0de 100644 --- 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_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; \ No newline at end of file +export default baseStyles; diff --git a/src/views/Landing/components/BetaDisclaimer/index.js b/src/views/Landing/components/BetaDisclaimer/index.js index 64177997..0cd071a7 100644 --- 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.SMALL}; `; const StyledButton = styled(Button)` diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index 0a46c36e..daba51c5 100644 --- 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.SMALLER}; display: inline-block; padding: 8px; height: auto; From b4e8bbd9f17a309d49eb410f9caa3ec419f36e87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maro=C5=A1=20=C5=A0pak?= Date: Tue, 11 Dec 2018 15:29:25 +0100 Subject: [PATCH 03/17] set base font size back to 14px --- src/support/styles/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/support/styles/index.js b/src/support/styles/index.js index 42ccc0de..5de2aabd 100644 --- a/src/support/styles/index.js +++ b/src/support/styles/index.js @@ -1,6 +1,5 @@ import { createGlobalStyle } from 'styled-components'; import colors from 'config/colors'; -import { FONT_SIZE } from 'config/variables'; import tooltipStyles from './Tooltip'; import animationStyles from './Animations'; @@ -12,7 +11,7 @@ const baseStyles = createGlobalStyle` position: relative; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; font-weight: 400; - font-size: ${FONT_SIZE.SMALL}; + font-size: 14px; color: ${colors.TEXT}; } From 29e7b9131075447186497383cf51d1663663e605 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maro=C5=A1=20=C5=A0pak?= Date: Tue, 11 Dec 2018 15:31:33 +0100 Subject: [PATCH 04/17] convert px to rem units --- src/config/variables.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/config/variables.js b/src/config/variables.js index 1787f25d..b7f33ff9 100644 --- a/src/config/variables.js +++ b/src/config/variables.js @@ -1,18 +1,18 @@ export const FONT_SIZE = { - 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', + SMALLEST: '0.7142rem', + SMALLER: '0.8571rem', + SMALL: '1rem', + BASE: '1.1428rem', + TOP_MENU: '1.2142rem', + WALLET_TITLE: '1.2857rem', + BIG: '1.5rem', + BIGGER: '2.2857rem', + BIGGEST: '2.5714rem', + H1: '1.2857rem', + H2: '1.1428rem', + H3: '14rem', + H4: '0.8571rem', + COUNTER: '0.7857rem', }; export const FONT_WEIGHT = { From f73ed1fdcc546158126aceb48db4295b953a6fb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maro=C5=A1=20=C5=A0pak?= Date: Tue, 11 Dec 2018 16:17:09 +0100 Subject: [PATCH 05/17] renamed font weights --- src/components/Button/index.js | 2 +- src/components/Notification/index.js | 2 +- src/components/Textarea/index.js | 2 +- src/components/inputs/Input/index.js | 2 +- src/components/modals/pin/Pin/components/Input/index.js | 2 +- src/config/variables.js | 8 ++++---- src/views/Landing/components/ConnectDevice/index.js | 2 +- src/views/Landing/views/InstallBridge/index.js | 2 +- src/views/Wallet/components/Title/index.js | 2 +- src/views/Wallet/views/Account/Send/index.js | 4 ++-- .../views/Account/Summary/components/Balance/index.js | 4 ++-- src/views/Wallet/views/Account/Summary/index.js | 2 +- 12 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/Button/index.js b/src/components/Button/index.js index cae9bcab..d2665209 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -23,7 +23,7 @@ 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-weight: ${FONT_WEIGHT.LIGHT}; cursor: pointer; background: ${colors.GREEN_PRIMARY}; color: ${colors.WHITE}; diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js index 35488cb9..1066a3a6 100644 --- a/src/components/Notification/index.js +++ b/src/components/Notification/index.js @@ -48,7 +48,7 @@ const Message = styled.div` const Title = styled.div` padding-bottom: 5px; padding-top: 1px; - font-weight: ${FONT_WEIGHT.BIGGER}; + font-weight: ${FONT_WEIGHT.SEMIBOLD}; `; const CloseClick = styled.div` diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index d83963df..3d006619 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -27,7 +27,7 @@ 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}; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index 4866b04c..6e49c691 100644 --- a/src/components/inputs/Input/index.js +++ b/src/components/inputs/Input/index.js @@ -40,7 +40,7 @@ const StyledInput = styled.input` line-height: 1.42857143; font-size: ${props => (props.isSmallText ? `${FONT_SIZE.SMALLER}` : `${FONT_SIZE.SMALL}`)}; - font-weight: ${FONT_WEIGHT.BASE}; + font-weight: ${FONT_WEIGHT.MEDIUM}; color: ${props => (props.color ? props.color : colors.TEXT)}; border-radius: 2px; diff --git a/src/components/modals/pin/Pin/components/Input/index.js b/src/components/modals/pin/Pin/components/Input/index.js index 029be6f7..2c674ef1 100644 --- a/src/components/modals/pin/Pin/components/Input/index.js +++ b/src/components/modals/pin/Pin/components/Input/index.js @@ -20,7 +20,7 @@ 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}; padding: 5px 31px 10px 20px; color: ${colors.TEXT_PRIMARY}; diff --git a/src/config/variables.js b/src/config/variables.js index b7f33ff9..8b0c9f12 100644 --- a/src/config/variables.js +++ b/src/config/variables.js @@ -16,10 +16,10 @@ export const FONT_SIZE = { }; export const FONT_WEIGHT = { - SMALLEST: '300', - SMALL: '400', - BASE: '500', - BIGGER: '600', + LIGHT: '300', + NORMAL: '400', + MEDIUM: '500', + SEMIBOLD: '600', }; export const FONT_FAMILY = { diff --git a/src/views/Landing/components/ConnectDevice/index.js b/src/views/Landing/components/ConnectDevice/index.js index a10d44c9..78d3cdc6 100644 --- a/src/views/Landing/components/ConnectDevice/index.js +++ b/src/views/Landing/components/ConnectDevice/index.js @@ -37,7 +37,7 @@ const ConnectTrezorWrapper = styled.div` animation: ${PULSATE} 1.3s ease-out infinite; color: ${colors.GREEN_PRIMARY}; font-size: ${FONT_SIZE.BASE}; - font-weight: ${FONT_WEIGHT.BASE}; + font-weight: ${FONT_WEIGHT.MEDIUM}; `; const Image = styled.img` diff --git a/src/views/Landing/views/InstallBridge/index.js b/src/views/Landing/views/InstallBridge/index.js index e648ae16..e22b4838 100644 --- a/src/views/Landing/views/InstallBridge/index.js +++ b/src/views/Landing/views/InstallBridge/index.js @@ -70,7 +70,7 @@ const Version = styled.span` border: 1px solid ${colors.GREEN_PRIMARY}; border-radius: 3px; font-size: ${FONT_SIZE.SMALL}; - font-weight: ${FONT_WEIGHT.SMALLEST}; + font-weight: ${FONT_WEIGHT.LIGHT}; margin-left: 24px; `; diff --git a/src/views/Wallet/components/Title/index.js b/src/views/Wallet/components/Title/index.js index 9745e1dc..edc7b1f4 100644 --- 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; `; diff --git a/src/views/Wallet/views/Account/Send/index.js b/src/views/Wallet/views/Account/Send/index.js index 55796839..d0389224 100644 --- a/src/views/Wallet/views/Account/Send/index.js +++ b/src/views/Wallet/views/Account/Send/index.js @@ -45,7 +45,7 @@ const SetMaxAmountButton = styled(Button)` justify-content: center; font-size: ${FONT_SIZE.SMALLER}; - font-weight: ${FONT_WEIGHT.SMALLEST}; + font-weight: ${FONT_WEIGHT.LIGHT}; color: ${colors.TEXT_SECONDARY}; border-radius: 0; @@ -127,7 +127,7 @@ 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)` diff --git a/src/views/Wallet/views/Account/Summary/components/Balance/index.js b/src/views/Wallet/views/Account/Summary/components/Balance/index.js index 318b60e0..dff913a7 100644 --- a/src/views/Wallet/views/Account/Summary/components/Balance/index.js +++ b/src/views/Wallet/views/Account/Summary/components/Balance/index.js @@ -52,7 +52,7 @@ const HideBalanceIconWrapper = styled.div` `; const FiatValue = styled.div` - font-weight: ${FONT_WEIGHT.BIGGER}; + font-weight: ${FONT_WEIGHT.SEMIBOLD}; font-size: ${FONT_SIZE.BIG}; margin: 7px 0; min-height: 25px; @@ -60,7 +60,7 @@ const FiatValue = styled.div` `; const FiatValueRate = styled.div` - font-weight: ${FONT_WEIGHT.BIGGER}; + font-weight: ${FONT_WEIGHT.SEMIBOLD}; font-size: ${FONT_SIZE.BASE}; min-height: 25px; margin: 7px 0; diff --git a/src/views/Wallet/views/Account/Summary/index.js b/src/views/Wallet/views/Account/Summary/index.js index dda8dfcc..c179f9c0 100644 --- a/src/views/Wallet/views/Account/Summary/index.js +++ b/src/views/Wallet/views/Account/Summary/index.js @@ -46,7 +46,7 @@ const AccountName = styled.div` const AccountTitle = styled.div` font-size: ${FONT_SIZE.WALLET_TITLE}; - font-weight: ${FONT_WEIGHT.BASE}; + font-weight: ${FONT_WEIGHT.MEDIUM}; color: ${colors.WALLET_TITLE}; `; From 530027f38bc994d5f871be5049b77e008c1c3db1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maro=C5=A1=20=C5=A0pak?= Date: Tue, 11 Dec 2018 16:23:56 +0100 Subject: [PATCH 06/17] fix incorrect h3 font size --- src/config/variables.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/config/variables.js b/src/config/variables.js index 8b0c9f12..c86eccbd 100644 --- a/src/config/variables.js +++ b/src/config/variables.js @@ -10,7 +10,7 @@ export const FONT_SIZE = { BIGGEST: '2.5714rem', H1: '1.2857rem', H2: '1.1428rem', - H3: '14rem', + H3: '1rem', H4: '0.8571rem', COUNTER: '0.7857rem', }; From 1ecce5487beee9c26acb85689fea53930cd05b1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maro=C5=A1=20=C5=A0pak?= Date: Tue, 11 Dec 2018 16:44:32 +0100 Subject: [PATCH 07/17] use FONT_WEIGHT const istead of values --- src/components/DeviceHeader/index.js | 4 ++-- .../Notification/components/NotificationButton/index.js | 4 ++-- src/components/modals/pin/Pin/components/Button/index.js | 3 ++- src/support/styles/index.js | 3 ++- src/views/Wallet/components/TopNavigationAccount/index.js | 4 ++-- 5 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index c393dfd8..57a27a5a 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -9,7 +9,7 @@ import { } from 'utils/device'; import TrezorImage from 'components/images/TrezorImage'; import colors from 'config/colors'; -import { FONT_SIZE } from 'config/variables'; +import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; const Wrapper = styled.div` position: relative; @@ -57,7 +57,7 @@ const Name = styled.div` text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - font-weight: 500; + font-weight: ${FONT_WEIGHT.MEDIUM}; color: ${colors.TEXT_PRIMARY}; `; diff --git a/src/components/Notification/components/NotificationButton/index.js b/src/components/Notification/components/NotificationButton/index.js index bc34f262..9f40b7ad 100644 --- 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, FONT_SIZE } from 'config/variables'; +import { TRANSITION, FONT_SIZE, FONT_WEIGHT } from 'config/variables'; type Props = { type: string; @@ -40,7 +40,7 @@ const Wrapper = styled.button` background: transparent; font-size: ${FONT_SIZE.SMALL}; position: relative; - font-weight: 300; + font-weight: ${FONT_WEIGHT.LIGHT}; cursor: pointer; color: ${props => getPrimaryColor(props.type)}; border: 1px solid ${props => getPrimaryColor(props.type)}; diff --git a/src/components/modals/pin/Pin/components/Button/index.js b/src/components/modals/pin/Pin/components/Button/index.js index 1a9529a8..d46be2a4 100644 --- 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_WEIGHT } from 'config/variables'; type Props = { onClick: () => void; @@ -16,7 +17,7 @@ const Wrapper = styled.button` margin-top: 15px; margin-left: 10px; font-size: 22px; - font-weight: 600; + font-weight: ${FONT_WEIGHT.SEMIBOLD}; color: ${colors.TEXT_PRIMARY}; border: 1px solid ${colors.DIVIDER}; background: ${colors.WHITE}; diff --git a/src/support/styles/index.js b/src/support/styles/index.js index 5de2aabd..0b445888 100644 --- 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}; } diff --git a/src/views/Wallet/components/TopNavigationAccount/index.js b/src/views/Wallet/components/TopNavigationAccount/index.js index cb53b541..ecbd0776 100644 --- 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; From 3e87ea98543bf2a54873395bb47d6f3f9c13ee79 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 12 Dec 2018 17:30:16 +0100 Subject: [PATCH 08/17] use standard button font size --- src/views/Wallet/views/Account/Send/ethereum/index.js | 1 - src/views/Wallet/views/Account/Send/ripple/index.js | 1 - 2 files changed, 2 deletions(-) diff --git a/src/views/Wallet/views/Account/Send/ethereum/index.js b/src/views/Wallet/views/Account/Send/ethereum/index.js index 4a97f416..3a3de6d3 100644 --- a/src/views/Wallet/views/Account/Send/ethereum/index.js +++ b/src/views/Wallet/views/Account/Send/ethereum/index.js @@ -132,7 +132,6 @@ const ToggleAdvancedSettingsButton = styled(Button)` 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)}; diff --git a/src/views/Wallet/views/Account/Send/ripple/index.js b/src/views/Wallet/views/Account/Send/ripple/index.js index f67de532..be3f9978 100644 --- a/src/views/Wallet/views/Account/Send/ripple/index.js +++ b/src/views/Wallet/views/Account/Send/ripple/index.js @@ -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)}; From 2958a6133be4ec78dc5c10fbb1804aaaffe716c1 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 12 Dec 2018 17:35:10 +0100 Subject: [PATCH 09/17] added comment with the old px units for reference --- src/config/variables.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/config/variables.js b/src/config/variables.js index c86eccbd..0022586b 100644 --- a/src/config/variables.js +++ b/src/config/variables.js @@ -1,3 +1,18 @@ +// 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: '0.7142rem', SMALLER: '0.8571rem', From 38810afc0787fe7ed58377c7123216f87f91fc02 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 12 Dec 2018 17:38:17 +0100 Subject: [PATCH 10/17] fix font weight --- src/views/Wallet/views/Account/Send/ethereum/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Wallet/views/Account/Send/ethereum/index.js b/src/views/Wallet/views/Account/Send/ethereum/index.js index 3a3de6d3..3306380f 100644 --- a/src/views/Wallet/views/Account/Send/ethereum/index.js +++ b/src/views/Wallet/views/Account/Send/ethereum/index.js @@ -127,7 +127,7 @@ 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)` From ace7868037a303a44732cb568aaa524ebb5380a1 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 13 Dec 2018 13:09:43 +0100 Subject: [PATCH 11/17] use default tooltip font size --- .../LeftNavigation/components/AccountMenu/index.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js index 24da4cdb..256e6e49 100644 --- a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js @@ -27,10 +27,6 @@ const Text = styled.span` color: ${colors.TEXT_SECONDARY}; `; -const TooltipContent = styled.div` - font-size: ${FONT_SIZE.SMALLEST}; -`; - const RowAccountWrapper = styled.div` width: 100%; display: flex; @@ -187,7 +183,7 @@ const AccountMenu = (props: Props) => { discoveryStatus = ( To add a new account, last account must have some transactions.} + content="To add a new account, last account must have some transactions." placement="bottom" > From e4d2b8ec026cd1ddc8c995d93537208c8c63d1d8 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 13 Dec 2018 13:27:55 +0100 Subject: [PATCH 12/17] changed FONT_SIZE.BASE to 1rem --- src/components/Button/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Button/index.js b/src/components/Button/index.js index d2665209..c0704b56 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -22,7 +22,7 @@ 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.LIGHT}; cursor: pointer; background: ${colors.GREEN_PRIMARY}; From e4d2a5ec72dc55630e9ce9cf4436e8bd4a856186 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 13 Dec 2018 13:29:46 +0100 Subject: [PATCH 13/17] Revert "changed FONT_SIZE.BASE to 1rem" This reverts commit e4d2b8ec026cd1ddc8c995d93537208c8c63d1d8. --- src/components/Button/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Button/index.js b/src/components/Button/index.js index c0704b56..d2665209 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -22,7 +22,7 @@ type Props = { const Wrapper = styled.button` padding: ${props => (props.icon ? '4px 24px 4px 15px' : '11px 24px')}; border-radius: 3px; - font-size: ${FONT_SIZE.BASE}; + font-size: ${FONT_SIZE.SMALL}; font-weight: ${FONT_WEIGHT.LIGHT}; cursor: pointer; background: ${colors.GREEN_PRIMARY}; From 3c6df77b04c71de4153df528b38a5b32401b6dbc Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 13 Dec 2018 13:42:52 +0100 Subject: [PATCH 14/17] changed FONT_SIZE.BASE to 1rem --- src/components/Button/index.js | 2 +- src/components/Checkbox/index.js | 2 +- src/components/DeviceHeader/index.js | 2 +- src/components/Footer/index.js | 2 +- src/components/Heading/index.js | 2 +- src/components/Link/index.js | 2 +- src/components/Loader/index.js | 2 +- .../components/NotificationButton/index.js | 2 +- src/components/Notification/index.js | 2 +- src/components/Paragraph/index.js | 4 ++-- src/components/Textarea/index.js | 4 ++-- src/components/inputs/Input/index.js | 4 ++-- src/components/modals/confirm/Address/index.js | 2 +- src/components/modals/confirm/SignTx/index.js | 2 +- src/components/modals/device/Duplicate/index.js | 4 ++-- .../modals/passphrase/Passphrase/index.js | 4 ++-- .../modals/pin/Pin/components/Input/index.js | 2 +- src/config/variables.js | 14 +++++++------- src/support/styles/Tooltip.js | 2 +- .../Landing/components/BetaDisclaimer/index.js | 2 +- .../Landing/components/ConnectDevice/index.js | 4 ++-- src/views/Landing/views/InstallBridge/index.js | 6 +++--- src/views/Wallet/components/Content/index.js | 4 ++-- .../LeftNavigation/components/AccountMenu/index.js | 10 +++++----- .../DeviceMenu/components/MenuItems/index.js | 2 +- .../LeftNavigation/components/Divider/index.js | 2 +- .../LeftNavigation/components/RowCoin/index.js | 2 +- .../Wallet/components/LeftNavigation/index.js | 2 +- .../Account/Send/components/AdvancedForm/index.js | 2 +- .../Wallet/views/Account/Send/ethereum/index.js | 4 ++-- .../Wallet/views/Account/Send/ripple/index.js | 2 +- .../Account/Summary/components/Balance/index.js | 8 ++++---- src/views/Wallet/views/FirmwareUpdate/index.js | 2 +- 33 files changed, 56 insertions(+), 56 deletions(-) diff --git a/src/components/Button/index.js b/src/components/Button/index.js index d2665209..c0704b56 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -22,7 +22,7 @@ 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.LIGHT}; cursor: pointer; background: ${colors.GREEN_PRIMARY}; diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js index d4bd4b0f..99059916 100644 --- 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 { diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index 57a27a5a..81250486 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -66,7 +66,7 @@ const Status = styled.div` text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - font-size: ${FONT_SIZE.SMALLER}; + font-size: ${FONT_SIZE.SMALL}; color: ${colors.TEXT_SECONDARY}; `; diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index 70a29bf9..a629b410 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -22,7 +22,7 @@ type Props = { const Wrapper = styled.div` width: 100%; - font-size: ${FONT_SIZE.SMALLER}; + font-size: ${FONT_SIZE.SMALL}; background: ${colors.LANDING}; color: ${colors.TEXT_SECONDARY}; padding: 22px 48px; diff --git a/src/components/Heading/index.js b/src/components/Heading/index.js index 1746520b..84e43280 100644 --- a/src/components/Heading/index.js +++ b/src/components/Heading/index.js @@ -24,7 +24,7 @@ const H2 = styled.h2` ${props => props.claim && css` - font-size: ${FONT_SIZE.BIGGEST}; + font-size: ${FONT_SIZE.HUGE}; padding-bottom: 24px; `}; `; diff --git a/src/components/Link/index.js b/src/components/Link/index.js index c36697ed..f6a62b84 100644 --- 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}; diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js index d4f8f4c4..0767765b 100644 --- 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)}; `; diff --git a/src/components/Notification/components/NotificationButton/index.js b/src/components/Notification/components/NotificationButton/index.js index 9f40b7ad..aaa1d707 100644 --- a/src/components/Notification/components/NotificationButton/index.js +++ b/src/components/Notification/components/NotificationButton/index.js @@ -38,7 +38,7 @@ const Wrapper = styled.button` padding: 12px 58px; border-radius: 3px; background: transparent; - font-size: ${FONT_SIZE.SMALL}; + font-size: ${FONT_SIZE.BASE}; position: relative; font-weight: ${FONT_WEIGHT.LIGHT}; cursor: pointer; diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js index 1066a3a6..144fb85a 100644 --- a/src/components/Notification/index.js +++ b/src/components/Notification/index.js @@ -42,7 +42,7 @@ 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` diff --git a/src/components/Paragraph/index.js b/src/components/Paragraph/index.js index 9c9a8374..6cbf366a 100644 --- 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}; `} `; diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index 3d006619..d65dfec8 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -28,7 +28,7 @@ const StyledTextarea = styled(Textarea)` color: ${colors.TEXT_PRIMARY}; background: ${colors.WHITE}; 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 +104,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)}; `; diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index 6e49c691..054e87a8 100644 --- a/src/components/inputs/Input/index.js +++ b/src/components/inputs/Input/index.js @@ -39,7 +39,7 @@ const StyledInput = styled.input` 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-size: ${props => (props.isSmallText ? `${FONT_SIZE.SMALL}` : `${FONT_SIZE.BASE}`)}; font-weight: ${FONT_WEIGHT.MEDIUM}; color: ${props => (props.color ? props.color : colors.TEXT)}; @@ -86,7 +86,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)}; `; diff --git a/src/components/modals/confirm/Address/index.js b/src/components/modals/confirm/Address/index.js index f47c18e9..d3b0f1cf 100644 --- 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}; `; diff --git a/src/components/modals/confirm/SignTx/index.js b/src/components/modals/confirm/SignTx/index.js index 354c046e..245b14b7 100644 --- a/src/components/modals/confirm/SignTx/index.js +++ b/src/components/modals/confirm/SignTx/index.js @@ -42,7 +42,7 @@ const StyledP = styled(P)` const Label = styled.div` padding-top: 5px; - font-size: ${FONT_SIZE.SMALLER}; + font-size: ${FONT_SIZE.SMALL}; color: ${colors.TEXT_SECONDARY}; `; diff --git a/src/components/modals/device/Duplicate/index.js b/src/components/modals/device/Duplicate/index.js index 03e5e007..78d3d5f8 100644 --- 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%; diff --git a/src/components/modals/passphrase/Passphrase/index.js b/src/components/modals/passphrase/Passphrase/index.js index 50ad67b4..0ad3a3f4 100644 --- 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; diff --git a/src/components/modals/pin/Pin/components/Input/index.js b/src/components/modals/pin/Pin/components/Input/index.js index 2c674ef1..fd35bd44 100644 --- a/src/components/modals/pin/Pin/components/Input/index.js +++ b/src/components/modals/pin/Pin/components/Input/index.js @@ -21,7 +21,7 @@ const StyledInput = styled.input` letter-spacing: 7px; width: 100%; 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; diff --git a/src/config/variables.js b/src/config/variables.js index 0022586b..e920877e 100644 --- a/src/config/variables.js +++ b/src/config/variables.js @@ -13,16 +13,16 @@ // H3: '14px', // H4: '12px', // COUNTER: '11px', + export const FONT_SIZE = { - SMALLEST: '0.7142rem', - SMALLER: '0.8571rem', - SMALL: '1rem', - BASE: '1.1428rem', + 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', - BIG: '1.5rem', - BIGGER: '2.2857rem', - BIGGEST: '2.5714rem', H1: '1.2857rem', H2: '1.1428rem', H3: '1rem', diff --git a/src/support/styles/Tooltip.js b/src/support/styles/Tooltip.js index 5d5a4a88..d12cf936 100644 --- a/src/support/styles/Tooltip.js +++ b/src/support/styles/Tooltip.js @@ -19,7 +19,7 @@ const tooltipStyles = css` .rc-tooltip-inner { padding: 8px 10px; color: ${colors.WHITE}; - font-size: ${FONT_SIZE.SMALLER}; + font-size: ${FONT_SIZE.SMALL}; line-height: 1.5; text-align: left; text-decoration: none; diff --git a/src/views/Landing/components/BetaDisclaimer/index.js b/src/views/Landing/components/BetaDisclaimer/index.js index 0cd071a7..61c54570 100644 --- a/src/views/Landing/components/BetaDisclaimer/index.js +++ b/src/views/Landing/components/BetaDisclaimer/index.js @@ -41,7 +41,7 @@ const ModalWindow = styled.div` const StyledP = styled(P)` padding: 10px 0px; - font-size: ${FONT_SIZE.SMALL}; + font-size: ${FONT_SIZE.BASE}; `; const StyledButton = styled(Button)` diff --git a/src/views/Landing/components/ConnectDevice/index.js b/src/views/Landing/components/ConnectDevice/index.js index 78d3cdc6..450c9f3f 100644 --- a/src/views/Landing/components/ConnectDevice/index.js +++ b/src/views/Landing/components/ConnectDevice/index.js @@ -36,7 +36,7 @@ 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.MEDIUM}; `; @@ -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 { diff --git a/src/views/Landing/views/InstallBridge/index.js b/src/views/Landing/views/InstallBridge/index.js index e22b4838..d2f7f3c0 100644 --- 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,7 +69,7 @@ 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.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; `; diff --git a/src/views/Wallet/components/Content/index.js b/src/views/Wallet/components/Content/index.js index 701f19eb..229802e9 100644 --- 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}; `; diff --git a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js index 256e6e49..3e500e3c 100644 --- a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js @@ -23,7 +23,7 @@ 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}; `; @@ -33,7 +33,7 @@ const RowAccountWrapper = styled.div` 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}; @@ -75,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}; @@ -83,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; @@ -93,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}; `; 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 e00c682e..4ebce664 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 @@ -17,7 +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}; diff --git a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js index 1d05a5ae..8f29337e 100644 --- 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` diff --git a/src/views/Wallet/components/LeftNavigation/components/RowCoin/index.js b/src/views/Wallet/components/LeftNavigation/components/RowCoin/index.js index 472f6d1a..68baf11d 100644 --- 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; diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index daba51c5..d64f559e 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -69,7 +69,7 @@ const Help = styled.div` const A = styled.a` color: ${colors.TEXT_SECONDARY}; - font-size: ${FONT_SIZE.SMALLER}; + font-size: ${FONT_SIZE.SMALL}; display: inline-block; padding: 8px; height: auto; diff --git a/src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js b/src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js index 93dafc4d..348a0263 100644 --- 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; `; diff --git a/src/views/Wallet/views/Account/Send/ethereum/index.js b/src/views/Wallet/views/Account/Send/ethereum/index.js index 3306380f..5e53d918 100644 --- 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}; `; diff --git a/src/views/Wallet/views/Account/Send/ripple/index.js b/src/views/Wallet/views/Account/Send/ripple/index.js index be3f9978..010f9154 100644 --- 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}; diff --git a/src/views/Wallet/views/Account/Summary/components/Balance/index.js b/src/views/Wallet/views/Account/Summary/components/Balance/index.js index 64a4455f..960007b2 100644 --- a/src/views/Wallet/views/Account/Summary/components/Balance/index.js +++ b/src/views/Wallet/views/Account/Summary/components/Balance/index.js @@ -52,7 +52,7 @@ const HideBalanceIconWrapper = styled.div` const FiatValue = styled.div` 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}; @@ -60,7 +60,7 @@ const FiatValue = styled.div` const FiatValueRate = styled.div` 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}; `; diff --git a/src/views/Wallet/views/FirmwareUpdate/index.js b/src/views/Wallet/views/FirmwareUpdate/index.js index 3a1a34f6..9bbc9478 100644 --- 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` From 462205650d34f983e4eeca6c165be968caac40ed Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 13 Dec 2018 13:44:54 +0100 Subject: [PATCH 15/17] fix px font-size in modal pin button --- src/components/modals/pin/Pin/components/Button/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/modals/pin/Pin/components/Button/index.js b/src/components/modals/pin/Pin/components/Button/index.js index d46be2a4..5b592dc6 100644 --- a/src/components/modals/pin/Pin/components/Button/index.js +++ b/src/components/modals/pin/Pin/components/Button/index.js @@ -4,7 +4,7 @@ import * as React from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; import colors from 'config/colors'; -import { FONT_WEIGHT } from 'config/variables'; +import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; type Props = { onClick: () => void; @@ -16,7 +16,7 @@ const Wrapper = styled.button` height: 80px; margin-top: 15px; margin-left: 10px; - font-size: 22px; + font-size: ${FONT_SIZE.BIGGER}; font-weight: ${FONT_WEIGHT.SEMIBOLD}; color: ${colors.TEXT_PRIMARY}; border: 1px solid ${colors.DIVIDER}; From d5d59b32b8f6fe5208a3181d70282eb42fe5b6e2 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 13 Dec 2018 14:16:14 +0100 Subject: [PATCH 16/17] 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}; `; From 0623e1423e786d673151ea00fc81648d940258ec Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 13 Dec 2018 14:37:13 +0100 Subject: [PATCH 17/17] add missing TREZOR_ACTION const --- src/config/variables.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/config/variables.js b/src/config/variables.js index 5197a094..72d1afdd 100644 --- a/src/config/variables.js +++ b/src/config/variables.js @@ -66,4 +66,5 @@ export const TRANSITION = { export const LINE_HEIGHT = { SMALL: '1.42857143', BASE: '1.8', + TREZOR_ACTION: '37px', };