adjust flash

app/javascript/elements/flash_message.js

@@ -1,6 +1,4 @@
-import { actionable } from '@github/catalyst/lib/actionable'
+export default class extends HTMLElement {
-
-export default actionable(class extends HTMLElement {
   connectedCallback () {
     this.addEventListener('turbo:morph-element', this.onMorph)
 
@@ -32,9 +30,7 @@ export default actionable(class extends HTMLElement {
     this.closeTimeout = setTimeout(this.close, 2000)
   }
 
-  close = (event) => {
+  close = () => {
-    event?.preventDefault()
-
     clearTimeout(this.closeTimeout)
 
     this.hideAnimation = this.animate([
@@ -44,4 +40,4 @@ export default actionable(class extends HTMLElement {
 
     this.hideAnimation.onfinish = () => this.remove()
   }
-})
+}

app/views/shared/_flash.html.erb

@@ -2,19 +2,16 @@
   <div id="native_flash" hidden data-notice="<%= flash[:notice] %>" data-alert="<%= flash[:alert] %>"></div>
 <% else %>
   <flash-message id="flash" class="fixed top-0 inset-x-0 z-50 block pointer-events-none">
-    <div class="max-w-xl mx-auto mt-1.5 pointer-events-auto">
+    <div class="w-fit max-w-xl mx-auto mt-1.5 pointer-events-auto">
-      <div class="px-4 py-3 rounded-2xl bg-base-200 shadow flex items-center justify-between mx-4 md:mx-0">
+      <div class="px-4 py-3 rounded-2xl bg-base-200 shadow flex items-center gap-3 mx-4 md:mx-0">
-        <div class="flex items-center space-x-3">
+        <% if flash[:notice] %>
-          <% if flash[:notice] %>
+          <%= svg_icon('info_circle', class: 'stroke-info flex-none w-6 h-6') %>
-            <%= svg_icon('info_circle', class: 'stroke-info flex-none w-6 h-6') %>
+        <% else %>
-          <% else %>
+          <%= svg_icon('exclamation_circle', class: 'stroke-error flex-none w-6 h-6') %>
-            <%= svg_icon('exclamation_circle', class: 'stroke-error flex-none w-6 h-6') %>
+        <% end %>
-          <% end %>
+        <div class="mr-1">
-          <div>
+          <span><%= flash[:notice] || flash[:alert] %></span>
-            <span><%= flash[:notice] || flash[:alert] %></span>
-          </div>
         </div>
-        <button type="button" data-action="click:flash-message#close" class="mr-1 cursor-pointer">&times;</button>
       </div>
     </div>
   </flash-message>