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-hook="Flash"
>
<div class="flex">
<div class="flex-shrink-0">
<.icon name={:check_circle} solid />
</div>
<div class="ml-3">
<p class="text-sm font-medium text-red-800">
<div class="flex justify-between items-center space-x-3 text-red-700">
<.icon name={:exclamation_circle} class="w-5 w-5"/>
<p class="flex-1 text-sm font-medium">
<%= live_flash(@flash, @kind) %>
</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">
<.icon name={:x} solid />
<.icon name={:x} class="w-4 h-4" />
</button>
</div>
</div>
</div>
</div>
<% end %>
"""
end
@ -91,24 +83,16 @@ defmodule LiveBeatsWeb.LiveHelpers do
phx-value-key="info"
phx-hook="Flash"
>
<div class="flex">
<div class="flex-shrink-0">
<.icon name={:check_circle} solid />
</div>
<div class="ml-3">
<p class="text-sm font-medium text-green-800">
<div class="flex justify-between items-center space-x-3 text-green-700">
<.icon name={:check_circle} class="w-5 h-5"/>
<p class="flex-1 text-sm font-medium">
<%= live_flash(@flash, @kind) %>
</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">
<.icon name={:x} solid />
<.icon name={:x} class="w-4 h-4" />
</button>
</div>
</div>
</div>
</div>
<% end %>
"""
end