Merge branch 'master' of github.com:satoshilabs/trezor-wallet

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;
@@ -56,8 +57,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};
@@ -86,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 = '',
@@ -95,15 +114,17 @@ const Textarea = ({
     onBlur,
     isDisabled,
     onChange,
-    isError,
     topLabel,
+    state = '',
+    bottomText = '',
 }) => (
-    <Wrapper>
+    <Wrapper
+        className={className}
+    >
         {topLabel && (
             <TopLabel>{topLabel}</TopLabel>
         )}
         <TextArea
-            className={className}
             disabled={isDisabled}
             style={customStyle}
             onFocus={onFocus}
@@ -111,14 +132,20 @@ const Textarea = ({
             value={value}
             placeholder={placeholder}
             onChange={onChange}
-            isError={isError}
+            borderColor={getColor(state)}
         />
+        {bottomText && (
+            <BottomText
+                color={getColor(state)}
+            >
+                {bottomText}
+            </BottomText>
+        )}
     </Wrapper>
 );
 
 Textarea.propTypes = {
     className: PropTypes.string,
-    isError: PropTypes.bool,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     onChange: PropTypes.func,
@@ -127,6 +154,8 @@ Textarea.propTypes = {
     value: PropTypes.string,
     isDisabled: PropTypes.bool,
     topLabel: PropTypes.node,
+    state: PropTypes.string,
+    bottomText: PropTypes.string,
 };
 
 export default Textarea;

src/components/inputs/Input/index.js

@@ -34,7 +34,7 @@ const TopLabel = styled.span`
 
 const StyledInput = styled.input`
     width: 100%;
-    padding: 6px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px;
+    padding: 6px ${props => (props.hasIcon ? '32px' : '12px')} 6px 12px;
 
     line-height: 1.42857143;
     font-size: ${FONT_SIZE.SMALL};
@@ -61,7 +61,7 @@ const StyledInput = styled.input`
 const StyledIcon = styled(Icon)`
     position: absolute;
     left: auto;
-    right: 10px;
+    right: 3px;
 `;
 
 const BottomText = styled.span`
@@ -112,7 +112,7 @@ class Input extends Component {
                             />
                         )}
                         <StyledInput
-                            hasIcon={!!this.props.state}
+                            hasIcon={this.getIcon(this.props.state).length > 0}
                             innerRef={this.props.innerRef}
                             hasAddon={!!this.props.sideAddons}
                             type={this.props.type}

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,17 +43,29 @@ 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)`
     margin-bottom: 20px;
-    height: 80px;
+    min-height: 80px;
 `;
 
 const AdvancedSettingsSendButtonWrapper = styled.div`
@@ -79,6 +96,17 @@ const getGasPriceInputState = (gasPriceErrors: string, gasPriceWarnings: string)
     return state;
 };
 
+const getDataTextareaState = (dataError: string, dataWarning: string): string => {
+    let state = '';
+    if (dataWarning) {
+        state = 'warning';
+    }
+    if (dataError) {
+        state = 'error';
+    }
+    return state;
+};
+
 // stateless component
 const AdvancedForm = (props: Props) => {
     const {
@@ -89,6 +117,7 @@ const AdvancedForm = (props: Props) => {
         networkSymbol,
         currency,
         recommendedGasPrice,
+        calculatingGasLimit,
         errors,
         warnings,
         infos,
@@ -143,7 +172,7 @@ const AdvancedForm = (props: Props) => {
                             </Tooltip>
                         </InputLabelWrapper>
                     )}
-                    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)}
@@ -203,8 +232,9 @@ const AdvancedForm = (props: Props) => {
                         </Tooltip>
                     </InputLabelWrapper>
                 )}
+                state={getDataTextareaState(errors.data, warnings.data)}
                 bottomText={errors.data || warnings.data || infos.data}
-                disabled={networkSymbol !== currency}
+                isDisabled={networkSymbol !== currency}
                 value={networkSymbol !== currency ? '' : data}
                 onChange={event => onDataChange(event.target.value)}
             />

src/views/Wallet/views/AccountSend/index.js

@@ -42,7 +42,7 @@ const AmountInputLabel = styled.span`
 `;
 
 const InputRow = styled.div`
-    margin-bottom: 20px;
+    margin-bottom: 10px;
 `;
 
 const SetMaxAmountButton = styled(Button)`