1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-23 23:48:07 +00:00

Style qr code, add label

This commit is contained in:
Vladimir Volek 2018-09-24 17:00:11 +02:00
parent 0ef3672a54
commit a02b9883da

View File

@ -20,6 +20,11 @@ const Wrapper = styled.div`
padding-top: 20px;
`;
const Label = styled.div`
padding: 25px 0 5px 0;
color: ${colors.TEXT_SECONDARY};
`;
const StyledH2 = styled(H2)`
padding: 20px 48px;
`;
@ -31,6 +36,12 @@ const AddressWrapper = styled.div`
flex-direction: ${props => (props.isShowingQrCode ? 'column' : 'row')};
`;
const StyledQRCode = styled(QRCode)`
padding: 15px;
margin-top: 0 25px;
border: 1px solid ${colors.BODY};
`;
const ValueWrapper = styled.div`
font-size: ${FONT_SIZE.SMALL};
font-weight: ${FONT_WEIGHT.SMALLEST};
@ -111,11 +122,6 @@ const EyeButton = styled(Button)`
top: 3px;
`;
const qrCodeStyle = {
width: 256,
margin: '20px auto',
};
const AccountReceive = (props: Props) => {
const device = props.wallet.selectedDevice;
const {
@ -182,19 +188,23 @@ const AccountReceive = (props: Props) => {
<ValueWrapper
isHidden={isAddressHidden}
isVerifying={isAddressVerifying}
>{address}
>
{address}
</ValueWrapper>
{isAddressVerifying && (
<AddressInfoText>{account.network} account #{account.index + 1}</AddressInfoText>
)}
{(addressVerified || addressUnverified) && (
<QRCode
bgColor="#FFFFFF"
fgColor="#000000"
level="Q"
style={qrCodeStyle}
value={account.address}
/>
<React.Fragment>
<Label>QR code</Label>
<StyledQRCode
bgColor="#FFFFFF"
fgColor="#000000"
level="Q"
style={{ width: 150 }}
value={account.address}
/>
</React.Fragment>
)}
{!(addressVerified || addressUnverified) && (
<ShowAddressButton