mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-30 20:28:09 +00:00
changed FONT_SIZE.BASE to 1rem
This commit is contained in:
parent
e4d2a5ec72
commit
3c6df77b04
@ -22,7 +22,7 @@ type Props = {
|
||||
const Wrapper = styled.button`
|
||||
padding: ${props => (props.icon ? '4px 24px 4px 15px' : '11px 24px')};
|
||||
border-radius: 3px;
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
font-weight: ${FONT_WEIGHT.LIGHT};
|
||||
cursor: pointer;
|
||||
background: ${colors.GREEN_PRIMARY};
|
||||
|
@ -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 {
|
||||
|
@ -66,7 +66,7 @@ const Status = styled.div`
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
`;
|
||||
|
||||
|
@ -22,7 +22,7 @@ type Props = {
|
||||
|
||||
const Wrapper = styled.div`
|
||||
width: 100%;
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
background: ${colors.LANDING};
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
padding: 22px 48px;
|
||||
|
@ -24,7 +24,7 @@ const H2 = styled.h2`
|
||||
|
||||
${props => props.claim
|
||||
&& css`
|
||||
font-size: ${FONT_SIZE.BIGGEST};
|
||||
font-size: ${FONT_SIZE.HUGE};
|
||||
padding-bottom: 24px;
|
||||
`};
|
||||
`;
|
||||
|
@ -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)};
|
||||
`;
|
||||
|
||||
|
@ -38,7 +38,7 @@ const Wrapper = styled.button`
|
||||
padding: 12px 58px;
|
||||
border-radius: 3px;
|
||||
background: transparent;
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
position: relative;
|
||||
font-weight: ${FONT_WEIGHT.LIGHT};
|
||||
cursor: pointer;
|
||||
|
@ -42,7 +42,7 @@ const Body = styled.div`
|
||||
|
||||
const Message = styled.div`
|
||||
padding-bottom: 13px;
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
`;
|
||||
|
||||
const Title = styled.div`
|
||||
|
@ -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};
|
||||
`}
|
||||
`;
|
||||
|
||||
|
@ -28,7 +28,7 @@ const StyledTextarea = styled(Textarea)`
|
||||
color: ${colors.TEXT_PRIMARY};
|
||||
background: ${colors.WHITE};
|
||||
font-weight: ${FONT_WEIGHT.MEDIUM};
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
white-space: pre-wrap; /* css-3 */
|
||||
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
||||
white-space: -pre-wrap; /* Opera 4-6 */
|
||||
@ -104,7 +104,7 @@ const TopLabel = styled.span`
|
||||
`;
|
||||
|
||||
const BottomText = styled.span`
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
|
||||
`;
|
||||
|
||||
|
@ -39,7 +39,7 @@ const StyledInput = styled.input`
|
||||
padding: 5px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px;
|
||||
|
||||
line-height: 1.42857143;
|
||||
font-size: ${props => (props.isSmallText ? `${FONT_SIZE.SMALLER}` : `${FONT_SIZE.SMALL}`)};
|
||||
font-size: ${props => (props.isSmallText ? `${FONT_SIZE.SMALL}` : `${FONT_SIZE.BASE}`)};
|
||||
font-weight: ${FONT_WEIGHT.MEDIUM};
|
||||
color: ${props => (props.color ? props.color : colors.TEXT)};
|
||||
|
||||
@ -86,7 +86,7 @@ const StyledIcon = styled(Icon)`
|
||||
|
||||
const BottomText = styled.span`
|
||||
margin-top: 10px;
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
|
||||
`;
|
||||
|
||||
|
@ -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};
|
||||
`;
|
||||
|
||||
|
@ -42,7 +42,7 @@ const StyledP = styled(P)`
|
||||
|
||||
const Label = styled.div`
|
||||
padding-top: 5px;
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
`;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -21,7 +21,7 @@ const StyledInput = styled.input`
|
||||
letter-spacing: 7px;
|
||||
width: 100%;
|
||||
font-weight: ${FONT_WEIGHT.SEMIBOLD};
|
||||
font-size: ${FONT_SIZE.BIGGER};
|
||||
font-size: ${FONT_SIZE.BIGGEST};
|
||||
padding: 5px 31px 10px 20px;
|
||||
color: ${colors.TEXT_PRIMARY};
|
||||
background: transparent;
|
||||
|
@ -13,16 +13,16 @@
|
||||
// H3: '14px',
|
||||
// H4: '12px',
|
||||
// COUNTER: '11px',
|
||||
|
||||
export const FONT_SIZE = {
|
||||
SMALLEST: '0.7142rem',
|
||||
SMALLER: '0.8571rem',
|
||||
SMALL: '1rem',
|
||||
BASE: '1.1428rem',
|
||||
SMALL: '0.8571rem',
|
||||
BASE: '1rem',
|
||||
BIG: '1.1428rem',
|
||||
BIGGER: '1.5rem',
|
||||
BIGGEST: '2.2857rem',
|
||||
HUGE: '2.5714rem',
|
||||
TOP_MENU: '1.2142rem',
|
||||
WALLET_TITLE: '1.2857rem',
|
||||
BIG: '1.5rem',
|
||||
BIGGER: '2.2857rem',
|
||||
BIGGEST: '2.5714rem',
|
||||
H1: '1.2857rem',
|
||||
H2: '1.1428rem',
|
||||
H3: '1rem',
|
||||
|
@ -19,7 +19,7 @@ const tooltipStyles = css`
|
||||
.rc-tooltip-inner {
|
||||
padding: 8px 10px;
|
||||
color: ${colors.WHITE};
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
|
@ -41,7 +41,7 @@ const ModalWindow = styled.div`
|
||||
|
||||
const StyledP = styled(P)`
|
||||
padding: 10px 0px;
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
`;
|
||||
|
||||
const StyledButton = styled(Button)`
|
||||
|
@ -36,7 +36,7 @@ const ConnectTrezorWrapper = styled.div`
|
||||
top: 1px;
|
||||
animation: ${PULSATE} 1.3s ease-out infinite;
|
||||
color: ${colors.GREEN_PRIMARY};
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
font-size: ${FONT_SIZE.BIG};
|
||||
font-weight: ${FONT_WEIGHT.MEDIUM};
|
||||
`;
|
||||
|
||||
@ -58,7 +58,7 @@ const FooterText = styled.span`
|
||||
`;
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
font-size: ${FONT_SIZE.BIG};
|
||||
`;
|
||||
|
||||
class ConnectDevice extends PureComponent<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,7 +69,7 @@ const Version = styled.span`
|
||||
padding: 6px 10px;
|
||||
border: 1px solid ${colors.GREEN_PRIMARY};
|
||||
border-radius: 3px;
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
font-weight: ${FONT_WEIGHT.LIGHT};
|
||||
margin-left: 24px;
|
||||
`;
|
||||
@ -109,7 +109,7 @@ const GoBack = styled.span`
|
||||
const Ol = styled.ul`
|
||||
margin: 0 auto;
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
font-size: ${FONT_SIZE.BIG};
|
||||
padding: 10px 0 15px 25px;
|
||||
text-align: left;
|
||||
`;
|
||||
|
@ -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,7 +23,7 @@ import RowCoin from '../RowCoin';
|
||||
const Wrapper = styled.div``;
|
||||
|
||||
const Text = styled.span`
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
`;
|
||||
|
||||
@ -33,7 +33,7 @@ const RowAccountWrapper = styled.div`
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: ${LEFT_NAVIGATION_ROW.PADDING};
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
color: ${colors.TEXT_PRIMARY};
|
||||
border-left: ${BORDER_WIDTH.SELECTED} solid transparent;
|
||||
border-bottom: 1px solid ${colors.DIVIDER};
|
||||
@ -75,7 +75,7 @@ const DiscoveryStatusWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
padding: ${LEFT_NAVIGATION_ROW.PADDING};
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid ${colors.DIVIDER};
|
||||
@ -83,7 +83,7 @@ const DiscoveryStatusWrapper = styled.div`
|
||||
|
||||
const DiscoveryStatusText = styled.div`
|
||||
display: block;
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -93,7 +93,7 @@ const DiscoveryLoadingWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: ${LEFT_NAVIGATION_ROW.PADDING};
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
white-space: nowrap;
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
`;
|
||||
|
@ -17,7 +17,7 @@ const Item = styled.div`
|
||||
padding: 4px 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
|
@ -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;
|
||||
|
||||
|
@ -69,7 +69,7 @@ const Help = styled.div`
|
||||
|
||||
const A = styled.a`
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
height: auto;
|
||||
|
@ -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};
|
||||
`;
|
||||
|
||||
|
@ -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};
|
||||
|
||||
|
@ -52,7 +52,7 @@ const HideBalanceIconWrapper = styled.div`
|
||||
|
||||
const FiatValue = styled.div`
|
||||
font-weight: ${FONT_WEIGHT.SEMIBOLD};
|
||||
font-size: ${FONT_SIZE.BIG};
|
||||
font-size: ${FONT_SIZE.BIGGER};
|
||||
margin: 7px 0;
|
||||
min-height: 25px;
|
||||
color: ${colors.TEXT_PRIMARY};
|
||||
@ -60,7 +60,7 @@ const FiatValue = styled.div`
|
||||
|
||||
const FiatValueRate = styled.div`
|
||||
font-weight: ${FONT_WEIGHT.SEMIBOLD};
|
||||
font-size: ${FONT_SIZE.BASE};
|
||||
font-size: ${FONT_SIZE.BIG};
|
||||
min-height: 25px;
|
||||
margin: 7px 0;
|
||||
display: flex;
|
||||
@ -77,12 +77,12 @@ const BalanceRateWrapper = styled(BalanceWrapper)`
|
||||
`;
|
||||
|
||||
const CoinBalance = styled.div`
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
`;
|
||||
|
||||
const Label = styled.div`
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
`;
|
||||
|
||||
|
@ -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