From c62b1826c76bd0be245481f82f42fb7e90c39f8a Mon Sep 17 00:00:00 2001
From: Adam Wiggall <adam@turnandface.com>
Date: Thu, 3 Feb 2022 08:31:58 -0500
Subject: [PATCH] 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.
---
 lib/live_beats_web/live/live_helpers.ex | 48 +++++++++----------------
 1 file changed, 16 insertions(+), 32 deletions(-)

diff --git a/lib/live_beats_web/live/live_helpers.ex b/lib/live_beats_web/live/live_helpers.ex
index 9a5359c..f94d662 100644
--- a/lib/live_beats_web/live/live_helpers.ex
+++ b/lib/live_beats_web/live/live_helpers.ex
@@ -59,22 +59,14 @@ 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">
-              <%= 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 />
-              </button>
-            </div>
-          </div>
+        <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>
+          <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} class="w-4 h-4" />
+          </button>
         </div>
       </div>
     <% end %>
@@ -91,22 +83,14 @@ 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">
-              <%= 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 />
-              </button>
-            </div>
-          </div>
+        <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>
+          <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} class="w-4 h-4" />
+          </button>
         </div>
       </div>
     <% end %>