Styled divider

pull/85/head
Vladimir Volek 6 years ago
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…
Cancel
Save