alerts amended in text & background colour

src/App.vue

@@ -54,6 +54,22 @@ hr {
   fill: #60cbeb;
   color: #60cbeb;
 }
+.mySuccess {
+  border-color: rgba(2, 184, 117, 0.5);
+  background-color: rgba(2, 184, 117, 0.5);
+}
+.myInfo {
+  border-color: rgba(23, 162, 184, 0.5);
+  background-color: rgba(23, 162, 184, 0.5);
+}
+.myWarning {
+  border-color: rgba(240, 173, 78, 0.5);
+  background-color: rgba(240, 173, 78, 0.5);
+}
+.myError {
+  border-color: rgba(217, 83, 79, 0.5);
+  background-color: rgba(217, 83, 79, 0.5);
+}
 a {
   cursor: pointer;
 }
@@ -70,14 +86,14 @@ a:hover {
 .cursor-pointer {
   cursor: pointer;
 }
-    body,
-    html {
-        font-size: 13.7px !important;
-        color: #666;
-        font-family: "Roboto", sans-serif;
-        height: 100%;
-        margin: 0;
-    }
+body,
+html {
+  font-size: 13.7px !important;
+  color: #666;
+  font-family: "Roboto", sans-serif;
+  height: 100%;
+  margin: 0;
+}
 </style>
 
 <style scoped>

src/components/shared/alert.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="container">
     <!-- eslint-disable max-len -->
-    <div class="alert alert-success" v-if="type === 'SUCCESS'">
-      <eva-icon name="checkmark-outline"></eva-icon>
-      <strong>{{ text }}</strong>
+    <div class="alert mySuccess" v-if="type === 'SUCCESS'">
+      <eva-icon name="checkmark-outline" style="margin: 0px 20px"></eva-icon>
+      <strong class="color-black">{{ text }}</strong>
     </div>
-    <div class="alert alert-info" v-if="type === 'INFO'">
-      <eva-icon name="info-outline"></eva-icon>
-      <strong>{{ text }}</strong>
+    <div class="alert myInfo" v-if="type === 'INFO'">
+      <eva-icon name="info-outline" style="margin: 0px 20px"></eva-icon>
+      <strong class="color-black">{{ text }}</strong>
     </div>
-    <div class="alert alert-warning" v-if="type === 'WARNING'">
-      <eva-icon name="alert-circle-outline"></eva-icon>
+    <div class="alert myWarning" v-if="type === 'WARNING'">
+      <eva-icon name="alert-circle-outline" style="margin: 0px 20px"></eva-icon>
       <strong class="color-black">{{ text }}</strong>
     </div>
-    <div class="alert alert-danger" v-if="type === 'ERROR'">
-      <eva-icon name="slash-outline"></eva-icon>
-      <strong>{{ text }}</strong>
+    <div class="alert myError" v-if="type === 'ERROR'">
+      <eva-icon name="slash-outline" style="margin: 0px 20px"></eva-icon>
+      <strong class="color-black">{{ text }}</strong>
     </div>
   </div>
 </template>