From 76c57ac82b968203084846768321353b7a02183a Mon Sep 17 00:00:00 2001
From: Mia Arh <mia.arh@crust.tech>
Date: Mon, 8 Mar 2021 19:39:43 +0100
Subject: [PATCH] Style toast notifications

---
 auth/assets/templates/inc_footer.html.tpl |  2 +-
 auth/assets/templates/inc_toasts.html.tpl | 16 ++++++----------
 auth/assets/templates/scenarios.yaml      | 10 ++++++++++
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/auth/assets/templates/inc_footer.html.tpl b/auth/assets/templates/inc_footer.html.tpl
index 403d31394..df1a9e2e4 100644
--- a/auth/assets/templates/inc_footer.html.tpl
+++ b/auth/assets/templates/inc_footer.html.tpl
@@ -12,7 +12,7 @@
             <a href="https://cortezaproject.org/" target="_blank" class="text-white mr-2">cortezaproject.org</a>
             <a href="https://github.com/cortezaproject/" target="_blank" class="text-white ml-2">GitHub</a>
         </div>
-		<small class="p-1 text-secondary position-absolute version mt-2">
+		<small class="p-1 text-secondary position-absolute version mr-3">
 			version {{ version }}
 		</small>
 	</body>
diff --git a/auth/assets/templates/inc_toasts.html.tpl b/auth/assets/templates/inc_toasts.html.tpl
index 41ad1dfd2..747655ee7 100644
--- a/auth/assets/templates/inc_toasts.html.tpl
+++ b/auth/assets/templates/inc_toasts.html.tpl
@@ -1,15 +1,11 @@
-<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
+<div class="position-fixed bottom-0 right-0 p-3 mb-2" style="z-index: 5; right: 0; bottom: 0;">
 {{ range . }}
-	<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="5000">
-	  <div class="toast-header">
-		<span class="badge badge-{{ .Type }} mr-1 px-2">&nbsp;</span>
-		<strong class="mr-auto">Corteza</strong>
-		<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-		  <span aria-hidden="true">&times;</span>
-		</button>
-	  </div>
-	  <div class="toast-body p-3">
+	<div class="toast align-items-center bg-dark text-white" role="alert" aria-live="polite" aria-atomic="true" data-delay="5000" style="min-width:200px;">
+	  <div class="d-flex toast-body border-top border-{{ .Type }}">
 		{{ .Text | html }}
+		<button type="button" class="ml-auto text-white btn p-0" data-dismiss="toast" aria-label="Close">
+		<i class="bi bi-x"></i>
+		</button>
 	  </div>
 	</div>
 {{ end }}
diff --git a/auth/assets/templates/scenarios.yaml b/auth/assets/templates/scenarios.yaml
index 1fd159b67..a05bd916c 100644
--- a/auth/assets/templates/scenarios.yaml
+++ b/auth/assets/templates/scenarios.yaml
@@ -80,6 +80,16 @@ mfa:
     emailOtpPending: true
     form:
       emailOtpError: "There was an error..."
+  With alerts (toast):
+    alerts:
+      - Text: booya
+      - Text: Red top border for errors
+        Type: danger
+      - Text: Modi sociosqu quibusdam modi delectus ridiculus per potenti sollicitudin dicta porro cumque, gravida odio? Tempora! Molestia
+        Type: danger
+      - Text: Primary toast
+        Type: primary
+
 
 mfa-totp:
   Default: