changed FONT_SIZE.BASE to 1rem

pull/275/head
slowbackspace 5 years ago
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…
Cancel
Save