more consistent UI

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 ? (

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,6 +214,7 @@ const AdvancedForm = (props: Props) => {
                     spellCheck="false"
                     topLabel={(
                         <InputLabelWrapper>
+                            <Left>
                                 Gas price
                                 <Tooltip
                                     content={(
@@ -233,6 +234,7 @@ const AdvancedForm = (props: Props) => {
                                         size={24}
                                     />
                                 </Tooltip>
+                            </Left>
                         </InputLabelWrapper>
                     )}
                     bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
@@ -244,6 +246,7 @@ const AdvancedForm = (props: Props) => {
             <StyledTextarea
                 topLabel={(
                     <InputLabelWrapper>
+                        <Left>
                             Data
                             <Tooltip
                                 content={(
@@ -259,6 +262,7 @@ const AdvancedForm = (props: Props) => {
                                     size={24}
                                 />
                             </Tooltip>
+                        </Left>
                     </InputLabelWrapper>
                 )}
                 state={getDataTextareaState(errors.data, warnings.data)}

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`

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)`

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;
 

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;