arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 16:38:08 +00:00
Code Issues Releases Wiki Activity

Merge pull request #275 from trezor/fonts-refactoring

Browse Source 
Fonts refactoring
This commit is contained in:
Vladimir Volek 2018-12-13 16:15:49 +01:00 committed by GitHub
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 Expand all files Collapse all files

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

@ -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};

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

@ -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 {

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

@ -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};
`;

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

@ -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;

23
src/components/Heading/index.js
View File

@ -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,
};

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

@ -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};

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

@ -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)};
`;

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

@ -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)};

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

@ -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`

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

@ -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};
`}
`;

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

@ -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);
`;

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

@ -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);
`;

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

@ -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};
`;

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

@ -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};
`;

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

@ -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%;

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

@ -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;

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

@ -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};

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

@ -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;

49
src/config/variables.js
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 = {
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',
};

5
src/support/styles/Tooltip.js
View File

@ -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};

3
src/support/styles/index.js
View File

@ -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};
}

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

@ -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)`

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

@ -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> {

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

@ -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;
`;

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

@ -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};
`;

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

@ -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>

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

@ -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};
`;

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

@ -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`

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

@ -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;

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

@ -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;

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

@ -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;
`;

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

@ -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;

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

@ -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;
`;

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

@ -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)};

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

@ -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)};

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

@ -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};
`;

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

@ -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`