Use bootstrap for flash messages

2 files changed, 9 insertions, 8 deletions

diff --git a/accounts/static/layout.css b/accounts/static/layout.css
index 0901983..1d6a3bf 100644
--- a/accounts/static/layout.css
+++ b/accounts/static/layout.css
@@ -210,16 +210,17 @@ ul.flashes li {
     display: block;
     padding: .2em .6em;
 
-    border: 1px solid #ee3;
-    border-radius: 3px;
-    background-color: #ffd;
+    --bs-alert-border-color: #ee3;
+    --bs-alert-bg: #ffd;
 }
+
 ul.flashes li.error {
-    border-color: #e33;
-    background-color: #fdd;
+    --bs-alert-border-color: #e33;
+    --bs-alert-bg: #fdd;
 }
+
 ul.flashes li.success {
-    border-color: #3e3;
-    background-color: #dfd;
+    --bs-alert-border-color: #3e3;
+    --bs-alert-bg: #dfd;
 }
 
diff --git a/accounts/templates/base.html b/accounts/templates/base.html
index 10c146e..02c0a08 100644
--- a/accounts/templates/base.html
+++ b/accounts/templates/base.html
@@ -55,7 +55,7 @@
       {% if messages %}
       <ul class="flashes">
       {% for category, message in messages %}
-        <li class="{{ category }}">{{ message }}</li>
+        <li class="alert {{ category }}">{{ message }}</li>
       {% endfor %}
       </ul>
       {% endif %}