Make artist buttons consistent with record buttons

lib/music_library_web/live/artist_live/show.html.heex

@@ -8,21 +8,22 @@
         </h1>
 
         <div class="flex items-center">
-          <button
+          <.button_group>
-            class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
+            <.button
+              variant="soft"
               phx-click={MusicLibraryWeb.Components.Notes.open("artist-notes-sheet")}
             >
               <span class="sr-only">{gettext("Open Notes")}</span>
               <.icon
-              name="hero-pencil-square"
+                name="hero-pencil"
-              class="-mt-1 h-5 w-5"
+                class="h-5 w-5"
                 aria-hidden="true"
                 data-slot="icon"
               />
-          </button>
+            </.button>
             <.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
               <:toggle>
-              <.button variant="ghost">
+                <.button variant="soft">
                   <span class="sr-only">{gettext("Actions")}</span>
                   <.icon
                     name="hero-ellipsis-vertical"
@@ -47,7 +48,9 @@
                 </.dropdown_link>
                 <.dropdown_link
                   id={"actions-#{@artist.musicbrainz_id}-refresh-image"}
-                phx-click={JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_id})}
+                  phx-click={
+                    JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_id})
+                  }
                 >
                   <.icon
                     name="hero-photo"
@@ -72,6 +75,7 @@
                 </.dropdown_link>
               </.focus_wrap>
             </.dropdown>
+          </.button_group>
         </div>
       </div>