ayanova/src/components/alert-control.vue

@@ -1,14 +1,29 @@
 <template>
   <v-col v-if="alertMessage" cols="12" mt-1 mb-2>
-    <v-alert
-      ref="alertBox"
-      data-cy="alertbox"
-      v-show="alertMessage"
-      color="primary"
-      icon="$ayiInfoCircle"
-      class="multi-line"
-      outlined
-      >{{ alertMessage }}</v-alert
+    <template v-if="redAlert">
+      <v-alert
+        ref="alertBox"
+        data-cy="alertbox"
+        v-show="alertMessage"
+        color="error"
+        type="error"
+        icon="$ayiExclamationTriangle"
+        class="multi-line"
+        outlined
+        >{{ alertMessage }}</v-alert
+      ></template
+    >
+    <template v-else>
+      <v-alert
+        ref="alertBox"
+        data-cy="alertbox"
+        v-show="alertMessage"
+        color="primary"
+        icon="$ayiInfoCircle"
+        class="multi-line"
+        outlined
+        >{{ alertMessage }}</v-alert
+      ></template
     >
   </v-col>
 </template>
@@ -16,7 +31,8 @@
 export default {
   data: () => ({}),
   props: {
-    alertMessage: { type: String, default: null }
+    alertMessage: { type: String, default: null },
+    redAlert: { type: Boolean, default: false }
   }
 };
 </script>