Fix toast long messages and update toast styles

turicas · May 16, 2024 · f1a177a · f1a177a
1 parent a7afed4
commit f1a177a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/brasilio_auth/templates/brasilio_auth/login.html b/brasilio_auth/templates/brasilio_auth/login.html
@@ -36,6 +36,7 @@
           placeholder="Usuário" aria-label="Usuário"
           aria-describedby="Campo usuário"
           required
+          autofocus
       >
     </div>
     <div class="input-group input-group-lg mb-4">

diff --git a/static_src/scss/layouts/_authbase.scss b/static_src/scss/layouts/_authbase.scss
@@ -6,3 +6,19 @@
 .auth-btn {
     @extend .w-100, .my-2, .btn, .btn-lg, .btn-primary;
 }
+
+.toast-primary {
+    @extend .bg-primary;
+}
+
+.toast-warning {
+    @extend .bg-warning;
+}
+
+.toast-danger {
+    @extend .bg-danger;
+}
+
+.toast-info {
+    @extend .bg-info;
+}
diff --git a/templates/includes/toast.html b/templates/includes/toast.html
@@ -1,16 +1,10 @@
-<div
-  class="toast align-items-center text-white bg-{{type}} bg-gradient border-0 fw-bold p-1"
-  role="alert"
-  aria-live="assertive"
-  aria-atomic="true"
->
-  <div class="d-flex">
-    <div class="toast-body">{{ message }}</div>
-    <button
-      type="button"
-      class="btn-close btn-close-white me-2 m-auto"
-      data-bs-dismiss="toast"
-      aria-label="Close"
-    ></button>
+<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+  <div class="toast-header">
+    <div class="rounded me-2 p-2 bg-{{type}}"></div>
+    <strong class="me-auto">Brasil.io</strong>
+    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+  </div>
+  <div class="toast-body">
+    {{ message }}
   </div>
 </div>