From 86fbce53a5f1f30bcb20913861c53dbf8502565d Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Mon, 24 Sep 2018 10:44:47 +0200 Subject: [PATCH 1/6] Change style for disabled Textarea --- src/components/Textarea/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index 8eecff33..6c4edd45 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -56,8 +56,9 @@ const TextArea = styled.textarea` } &:disabled { - border: 1px solid ${disabledColor}; - cursor: not-allowed; + pointer-events: none; + background: ${colors.GRAY_LIGHT}; + color: ${colors.TEXT_SECONDARY}; &::-webkit-input-placeholder { color: ${disabledColor}; From 162ddebd6cdee5b9dfaaa370befbe2ffa84a2f8a Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Mon, 24 Sep 2018 10:45:40 +0200 Subject: [PATCH 2/6] Fix AdvanceForm composition for a smaller screen width --- .../components/AdvancedForm/index.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js b/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js index 3a87a335..cd7f924c 100644 --- a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js +++ b/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js @@ -13,6 +13,11 @@ import ICONS from 'config/icons'; import type { Props } from '../../Container'; +// TODO: Decide on a small screen width for the whole app +// and put it inside config/variables.js +// same variable also in "AccountSend/index.js" +const SmallScreenWidth = '850px'; + const InputRow = styled.div` margin-bottom: 20px; `; @@ -38,12 +43,24 @@ const AdvancedSettingsWrapper = styled.div` const GasInputRow = styled(InputRow)` width: 100%; display: flex; + + @media screen and (max-width: ${SmallScreenWidth}) { + flex-direction: column; + } `; const GasInput = styled(Input)` + min-height: 85px; &:first-child { padding-right: 20px; } + + @media screen and (max-width: ${SmallScreenWidth}) { + &:first-child { + padding-right: 0; + margin-bottom: 2px; + } + } `; const StyledTextarea = styled(Textarea)` @@ -204,7 +221,7 @@ const AdvancedForm = (props: Props) => { )} bottomText={errors.data || warnings.data || infos.data} - disabled={networkSymbol !== currency} + isDisabled={networkSymbol !== currency} value={networkSymbol !== currency ? '' : data} onChange={event => onDataChange(event.target.value)} /> From e1c1c5c9fceb72e10459bb668d8c244f646f9a0e Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Mon, 24 Sep 2018 10:45:56 +0200 Subject: [PATCH 3/6] Minor spacing change --- src/views/Wallet/views/AccountSend/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Wallet/views/AccountSend/index.js b/src/views/Wallet/views/AccountSend/index.js index d7d2ffa3..f648ffd0 100644 --- a/src/views/Wallet/views/AccountSend/index.js +++ b/src/views/Wallet/views/AccountSend/index.js @@ -32,7 +32,7 @@ const StyledH2 = styled(H2)` `; const InputRow = styled.div` - margin-bottom: 20px; + margin-bottom: 10px; `; const SetMaxAmountButton = styled(Button)` From 34a02ee5371c11e3104940640e70bb678079e3f6 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Mon, 24 Sep 2018 10:46:33 +0200 Subject: [PATCH 4/6] Add text under "Gas limit" input showing that gas limit is being recalculated --- .../Wallet/views/AccountSend/components/AdvancedForm/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js b/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js index cd7f924c..c298d188 100644 --- a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js +++ b/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js @@ -106,6 +106,7 @@ const AdvancedForm = (props: Props) => { networkSymbol, currency, recommendedGasPrice, + calculatingGasLimit, errors, warnings, infos, @@ -160,7 +161,7 @@ const AdvancedForm = (props: Props) => { )} - bottomText={errors.gasLimit || warnings.gasLimit || infos.gasLimit} + bottomText={errors.gasLimit || warnings.gasLimit || infos.gasLimit || (calculatingGasLimit ? 'Calculating...' : '')} value={gasLimit} isDisabled={networkSymbol === currency && data.length > 0} onChange={event => onGasLimitChange(event.target.value)} From 7d4ca8eeedabe286755c6d834231f5c25fec26e2 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Mon, 24 Sep 2018 11:37:51 +0200 Subject: [PATCH 5/6] Change textarea style based on its state prop --- src/components/Textarea/index.js | 42 +++++++++++++++---- .../components/AdvancedForm/index.js | 14 ++++++- 2 files changed, 48 insertions(+), 8 deletions(-) diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index 6c4edd45..2d21bebf 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -15,10 +15,11 @@ const disabledColor = colors.TEXT_PRIMARY; const TextArea = styled.textarea` width: 100%; + min-height: 85px; + margin-bottom: 10px; padding: 6px 12px; box-sizing: border-box; - min-height: 25px; - border: ${props => (props.isError ? `1px solid ${colors.ERROR_PRIMARY}` : `1px solid ${colors.DIVIDER}`)}; + border: 1px solid ${props => (props.borderColor ? props.borderColor : colors.DIVIDER)}; border-radius: 2px; resize: none; outline: none; @@ -87,6 +88,23 @@ const TopLabel = styled.span` color: ${colors.TEXT_SECONDARY}; `; +const BottomText = styled.span` + font-size: ${FONT_SIZE.SMALLER}; + color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)}; +`; + +const getColor = (inputState) => { + let color = ''; + if (inputState === 'success') { + color = colors.SUCCESS_PRIMARY; + } else if (inputState === 'warning') { + color = colors.WARNING_PRIMARY; + } else if (inputState === 'error') { + color = colors.ERROR_PRIMARY; + } + return color; +}; + const Textarea = ({ className, placeholder = '', @@ -96,15 +114,17 @@ const Textarea = ({ onBlur, isDisabled, onChange, - isError, topLabel, + state = '', + bottomText = '', }) => ( - + {topLabel && ( {topLabel} )}