From 8e14e04dc1e52844223597840a15f4c04cc0a4f1 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Mon, 10 Dec 2018 11:43:43 +0100
Subject: [PATCH] more consistent UI

---
 .../Wallet/views/Account/Receive/index.js     | 10 ++-
 .../Send/components/AdvancedForm/index.js     | 78 ++++++++++---------
 src/views/Wallet/views/Account/Send/index.js  |  4 +-
 .../Wallet/views/Account/SignVerify/index.js  |  3 +-
 .../Summary/components/Balance/index.js       |  2 +-
 .../Wallet/views/Account/Summary/index.js     |  2 +-
 6 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js
index 755fcb43..93413f83 100644
--- a/src/views/Wallet/views/Account/Receive/index.js
+++ b/src/views/Wallet/views/Account/Receive/index.js
@@ -4,7 +4,7 @@ import { QRCode } from 'react-qr-svg';
 import styled from 'styled-components';
 import media from 'styled-media-query';
 
-import { H2 } from 'components/Heading';
+import Title from 'views/Wallet/components/Title';
 import Button from 'components/Button';
 import Icon from 'components/Icon';
 import Tooltip from 'components/Tooltip';
@@ -20,7 +20,7 @@ import VerifyAddressTooltip from './components/VerifyAddressTooltip';
 import type { Props } from './Container';
 
 const Label = styled.div`
-    padding: 25px 0 5px 0;
+    padding-bottom: 8px;
     color: ${colors.TEXT_SECONDARY};
 `;
 
@@ -43,6 +43,7 @@ const ShowAddressButton = styled(Button)`
     display: flex;
     height: 40px;
     align-items: center;
+    align-self: flex-end;
     justify-content: center;
 
     border-top-left-radius: 0;
@@ -76,6 +77,7 @@ const EyeButton = styled(Button)`
 const Row = styled.div`
     display: flex;
     width: 100%;
+    padding-bottom: 25px;
 
     ${media.lessThan('795px')`
         flex-direction: column;
@@ -114,14 +116,14 @@ const AccountReceive = (props: Props) => {
     return (
         <Content>
             <React.Fragment>
-                <H2>Receive Ethereum or tokens</H2>
+                <Title>Receive Ethereum or tokens</Title>
                 <AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
-                    <Label>Address</Label>
                     <Row>
                         <Input
                             type="text"
                             readOnly
                             autoSelect
+                            topLabel="Address"
                             value={address}
                             isPartiallyHidden={isAddressHidden}
                             trezorAction={isAddressVerifying ? (
diff --git a/src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js b/src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js
index 6af73ddd..8d116d05 100644
--- a/src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js
+++ b/src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js
@@ -23,7 +23,7 @@ type Props = BaseProps & {
 const SmallScreenWidth = '850px';
 
 const InputRow = styled.div`
-    margin-bottom: 20px;
+    padding-bottom: 25px;
 `;
 
 const InputLabelWrapper = styled.div`
@@ -55,7 +55,7 @@ const GasInputRow = styled(InputRow)`
 `;
 
 const GasInput = styled(Input)`
-    min-height: 85px;
+    /* min-height: 85px; */
     &:first-child {
         padding-right: 20px;
     }
@@ -69,7 +69,7 @@ const GasInput = styled(Input)`
 `;
 
 const StyledTextarea = styled(Textarea)`
-    margin-bottom: 20px;
+    padding-bottom: 25px;
     min-height: 80px;
 `;
 
@@ -214,25 +214,27 @@ const AdvancedForm = (props: Props) => {
                     spellCheck="false"
                     topLabel={(
                         <InputLabelWrapper>
-                            Gas price
-                            <Tooltip
-                                content={(
-                                    <React.Fragment>
-                                        Gas price refers to the amount of ether you are willing to pay for every
-                                        unit of gas, and is usually measured in “Gwei”. <GreenSpan>Transaction fee = gas limit * gas price</GreenSpan>. Increasing the gas price will get the transaction confirmed sooner but
-                                        makes it more expensive. The recommended gas price is <GreenSpan>{recommendedGasPrice} GWEI</GreenSpan>.
-                                    </React.Fragment>
-                                )}
-                                maxWidth={400}
-                                readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
-                                placement="top"
-                            >
-                                <Icon
-                                    icon={ICONS.HELP}
-                                    color={colors.TEXT_SECONDARY}
-                                    size={24}
-                                />
-                            </Tooltip>
+                            <Left>
+                                Gas price
+                                <Tooltip
+                                    content={(
+                                        <React.Fragment>
+                                            Gas price refers to the amount of ether you are willing to pay for every
+                                            unit of gas, and is usually measured in “Gwei”. <GreenSpan>Transaction fee = gas limit * gas price</GreenSpan>. Increasing the gas price will get the transaction confirmed sooner but
+                                            makes it more expensive. The recommended gas price is <GreenSpan>{recommendedGasPrice} GWEI</GreenSpan>.
+                                        </React.Fragment>
+                                    )}
+                                    maxWidth={400}
+                                    readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
+                                    placement="top"
+                                >
+                                    <Icon
+                                        icon={ICONS.HELP}
+                                        color={colors.TEXT_SECONDARY}
+                                        size={24}
+                                    />
+                                </Tooltip>
+                            </Left>
                         </InputLabelWrapper>
                     )}
                     bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
@@ -244,21 +246,23 @@ const AdvancedForm = (props: Props) => {
             <StyledTextarea
                 topLabel={(
                     <InputLabelWrapper>
-                        Data
-                        <Tooltip
-                            content={(
-                                <React.Fragment>
-                                    Data is usually used when you send transactions to contracts.
-                                </React.Fragment>
-                            )}
-                            placement="top"
-                        >
-                            <Icon
-                                icon={ICONS.HELP}
-                                color={colors.TEXT_SECONDARY}
-                                size={24}
-                            />
-                        </Tooltip>
+                        <Left>
+                            Data
+                            <Tooltip
+                                content={(
+                                    <React.Fragment>
+                                        Data is usually used when you send transactions to contracts.
+                                    </React.Fragment>
+                                )}
+                                placement="top"
+                            >
+                                <Icon
+                                    icon={ICONS.HELP}
+                                    color={colors.TEXT_SECONDARY}
+                                    size={24}
+                                />
+                            </Tooltip>
+                        </Left>
                     </InputLabelWrapper>
                 )}
                 state={getDataTextareaState(errors.data, warnings.data)}
diff --git a/src/views/Wallet/views/Account/Send/index.js b/src/views/Wallet/views/Account/Send/index.js
index d4e3ff5a..5cf376c0 100644
--- a/src/views/Wallet/views/Account/Send/index.js
+++ b/src/views/Wallet/views/Account/Send/index.js
@@ -34,7 +34,7 @@ const AmountInputLabel = styled.span`
 `;
 
 const InputRow = styled.div`
-    padding: 0 0 15px 0;
+    padding: 0 0 25px 0;
 `;
 
 const SetMaxAmountButton = styled(Button)`
@@ -88,7 +88,7 @@ const FeeOptionWrapper = styled.div`
 const FeeLabelWrapper = styled.div`
     display: flex;
     align-items: center;
-    margin-bottom: 4px;
+    padding-bottom: 8px;
 `;
 
 const FeeLabel = styled.span`
diff --git a/src/views/Wallet/views/Account/SignVerify/index.js b/src/views/Wallet/views/Account/SignVerify/index.js
index fad97374..d7b55a0f 100644
--- a/src/views/Wallet/views/Account/SignVerify/index.js
+++ b/src/views/Wallet/views/Account/SignVerify/index.js
@@ -13,13 +13,12 @@ import type { Props } from './Container';
 const Wrapper = styled.div`
     display: flex;
     flex: 1;
-    margin-top: -5px;
     flex-direction: row;
     background: ${colors.WHITE};
 `;
 
 const Row = styled.div`
-    padding: 0 0 25px 0;
+    padding-bottom: 25px;
 `;
 
 const RowButtons = styled(Row)`
diff --git a/src/views/Wallet/views/Account/Summary/components/Balance/index.js b/src/views/Wallet/views/Account/Summary/components/Balance/index.js
index c7c978fc..d22595b7 100644
--- a/src/views/Wallet/views/Account/Summary/components/Balance/index.js
+++ b/src/views/Wallet/views/Account/Summary/components/Balance/index.js
@@ -22,7 +22,7 @@ type State = {
 };
 
 const Wrapper = styled.div`
-    padding: 10px 0 25px 0;
+    padding-bottom: 25px;
     position: relative;
     display: flex;
 
diff --git a/src/views/Wallet/views/Account/Summary/index.js b/src/views/Wallet/views/Account/Summary/index.js
index 197b285c..dda8dfcc 100644
--- a/src/views/Wallet/views/Account/Summary/index.js
+++ b/src/views/Wallet/views/Account/Summary/index.js
@@ -21,7 +21,7 @@ import AddTokenMessage from './components/AddTokenMessage';
 import type { Props } from './Container';
 
 const AccountHeading = styled.div`
-    padding: 0 0 30px 0;
+    padding-bottom: 35px;
     display: flex;
     justify-content: space-between;
     align-items: center;