Merge pull request #269 from trezor/account-view-guidelines

More consistent UI across tabs in account view

src/components/Textarea/index.js

@@ -94,7 +94,7 @@ const StyledTextarea = styled(Textarea)`
 `;
 
 const TopLabel = styled.span`
-    padding-bottom: 8px;
+    padding-bottom: 10px;
     color: ${colors.TEXT_SECONDARY};
 `;
 

src/components/inputs/Input/index.js

@@ -29,7 +29,7 @@ const InputIconWrapper = styled.div`
 `;
 
 const TopLabel = styled.span`
-    padding-bottom: 8px;
+    padding-bottom: 10px;
     color: ${colors.TEXT_SECONDARY};
 `;
 

src/views/Wallet/views/Account/Receive/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { QRCode } from 'react-qr-svg';
 import styled from 'styled-components';
 
-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';
@@ -19,7 +19,7 @@ import VerifyAddressTooltip from './components/VerifyAddressTooltip';
 import type { Props } from './Container';
 
 const Label = styled.div`
-    padding: 25px 0 5px 0;
+    padding-bottom: 10px;
     color: ${colors.TEXT_SECONDARY};
 `;
 
@@ -42,6 +42,7 @@ const ShowAddressButton = styled(Button)`
     display: flex;
     height: 40px;
     align-items: center;
+    align-self: flex-end;
     justify-content: center;
 
     border-top-left-radius: 0;
@@ -49,6 +50,8 @@ const ShowAddressButton = styled(Button)`
 
     @media screen and (max-width: 795px) {
         margin-top: 10px;
+        align-self: auto;
+        border-radius: 3px;
     }
 `;
 
@@ -75,6 +78,7 @@ const EyeButton = styled(Button)`
 const Row = styled.div`
     display: flex;
     width: 100%;
+    padding-bottom: 28px;
 
     @media screen and (max-width: 795px) {
         flex-direction: column;
@@ -113,14 +117,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

@@ -22,10 +22,6 @@ type Props = BaseProps & {
 // same variable also in "AccountSend/index.js"
 const SmallScreenWidth = '850px';
 
-const InputRow = styled.div`
-    margin-bottom: 20px;
-`;
-
 const InputLabelWrapper = styled.div`
     display: flex;
     align-items: center;
@@ -45,7 +41,7 @@ const AdvancedSettingsWrapper = styled.div`
     border-top: 1px solid ${colors.DIVIDER};
 `;
 
-const GasInputRow = styled(InputRow)`
+const GasInputRow = styled.div`
     width: 100%;
     display: flex;
 
@@ -55,7 +51,8 @@ const GasInputRow = styled(InputRow)`
 `;
 
 const GasInput = styled(Input)`
-    min-height: 85px;
+    /* min-height: 85px; */
+    padding-bottom: 28px;
     &:first-child {
         padding-right: 20px;
     }
@@ -63,13 +60,12 @@ const GasInput = styled(Input)`
     @media screen and (max-width: ${SmallScreenWidth}) {
         &:first-child {
             padding-right: 0;
-            margin-bottom: 2px;
         }
     }
 `;
 
 const StyledTextarea = styled(Textarea)`
-    margin-bottom: 20px;
+    padding-bottom: 28px;
     min-height: 80px;
 `;
 
@@ -214,17 +210,46 @@ const AdvancedForm = (props: Props) => {
                     spellCheck="false"
                     topLabel={(
                         <InputLabelWrapper>
-                            Gas price
+                            <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}
+                    value={gasPrice}
+                    onChange={event => onGasPriceChange(event.target.value)}
+                />
+            </GasInputRow>
+
+            <StyledTextarea
+                topLabel={(
+                    <InputLabelWrapper>
+                        <Left>
+                            Data
                             <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>.
+                                        Data is usually used when you send transactions to contracts.
                                     </React.Fragment>
                                 )}
-                                maxWidth={400}
-                                readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
                                 placement="top"
                             >
                                 <Icon
@@ -233,32 +258,7 @@ const AdvancedForm = (props: Props) => {
                                     size={24}
                                 />
                             </Tooltip>
-                        </InputLabelWrapper>
-                    )}
-                    bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
-                    value={gasPrice}
-                    onChange={event => onGasPriceChange(event.target.value)}
-                />
-            </GasInputRow>
-
-            <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>
                     </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-bottom: 28px;
 `;
 
 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: 10px;
 `;
 
 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: 28px;
 `;
 
 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: 28px;
     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;