Use button_group/1

lib/music_library_web/live/collection_live/index.html.heex

@@ -2,9 +2,8 @@
   <header class="gap-6 mb-2">
     <div class="flex items-center justify-between gap-6 mb-2 mt-2">
       <.search_form query={@record_list_params.query} />
-      <nav class="isolate inline-flex rounded-md shadow-xs">
+      <.button_group>
         <.button
-          class="rounded-l-md rounded-r-none"
           variant="solid"
           size="sm"
           patch={~p"/collection/import"}
@@ -13,7 +12,6 @@
           {gettext("Add")}
         </.button>
         <.button
-          class="-ml-px rounded-r-md rounded-l-none"
           variant="solid"
           size="sm"
           patch={~p"/collection/scan"}
@@ -21,17 +19,16 @@
           <.barcode_icon class="mr-2 fill-current" />
           {gettext("Scan")}
         </.button>
-      </nav>
+      </.button_group>
     </div>
   </header>
 
   <div class="flex items-end justify-between gap-6 mt-8">
-    <span class="isolate inline-flex rounded-md shadow-xs">
+    <.button_group>
       <.button
         patch={order_path(@record_list_params, :purchase)}
         size="sm"
         class={[
-          "rounded-l-md rounded-r-none",
           @record_list_params.order == :purchase && "!bg-zinc-100 dark:!bg-zinc-700"
         ]}
       >
@@ -47,14 +44,13 @@
         patch={order_path(@record_list_params, :alphabetical)}
         size="sm"
         class={[
-          "-ml-px rounded-r-md rounded-l-none",
           @record_list_params.order == :alphabetical && "!bg-zinc-100 dark:!bg-zinc-700"
         ]}
       >
         <.icon name="hero-user-solid" class="mr-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
         {gettext("A->Z")}
       </.button>
-    </span>
+    </.button_group>
   </div>
 </div>
 

lib/music_library_web/live/online_store_template_live/index.html.heex

@@ -6,12 +6,10 @@
       </h1>
     </div>
     <div>
-      <nav class="isolate inline-flex rounded-md shadow-xs">
-        <.button variant="solid" size="sm" patch={~p"/online-store-templates/new"}>
-          <.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
-          {gettext("New Template")}
-        </.button>
-      </nav>
+      <.button variant="solid" size="sm" patch={~p"/online-store-templates/new"}>
+        <.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
+        {gettext("New Template")}
+      </.button>
     </div>
   </div>
 </header>

lib/music_library_web/live/scrobble_rules_live/index.html.heex

@@ -6,9 +6,8 @@
       </h1>
     </div>
     <div>
-      <nav class="isolate inline-flex rounded-md shadow-xs">
+      <.button_group>
         <.button
-          class="rounded-l-md rounded-r-none"
           variant="solid"
           size="sm"
           patch={~p"/scrobble-rules/new"}
@@ -17,7 +16,6 @@
           {gettext("New Rule")}
         </.button>
         <.button
-          class="-ml-px rounded-r-md rounded-l-none"
           variant="solid"
           size="sm"
           phx-click="apply_all_rules"
@@ -25,7 +23,7 @@
           <.icon name="hero-play" class="h-4 w-4 mr-2" />
           {gettext("Apply All")}
         </.button>
-      </nav>
+      </.button_group>
     </div>
   </div>
 </header>

lib/music_library_web/live/wishlist_live/index.html.heex

@@ -2,25 +2,19 @@
   <header class="gap-6 mb-2">
     <div class="flex items-center justify-between gap-6 mb-2 mt-2">
       <.search_form query={@record_list_params.query} />
-      <.link
-        class={[
-          "relative inline-flex items-center rounded-md",
-          "px-3 py-2 text-xs sm:text-sm font-semibold",
-          "bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
-          "disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
-          "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
-          "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
-        ]}
+      <.button
+        variant="solid"
+        size="sm"
         patch={~p"/wishlist/import"}
       >
         <.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
         {gettext("Add")}
-      </.link>
+      </.button>
     </div>
   </header>
 
   <div class="flex items-end justify-between gap-6 mt-8">
-    <span class="isolate inline-flex rounded-md shadow-xs">
+    <.button_group>
       <.button
         patch={order_path(@record_list_params, :insertion)}
         size="sm"
@@ -43,7 +37,7 @@
         <.icon name="hero-user-solid" class="mr-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
         {gettext("A->Z")}
       </.button>
-    </span>
+    </.button_group>
   </div>
 </div>