Update flash, reduce markup and alignment improved

Flash message content are misaligned, and there is exteraneous
markup.

Replace check icon with exclamation icon for :error flash.

This commit improves alignment, slightly tweeks the icon sizes
(subjective), matches colors, and uses what I believe to be more
idiomatic Tailwind.
This commit is contained in:
Adam Wiggall 2022-02-03 08:31:58 -05:00
parent 554c97fde4
commit c62b1826c7

View file

@ -59,24 +59,16 @@ defmodule LiveBeatsWeb.LiveHelpers do
phx-click={JS.push("lv:clear-flash") |> JS.remove_class("fade-in-scale", to: "#flash") |> hide("#flash")} phx-click={JS.push("lv:clear-flash") |> JS.remove_class("fade-in-scale", to: "#flash") |> hide("#flash")}
phx-hook="Flash" phx-hook="Flash"
> >
<div class="flex"> <div class="flex justify-between items-center space-x-3 text-red-700">
<div class="flex-shrink-0"> <.icon name={:exclamation_circle} class="w-5 w-5"/>
<.icon name={:check_circle} solid /> <p class="flex-1 text-sm font-medium">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-red-800">
<%= live_flash(@flash, @kind) %> <%= live_flash(@flash, @kind) %>
</p> </p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" class="inline-flex bg-red-50 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600"> <button type="button" class="inline-flex bg-red-50 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600">
<.icon name={:x} solid /> <.icon name={:x} class="w-4 h-4" />
</button> </button>
</div> </div>
</div> </div>
</div>
</div>
<% end %> <% end %>
""" """
end end
@ -91,24 +83,16 @@ defmodule LiveBeatsWeb.LiveHelpers do
phx-value-key="info" phx-value-key="info"
phx-hook="Flash" phx-hook="Flash"
> >
<div class="flex"> <div class="flex justify-between items-center space-x-3 text-green-700">
<div class="flex-shrink-0"> <.icon name={:check_circle} class="w-5 h-5"/>
<.icon name={:check_circle} solid /> <p class="flex-1 text-sm font-medium">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-green-800">
<%= live_flash(@flash, @kind) %> <%= live_flash(@flash, @kind) %>
</p> </p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" class="inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600"> <button type="button" class="inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600">
<.icon name={:x} solid /> <.icon name={:x} class="w-4 h-4" />
</button> </button>
</div> </div>
</div> </div>
</div>
</div>
<% end %> <% end %>
""" """
end end