From f5c1ef4217ce46ea78305b97f13d7ea5f54be65f Mon Sep 17 00:00:00 2001
From: SleepWalker <mybox@udf.su>
Date: Fri, 4 Aug 2017 22:27:02 +0300
Subject: [PATCH] #305: implement Stepper theming for green and violet colors

---
 .../profile/changeEmail/ChangeEmail.js        |  6 +--
 .../profile/changeEmail/changeEmail.scss      | 12 ------
 .../multiFactorAuth/MultiFactorAuth.js        |  1 -
 .../profile/multiFactorAuth/mfa.scss          |  2 -
 src/components/ui/index.js                    | 39 ++++++++++++-------
 src/components/ui/stepper/Stepper.js          | 12 ++++--
 src/components/ui/stepper/stepper.scss        | 16 ++++++++
 7 files changed, 53 insertions(+), 35 deletions(-)
 delete mode 100644 src/components/profile/multiFactorAuth/mfa.scss

diff --git a/src/components/profile/changeEmail/ChangeEmail.js b/src/components/profile/changeEmail/ChangeEmail.js
index 28e531b..11ea1b7 100644
--- a/src/components/profile/changeEmail/ChangeEmail.js
+++ b/src/components/profile/changeEmail/ChangeEmail.js
@@ -18,8 +18,6 @@ import messages from './ChangeEmail.intl.json';
 const STEPS_TOTAL = 3;
 
 export default class ChangeEmail extends Component {
-    static displayName = 'ChangeEmail';
-
     static propTypes = {
         onChangeStep: PropTypes.func,
         lang: PropTypes.string.isRequired,
@@ -96,8 +94,8 @@ export default class ChangeEmail extends Component {
                         </div>
                     </div>
 
-                    <div className={changeEmail.stepper}>
-                        <Stepper totalSteps={STEPS_TOTAL} activeStep={activeStep} />
+                    <div className={styles.stepper}>
+                        <Stepper color="violet" totalSteps={STEPS_TOTAL} activeStep={activeStep} />
                     </div>
 
                     <div className={styles.form}>
diff --git a/src/components/profile/changeEmail/changeEmail.scss b/src/components/profile/changeEmail/changeEmail.scss
index 5cc3c0b..0120926 100644
--- a/src/components/profile/changeEmail/changeEmail.scss
+++ b/src/components/profile/changeEmail/changeEmail.scss
@@ -1,15 +1,3 @@
-@import '~components/ui/colors.scss';
-
-.stepper {
-    composes: stepper from 'components/profile/profileForm.scss';
-
-    .activeStep {
-        &:after {
-            background: $violet;
-        }
-    }
-}
-
 .currentAccountEmail {
     text-align: center;
     text-overflow: ellipsis;
diff --git a/src/components/profile/multiFactorAuth/MultiFactorAuth.js b/src/components/profile/multiFactorAuth/MultiFactorAuth.js
index d38965d..56705ee 100644
--- a/src/components/profile/multiFactorAuth/MultiFactorAuth.js
+++ b/src/components/profile/multiFactorAuth/MultiFactorAuth.js
@@ -15,7 +15,6 @@ import mfa from 'services/api/mfa';
 import Instructions from './instructions';
 import KeyForm from './keyForm';
 import Confirmation from './confirmation';
-import mfaStyles from './mfa.scss';
 import messages from './MultiFactorAuth.intl.json';
 
 const STEPS_TOTAL = 3;
diff --git a/src/components/profile/multiFactorAuth/mfa.scss b/src/components/profile/multiFactorAuth/mfa.scss
deleted file mode 100644
index d721bff..0000000
--- a/src/components/profile/multiFactorAuth/mfa.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '~components/ui/colors.scss';
-
diff --git a/src/components/ui/index.js b/src/components/ui/index.js
index 189e689..c1947a5 100644
--- a/src/components/ui/index.js
+++ b/src/components/ui/index.js
@@ -1,17 +1,27 @@
-export const SKIN_DARK = 'dark';
-export const SKIN_LIGHT = 'light';
+// @flow
+export type Color = 'green'
+    |'blue'
+    |'darkBlue'
+    |'violet'
+    |'lightViolet'
+    |'orange'
+    |'red'
+    |'black'
+    |'white';
 
-export const COLOR_GREEN = 'green';
-export const COLOR_BLUE = 'blue';
-export const COLOR_DARK_BLUE = 'darkBlue';
-export const COLOR_VIOLET = 'violet';
-export const COLOR_LIGHT_VIOLET = 'lightViolet';
-export const COLOR_ORANGE = 'orange';
-export const COLOR_RED = 'red';
-export const COLOR_BLACK = 'black';
-export const COLOR_WHITE = 'white';
+export type Skin = 'dark'|'light';
 
-export const colors = [
+export const COLOR_GREEN: Color = 'green';
+export const COLOR_BLUE: Color = 'blue';
+export const COLOR_DARK_BLUE: Color = 'darkBlue';
+export const COLOR_VIOLET: Color = 'violet';
+export const COLOR_LIGHT_VIOLET: Color = 'lightViolet';
+export const COLOR_ORANGE: Color = 'orange';
+export const COLOR_RED: Color = 'red';
+export const COLOR_BLACK: Color = 'black';
+export const COLOR_WHITE: Color = 'white';
+
+export const colors: Array<Color> = [
     COLOR_GREEN,
     COLOR_BLUE,
     COLOR_DARK_BLUE,
@@ -23,4 +33,7 @@ export const colors = [
     COLOR_WHITE
 ];
 
-export const skins = [SKIN_DARK, SKIN_LIGHT];
+export const SKIN_DARK: Skin = 'dark';
+export const SKIN_LIGHT: Skin = 'light';
+
+export const skins: Array<Skin> = [SKIN_DARK, SKIN_LIGHT];
diff --git a/src/components/ui/stepper/Stepper.js b/src/components/ui/stepper/Stepper.js
index 6e79d12..d143363 100644
--- a/src/components/ui/stepper/Stepper.js
+++ b/src/components/ui/stepper/Stepper.js
@@ -3,17 +3,23 @@ import React from 'react';
 
 import classNames from 'classnames';
 
+import { COLOR_GREEN } from 'components/ui';
+
 import styles from './stepper.scss';
 
+import type { Color } from 'components/ui';
+
 export default function Stepper({
     totalSteps,
-    activeStep
+    activeStep,
+    color = COLOR_GREEN
 } : {
     totalSteps: number,
-    activeStep: number
+    activeStep: number,
+    color: Color
 }) {
     return (
-        <div className={styles.steps}>
+        <div className={classNames(styles.steps, styles[`${color}Steps`])}>
             {(new Array(totalSteps)).fill(0).map((_, step) => (
                 <div className={classNames(styles.step, {
                     [styles.activeStep]: step <= activeStep
diff --git a/src/components/ui/stepper/stepper.scss b/src/components/ui/stepper/stepper.scss
index f19a0ec..f30ea9f 100644
--- a/src/components/ui/stepper/stepper.scss
+++ b/src/components/ui/stepper/stepper.scss
@@ -65,3 +65,19 @@
         transition-delay: 0.3s;
     }
 }
+
+.greenSteps {
+    .activeStep {
+        &:after {
+            background: $green;
+        }
+    }
+}
+
+.violetSteps {
+    .activeStep {
+        &:after {
+            background: $violet;
+        }
+    }
+}