Добавил ligh/dark скины для текстовых полей

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>
         );

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;