arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 00:18:07 +00:00
Code Issues Releases Wiki Activity

FIx double divider border in 'DeviceMenu'

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-08-17 12:07:15 +02:00
parent 27e3385b7d
commit fed2c3031a
3 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -6,7 +6,7 @@ import type { TrezorDevice } from 'flowtype';
import type { Props } from '../common';
import AsideDivider from '../Divider';
import Divider from '../Divider';
export const DeviceSelect = (props: Props) => {
const { devices } = props;
@ -214,7 +214,7 @@ export class DeviceDropdown extends Component<Props> {
return (
<React.Fragment>
{currentDeviceMenu}
{deviceList.length > 1 ? <AsideDivider textLeft="Other devices" /> : null}
{deviceList.length > 1 ? <Divider textLeft="Other devices" borderBottom /> : null}
{deviceList}
{webUsbButton}
</React.Fragment>

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

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled, { css } from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
@ -12,12 +12,21 @@ const Wrapper = styled.div`
font-size: ${FONT_SIZE.SMALLER};
color: ${colors.TEXT_SECONDARY};
background: ${colors.GRAY_LIGHT};
border-top: 1px solid ${colors.DIVIDER};
border-bottom: 1px solid ${colors.DIVIDER};
${props => props.borderTop && css`
border-top: 1px solid ${colors.DIVIDER};
`}
${props => props.borderBottom && css`
border-bottom: 1px solid ${colors.DIVIDER};
`}
`;
const Divider = ({ textLeft, textRight }) => (
<Wrapper>
const Divider = ({
textLeft, textRight, borderTop, borderBottom,
}) => (
<Wrapper
borderTop={borderTop}
borderBottom={borderBottom}
>
<p>{textLeft}</p>
<p>{textRight}</p>
</Wrapper>
@ -26,6 +35,8 @@ const Divider = ({ textLeft, textRight }) => (
Divider.propTypes = {
textLeft: PropTypes.string,
textRight: PropTypes.string,
borderTop: PropTypes.bool.isRequired,
borderBottom: PropTypes.bool.isRequired,
};
export default Divider;