fix flash messages

2 years ago · 4977ee429c
parent ac5d0c8cc3
commit 4977ee429c
4 changed files with 14 additions and 4 deletions
--- a/app/views/icons/_exclamation_circle.html.erb
+++ b/app/views/icons/_exclamation_circle.html.erb
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
+   <path d="M12 9v4"></path>
+   <path d="M12 16v.01"></path>
+</svg>
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -14,7 +14,7 @@
  <body>
    <turbo-frame id="modal"></turbo-frame>
    <%= render 'shared/navbar' %>
-    <% if flash.present? %><% render 'shared/flash' %><% end %>
+    <% if flash.present? %><%= render 'shared/flash' %><% end %>
    <div class="max-w-6xl mx-auto px-4 md:px-2">
      <%= yield %>
    </div>
--- a/app/views/layouts/plain.html.erb
+++ b/app/views/layouts/plain.html.erb
@ -10,7 +10,7 @@
    <%= stylesheet_pack_tag 'application', media: 'all' %>
  </head>
  <body>
-    <% if flash.present? %><% render 'shared/flash' %><% end %>
+    <% if flash.present? %><%= render 'shared/flash' %><% end %>
    <%= yield %>
  </body>
 </html>
--- a/app/views/shared/_flash.html.erb
+++ b/app/views/shared/_flash.html.erb
@ -1,11 +1,15 @@
 <div id="flash" class="absolute top-0 w-full h-0">
  <div class="max-w-xl mx-auto mt-1.5">
    <div class="alert py-3">
-      <%= svg_icon('info_circle', class: 'stroke-info flex-shrink-0 w-6 h-6') %>
+      <% if flash[:notice] %>
+        <%= svg_icon('info_circle', class: 'stroke-info flex-shrink-0 w-6 h-6') %>
+      <% else %>
+        <%= svg_icon('exclamation_circle', class: 'stroke-error flex-shrink-0 w-6 h-6') %>
+      <% end %>
      <div>
        <span><%= flash[:notice] || flash[:alert] %></span>
      </div>
-      <a href="#" class="w-6 h-6 rounded-lg text-center hover:bg-base-300" onclick="[event.preventDefault(), window.flash.remove()]">&times;</a>
+      <a href="#" onclick="[event.preventDefault(), window.flash.remove()]">&times;</a>
    </div>
  </div>
 </div>