Create a styled component for divider in aside panel

pull/3/head
Vasek Mlejnsky 6 years ago
parent 57a9b3e114
commit 44ae2b82dd

@ -0,0 +1,35 @@
import styled from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
import colors from 'config/colors';
import { FONT_SIZE } from 'config/variables';
const Wrapper = styled.div`
display: flex;
justify-content: space-between;
padding: 8px 28px 8px 24px;
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};
`;
const AsideDivider = ({ textLeft, textRight }) => (
<Wrapper>
<p>{textLeft}</p>
<p>{textRight}</p>
</Wrapper>
);
AsideDivider.propTypes = {
textLeft: PropTypes.string.isRequired,
textRight: PropTypes.string.isRequired,
};
export default AsideDivider;

@ -55,8 +55,10 @@ const CoinSelection = (props: Props): React$Element<string> => {
return (
<Section>
{ walletCoins }
<div className="coin-divider">
Other coins <span>(You will be redirected)</span>
<AsideDivider
textLeft={'Other coins'}
textRight={'(You will be redirected)'}
/>
<ExternalCoinLink
coin={{

@ -5,6 +5,8 @@ import React, { Component } from 'react';
import Select from 'react-select';
import TrezorConnect from 'trezor-connect';
import AsideDivider from './AsideDivider';
import type { TrezorDevice } from 'flowtype';
import type { Props } from './index';
@ -214,7 +216,7 @@ export class DeviceDropdown extends Component<Props> {
return (
<section>
{ currentDeviceMenu }
{ deviceList.length > 1 ? <div className="device-divider">Other devices</div> : null }
{ deviceList.length > 1 ? <AsideDivider textLeft={'Other devices'}/> : null }
{ deviceList }
{ webUsbButton }
</section>

Loading…
Cancel
Save