Part 3: Update alert messages

thebrianemory · Jan 15, 2019 · b7c6caa · b7c6caa
1 parent 588e3e7
commit b7c6caa
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -3,3 +3,5 @@
 @tailwind preflight;
 @tailwind components;
 @tailwind utilities;
+
+.alert:empty { display: none; }
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -15,3 +15,9 @@ import "phoenix_html"
 //
 // Local files can be imported directly using relative paths, for example:
 // import socket from "./socket"
+
+window.setTimeout(function() {
+   var x = document.getElementsByClassName("alert");
+    x[0].style.display = 'none';
+    x[1].style.display = 'none';
+}, 3000);
diff --git a/lib/catcasts_web/templates/layout/app.html.eex b/lib/catcasts_web/templates/layout/app.html.eex
@@ -10,8 +10,8 @@
   <body>
     <%= render "_navigation.html", conn: @conn %>
     <main role="main">
-      <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
-      <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+      <p class="alert bg-blue-lightest border border-blue-light text-blue-dark px-4 py-3 rounded relative" role="alert"><%= get_flash(@conn, :info) %></p>
+      <p class="alert bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative" role="alert"><%= get_flash(@conn, :error) %></p>
       <%= render @view_module, @view_template, assigns %>
     </main>
     <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>