Fix faucet's alert width (#278)

* Fix faucet's alert width

* Update the alerts to bulma notification classe

Co-authored-by: bl@ckode <mrblackode@gmail.com>

assets/css/app.scss

@@ -7,7 +7,7 @@
 
 .alert {
     top: 52px;
-    width: 417px;
+    width: 100%;
     margin: 0 auto;
     position: absolute;
     left: 50%;

assets/js/ui.js

@@ -1,25 +1,36 @@
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
+  // Get all "navbar-burger" elements
+  const $navbarBurgers = Array.prototype.slice.call(
+    document.querySelectorAll(".navbar-burger"),
+    0
+  );
 
-    // Get all "navbar-burger" elements
-    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
-
-    // Check if there are any navbar burgers
-    if ($navbarBurgers.length > 0) {
-
-      // Add a click event on each of them
-      $navbarBurgers.forEach( el => {
-        el.addEventListener('click', () => {
-
-          // Get the target from the "data-target" attribute
-          const target = el.dataset.target;
-          const $target = document.getElementById(target);
-
-          // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-          el.classList.toggle('is-active');
-          $target.classList.toggle('is-active');
-
-        });
+  // Check if there are any navbar burgers
+  if ($navbarBurgers.length > 0) {
+    // Add a click event on each of them
+    $navbarBurgers.forEach((el) => {
+      el.addEventListener("click", () => {
+        // Get the target from the "data-target" attribute
+        const target = el.dataset.target;
+        const $target = document.getElementById(target);
+
+        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        el.classList.toggle("is-active");
+        $target.classList.toggle("is-active");
+      });
+    });
+  }
+});
+
+document.addEventListener("DOMContentLoaded", () => {
+  (document.querySelectorAll(".notification .delete") || []).forEach(
+    ($delete) => {
+      const $notification = $delete.parentNode;
+
+      $delete.addEventListener("click", () => {
+        $notification.parentNode.removeChild($notification);
       });
     }
-
-  });
+  );
+});
+

lib/archethic_web/templates/faucet/index.html.eex

@@ -1,11 +1,24 @@
-<%= link to: Routes.live_path(@conn, ArchEthicWeb.TransactionDetailsLive, @link_address) do%>
-  <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
-<% end %>
-<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+<div class="container is-max-widescreen">
+    <%= if info = get_flash(@conn, :info) do %>
+      <div class="notification is-info is-link has-text-centered"> 
+        <div class="delete"></div>
+      <%= link to: Routes.live_path(@conn, ArchEthicWeb.TransactionDetailsLive, @link_address) do%>
+        <%= info %>
+      <% end %>
+      </div>
+    <% end %>
+
+  <%= if error = get_flash(@conn, :error) do %>
+    <div class="notification is-danger has-text-centered"> 
+      <div class="delete"></div>
+      <%= error %>
+    </div>
+  <% end %>
+</div>
+
 <div class="hero is-medium is-bold is-large explorer-main">
 <div class="hero-body">
-  <div class="container">
-
+  <div class="container is-max-widescreen">
     <h1 class="title main_title">ArchEthic Faucet</h1>
     <h2 class="subtitle main_subtitle">
       <div class="columns">