Change textarea style based on its state prop

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 = '',
 }) => (
-    <Wrapper>
+    <Wrapper
+        className={className}
+    >
         {topLabel && (
             <TopLabel>{topLabel}</TopLabel>
         )}
         <TextArea
-            className={className}
             disabled={isDisabled}
             style={customStyle}
             onFocus={onFocus}
@@ -112,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,
@@ -128,6 +154,8 @@ Textarea.propTypes = {
     value: PropTypes.string,
     isDisabled: PropTypes.bool,
     topLabel: PropTypes.node,
+    state: PropTypes.string,
+    bottomText: PropTypes.string,
 };
 
 export default Textarea;

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

@@ -65,7 +65,7 @@ const GasInput = styled(Input)`
 
 const StyledTextarea = styled(Textarea)`
     margin-bottom: 20px;
-    height: 80px;
+    min-height: 80px;
 `;
 
 const AdvancedSettingsSendButtonWrapper = styled.div`
@@ -96,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 {
@@ -221,6 +232,7 @@ const AdvancedForm = (props: Props) => {
                         </Tooltip>
                     </InputLabelWrapper>
                 )}
+                state={getDataTextareaState(errors.data, warnings.data)}
                 bottomText={errors.data || warnings.data || infos.data}
                 isDisabled={networkSymbol !== currency}
                 value={networkSymbol !== currency ? '' : data}