From a6976e2e78e6b18432b4c6398415191e67f6aef8 Mon Sep 17 00:00:00 2001
From: SleepWalker <mybox@udf.su>
Date: Sun, 17 Apr 2016 12:20:41 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20li?=
 =?UTF-8?q?gh/dark=20=D1=81=D0=BA=D0=B8=D0=BD=D1=8B=20=D0=B4=D0=BB=D1=8F?=
 =?UTF-8?q?=20=D1=82=D0=B5=D0=BA=D1=81=D1=82=D0=BE=D0=B2=D1=8B=D1=85=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=BB=D0=B5=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/Form.jsx  | 19 +++++++++++++------
 src/components/ui/form.scss | 32 ++++++++++++++++++++++----------
 2 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/components/ui/Form.jsx b/src/components/ui/Form.jsx
index c59f04c..0d671ec 100644
--- a/src/components/ui/Form.jsx
+++ b/src/components/ui/Form.jsx
@@ -10,10 +10,14 @@ export class Input extends Component {
     static displayName = 'Input';
 
     static propTypes = {
-        placeholder: PropTypes.shape({
-            id: PropTypes.string
-        }),
+        placeholder: PropTypes.oneOfType([
+            PropTypes.shape({
+                id: PropTypes.string
+            }),
+            PropTypes.string
+        ]),
         icon: PropTypes.string,
+        skin: PropTypes.oneOf(['dark', 'light']),
         color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue'])
     };
 
@@ -22,7 +26,7 @@ export class Input extends Component {
     };
 
     render() {
-        let { icon, color = 'green' } = this.props;
+        let { icon, color = 'green', skin = 'dark' } = this.props;
 
         const props = {
             type: 'text',
@@ -37,13 +41,16 @@ export class Input extends Component {
         if (icon) {
             baseClass = styles.formIconRow;
             icon = (
-                <div className={classNames(styles.formFieldIcon, icons[icon])} />
+                <div className={classNames(styles.textFieldIcon, icons[icon])} />
             );
         }
 
         return (
             <div className={baseClass}>
-                <input ref={this.setEl} className={styles[`${color}TextField`]} {...props} />
+                <input ref={this.setEl} className={classNames(
+                    styles[`${skin}TextField`],
+                    styles[`${color}TextField`]
+                )} {...props} />
                 {icon}
             </div>
         );
diff --git a/src/components/ui/form.scss b/src/components/ui/form.scss
index ab8ffa4..1ce8386 100644
--- a/src/components/ui/form.scss
+++ b/src/components/ui/form.scss
@@ -17,10 +17,14 @@
         &:focus {
             border-color: $color;
 
-            ~ .formFieldIcon {
+            ~ .textFieldIcon {
                 background: $color;
                 border-color: $color;
             }
+
+            &.lightTextField {
+                color: $color;
+            }
         }
     }
 }
@@ -50,8 +54,7 @@
     height: 50px;
     width: 100%;
 
-    border: 2px solid lighter($black);
-    background: $black;
+    border: 2px solid;
 
     font-size: 18px;
     color: #aaa;
@@ -67,7 +70,7 @@
 
     &:hover {
         &,
-        ~ .formFieldIcon {
+        ~ .textFieldIcon {
             border-color: #aaa;
         }
     }
@@ -76,14 +79,23 @@
         color: #fff;
         outline: none;
 
-        ~ .formFieldIcon {
+        ~ .textFieldIcon {
             color: #fff;
         }
     }
 }
 
+.darkTextField {
+    background: $black;
+    border-color: lighter($black);
+}
 
-.formFieldIcon {
+.lightTextField {
+    background: #fff;
+    border-color: #dcd8cd;
+}
+
+.textFieldIcon {
     box-sizing: border-box;
     position: absolute;
     left: 0;
@@ -203,17 +215,17 @@
     box-shadow: none;
 
     &,
-    ~ .formFieldIcon {
+    ~ .textFieldIcon {
         border-color: #3e2727;
     }
 
-    ~ .formFieldIcon {
+    ~ .textFieldIcon {
         color: #3e2727;
     }
 
     &:hover {
         &,
-        ~ .formFieldIcon {
+        ~ .textFieldIcon {
             border-color: $red;
         }
     }
@@ -221,7 +233,7 @@
     &:focus {
         border-color: $red;
 
-        ~ .formFieldIcon {
+        ~ .textFieldIcon {
             background: $red;
             border-color: $red;
             color: #fff;