From 5a391eb5492edf05f07b7408719efa450872d4ab Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Mon, 17 Feb 2025 09:05:04 +0000
Subject: [PATCH] Use a button group for import/scan

---
 .../live/collection_live/index.html.heex      | 30 +++++++++++++++----
 priv/gettext/default.pot                      | 10 +++----
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/lib/music_library_web/live/collection_live/index.html.heex b/lib/music_library_web/live/collection_live/index.html.heex
index 438c0cd2..b4f86418 100644
--- a/lib/music_library_web/live/collection_live/index.html.heex
+++ b/lib/music_library_web/live/collection_live/index.html.heex
@@ -2,12 +2,32 @@
   <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>
-        <.link patch={~p"/collection/import"}>
-          <.button>{gettext("Import")}</.button>
+      <nav class="mt-2 isolate inline-flex rounded-md shadow-sm">
+        <.link
+          class={[
+            "relative inline-flex items-center rounded-l-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-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
+          ]}
+          patch={~p"/collection/import"}
+        >
+          {gettext("Import")}
         </.link>
-        <.link patch={~p"/collection/scan"}>
-          <.button>{gettext("Scan")}</.button>
+        <.link
+          class={[
+            "relative -ml-px inline-flex items-center rounded-r-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-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
+          ]}
+          patch={~p"/collection/scan"}
+        >
+          {gettext("Scan")}
         </.link>
       </nav>
     </div>
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 05df9da6..48659ccc 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -95,7 +95,7 @@ msgstr ""
 msgid "Hang in there while we get back on track"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:7
+#: lib/music_library_web/live/collection_live/index.html.heex:17
 #: lib/music_library_web/live/wishlist_live/index.html.heex:6
 #, elixir-autogen, elixir-format
 msgid "Import"
@@ -169,7 +169,7 @@ msgstr ""
 msgid "Previous"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:47
+#: lib/music_library_web/live/collection_live/index.html.heex:67
 #, elixir-autogen, elixir-format
 msgid "Purchase"
 msgstr ""
@@ -235,7 +235,7 @@ msgstr ""
 msgid "Show"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:52
+#: lib/music_library_web/live/collection_live/index.html.heex:72
 #: lib/music_library_web/live/wishlist_live/index.html.heex:12
 #, elixir-autogen, elixir-format
 msgid "Showing <b>%{visible}</b> of <b>%{total}</b> records"
@@ -494,7 +494,7 @@ msgstr ""
 msgid "Error loading play count"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:29
+#: lib/music_library_web/live/collection_live/index.html.heex:49
 #, elixir-autogen, elixir-format
 msgid "A->Z"
 msgstr ""
@@ -620,7 +620,7 @@ msgstr ""
 msgid "Published releases"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:10
+#: lib/music_library_web/live/collection_live/index.html.heex:30
 #, elixir-autogen, elixir-format
 msgid "Scan"
 msgstr ""