mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-23 23:48:07 +00:00
Styled divider
This commit is contained in:
parent
1a1bfd465a
commit
6199ac5ef3
@ -44,8 +44,7 @@ class CoinMenu extends Component {
|
||||
<Divider
|
||||
textLeft="Other coins"
|
||||
textRight="(You will be redirected)"
|
||||
borderTop
|
||||
borderBottom
|
||||
hasBorder
|
||||
/>
|
||||
{coins.map(coin => (
|
||||
<a key={coin.url} href={coin.url}>
|
||||
|
@ -12,20 +12,16 @@ const Wrapper = styled.div`
|
||||
font-size: ${FONT_SIZE.SMALLER};
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
background: ${colors.LANDING};
|
||||
${props => props.borderTop && css`
|
||||
border-top: 1px solid ${colors.DIVIDER};
|
||||
`}
|
||||
${props => props.borderBottom && css`
|
||||
border-bottom: 1px solid ${colors.DIVIDER};
|
||||
${props => props.hasBorder && css`
|
||||
border: 1px solid ${colors.BODY};
|
||||
`}
|
||||
`;
|
||||
|
||||
const Divider = ({
|
||||
textLeft, textRight, borderTop = false, borderBottom = false,
|
||||
textLeft, textRight, hasBorder = false,
|
||||
}) => (
|
||||
<Wrapper
|
||||
borderTop={borderTop}
|
||||
borderBottom={borderBottom}
|
||||
hasBorder={hasBorder}
|
||||
>
|
||||
<p>{textLeft}</p>
|
||||
<p>{textRight}</p>
|
||||
@ -35,8 +31,7 @@ const Divider = ({
|
||||
Divider.propTypes = {
|
||||
textLeft: PropTypes.string,
|
||||
textRight: PropTypes.string,
|
||||
borderTop: PropTypes.bool,
|
||||
borderBottom: PropTypes.bool,
|
||||
hasBorder: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Divider;
|
||||
|
@ -22,11 +22,9 @@ const AsideWrapper = styled.aside`
|
||||
min-width: 320px;
|
||||
overflow: hidden;
|
||||
background: ${colors.MAIN};
|
||||
border-right: 1px solid ${colors.DIVIDER};
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
border-right: 1px solid ${colors.DIVIDER};
|
||||
}
|
||||
|
||||
.fixed-bottom {
|
||||
@ -35,7 +33,6 @@ const AsideWrapper = styled.aside`
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
background: ${colors.MAIN};
|
||||
border-right: 1px solid ${colors.DIVIDER};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
@ -28,7 +28,6 @@ const Footer = styled.div`
|
||||
width: 320px;
|
||||
bottom: 0;
|
||||
background: ${colors.MAIN};
|
||||
border-right: 1px solid ${colors.DIVIDER};
|
||||
`;
|
||||
|
||||
const Body = styled.div`
|
||||
@ -42,7 +41,7 @@ const Help = styled.div`
|
||||
text-align: center;
|
||||
width: 319px;
|
||||
padding: 8px 0px;
|
||||
border-top: 1px solid ${colors.DIVIDER};
|
||||
border-top: 1px solid ${colors.BACKGROUND};
|
||||
`;
|
||||
|
||||
const A = styled.a`
|
||||
|
Loading…
Reference in New Issue
Block a user