arno
/
trezor-wallet
mirror of https://github.com/trezor/trezor-wallet
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #275 from trezor/fonts-refactoring

Browse Source 
Fonts refactoring
pull/279/head
Vladimir Volek 6 years ago committed by GitHub
parent a6f798ee0a 0623e1423e
commit 436723ae58
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
38 changed files with 138 additions and 113 deletions
Show Stats Download Patch File Download Diff File

4
src/components/Button/index.js
Unescape View File

@ -22,8 +22,8 @@ type Props = {
const Wrapper = styled.button` const Wrapper = styled.button`
padding: ${props => (props.icon ? '4px 24px 4px 15px' : '11px 24px')}; padding: ${props => (props.icon ? '4px 24px 4px 15px' : '11px 24px')};
border-radius: 3px; 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; cursor: pointer;
background: ${colors.GREEN_PRIMARY}; background: ${colors.GREEN_PRIMARY};
color: ${colors.WHITE}; color: ${colors.WHITE};

2
src/components/Checkbox/index.js
Unescape View File

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

6
src/components/DeviceHeader/index.js
Unescape View File

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

3
src/components/Footer/index.js
Unescape View File

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

25
src/components/Heading/index.js
Unescape View File

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

2
src/components/Link/index.js
Unescape View File

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

2
src/components/Loader/index.js
Unescape View File

@ -37,7 +37,7 @@ const CircleWrapper = styled.circle`
`; `;
const StyledParagraph = styled(Paragraph)` 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)}; color: ${props => (props.isWhiteText ? colors.WHITE : colors.TEXT_PRIMARY)};
`; `;

6
src/components/Notification/components/NotificationButton/index.js
Unescape View File

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

4
src/components/Notification/index.js
Unescape View File

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

4
src/components/Paragraph/index.js
Unescape View File

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

15
src/components/Textarea/index.js
Unescape View File

@ -3,7 +3,12 @@ import Textarea from 'react-textarea-autosize';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import colors from 'config/colors'; 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` const Wrapper = styled.div`
width: 100%; width: 100%;
@ -27,8 +32,8 @@ const StyledTextarea = styled(Textarea)`
font-family: ${FONT_FAMILY.MONOSPACE}; font-family: ${FONT_FAMILY.MONOSPACE};
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
background: ${colors.WHITE}; 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: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */ white-space: -pre-wrap; /* Opera 4-6 */
@ -104,7 +109,7 @@ const TopLabel = styled.span`
`; `;
const BottomText = 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)}; color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
`; `;
@ -130,7 +135,7 @@ const TrezorAction = styled.div`
bottom: -25px; bottom: -25px;
color: ${colors.WHITE}; color: ${colors.WHITE};
border-radius: 5px; border-radius: 5px;
line-height: 37px; line-height: ${LINE_HEIGHT.TREZOR_ACTION};
z-index: 10002; z-index: 10002;
transform: translate(-1px, -1px); transform: translate(-1px, -1px);
`; `;

11
src/components/inputs/Input/index.js
Unescape View File

@ -7,6 +7,7 @@ import Icon from 'components/Icon';
import { import {
FONT_SIZE, FONT_SIZE,
FONT_WEIGHT, FONT_WEIGHT,
LINE_HEIGHT,
TRANSITION, TRANSITION,
} from 'config/variables'; } from 'config/variables';
@ -38,9 +39,9 @@ const StyledInput = styled.input`
height: ${props => (props.height ? `${props.height}px` : '40px')}; height: ${props => (props.height ? `${props.height}px` : '40px')};
padding: 5px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px; 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)}; color: ${props => (props.color ? props.color : colors.TEXT)};
border-radius: 2px; border-radius: 2px;
@ -86,7 +87,7 @@ const StyledIcon = styled(Icon)`
const BottomText = styled.span` const BottomText = styled.span`
margin-top: 10px; margin-top: 10px;
font-size: ${FONT_SIZE.SMALLER}; font-size: ${FONT_SIZE.SMALL};
color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)}; color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
`; `;
@ -116,7 +117,7 @@ const TrezorAction = styled.div`
background: black; background: black;
color: ${colors.WHITE}; color: ${colors.WHITE};
border-radius: 5px; border-radius: 5px;
line-height: 37px; line-height: ${LINE_HEIGHT.TREZOR_ACTION};
z-index: 10002; z-index: 10002;
transform: translate(-1px, -1px); transform: translate(-1px, -1px);
`; `;

2
src/components/modals/confirm/Address/index.js
Unescape View File

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

4
src/components/modals/confirm/SignTx/index.js
Unescape View File

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

4
src/components/modals/device/Duplicate/index.js
Unescape View File

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

4
src/components/modals/passphrase/Passphrase/index.js
Unescape View File

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

5
src/components/modals/pin/Pin/components/Button/index.js
Unescape View File

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

4
src/components/modals/pin/Pin/components/Input/index.js
Unescape View File

@ -20,8 +20,8 @@ const Wrapper = styled.div`
const StyledInput = styled.input` const StyledInput = styled.input`
letter-spacing: 7px; letter-spacing: 7px;
width: 100%; 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; padding: 5px 31px 10px 20px;
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
background: transparent; background: transparent;

49
src/config/variables.js
Unescape View File

@ -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 = { 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 = { export const FONT_WEIGHT = {
SMALLEST: '300', LIGHT: '300',
SMALL: '400', NORMAL: '400',
BASE: '500', MEDIUM: '500',
BIGGER: '600', SEMIBOLD: '600',
}; };
export const FONT_FAMILY = { export const FONT_FAMILY = {
@ -44,6 +64,7 @@ export const TRANSITION = {
}; };
export const LINE_HEIGHT = { export const LINE_HEIGHT = {
SMALL: '1.4', SMALL: '1.42857143',
BASE: '1.8', BASE: '1.8',
TREZOR_ACTION: '37px',
}; };

7
src/support/styles/Tooltip.js
Unescape View File

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

5
src/support/styles/index.js
Unescape View File

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

3
src/views/Landing/components/BetaDisclaimer/index.js
Unescape View File

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

6
src/views/Landing/components/ConnectDevice/index.js
Unescape View File

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

8
src/views/Landing/views/InstallBridge/index.js
Unescape View File

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

4
src/views/Wallet/components/Content/index.js
Unescape View File

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

16
src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
Unescape View File

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

3
src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
Unescape View File

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

2
src/views/Wallet/components/LeftNavigation/components/Divider/index.js
Unescape View File

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

2
src/views/Wallet/components/LeftNavigation/components/RowCoin/index.js
Unescape View File

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

5
src/views/Wallet/components/LeftNavigation/index.js
Unescape View File

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

2
src/views/Wallet/components/Title/index.js
Unescape View File

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

4
src/views/Wallet/components/TopNavigationAccount/index.js
Unescape View File

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

2
src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js
Unescape View File

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

7
src/views/Wallet/views/Account/Send/ethereum/index.js
Unescape View File

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

2
src/views/Wallet/views/Account/Send/index.js
Unescape View File

@ -25,4 +25,4 @@ export default connect((state: State): BaseProps => ({
default: default:
return null; return null;
} }
}); });

3
src/views/Wallet/views/Account/Send/ripple/index.js
Unescape View File

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

12
src/views/Wallet/views/Account/Summary/components/Balance/index.js
Unescape View File

@ -51,16 +51,16 @@ const HideBalanceIconWrapper = styled.div`
`; `;
const FiatValue = 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; margin: 7px 0;
min-height: 25px; min-height: 25px;
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
`; `;
const FiatValueRate = styled.div` 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; min-height: 25px;
margin: 7px 0; margin: 7px 0;
display: flex; display: flex;
@ -77,12 +77,12 @@ const BalanceRateWrapper = styled(BalanceWrapper)`
`; `;
const CoinBalance = styled.div` const CoinBalance = styled.div`
font-size: ${FONT_SIZE.SMALLER}; font-size: ${FONT_SIZE.SMALL};
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
`; `;
const Label = styled.div` const Label = styled.div`
font-size: ${FONT_SIZE.SMALLER}; font-size: ${FONT_SIZE.SMALL};
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
`; `;

2
src/views/Wallet/views/FirmwareUpdate/index.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save