From 3d4def59d6ab50d7726712a377fd006e9b24132c Mon Sep 17 00:00:00 2001 From: evangelos-com <34775668+evangelos-com@users.noreply.github.com> Date: Tue, 25 Jun 2024 16:03:34 -0300 Subject: [PATCH] improvement/#890/clean_up_toast_notification_styles_and_allow_user_to_close_on-demand (#919) * initial improvement * Update app/views/shared/_notification.html.erb Signed-off-by: Zach Gollwitzer --------- Signed-off-by: Zach Gollwitzer Co-authored-by: Zach Gollwitzer --- app/views/layouts/application.html.erb | 2 +- app/views/shared/_notification.html.erb | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index dbf9398f..6fe949fb 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -25,7 +25,7 @@ -
+
<%= safe_join(flash.map { |type, message| notification(message, type: type) }) %> <%= content_for?(:content) ? yield(:content) : yield %> diff --git a/app/views/shared/_notification.html.erb b/app/views/shared/_notification.html.erb index 3b3c0871..9e3a1706 100644 --- a/app/views/shared/_notification.html.erb +++ b/app/views/shared/_notification.html.erb @@ -5,13 +5,13 @@ <% actions = options[:auto_dismiss] ? "animationend->element-removal#remove" : "" %> <% animation = options[:auto_dismiss] ? "animate-[appear-then-fades_5s_300ms_both]" : "animate-[appear_5s_300ms_both]" %> <%= content_tag :div, - class: "max-w-80 bg-white shadow-xs border border-alpha-black-50 border-solid py-3 px-4 rounded-[10px] text-sm font-medium flex gap-4 #{animation}", + class: "max-w-80 bg-white shadow-xs border border-alpha-black-50 border-solid py-4 px-4 rounded-[10px] text-sm font-medium flex gap-4 #{animation} group", data: {controller: "element-removal", action: actions }, role: type == "error" ? "alert" : "status" do -%> <% base_class = "w-5 h-5 p-1 text-white flex shrink-0 items-center justify-center rounded-full" %> <%= type.in?(["error", "alert"]) ? lucide_icon("x", class: "#{base_class} bg-error") : lucide_icon("check", class: "#{base_class} bg-success") %> -
-
+
+
<% if content[:title].present? %>

<%= content[:title] %>

<% end %> @@ -34,6 +34,9 @@ +
+ <%= lucide_icon "x", class: "w-5 h-5 p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-white text-gray-400 cursor-pointer", data: { action: "click->element-removal#remove" } %> +
<% end %> <% end -%>