diff --git a/src/components/Input/index.js b/src/components/Input/index.js
index 81cd94e9..add07904 100644
--- a/src/components/Input/index.js
+++ b/src/components/Input/index.js
@@ -2,9 +2,12 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import colors from 'config/colors';
+import ICONS from 'config/icons';
+import Icon from 'components/Icon';
import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
const StyledInput = styled.input`
+ width: 100%;
padding: 6px 12px;
line-height: 1.42857143;
@@ -20,7 +23,7 @@ const StyledInput = styled.input`
box-shadow: 0 1px 2px 0 rgba(169, 169, 169, 0.25);
}
- ${props => props.isValid && css`
+ ${props => props.isSuccess && css`
border-color: ${colors.SUCCESS_PRIMARY};
&:focus {
box-shadow: 0 1px 4px 0 rgba(1, 183, 87, 0.25);
@@ -46,21 +49,48 @@ const StyledInput = styled.input`
}
`;
+const Wrapper = styled.div``;
+
+const StyledIcon = styled(Icon)`
+ position: absolute;
+ right: 55px;
+`;
+
const Input = ({
- type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isValid, isWarning, isError,
+ type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isSuccess, isWarning, isError,
}) => (
-
+
+
+ {isError && (
+
+ )}
+ {isWarning && (
+
+ )}
+ {isSuccess && (
+
+ )}
+
);
Input.propTypes = {
@@ -71,7 +101,7 @@ Input.propTypes = {
spellCheck: PropTypes.string,
value: PropTypes.string.isRequired,
onChange: PropTypes.func,
- isValid: PropTypes.bool,
+ isSuccess: PropTypes.bool,
isWarning: PropTypes.bool,
isError: PropTypes.bool,
};