Revert "Add alert message component and documentation"

This reverts commit 71650fff20c0ad29eb05d770736386863324b64e.

Reason for revert: Found an issue with Sass loader when compiling docs that needs to be addressed.

Change-Id: Icdd1243665f60849bfb341594452687fcdaeebe2

6 files changed, 25 insertions, 100 deletions

diff --git a/src/assets/styles/_alerts.scss b/src/assets/styles/_alerts.scss
deleted file mode 100644
index 816ad33b..00000000
--- a/src/assets/styles/_alerts.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.alert {
-    display: flex;
-    padding: $spacer;
-    border-width: 0 0 0 3px;
-    color: $gray-800;
-    margin-bottom: $spacer;
-
-    .close {
-      font-weight: 300;
-      opacity: 1;
-    }
-
-    .alert-icon {
-      flex: 0 0 20px;
-      margin-right: $spacer;
-      margin-bottom: $spacer;
-
-      @include media-breakpoint-up(sm) {
-        margin-bottom: 0;
-      }
-    }
-
-    .alert-content {
-      flex: 1 1 auto;
-    }
-
-    .alert-title {
-      margin-bottom: $spacer / 2;
-    }
-
-    .alert-msg {
-      p + p {
-        margin-bottom: $spacer;
-      }
-
-      p:last-of-type {
-        margin-bottom: 0;
-      }
-    }
-
-    &.alert-info {
-      border-left-color: $info;
-      background-color: $info-light;
-      fill: $info;
-    }
-
-    &.alert-danger {
-      border-left-color: $danger;
-      background-color: $danger-light;
-      fill: $danger;
-    }
-
-    &.alert-warning {
-      border-left-color: $warning;
-      background-color: $warning-light;
-      fill: $warning;
-    }
-  }
\ No newline at end of file
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index 2a8d896a..66cebda2 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -39,7 +39,6 @@
 
 @import "~bootstrap-vue/src/index.scss";
 
-@import "./alerts";
 @import "./buttons";
 @import "./form-components";
 @import "./modal";
diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue
deleted file mode 100644
index bc65b6e9..00000000
--- a/src/components/Global/Alert.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <b-alert :show="show" :variant="variant">
-    <div v-if="variant == 'warning' || variant == 'danger'" class="alert-icon">
-      <status-icon :status="variant" />
-    </div>
-    <div class="alert-content">
-      <div class="alert-msg"><slot /></div>
-    </div>
-  </b-alert>
-</template>
-
-<script>
-import StatusIcon from '../Global/StatusIcon';
-import { BAlert } from 'bootstrap-vue';
-
-export default {
-  name: 'Alert',
-  components: {
-    BAlert: BAlert,
-    StatusIcon: StatusIcon
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: true
-    },
-    variant: {
-      type: String,
-      default: ''
-    }
-  }
-};
-</script>
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 019d5461..0bf40513 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -133,7 +133,8 @@
     "password": "Password",
     "username": "Username",
     "alert": {
-      "message": "Invalid username or password"
+      "title": "Invalid username or password",
+      "action": "Try again after verifying your username and password are correct."
     }
   },
   "pageOverview": {
diff --git a/src/locales/es.json b/src/locales/es.json
index a3e3ee09..48ed7748 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -16,7 +16,8 @@
     "password": "Contraseña",
     "username": "Nombre de usuario",
     "alert": {
-      "message": "Usuario o contraseña invalido"
+      "title": "Usuario o contraseña invalido.",
+      "action": "Inténtalo de nuevo."
     },
     "form": {
       "english": "Inglés",
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index bdf2a6ac..2018720c 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -15,11 +15,12 @@
         </b-col>
         <b-col md="6">
           <b-form class="login-form" novalidate @submit.prevent="login">
-            <alert class="login-error" :show="authError" variant="danger">
+            <b-alert class="login-error" :show="authError" variant="danger">
               <p id="login-error-alert">
-                {{ $t('pageLogin.alert.message') }}
+                <strong>{{ $t('pageLogin.alert.title') }}</strong>
+                <span>{{ $t('pageLogin.alert.action') }}</span>
               </p>
-            </alert>
+            </b-alert>
             <div class="login-form__section">
               <label for="language">{{ $t('pageLogin.language') }}</label>
               <b-form-select
@@ -82,11 +83,9 @@
 import { required } from 'vuelidate/lib/validators';
 import VuelidateMixin from '../../components/Mixins/VuelidateMixin.js';
 import i18n from '../../i18n';
-import Alert from '../../components/Global/Alert';
 
 export default {
   name: 'Login',
-  components: { Alert },
   mixins: [VuelidateMixin],
   data() {
     return {
@@ -174,8 +173,24 @@ export default {
   margin-bottom: $spacer;
 }
 
-.alert.login-error {
+.login-error {
   margin-bottom: $spacer * 2;
+
+  p {
+    margin-bottom: 0;
+  }
+
+  strong {
+    display: block;
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 0;
+  }
+
+  strong + span {
+    margin-top: $spacer / 2;
+    margin-bottom: 0;
+  }
 }
 
 .login-branding {