Форма регистрации

src/components/auth/SignIn.jsx

@@ -149,15 +149,15 @@ export default class SignIn extends Component {
                     <Panel title={<Message {...messages.signUpTitle} />}>
                         <PanelBody>
                             {/* TODO: E-mail i18n*/}
-                            <Input icon="user" type="text" placeholder="Your nickname" />
+                            <Input icon="user" color="blue" type="text" placeholder="Your nickname" />
                             {/* TODO: E-mail i18n*/}
-                            <Input icon="envelope" type="email" placeholder="Your E-mail" />
+                            <Input icon="envelope" color="blue" type="email" placeholder="Your E-mail" />
                             {/* TODO: Account password i18n*/}
-                            <Input icon="key" type="password" placeholder="Account password" />
+                            <Input icon="key" color="blue" type="password" placeholder="Account password" />
                             {/* TODO: Account password i18n*/}
-                            <Input icon="key" type="password" placeholder="Repeat password" />
+                            <Input icon="key" color="blue" type="password" placeholder="Repeat password" />
 
-                            <Checkbox label={
+                            <Checkbox color="blue" label={
                                 <Message {...messages.acceptRules} values={{
                                     link: (
                                         <a href="#">
@@ -194,7 +194,7 @@ export default class SignIn extends Component {
                             </div>
                             <div className={styles.formRow}>
                                 {/* TODO: E-mail i18n*/}
-                                <Input type="email" placeholder="Enter the code from E-mail here" />
+                                <Input type="email" color="blue" placeholder="Enter the code from E-mail here" />
                             </div>
                         </PanelBody>
                         <PanelFooter>

src/components/ui/Form.jsx

@@ -6,23 +6,24 @@ import icons from './icons.scss';
 import styles from './form.scss';
 
 export function Input(props) {
+    var { icon, color = 'green' } = props;
+
     props = {
         type: 'text',
         ...props
     };
 
     var baseClass = styles.formRow;
-    var icon;
-    if (props.icon) {
+    if (icon) {
         baseClass = styles.formIconRow;
         icon = (
-            <div className={classNames(styles.formFieldIcon, icons[props.icon])} />
+            <div className={classNames(styles.formFieldIcon, icons[icon])} />
         );
     }
 
     return (
         <div className={baseClass}>
-            <input className={styles.textField} {...props} />
+            <input className={styles[`${color}TextField`]} {...props} />
             {icon}
         </div>
     );
@@ -32,10 +33,10 @@ export class Checkbox extends Component {
     displayName = 'Checkbox';
 
     render() {
-        var { label } = this.props;
+        var { label, color = 'green' } = this.props;
 
         return (
-            <div className={styles.checkboxRow}>
+            <div className={styles[`${color}CheckboxRow`]}>
                 <label className={styles.checkboxContainer}>
                     <input className={styles.checkboxInput} type="checkbox" />
                     <div className={styles.checkbox} />

src/components/ui/buttons.scss

@@ -1,8 +1,8 @@
 @import './colors.scss';
 @import './fonts.scss';
 
-@mixin button-color($colorName, $backgroundColor, $textColor : $defaultButtonTextColor) {
-    .#{$colorName} {
+@mixin button-theme($themeName, $backgroundColor, $textColor : $defaultButtonTextColor) {
+    .#{$themeName} {
         composes: button;
 
         @if ($textColor != $defaultButtonTextColor) {
@@ -56,5 +56,5 @@
     }
 }
 
-@include button-color('blue', $blue);
-@include button-color('green', $green);
+@include button-theme('blue', $blue);
+@include button-theme('green', $green);

src/components/ui/form.scss

@@ -10,6 +10,21 @@
 /**
  * Input
  */
+@mixin input-theme($themeName, $color) {
+    .#{$themeName}TextField {
+        composes: textField;
+
+        &:focus {
+            border-color: $color;
+
+            ~ .formFieldIcon {
+                background: $color;
+                border-color: $color;
+            }
+        }
+    }
+}
+
 .formRow {
     position: relative;
     height: 50px;
@@ -59,13 +74,10 @@
     }
 
     &:focus {
-        border-color: $green;
         color: #fff;
         outline: none;
 
         ~ .formFieldIcon {
-            background: $green;
-            border-color: $green;
             color: #fff;
         }
     }
@@ -87,10 +99,36 @@
     @include form-transition();
 }
 
+@include input-theme('green', $green);
+@include input-theme('blue', $blue);
+
 
 /**
  * Checkbox
  */
+@mixin checkbox-theme($themeName, $color) {
+    .#{$themeName}CheckboxRow {
+        composes: checkboxRow;
+
+        .checkboxContainer {
+            &:hover {
+                .checkbox {
+                    border-color: $color;
+                }
+            }
+        }
+
+        .checkboxInput {
+            &:checked {
+                + .checkbox {
+                    background: $color;
+                    border-color: $color;
+                }
+            }
+        }
+    }
+}
+
 .checkboxRow {
     height: 22px;
     margin-top: 15px;
@@ -107,12 +145,6 @@
     color: #fff;
 
     cursor: pointer;
-
-    &:hover {
-        .checkbox {
-            border-color: $green;
-        }
-    }
 }
 
 .checkboxPosition {
@@ -132,9 +164,6 @@
 
     &:checked {
         + .checkbox {
-            background: $green;
-            border-color: $green;
-
             &:before {
                 opacity: 1;
             }
@@ -158,3 +187,6 @@
         transition: opacity 0.3s;
     }
 }
+
+@include checkbox-theme('green', $green);
+@include checkbox-theme('blue', $blue);