arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-02 12:20:53 +00:00
Code Issues Releases Wiki Activity

line-height refactoring

Browse Source
This commit is contained in:
slowbackspace 2018-12-13 14:16:14 +01:00
parent 462205650d
commit d5d59b32b8
5 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,12 @@ import Textarea from 'react-textarea-autosize';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import colors from 'config/colors'; 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` const Wrapper = styled.div`
width: 100%; width: 100%;
@ -130,7 +135,7 @@ const TrezorAction = styled.div`
bottom: -25px; bottom: -25px;
color: ${colors.WHITE}; color: ${colors.WHITE};
border-radius: 5px; border-radius: 5px;
line-height: 37px; line-height: ${LINE_HEIGHT.TREZOR_ACTION};
z-index: 10002; z-index: 10002;
transform: translate(-1px, -1px); transform: translate(-1px, -1px);
`; `;

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

@ -7,6 +7,7 @@ import Icon from 'components/Icon';
import { import {
FONT_SIZE, FONT_SIZE,
FONT_WEIGHT, FONT_WEIGHT,
LINE_HEIGHT,
TRANSITION, TRANSITION,
} from 'config/variables'; } from 'config/variables';
@ -38,7 +39,7 @@ const StyledInput = styled.input`
height: ${props => (props.height ? `${props.height}px` : '40px')}; height: ${props => (props.height ? `${props.height}px` : '40px')};
padding: 5px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px; padding: 5px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px;
line-height: 1.42857143; line-height: ${LINE_HEIGHT.SMALL};
font-size: ${props => (props.isSmallText ? `${FONT_SIZE.SMALL}` : `${FONT_SIZE.BASE}`)}; 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)};
@ -116,7 +117,7 @@ const TrezorAction = styled.div`
background: black; background: black;
color: ${colors.WHITE}; color: ${colors.WHITE};
border-radius: 5px; border-radius: 5px;
line-height: 37px; line-height: ${LINE_HEIGHT.TREZOR_ACTION};
z-index: 10002; z-index: 10002;
transform: translate(-1px, -1px); transform: translate(-1px, -1px);
`; `;

2
src/config/variables.js
View File

@ -64,6 +64,6 @@ export const TRANSITION = {
}; };
export const LINE_HEIGHT = { export const LINE_HEIGHT = {
SMALL: '1.4', SMALL: '1.42857143',
BASE: '1.8', BASE: '1.8',
}; };

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

@ -1,6 +1,6 @@
import { css } from 'styled-components'; import { css } from 'styled-components';
import colors from 'config/colors'; import colors from 'config/colors';
import { FONT_SIZE } from 'config/variables'; import { FONT_SIZE, LINE_HEIGHT } from 'config/variables';
const tooltipStyles = css` const tooltipStyles = css`
.rc-tooltip { .rc-tooltip {
@ -20,7 +20,7 @@ const tooltipStyles = css`
padding: 8px 10px; padding: 8px 10px;
color: ${colors.WHITE}; color: ${colors.WHITE};
font-size: ${FONT_SIZE.SMALL}; font-size: ${FONT_SIZE.SMALL};
line-height: 1.5; line-height: ${LINE_HEIGHT.SMALL};
text-align: left; text-align: left;
text-decoration: none; text-decoration: none;
background-color: ${colors.TOOLTIP_BACKGROUND}; background-color: ${colors.TOOLTIP_BACKGROUND};

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

@ -18,7 +18,6 @@ const Item = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
font-size: ${FONT_SIZE.BASE}; font-size: ${FONT_SIZE.BASE};
line-height: 24px;
cursor: pointer; cursor: pointer;
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
`; `;