mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-25 00:18:07 +00:00
Merge pull request #275 from trezor/fonts-refactoring
Fonts refactoring
This commit is contained in:
commit
436723ae58
@ -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};
|
||||
|
@ -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 {
|
||||
|
@ -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};
|
||||
`;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
};
|
||||
|
@ -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};
|
||||
|
@ -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)};
|
||||
`;
|
||||
|
||||
|
@ -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)};
|
||||
|
@ -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`
|
||||
|
@ -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};
|
||||
`}
|
||||
`;
|
||||
|
||||
|
@ -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);
|
||||
`;
|
||||
|
@ -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);
|
||||
`;
|
||||
|
@ -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};
|
||||
`;
|
||||
|
||||
|
@ -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};
|
||||
`;
|
||||
|
||||
|
@ -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%;
|
||||
|
@ -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;
|
||||
|
@ -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};
|
||||
|
@ -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;
|
||||
|
@ -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',
|
||||
};
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { css } from 'styled-components';
|
||||
import colors from 'config/colors';
|
||||
import { FONT_SIZE, LINE_HEIGHT } from 'config/variables';
|
||||
|
||||
const tooltipStyles = css`
|
||||
.rc-tooltip {
|
||||
@ -18,8 +19,8 @@ const tooltipStyles = css`
|
||||
.rc-tooltip-inner {
|
||||
padding: 8px 10px;
|
||||
color: ${colors.WHITE};
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
line-height: ${LINE_HEIGHT.SMALL};
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
background-color: ${colors.TOOLTIP_BACKGROUND};
|
||||
@ -160,4 +161,4 @@ const tooltipStyles = css`
|
||||
}
|
||||
`;
|
||||
|
||||
export default tooltipStyles;
|
||||
export default tooltipStyles;
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { createGlobalStyle } from 'styled-components';
|
||||
import colors from 'config/colors';
|
||||
import { FONT_WEIGHT } from 'config/variables';
|
||||
|
||||
import tooltipStyles from './Tooltip';
|
||||
import animationStyles from './Animations';
|
||||
@ -10,7 +11,7 @@ const baseStyles = createGlobalStyle`
|
||||
height: 100%;
|
||||
position: relative;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
font-weight: ${FONT_WEIGHT.NORMAL};
|
||||
font-size: 14px;
|
||||
color: ${colors.TEXT};
|
||||
}
|
||||
@ -73,4 +74,4 @@ const baseStyles = createGlobalStyle`
|
||||
${tooltipStyles};
|
||||
`;
|
||||
|
||||
export default baseStyles;
|
||||
export default baseStyles;
|
||||
|
@ -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)`
|
||||
|
@ -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> {
|
||||
|
@ -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;
|
||||
`;
|
||||
|
@ -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};
|
||||
`;
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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};
|
||||
`;
|
||||
|
@ -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`
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
`;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
`;
|
||||
|
||||
|
@ -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)};
|
||||
|
@ -25,4 +25,4 @@ export default connect((state: State): BaseProps => ({
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
@ -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)};
|
||||
|
@ -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};
|
||||
`;
|
||||
|
||||
|
@ -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`
|
||||
|
Loading…
Reference in New Issue
Block a user