Fixed alert style mismatches

Author: tt-auto

static/app/components/apps/User/pages/LoginPage.js

@@ -6,8 +6,6 @@ import {withRouter} from 'react-router-dom';
 import {loginUser} from './auth/actions';
 import Login from './auth/Login';
 
-import {forgotPassword} from '~/data/User';
-
 class LoginPage extends React.Component {
   static propTypes = {
     history: PropTypes.object.isRequired,

static/app/components/apps/User/pages/auth/Login.js

@@ -75,7 +75,7 @@ class Login extends React.Component {
   renderErrorAlert() {
     if (this.props.errorMessage) {
       return (
-        <div className="user-login__error">
+        <div className="user-login__error user-login__alert">
           <Alert color="danger" isOpen={this.state.isErrorVisible}
             toggle={this.dismissError}>
             {this.props.errorMessage}

static/app/data/helpers.js

@@ -12,7 +12,7 @@ export const promisify = (request) => {
         return deferred.reject(new Error(res.body.error));
       }
       if (err.status === 401) {
-        return deferred.reject(new Error('Username or Password was incorrect'));
+        return deferred.reject(new Error('Username or Password was incorrect. Have you confirmed your account?'));
       }
       return deferred.reject(new Error(err));
     }

static/assets/scss/components/_user-login.scss

@@ -53,10 +53,6 @@
     }
   }
 
-  &__error {
-    font-family: $header-font-family;
-  }
-
   &__forgot {
     font-family: $header-font-family;
   }
@@ -81,4 +77,8 @@
   &__alerts {
     width: 100%;
   }
+
+  &__alert {
+    font-family: $header-font-family;
+  }
 }

static/assets/scss/vendors-extensions/_bootstrap.scss

@@ -1,8 +1,13 @@
 $brand-primary: $primary-color;
+
 $alert-danger-bg: $accent-red;
 $alert-danger-text: $white;
 $alert-danger-border: darken($alert-danger-bg, 5%);
 
+$alert-success-bg: $accent-green;
+$alert-success-text: $white;
+$alert-success-border: darken($alert-success-bg, 5%);
+
 body {
   background-color: $body-background;
 }
@@ -61,4 +66,8 @@ body {
 
 .alert-danger {
   @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
+}
+
+.alert-success {
+  @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
 }