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

Styled divider

Browse Source
This commit is contained in:
Vladimir Volek 2018-09-24 15:38:19 +02:00
parent 1a1bfd465a
commit 6199ac5ef3
4 changed files with 7 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js
View File

@ -44,8 +44,7 @@ class CoinMenu extends Component {
<Divider <Divider
textLeft="Other coins" textLeft="Other coins"
textRight="(You will be redirected)" textRight="(You will be redirected)"
borderTop hasBorder
borderBottom
/> />
{coins.map(coin => ( {coins.map(coin => (
<a key={coin.url} href={coin.url}> <a key={coin.url} href={coin.url}>

15
src/views/Wallet/components/LeftNavigation/components/Divider/index.js
View File

@ -12,20 +12,16 @@ const Wrapper = styled.div`
font-size: ${FONT_SIZE.SMALLER}; font-size: ${FONT_SIZE.SMALLER};
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
background: ${colors.LANDING}; background: ${colors.LANDING};
${props => props.borderTop && css` ${props => props.hasBorder && css`
border-top: 1px solid ${colors.DIVIDER}; border: 1px solid ${colors.BODY};
`}
${props => props.borderBottom && css`
border-bottom: 1px solid ${colors.DIVIDER};
`} `}
`; `;
const Divider = ({ const Divider = ({
textLeft, textRight, borderTop = false, borderBottom = false, textLeft, textRight, hasBorder = false,
}) => ( }) => (
<Wrapper <Wrapper
borderTop={borderTop} hasBorder={hasBorder}
borderBottom={borderBottom}
> >
<p>{textLeft}</p> <p>{textLeft}</p>
<p>{textRight}</p> <p>{textRight}</p>
@ -35,8 +31,7 @@ const Divider = ({
Divider.propTypes = { Divider.propTypes = {
textLeft: PropTypes.string, textLeft: PropTypes.string,
textRight: PropTypes.string, textRight: PropTypes.string,
borderTop: PropTypes.bool, hasBorder: PropTypes.bool,
borderBottom: PropTypes.bool,
}; };
export default Divider; export default Divider;

3
src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
View File

@ -22,11 +22,9 @@ const AsideWrapper = styled.aside`
min-width: 320px; min-width: 320px;
overflow: hidden; overflow: hidden;
background: ${colors.MAIN}; background: ${colors.MAIN};
border-right: 1px solid ${colors.DIVIDER};
.fixed { .fixed {
position: fixed; position: fixed;
border-right: 1px solid ${colors.DIVIDER};
} }
.fixed-bottom { .fixed-bottom {
@ -35,7 +33,6 @@ const AsideWrapper = styled.aside`
position: fixed; position: fixed;
bottom: 0; bottom: 0;
background: ${colors.MAIN}; background: ${colors.MAIN};
border-right: 1px solid ${colors.DIVIDER};
} }
} }
`; `;

3
src/views/Wallet/components/LeftNavigation/index.js
View File

@ -28,7 +28,6 @@ const Footer = styled.div`
width: 320px; width: 320px;
bottom: 0; bottom: 0;
background: ${colors.MAIN}; background: ${colors.MAIN};
border-right: 1px solid ${colors.DIVIDER};
`; `;
const Body = styled.div` const Body = styled.div`
@ -42,7 +41,7 @@ const Help = styled.div`
text-align: center; text-align: center;
width: 319px; width: 319px;
padding: 8px 0px; padding: 8px 0px;
border-top: 1px solid ${colors.DIVIDER}; border-top: 1px solid ${colors.BACKGROUND};
`; `;
const A = styled.a` const A = styled.a`