1
0
mirror of https://github.com/trezor/trezor-wallet synced 2025-03-01 17:02:07 +00:00

changed FONT_SIZE.BASE to 1rem

This commit is contained in:
slowbackspace 2018-12-13 13:42:52 +01:00
parent e4d2a5ec72
commit 3c6df77b04
33 changed files with 56 additions and 56 deletions

View File

@ -22,7 +22,7 @@ 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.LIGHT}; font-weight: ${FONT_WEIGHT.LIGHT};
cursor: pointer; cursor: pointer;
background: ${colors.GREEN_PRIMARY}; background: ${colors.GREEN_PRIMARY};

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 {

View File

@ -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: ${FONT_SIZE.SMALLER}; font-size: ${FONT_SIZE.SMALL};
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
`; `;

View File

@ -22,7 +22,7 @@ type Props = {
const Wrapper = styled.div` const Wrapper = styled.div`
width: 100%; width: 100%;
font-size: ${FONT_SIZE.SMALLER}; 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;

View File

@ -24,7 +24,7 @@ const H2 = styled.h2`
${props => props.claim ${props => props.claim
&& css` && css`
font-size: ${FONT_SIZE.BIGGEST}; font-size: ${FONT_SIZE.HUGE};
padding-bottom: 24px; padding-bottom: 24px;
`}; `};
`; `;

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

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

View File

@ -38,7 +38,7 @@ const Wrapper = styled.button`
padding: 12px 58px; padding: 12px 58px;
border-radius: 3px; border-radius: 3px;
background: transparent; background: transparent;
font-size: ${FONT_SIZE.SMALL}; font-size: ${FONT_SIZE.BASE};
position: relative; position: relative;
font-weight: ${FONT_WEIGHT.LIGHT}; font-weight: ${FONT_WEIGHT.LIGHT};
cursor: pointer; cursor: pointer;

View File

@ -42,7 +42,7 @@ 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`

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

View File

@ -28,7 +28,7 @@ const StyledTextarea = styled(Textarea)`
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
background: ${colors.WHITE}; background: ${colors.WHITE};
font-weight: ${FONT_WEIGHT.MEDIUM}; 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 +104,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)};
`; `;

View File

@ -39,7 +39,7 @@ const StyledInput = styled.input`
padding: 5px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px; padding: 5px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px;
line-height: 1.42857143; 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}; font-weight: ${FONT_WEIGHT.MEDIUM};
color: ${props => (props.color ? props.color : colors.TEXT)}; color: ${props => (props.color ? props.color : colors.TEXT)};
@ -86,7 +86,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)};
`; `;

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

View File

@ -42,7 +42,7 @@ const StyledP = styled(P)`
const Label = styled.div` const Label = styled.div`
padding-top: 5px; padding-top: 5px;
font-size: ${FONT_SIZE.SMALLER}; font-size: ${FONT_SIZE.SMALL};
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
`; `;

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

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;

View File

@ -21,7 +21,7 @@ const StyledInput = styled.input`
letter-spacing: 7px; letter-spacing: 7px;
width: 100%; width: 100%;
font-weight: ${FONT_WEIGHT.SEMIBOLD}; 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;

View File

@ -13,16 +13,16 @@
// H3: '14px', // H3: '14px',
// H4: '12px', // H4: '12px',
// COUNTER: '11px', // COUNTER: '11px',
export const FONT_SIZE = { export const FONT_SIZE = {
SMALLEST: '0.7142rem', SMALL: '0.8571rem',
SMALLER: '0.8571rem', BASE: '1rem',
SMALL: '1rem', BIG: '1.1428rem',
BASE: '1.1428rem', BIGGER: '1.5rem',
BIGGEST: '2.2857rem',
HUGE: '2.5714rem',
TOP_MENU: '1.2142rem', TOP_MENU: '1.2142rem',
WALLET_TITLE: '1.2857rem', WALLET_TITLE: '1.2857rem',
BIG: '1.5rem',
BIGGER: '2.2857rem',
BIGGEST: '2.5714rem',
H1: '1.2857rem', H1: '1.2857rem',
H2: '1.1428rem', H2: '1.1428rem',
H3: '1rem', H3: '1rem',

View File

@ -19,7 +19,7 @@ const tooltipStyles = css`
.rc-tooltip-inner { .rc-tooltip-inner {
padding: 8px 10px; padding: 8px 10px;
color: ${colors.WHITE}; color: ${colors.WHITE};
font-size: ${FONT_SIZE.SMALLER}; font-size: ${FONT_SIZE.SMALL};
line-height: 1.5; line-height: 1.5;
text-align: left; text-align: left;
text-decoration: none; text-decoration: none;

View File

@ -41,7 +41,7 @@ const ModalWindow = styled.div`
const StyledP = styled(P)` const StyledP = styled(P)`
padding: 10px 0px; padding: 10px 0px;
font-size: ${FONT_SIZE.SMALL}; font-size: ${FONT_SIZE.BASE};
`; `;
const StyledButton = styled(Button)` const StyledButton = styled(Button)`

View File

@ -36,7 +36,7 @@ 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.MEDIUM}; font-weight: ${FONT_WEIGHT.MEDIUM};
`; `;
@ -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> {

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,7 +69,7 @@ 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.LIGHT}; 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;
`; `;

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

View File

@ -23,7 +23,7 @@ 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};
`; `;
@ -33,7 +33,7 @@ const RowAccountWrapper = styled.div`
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};
@ -75,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};
@ -83,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;
@ -93,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};
`; `;

View File

@ -17,7 +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; line-height: 24px;
cursor: pointer; cursor: pointer;
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};

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`

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;

View File

@ -69,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: ${FONT_SIZE.SMALLER}; font-size: ${FONT_SIZE.SMALL};
display: inline-block; display: inline-block;
padding: 8px; padding: 8px;
height: auto; height: auto;

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

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

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

View File

@ -52,7 +52,7 @@ const HideBalanceIconWrapper = styled.div`
const FiatValue = styled.div` const FiatValue = styled.div`
font-weight: ${FONT_WEIGHT.SEMIBOLD}; 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};
@ -60,7 +60,7 @@ const FiatValue = styled.div`
const FiatValueRate = styled.div` const FiatValueRate = styled.div`
font-weight: ${FONT_WEIGHT.SEMIBOLD}; 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};
`; `;

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`