From 8e14e04dc1e52844223597840a15f4c04cc0a4f1 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Mon, 10 Dec 2018 11:43:43 +0100 Subject: [PATCH 1/6] 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 ( -

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 +246,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..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; From 27a3254c04abacfe7d15f7ca4909422f96fbe895 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Mon, 10 Dec 2018 14:15:26 +0100 Subject: [PATCH 2/6] follow design guidelines more closely --- src/components/Textarea/index.js | 2 +- src/components/inputs/Input/index.js | 2 +- src/views/Wallet/views/Account/Receive/index.js | 4 ++-- .../views/Account/Send/components/AdvancedForm/index.js | 4 ++-- src/views/Wallet/views/Account/Send/index.js | 4 ++-- src/views/Wallet/views/Account/SignVerify/index.js | 2 +- .../Wallet/views/Account/Summary/components/Balance/index.js | 2 +- 7 files changed, 10 insertions(+), 10 deletions(-) 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 6645da8d..36a462aa 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 93413f83..dad35777 100644 --- a/src/views/Wallet/views/Account/Receive/index.js +++ b/src/views/Wallet/views/Account/Receive/index.js @@ -20,7 +20,7 @@ import VerifyAddressTooltip from './components/VerifyAddressTooltip'; import type { Props } from './Container'; const Label = styled.div` - padding-bottom: 8px; + padding-bottom: 10px; color: ${colors.TEXT_SECONDARY}; `; @@ -77,7 +77,7 @@ const EyeButton = styled(Button)` const Row = styled.div` display: flex; width: 100%; - padding-bottom: 25px; + padding-bottom: 28px; ${media.lessThan('795px')` flex-direction: column; 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 8d116d05..00ae3b1d 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` - padding-bottom: 25px; + padding-bottom: 28px; `; const InputLabelWrapper = styled.div` @@ -69,7 +69,7 @@ const GasInput = styled(Input)` `; const StyledTextarea = styled(Textarea)` - padding-bottom: 25px; + padding-bottom: 28px; min-height: 80px; `; diff --git a/src/views/Wallet/views/Account/Send/index.js b/src/views/Wallet/views/Account/Send/index.js index 5cf376c0..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 25px 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; - padding-bottom: 8px; + 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 d7b55a0f..61a6db2e 100644 --- a/src/views/Wallet/views/Account/SignVerify/index.js +++ b/src/views/Wallet/views/Account/SignVerify/index.js @@ -18,7 +18,7 @@ const Wrapper = styled.div` `; const Row = styled.div` - padding-bottom: 25px; + 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 d22595b7..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-bottom: 25px; + padding-bottom: 28px; position: relative; display: flex; From 1fd2b8af524f857d3902f4ddbec75ed31e8428fa Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Mon, 10 Dec 2018 14:21:17 +0100 Subject: [PATCH 3/6] fix button not expanding to full width on smaller screen size --- src/views/Wallet/views/Account/Receive/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js index dad35777..936e2920 100644 --- a/src/views/Wallet/views/Account/Receive/index.js +++ b/src/views/Wallet/views/Account/Receive/index.js @@ -51,6 +51,8 @@ const ShowAddressButton = styled(Button)` ${media.lessThan('795px')` margin-top: 10px; + align-self: auto; + border-radius: 3px; `} `; From fd17924f2a3f368f39e858e02cbb191a0d5e9417 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Mon, 10 Dec 2018 14:32:55 +0100 Subject: [PATCH 4/6] fix padding for gas inputs on smaller screens --- .../views/Account/Send/components/AdvancedForm/index.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) 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 00ae3b1d..932e45af 100644 --- a/src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js +++ b/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` - padding-bottom: 28px; -`; - 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; @@ -56,6 +52,7 @@ const GasInputRow = styled(InputRow)` const GasInput = styled(Input)` /* min-height: 85px; */ + padding-bottom: 28px; &:first-child { padding-right: 20px; } @@ -63,7 +60,6 @@ const GasInput = styled(Input)` @media screen and (max-width: ${SmallScreenWidth}) { &:first-child { padding-right: 0; - margin-bottom: 2px; } } `; From da429c314f277319d9b4f3f29b036b19f3a499c2 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 10 Dec 2018 15:15:29 +0100 Subject: [PATCH 5/6] put back file --- src/views/Wallet/views/Account/Receive/{g.js => index.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/views/Wallet/views/Account/Receive/{g.js => index.js} (100%) diff --git a/src/views/Wallet/views/Account/Receive/g.js b/src/views/Wallet/views/Account/Receive/index.js similarity index 100% rename from src/views/Wallet/views/Account/Receive/g.js rename to src/views/Wallet/views/Account/Receive/index.js From 59aa11187018c59d961e911d7f6617cfaf25935d Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 10 Dec 2018 15:21:12 +0100 Subject: [PATCH 6/6] put back styles --- src/views/Wallet/views/Account/Receive/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js index c502a578..0c575c56 100644 --- a/src/views/Wallet/views/Account/Receive/index.js +++ b/src/views/Wallet/views/Account/Receive/index.js @@ -50,6 +50,8 @@ const ShowAddressButton = styled(Button)` @media screen and (max-width: 795px) { margin-top: 10px; + align-self: auto; + border-radius: 3px; } `;