From df4d5ad02f47f87157d3776a08d763dee3a17bd5 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Mon, 15 Dec 2025 10:03:27 +0300
Subject: [PATCH] Make artist buttons consistent with record buttons

---
 .../live/artist_live/show.html.heex           | 130 +++++++++---------
 1 file changed, 67 insertions(+), 63 deletions(-)

diff --git a/lib/music_library_web/live/artist_live/show.html.heex b/lib/music_library_web/live/artist_live/show.html.heex
index 43206b9d..2b862d65 100644
--- a/lib/music_library_web/live/artist_live/show.html.heex
+++ b/lib/music_library_web/live/artist_live/show.html.heex
@@ -8,70 +8,74 @@
         </h1>
 
         <div class="flex items-center">
-          <button
-            class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
-            phx-click={MusicLibraryWeb.Components.Notes.open("artist-notes-sheet")}
-          >
-            <span class="sr-only">{gettext("Open Notes")}</span>
-            <.icon
-              name="hero-pencil-square"
-              class="-mt-1 h-5 w-5"
-              aria-hidden="true"
-              data-slot="icon"
-            />
-          </button>
-          <.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
-            <:toggle>
-              <.button variant="ghost">
-                <span class="sr-only">{gettext("Actions")}</span>
-                <.icon
-                  name="hero-ellipsis-vertical"
-                  class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
-                  aria-hidden="true"
-                  data-slot="icon"
-                />
-              </.button>
-            </:toggle>
-            <.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}>
-              <.dropdown_link
-                id={"actions-#{@artist.musicbrainz_id}-edit"}
-                patch={~p"/artists/#{@artist.musicbrainz_id}/edit"}
-              >
-                <.icon
-                  name="hero-pencil-square"
-                  class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
-                  aria-hidden="true"
-                  data-slot="icon"
-                />
-                {gettext("Edit")}
-              </.dropdown_link>
-              <.dropdown_link
-                id={"actions-#{@artist.musicbrainz_id}-refresh-image"}
-                phx-click={JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_id})}
-              >
-                <.icon
-                  name="hero-photo"
-                  class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
-                  aria-hidden="true"
-                  data-slot="icon"
-                />
-                {gettext("Refresh image")}
-              </.dropdown_link>
+          <.button_group>
+            <.button
+              variant="soft"
+              phx-click={MusicLibraryWeb.Components.Notes.open("artist-notes-sheet")}
+            >
+              <span class="sr-only">{gettext("Open Notes")}</span>
+              <.icon
+                name="hero-pencil"
+                class="h-5 w-5"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+            </.button>
+            <.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
+              <:toggle>
+                <.button variant="soft">
+                  <span class="sr-only">{gettext("Actions")}</span>
+                  <.icon
+                    name="hero-ellipsis-vertical"
+                    class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
+                    aria-hidden="true"
+                    data-slot="icon"
+                  />
+                </.button>
+              </:toggle>
+              <.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}>
+                <.dropdown_link
+                  id={"actions-#{@artist.musicbrainz_id}-edit"}
+                  patch={~p"/artists/#{@artist.musicbrainz_id}/edit"}
+                >
+                  <.icon
+                    name="hero-pencil-square"
+                    class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
+                    aria-hidden="true"
+                    data-slot="icon"
+                  />
+                  {gettext("Edit")}
+                </.dropdown_link>
+                <.dropdown_link
+                  id={"actions-#{@artist.musicbrainz_id}-refresh-image"}
+                  phx-click={
+                    JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_id})
+                  }
+                >
+                  <.icon
+                    name="hero-photo"
+                    class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
+                    aria-hidden="true"
+                    data-slot="icon"
+                  />
+                  {gettext("Refresh image")}
+                </.dropdown_link>
 
-              <.dropdown_link
-                id={"actions-#{@artist.musicbrainz_id}-refresh-artist-info"}
-                phx-click={JS.push("refresh_artist_info", value: %{id: @artist.musicbrainz_id})}
-              >
-                <.icon
-                  name="hero-arrow-path"
-                  class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
-                  aria-hidden="true"
-                  data-slot="icon"
-                />
-                {gettext("Refresh info")}
-              </.dropdown_link>
-            </.focus_wrap>
-          </.dropdown>
+                <.dropdown_link
+                  id={"actions-#{@artist.musicbrainz_id}-refresh-artist-info"}
+                  phx-click={JS.push("refresh_artist_info", value: %{id: @artist.musicbrainz_id})}
+                >
+                  <.icon
+                    name="hero-arrow-path"
+                    class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
+                    aria-hidden="true"
+                    data-slot="icon"
+                  />
+                  {gettext("Refresh info")}
+                </.dropdown_link>
+              </.focus_wrap>
+            </.dropdown>
+          </.button_group>
         </div>
       </div>