diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index 736158e2..b0d017c1 100644 --- a/src/components/Textarea/index.js +++ b/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}; `; diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index 89d78df5..08677e47 100644 --- a/src/components/inputs/Input/index.js +++ b/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}; `; diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js index 47d016e1..0c575c56 100644 --- a/src/views/Wallet/views/Account/Receive/index.js +++ b/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 ( -

Receive Ethereum or tokens

+ Receive Ethereum or tokens - { spellCheck="false" topLabel={( - Gas price - - Gas price refers to the amount of ether you are willing to pay for every - unit of gas, and is usually measured in “Gwei”. Transaction fee = gas limit * gas price. Increasing the gas price will get the transaction confirmed sooner but - makes it more expensive. The recommended gas price is {recommendedGasPrice} GWEI. -
- )} - maxWidth={400} - readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price" - placement="top" - > - - + + Gas price + + Gas price refers to the amount of ether you are willing to pay for every + unit of gas, and is usually measured in “Gwei”. Transaction fee = gas limit * gas price. Increasing the gas price will get the transaction confirmed sooner but + makes it more expensive. The recommended gas price is {recommendedGasPrice} GWEI. + + )} + maxWidth={400} + readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price" + placement="top" + > + + + )} bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice} @@ -244,21 +242,23 @@ const AdvancedForm = (props: Props) => { - Data - - Data is usually used when you send transactions to contracts. - - )} - placement="top" - > - - + + Data + + Data is usually used when you send transactions to contracts. + + )} + placement="top" + > + + + )} 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..319a53b0 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-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` diff --git a/src/views/Wallet/views/Account/SignVerify/index.js b/src/views/Wallet/views/Account/SignVerify/index.js index fad97374..61a6db2e 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: 28px; `; 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..318b60e0 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: 28px; 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;