Стили для Stepper унифицированы в рамках профиля пользователя

Форма включения двухфакторной аутентификации перекрашена в зелёный
TODO: на странице смены email stepper имеет зелёный цвет

src/components/profile/changeEmail/ChangeEmail.js

@@ -1,7 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 
 import { FormattedMessage as Message } from 'react-intl';
-import classNames from 'classnames';
 import Helmet from 'react-helmet';
 import { Motion, spring } from 'react-motion';
 
@@ -10,6 +9,7 @@ import { BackButton } from 'components/profile/ProfileForm';
 import styles from 'components/profile/profileForm.scss';
 import helpLinks from 'components/auth/helpLinks.scss';
 import MeasureHeight from 'components/MeasureHeight';
+import Stepper from 'components/ui/stepper';
 
 import changeEmail from './changeEmail.scss';
 import messages from './ChangeEmail.intl.json';
@@ -95,12 +95,8 @@ export default class ChangeEmail extends Component {
                         </div>
                     </div>
 
-                    <div className={changeEmail.steps}>
-                        {(new Array(STEPS_TOTAL)).fill(0).map((_, step) => (
-                            <div className={classNames(changeEmail.step, {
-                                [changeEmail.activeStep]: step <= activeStep
-                            })} key={step} />
-                        ))}
+                    <div className={changeEmail.stepper}>
+                        <Stepper totalSteps={STEPS_TOTAL} activeStep={activeStep} />
                     </div>
 
                     <div className={styles.form}>

src/components/profile/changeEmail/changeEmail.scss

@@ -1,66 +1,12 @@
 @import '~components/ui/colors.scss';
 
-.steps {
-    width: 35%;
-    margin: 0 auto;
-    height: 40px;
-    display: flex;
-    align-items: center;
-}
+.stepper {
+    composes: stepper from 'components/profile/profileForm.scss';
 
-.step {
-    position: relative;
-    text-align: right;
-    width: 100%;
-
-    height: 4px;
-    background: #d8d5ce;
-
-
-    &:first-child {
-        width: 12px;
-    }
-
-    &:before {
-        content: '';
-        display: block;
-
-        position: absolute;
-        height: 4px;
-        left: 0;
-        right: 100%;
-        top: 50%;
-        margin-top: -2px;
-
-        background: #aaa;
-        transition: 0.4s ease 0.1s;
-    }
-
-    &:after {
-        content: '';
-        display: inline-block;
-        position: relative;
-        top: -7px;
-        z-index: 1;
-
-        width: 12px;
-        height: 12px;
-        border-radius: 100%;
-
-        background: #aaa;
-        transition: background 0.4s ease;
-    }
-}
-
-.activeStep {
-    &:before {
-        right: 0;
-        transition-delay: 0;
-    }
-
-    &:after {
-        background: $violet;
-        transition-delay: 0.3s;
+    .activeStep {
+        &:after {
+            background: $violet;
+        }
     }
 }
 
@@ -71,7 +17,6 @@
     line-height: 1.2;
 }
 
-
 .stepForms {
     white-space: nowrap;
 }

src/components/profile/multiFactorAuth/MultiFactorAuth.js

@@ -93,7 +93,7 @@ export default class MultiFactorAuth extends Component {
                         <div className={styles.formBody}>
                             <Message {...messages.mfaTitle}>
                                 {(pageTitle) => (
-                                    <h3 className={styles.violetTitle}>
+                                    <h3 className={styles.title}>
                                         <Helmet title={pageTitle} />
                                         {pageTitle}
                                     </h3>
@@ -108,7 +108,7 @@ export default class MultiFactorAuth extends Component {
                         </div>
                     </div>
 
-                    <div className={mfaStyles.stepper}>
+                    <div className={styles.stepper}>
                         <Stepper totalSteps={STEPS_TOTAL} activeStep={activeStep} />
                     </div>
 
@@ -116,7 +116,7 @@ export default class MultiFactorAuth extends Component {
                         {this.renderStepForms()}
 
                         <Button
-                            color="violet"
+                            color="green"
                             type="submit"
                             block
                             label={buttonLabel}

src/components/profile/multiFactorAuth/mfa.scss

@@ -1,13 +1,2 @@
 @import '~components/ui/colors.scss';
 
-.stepper {
-    width: 35%;
-    margin: 0 auto;
-}
-
-.currentAccountEmail {
-    text-align: center;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    line-height: 1.2;
-}

src/components/profile/profileForm.scss

@@ -84,6 +84,11 @@
     margin-top: 25px;
 }
 
+.stepper {
+    width: 35%;
+    margin: 0 auto;
+}
+
 @media (max-width: 525px) {
     .contentWithBackButton .title {
         padding-top: 23px;

src/components/ui/stepper/stepper.scss

@@ -57,7 +57,7 @@
     }
 
     &:after {
-        background: $violet;
+        background: $green;
         transition-delay: 0.3s;
     }
 }