#305: implement Stepper theming for green and violet colors

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}>
+                    <div className={styles.stepper}>
-                        <Stepper totalSteps={STEPS_TOTAL} activeStep={activeStep} />
+                        <Stepper color="violet" totalSteps={STEPS_TOTAL} activeStep={activeStep} />
                     </div>
 
                     <div className={styles.form}>

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;

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;

src/components/profile/multiFactorAuth/mfa.scss

@@ -1,2 +0,0 @@
-@import '~components/ui/colors.scss';
-

src/components/ui/index.js

@@ -1,17 +1,27 @@
-export const SKIN_DARK = 'dark';
+// @flow
-export const SKIN_LIGHT = 'light';
+export type Color = 'green'
+    |'blue'
+    |'darkBlue'
+    |'violet'
+    |'lightViolet'
+    |'orange'
+    |'red'
+    |'black'
+    |'white';
 
-export const COLOR_GREEN = 'green';
+export type Skin = 'dark'|'light';
-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 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];

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

src/components/ui/stepper/stepper.scss

@@ -65,3 +65,19 @@
         transition-delay: 0.3s;
     }
 }
+
+.greenSteps {
+    .activeStep {
+        &:after {
+            background: $green;
+        }
+    }
+}
+
+.violetSteps {
+    .activeStep {
+        &:after {
+            background: $violet;
+        }
+    }
+}