From a5bb1f9dda830c11e23753b55eb06df2421487aa Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Wed, 11 Jan 2017 17:12:30 +0000
Subject: [PATCH 1/3] wrapping toggle in base and removing margin on hidden
 label

---
 ui/src/components/toggle/index.js | 11 +++++++--
 ui/src/components/toggle/story.js | 37 ++++++++++++++++++-------------
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/ui/src/components/toggle/index.js b/ui/src/components/toggle/index.js
index b46f2dbb..d50bc992 100644
--- a/ui/src/components/toggle/index.js
+++ b/ui/src/components/toggle/index.js
@@ -83,6 +83,13 @@ const StyledInput1 = styled.input`
   }
 `;
 
+/*
+TODO: Remove !important - it is used to overirde a global style
+ */
+const StyledLabel = styled.label`
+  margin-bottom: 0 !important;
+`;
+
 const Toggle = ({
   checked,
   className,
@@ -120,13 +127,13 @@ const Toggle = ({
         };
 
         return (
-          <label
+          <StyledLabel
             htmlFor={customProps.id}
             key={index}
           >
             {InputVarients[`input_${index}`]}
             <StyledText>{option.label}</StyledText>
-          </label>
+          </StyledLabel>
         );
       })}
     </StyledDiv>
diff --git a/ui/src/components/toggle/story.js b/ui/src/components/toggle/story.js
index 6af792bc..da5059bb 100644
--- a/ui/src/components/toggle/story.js
+++ b/ui/src/components/toggle/story.js
@@ -4,27 +4,34 @@ const {
   storiesOf
 } = require('@kadira/storybook');
 
+const Base = require('../base');
 const Toggle = require('./');
 
 storiesOf('Toggle', module)
   .add('default', () => (
-    <Toggle checked />
+    <Base>
+      <Toggle checked />
+    </Base>
   ))
   .add('checked', () => (
-    <Toggle
-      defaultChecked
-      options={[
-        {
-          label: 'Topology',
-          checked: true
-        },
-        {
-          label: 'List',
-          checked: false
-        }
-      ]}
-    />
+    <Base>
+      <Toggle
+        defaultChecked
+        options={[
+          {
+            label: 'Topology',
+            checked: true
+          },
+          {
+            label: 'List',
+            checked: false
+          }
+        ]}
+      />
+    </Base>
   ))
   .add('no props', () => (
-    <Toggle />
+    <Base>
+      <Toggle />
+    </Base>
   ));
\ No newline at end of file

From 92887e12c556b1777b797cb3120e8979d6679413 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Thu, 12 Jan 2017 11:07:47 +0000
Subject: [PATCH 2/3] updating tabs css

---
 ui/src/components/tabs/story.js     | 19 +++++++++++--------
 ui/src/components/tabs/tab/index.js | 23 ++++++++++-------------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/ui/src/components/tabs/story.js b/ui/src/components/tabs/story.js
index f23bb076..939a55e6 100644
--- a/ui/src/components/tabs/story.js
+++ b/ui/src/components/tabs/story.js
@@ -6,15 +6,18 @@ const {
 
 const Tabs = require('./');
 const Tab = require('./tab');
+const Base = require('../base');
 
 storiesOf('Tabs', module)
   .add('Default', () => (
-    <Tabs name='my-tab-group'>
-      <Tab title='Containers'>
-        <h1>Containers</h1>
-      </Tab>
-      <Tab title='Users'>
-        <h1>User</h1>
-      </Tab>
-    </Tabs>
+    <Base>
+      <Tabs name='my-tab-group'>
+        <Tab title='Your Dashboard'>
+          <h1>Containers</h1>
+        </Tab>
+        <Tab title='YLD'>
+          <h1>User</h1>
+        </Tab>
+      </Tabs>
+    </Base>
   ));
\ No newline at end of file
diff --git a/ui/src/components/tabs/tab/index.js b/ui/src/components/tabs/tab/index.js
index f23a6d3d..ab417de1 100644
--- a/ui/src/components/tabs/tab/index.js
+++ b/ui/src/components/tabs/tab/index.js
@@ -10,7 +10,8 @@ const {
 } = composers;
 
 const {
-  boxes
+  boxes,
+  colors
 } = constants;
 
 const {
@@ -44,9 +45,8 @@ const StyledRadio = styled.input`
 
   &:checked {
     & + .${classNames.label} {
-      background: #FAFAFA;
+      background: ${colors.brandInactive};
       border-bottom-width: 0;
-      padding-bottom: ${remcalc(11)};
 
       ${moveZ({
         amount: 1
@@ -60,16 +60,12 @@ const StyledRadio = styled.input`
 `;
 
 const StyledLabel = styled.label`
-  background: #F2F2F2;
-  border: ${boxes.border.unchecked};
-  color: #646464;
+  background: transparent;
+  border: 1px solid #D8D8D8;
   display: inline-block;
   font-size: ${remcalc(20)};
-  left: 1px;
-  margin-left: -1px;
-  margin-bottom: 0;
-  padding: ${remcalc(10)};
-  position: relative;
+  padding: ${remcalc('12 25')};
+  margin-right: 0.5rem;
   vertical-align: bottom;
 `;
 
@@ -82,14 +78,15 @@ const StyledPanel = styled.div`
 `;
 
 const StyledContent = styled.div`
-  background: #FAFAFA;
+  background: ${colors.brandInactive};
   border: ${boxes.border.unchecked};
   box-sizing: border-box;
+  box-shadow: 0 -1px 26px 0 rgba(0, 0, 0, 0.2);
   display: block;
   float: left;
   font-size: ${remcalc(16)};
   margin-top: ${remcalc(-9)};
-  padding: ${remcalc('0 20')};
+  padding: ${remcalc('20 25')};
   width: 100%;
 `;
 

From 7dffed145c30f920e1c23120a22906ef262af03d Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Thu, 12 Jan 2017 12:09:35 +0000
Subject: [PATCH 3/3] adding success and error styles to input filed

---
 ui/src/components/input/index.js       | 27 +++++++++++++++++++++-----
 ui/src/components/input/story.js       |  9 ++++++++-
 ui/src/shared/assets/input-confirm.svg | 24 +++++++++++++++++++++++
 3 files changed, 54 insertions(+), 6 deletions(-)
 create mode 100644 ui/src/shared/assets/input-confirm.svg

diff --git a/ui/src/components/input/index.js b/ui/src/components/input/index.js
index 0ced95fa..81b89968 100644
--- a/ui/src/components/input/index.js
+++ b/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
diff --git a/ui/src/components/input/story.js b/ui/src/components/input/story.js
index af8538db..c7571fae 100644
--- a/ui/src/components/input/story.js
+++ b/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>
   ));
\ No newline at end of file
diff --git a/ui/src/shared/assets/input-confirm.svg b/ui/src/shared/assets/input-confirm.svg
new file mode 100644
index 00000000..90e04219
--- /dev/null
+++ b/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>
\ No newline at end of file