adding success and error styles to input filed

ui/src/components/input/index.js

@@ -11,7 +11,7 @@ const {
 } = constants;
 
 const {
-  remcalc
+  remcalc,
 } = fns;
 
 const {
@@ -19,23 +19,37 @@ const {
 } = composers;
 
 const {
-  default: styled
+  default: styled,
+  css
 } = Styled;
 
+const successBakcground = css`
+  background-color: ${colors.brandSecondary};
+  background-image: url("./input-confirm.svg");
+  background-repeat: no-repeat;
+  background-position: 98% 20px;
+`;
+
+const defaultBackground = css`
+  background-color: ${colors.brandSecondary};
+`;
+
 const Label = styled.label`
   color: ${props => props.error ? colors.alert : colors.fonts.regular}
 `;
 
 const InputField = styled.input`
-  background: ${colors.brandSecondary};
+  ${baseBox()};
+  
+  ${props => props.success ? successBakcground : defaultBackground }
+  
+  border-color: ${props => props.error ? colors.alert : 'auto'}
   color: ${props => props.error ? colors.alert : colors.fonts.semibold}
   display: block;
   font-size: 16px;
   padding: ${remcalc('15 18')};
   visibility: visible;
   width: 100%;
-  ${baseBox()};
-  border-color: ${props => props.error ? colors.alert : ''};
   
   &:focus {
     border-color: ${boxes.border.checked};
@@ -71,6 +85,7 @@ const Input = ({
   selectionDirection,
   spellCheck,
   style,
+  success,
   tabIndex,
   type,
   value
@@ -106,6 +121,7 @@ const Input = ({
         required={required}
         selectionDirection={selectionDirection}
         spellCheck={spellCheck}
+        success={success}
         tabIndex={tabIndex}
         type={type}
         value={value}
@@ -137,6 +153,7 @@ Input.propTypes = {
   selectionDirection: React.PropTypes.string,
   spellCheck: React.PropTypes.bool,
   style: React.PropTypes.object,
+  success: React.PropTypes.bool,
   tabIndex: React.PropTypes.string,
   type: React.PropTypes.string,
   value: React.PropTypes.string

ui/src/components/input/story.js

@@ -28,8 +28,15 @@ storiesOf('Input', module)
     <Base>
       <Input
         error="Somethings missing"
-        placeholder="There was an error"
         value="alexw/makeusproud.com"
       />
     </Base>
+  ))
+  .add('Success', () => (
+    <Base>
+      <Input
+        success
+        value="alexw@makeusproud.com"
+      />
+    </Base>
   ));

ui/src/shared/assets/input-confirm.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>icon: confirmation</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="9" cy="9" r="9"></circle>
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="18" height="18" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ui-components-revised" transform="translate(-1145.000000, -1341.000000)">
+            <g id="single-field-line" transform="translate(801.000000, 45.000000)">
+                <g id="text-field-+-confirmation" transform="translate(0.000000, 1254.000000)">
+                    <g id="icon:-confirmation" transform="translate(344.000000, 42.000000)">
+                        <use id="Oval" stroke="#00AF66" mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use>
+                        <polygon id="tick" fill="#00AF66" points="12.017 5.00007 8.121 10.33607 6.634 8.22707 5 9.37907 8.091 13.76807 13.632 6.17907"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>