arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +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 <Divider
textLeft="Other coins" textLeft="Other coins"
textRight="(You will be redirected)" textRight="(You will be redirected)"
borderTop
borderBottom
/> />
{coins.map(coin => ( {coins.map(coin => (
<a key={coin.url} href={coin.url}> <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 type { Props } from '../common';
import AsideDivider from '../Divider'; import Divider from '../Divider';
export const DeviceSelect = (props: Props) => { export const DeviceSelect = (props: Props) => {
const { devices } = props; const { devices } = props;
@ -214,7 +214,7 @@ export class DeviceDropdown extends Component<Props> {
return ( return (
<React.Fragment> <React.Fragment>
{currentDeviceMenu} {currentDeviceMenu}
{deviceList.length > 1 ? <AsideDivider textLeft="Other devices" /> : null} {deviceList.length > 1 ? <Divider textLeft="Other devices" borderBottom /> : null}
{deviceList} {deviceList}
{webUsbButton} {webUsbButton}
</React.Fragment> </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 React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -12,12 +12,21 @@ const Wrapper = styled.div`
font-size: ${FONT_SIZE.SMALLER}; font-size: ${FONT_SIZE.SMALLER};
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
background: ${colors.GRAY_LIGHT}; background: ${colors.GRAY_LIGHT};
border-top: 1px solid ${colors.DIVIDER}; ${props => props.borderTop && css`
border-bottom: 1px solid ${colors.DIVIDER}; border-top: 1px solid ${colors.DIVIDER};
`}
${props => props.borderBottom && css`
border-bottom: 1px solid ${colors.DIVIDER};
`}
`; `;
const Divider = ({ textLeft, textRight }) => ( const Divider = ({
<Wrapper> textLeft, textRight, borderTop, borderBottom,
}) => (
<Wrapper
borderTop={borderTop}
borderBottom={borderBottom}
>
<p>{textLeft}</p> <p>{textLeft}</p>
<p>{textRight}</p> <p>{textRight}</p>
</Wrapper> </Wrapper>
@ -26,6 +35,8 @@ const Divider = ({ textLeft, textRight }) => (
Divider.propTypes = { Divider.propTypes = {
textLeft: PropTypes.string, textLeft: PropTypes.string,
textRight: PropTypes.string, textRight: PropTypes.string,
borderTop: PropTypes.bool.isRequired,
borderBottom: PropTypes.bool.isRequired,
}; };
export default Divider; export default Divider;