From f4727bdcbd8b60bdc17ad6ae9917a013b3143188 Mon Sep 17 00:00:00 2001 From: Claudio Ortolina Date: Fri, 17 Oct 2025 20:02:04 +0100 Subject: [PATCH] Standardize all icon-based actions to buttons Use a combination of ghost and soft, with button groups where appropriate. Also remove unnecessary negative margins, and pad around for ease of use on mobile. --- .../components/add_record.ex | 2 +- .../components/layouts/app.html.heex | 145 +++++----- .../components/record_components.ex | 33 +-- lib/music_library_web/components/release.ex | 2 +- .../components/scrobble_components.ex | 2 +- .../components/stats_components.ex | 2 +- .../live/artist_live/show.html.heex | 16 +- .../live/collection_live/show.html.heex | 248 +++++++++--------- .../index.html.heex | 6 +- .../live/scrobble_rules_live/index.html.heex | 8 +- .../scrobbled_tracks_live/index.html.heex | 6 +- .../live/stats_live/index.html.heex | 46 ++-- .../live/universal_search_live/index.ex | 2 +- .../live/wishlist_live/show.html.heex | 16 +- 14 files changed, 279 insertions(+), 255 deletions(-) diff --git a/lib/music_library_web/components/add_record.ex b/lib/music_library_web/components/add_record.ex index 315f7a58..2015c440 100644 --- a/lib/music_library_web/components/add_record.ex +++ b/lib/music_library_web/components/add_record.ex @@ -95,7 +95,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do {gettext("Choose which format to import")} <.icon name="hero-plus" - class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" + class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" aria-hidden="true" data-slot="icon" /> diff --git a/lib/music_library_web/components/layouts/app.html.heex b/lib/music_library_web/components/layouts/app.html.heex index 533502e5..031c675a 100644 --- a/lib/music_library_web/components/layouts/app.html.heex +++ b/lib/music_library_web/components/layouts/app.html.heex @@ -46,74 +46,83 @@ -
- <.universal_search_trigger /> - <.dropdown placement="bottom-end"> - <:toggle> - {gettext("Actions")} - <.icon - name="hero-ellipsis-vertical" - class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" - aria-hidden="true" - data-slot="icon" - /> - - <.dropdown_link href={~p"/scrobbled-tracks"}> - <.icon - name="hero-musical-note" - class="h-4 w-4 mr-2" - aria-hidden="true" - data-slot="icon" - /> - {gettext("Scrobbled Tracks")} - - <.dropdown_link href={~p"/scrobble-rules"}> - <.icon - name="hero-adjustments-horizontal" - class="h-4 w-4 mr-2" - aria-hidden="true" - data-slot="icon" - /> - {gettext("Scrobble Rules")} - - <.dropdown_link href={~p"/online-store-templates"}> - <.icon - name="hero-building-storefront" - class="h-4 w-4 mr-2" - aria-hidden="true" - data-slot="icon" - /> - {gettext("Online Store Templates")} - - <.dropdown_link href={~p"/backup"}> - <.icon - name="hero-archive-box-arrow-down" - class="h-4 w-4 mr-2" - aria-hidden="true" - data-slot="icon" - /> - {gettext("Backup")} - - <.dropdown_separator /> - <.dropdown_link href={~p"/dev/dashboard"}> - <.icon name="hero-chart-bar" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" /> - {gettext("Live Dashboard")} - - <.dropdown_link href={~p"/dev/oban"}> - <.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" /> - {gettext("Oban")} - - <.dropdown_separator /> - <.dropdown_link href={~p"/login"}> - <.icon - name="hero-arrow-left-start-on-rectangle" - class="h-4 w-4 mr-2" - aria-hidden="true" - data-slot="icon" - /> - {gettext("Logout")} - - +
+ <.button_group> + <.universal_search_trigger /> + <.dropdown placement="bottom-end"> + <:toggle> + <.button variant="soft"> + {gettext("Actions")} + <.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" + /> + + + <.dropdown_link href={~p"/scrobbled-tracks"}> + <.icon + name="hero-musical-note" + class="h-4 w-4 mr-2" + aria-hidden="true" + data-slot="icon" + /> + {gettext("Scrobbled Tracks")} + + <.dropdown_link href={~p"/scrobble-rules"}> + <.icon + name="hero-adjustments-horizontal" + class="h-4 w-4 mr-2" + aria-hidden="true" + data-slot="icon" + /> + {gettext("Scrobble Rules")} + + <.dropdown_link href={~p"/online-store-templates"}> + <.icon + name="hero-building-storefront" + class="h-4 w-4 mr-2" + aria-hidden="true" + data-slot="icon" + /> + {gettext("Online Store Templates")} + + <.dropdown_link href={~p"/backup"}> + <.icon + name="hero-archive-box-arrow-down" + class="h-4 w-4 mr-2" + aria-hidden="true" + data-slot="icon" + /> + {gettext("Backup")} + + <.dropdown_separator /> + <.dropdown_link href={~p"/dev/dashboard"}> + <.icon + name="hero-chart-bar" + class="h-4 w-4 mr-2" + aria-hidden="true" + data-slot="icon" + /> + {gettext("Live Dashboard")} + + <.dropdown_link href={~p"/dev/oban"}> + <.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" /> + {gettext("Oban")} + + <.dropdown_separator /> + <.dropdown_link href={~p"/login"}> + <.icon + name="hero-arrow-left-start-on-rectangle" + class="h-4 w-4 mr-2" + aria-hidden="true" + data-slot="icon" + /> + {gettext("Logout")} + + +
diff --git a/lib/music_library_web/components/record_components.ex b/lib/music_library_web/components/record_components.ex index 01c28ed4..bfc1a839 100644 --- a/lib/music_library_web/components/record_components.ex +++ b/lib/music_library_web/components/record_components.ex @@ -102,7 +102,7 @@ defmodule MusicLibraryWeb.RecordComponents do <.icon name="hero-banknotes" - class="-mt-1 h-4 w-4" + class="h-4 w-4" aria-hidden="true" data-slot="icon" /> @@ -113,7 +113,7 @@ defmodule MusicLibraryWeb.RecordComponents do {gettext("Wishlisted on")} - <.icon name="hero-star" class="-mt-1 h-4 w-4" aria-hidden="true" data-slot="icon" /> + <.icon name="hero-star" class="h-4 w-4" aria-hidden="true" data-slot="icon" /> {Records.Record.format_as_date(record.inserted_at)}

@@ -128,31 +128,32 @@ defmodule MusicLibraryWeb.RecordComponents do {gettext("Purchased on")} - <.icon name="hero-banknotes" class="-mt-1 h-4 w-4" aria-hidden="true" data-slot="icon" /> + <.icon name="hero-banknotes" class="h-4 w-4" aria-hidden="true" data-slot="icon" /> {Records.Record.format_as_date(record.purchased_at)}

{gettext("Wishlisted on")} - <.icon name="hero-star" class="-mt-1 h-4 w-4" aria-hidden="true" data-slot="icon" /> + <.icon name="hero-star" class="h-4 w-4" aria-hidden="true" data-slot="icon" /> {Records.Record.format_as_date(record.inserted_at)}

<.dropdown id={"actions-#{record.id}"} placement="bottom-end"> <:toggle> -
li")} phx-click-away={JS.remove_class("pointer-events-none", to: "#records > li")} > {gettext("Actions")} <.icon name="hero-ellipsis-vertical" - class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" + class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" aria-hidden="true" data-slot="icon" /> -
+ <.focus_wrap id={"actions-#{record.id}-focus-wrap"} class="pointer-events-auto"> <.dropdown_link id={"actions-#{record.id}-edit"} patch={@record_edit_path.(record)}> @@ -246,15 +247,17 @@ defmodule MusicLibraryWeb.RecordComponents do

{record.title}

- <.dropdown id={"actions-#{record.id}"} placement="bottom-end" class="mt-2"> + <.dropdown id={"actions-#{record.id}"} placement="bottom-end"> <:toggle> - {gettext("Actions")} - <.icon - name="hero-ellipsis-vertical" - class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" - aria-hidden="true" - data-slot="icon" - /> + <.button variant="ghost" class="mt-2"> + {gettext("Actions")} + <.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" + /> + <.focus_wrap id={"actions-#{record.id}-focus-wrap"}> <.dropdown_link id={"actions-#{record.id}-edit"} patch={@record_edit_path.(record)}> diff --git a/lib/music_library_web/components/release.ex b/lib/music_library_web/components/release.ex index 2ab1c756..cb020b76 100644 --- a/lib/music_library_web/components/release.ex +++ b/lib/music_library_web/components/release.ex @@ -69,7 +69,7 @@ defmodule MusicLibraryWeb.Components.Release do
<.icon name="hero-exclamation-triangle" - class="-mt-1 mr-1 h-5 w-5" + class="h-5 w-5" aria-hidden="true" data-slot="icon" /> diff --git a/lib/music_library_web/components/scrobble_components.ex b/lib/music_library_web/components/scrobble_components.ex index 217b221a..4f6ed990 100644 --- a/lib/music_library_web/components/scrobble_components.ex +++ b/lib/music_library_web/components/scrobble_components.ex @@ -13,7 +13,7 @@ defmodule MusicLibraryWeb.ScrobbleComponents do phx-click={JS.push("refresh_lastfm_feed")} > {gettext("Refresh LastFm Feed")} - <.icon name="hero-arrow-path" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" /> + <.icon name="hero-arrow-path" class="h-5 w-5" aria-hidden="true" data-slot="icon" /> """ end diff --git a/lib/music_library_web/components/stats_components.ex b/lib/music_library_web/components/stats_components.ex index d2a2268d..4f0cdb10 100644 --- a/lib/music_library_web/components/stats_components.ex +++ b/lib/music_library_web/components/stats_components.ex @@ -186,7 +186,7 @@ defmodule MusicLibraryWeb.StatsComponents do <.icon name="hero-banknotes" - class="-mt-1 h-4 w-4" + class="h-4 w-4" aria-hidden="true" data-slot="icon" /> 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 bbb066c1..3f2cfcfa 100644 --- a/lib/music_library_web/live/artist_live/show.html.heex +++ b/lib/music_library_web/live/artist_live/show.html.heex @@ -22,13 +22,15 @@ <.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end"> <:toggle> - {gettext("Actions")} - <.icon - name="hero-ellipsis-vertical" - class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" - aria-hidden="true" - data-slot="icon" - /> + <.button variant="ghost"> + {gettext("Actions")} + <.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" + /> + <.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}> <.dropdown_link diff --git a/lib/music_library_web/live/collection_live/show.html.heex b/lib/music_library_web/live/collection_live/show.html.heex index 315287f5..b10637d5 100644 --- a/lib/music_library_web/live/collection_live/show.html.heex +++ b/lib/music_library_web/live/collection_live/show.html.heex @@ -12,138 +12,142 @@

<.artist_links joinphrase_class="text-sm" artists={@record.artists} />

-
- - - <.dropdown id={"actions-#{@record.id}"} placement="bottom-end"> - <:toggle class="h-5 block"> - {gettext("Actions")} +
+ <.button_group> + <.button + variant="soft" + phx-click={MusicLibraryWeb.Components.Notes.open("record-notes-sheet")} + > + {gettext("Open Notes")} <.icon - name="hero-ellipsis-vertical" - class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" + name="hero-pencil-square" + class="h-5 w-5" aria-hidden="true" data-slot="icon" /> - - <.focus_wrap id={"actions-#{@record.id}-focus-wrap"}> - <.dropdown_link - id={"actions-#{@record.id}-edit"} - patch={~p"/collection/#{@record}/show/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")} - + + <.button + :if={@record.selected_release_id} + variant="soft" + phx-click={MusicLibraryWeb.Components.Release.open("release-with-tracks-sheet")} + > + {gettext("Show Tracks")} + <.icon + name="hero-numbered-list" + class="h-5 w-5" + aria-hidden="true" + data-slot="icon" + /> + + <.dropdown id={"actions-#{@record.id}"} placement="bottom-end"> + <:toggle> + <.button variant="soft"> + {gettext("Actions")} + <.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" + /> + + + <.focus_wrap id={"actions-#{@record.id}-focus-wrap"}> + <.dropdown_link + id={"actions-#{@record.id}-edit"} + patch={~p"/collection/#{@record}/show/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 - id={"actions-#{@record.id}-refresh-cover"} - phx-click={JS.push("refresh_cover", value: %{id: @record.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 cover")} - + <.dropdown_link + id={"actions-#{@record.id}-refresh-cover"} + phx-click={JS.push("refresh_cover", value: %{id: @record.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 cover")} + - <.dropdown_link - id={"actions-#{@record.id}-refresh-mb-data"} - phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.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 MB data")} - + <.dropdown_link + id={"actions-#{@record.id}-refresh-mb-data"} + phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.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 MB data")} + - <.dropdown_link - id={"actions-#{@record.id}-populate-genres"} - phx-click={JS.push("populate_genres", value: %{id: @record.id})} - > - <.icon - name="hero-sparkles" - class="h-4 w-4 mr-1 phx-click-loading:animate-shake" - aria-hidden="true" - data-slot="icon" - /> - {gettext("Populate genres")} - + <.dropdown_link + id={"actions-#{@record.id}-populate-genres"} + phx-click={JS.push("populate_genres", value: %{id: @record.id})} + > + <.icon + name="hero-sparkles" + class="h-4 w-4 mr-1 phx-click-loading:animate-shake" + aria-hidden="true" + data-slot="icon" + /> + {gettext("Populate genres")} + - <.dropdown_link - id={"actions-#{@record.id}-extract-colors-fast"} - phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})} - > - <.icon - name="hero-paint-brush" - class="h-4 w-4 mr-1 phx-click-loading:animate-shake" - aria-hidden="true" - data-slot="icon" - /> - {gettext("Extract colors (fast)")} - + <.dropdown_link + id={"actions-#{@record.id}-extract-colors-fast"} + phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})} + > + <.icon + name="hero-paint-brush" + class="h-4 w-4 mr-1 phx-click-loading:animate-shake" + aria-hidden="true" + data-slot="icon" + /> + {gettext("Extract colors (fast)")} + - <.dropdown_link - id={"actions-#{@record.id}-extract-colors-slow"} - phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})} - > - <.icon - name="hero-paint-brush" - class="h-4 w-4 mr-1 phx-click-loading:animate-shake" - aria-hidden="true" - data-slot="icon" - /> - {gettext("Extract colors (slow)")} - + <.dropdown_link + id={"actions-#{@record.id}-extract-colors-slow"} + phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})} + > + <.icon + name="hero-paint-brush" + class="h-4 w-4 mr-1 phx-click-loading:animate-shake" + aria-hidden="true" + data-slot="icon" + /> + {gettext("Extract colors (slow)")} + - <.dropdown_separator /> - <.dropdown_link - id={"actions-#{@record.id}-delete"} - phx-click={JS.push("delete", value: %{id: @record.id})} - data-confirm={gettext("Are you sure?")} - class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!" - > - <.icon - name="hero-trash" - class="h-4 w-4 mr-1 phx-click-loading:animate-spin" - aria-hidden="true" - data-slot="icon" - /> - {gettext("Delete")} - - - + <.dropdown_separator /> + <.dropdown_link + id={"actions-#{@record.id}-delete"} + phx-click={JS.push("delete", value: %{id: @record.id})} + data-confirm={gettext("Are you sure?")} + class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!" + > + <.icon + name="hero-trash" + class="h-4 w-4 mr-1 phx-click-loading:animate-spin" + aria-hidden="true" + data-slot="icon" + /> + {gettext("Delete")} + + + +
diff --git a/lib/music_library_web/live/online_store_template_live/index.html.heex b/lib/music_library_web/live/online_store_template_live/index.html.heex index a46a03cc..2f7c6c40 100644 --- a/lib/music_library_web/live/online_store_template_live/index.html.heex +++ b/lib/music_library_web/live/online_store_template_live/index.html.heex @@ -53,15 +53,15 @@
<.dropdown id={"actions-#{template.id}"} placement="bottom-end"> <:toggle> -
+ <.button variant="ghost"> {gettext("Actions")} <.icon name="hero-ellipsis-vertical" - class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" + class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" aria-hidden="true" data-slot="icon" /> -
+ <.dropdown_button phx-click="toggle-enabled" phx-value-id={template.id}> {if template.enabled, diff --git a/lib/music_library_web/live/scrobble_rules_live/index.html.heex b/lib/music_library_web/live/scrobble_rules_live/index.html.heex index 574c8a48..35d51728 100644 --- a/lib/music_library_web/live/scrobble_rules_live/index.html.heex +++ b/lib/music_library_web/live/scrobble_rules_live/index.html.heex @@ -58,18 +58,18 @@ {Calendar.strftime(scrobble_rule.inserted_at, "%Y-%m-%d")}
-
+
<.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end"> <:toggle> -
+ <.button variant="ghost"> {gettext("Actions")} <.icon name="hero-ellipsis-vertical" - class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" + class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" aria-hidden="true" data-slot="icon" /> -
+ <.dropdown_button phx-click="apply_rule" phx-value-id={scrobble_rule.id}> {gettext("Apply rule")} diff --git a/lib/music_library_web/live/scrobbled_tracks_live/index.html.heex b/lib/music_library_web/live/scrobbled_tracks_live/index.html.heex index 4fab5784..c834a26e 100644 --- a/lib/music_library_web/live/scrobbled_tracks_live/index.html.heex +++ b/lib/music_library_web/live/scrobbled_tracks_live/index.html.heex @@ -168,15 +168,15 @@ <.dropdown id={"actions-#{track.scrobbled_at_uts}"} placement="bottom-end"> <:toggle> -
+ <.button variant="ghost"> {gettext("Actions")} <.icon name="hero-ellipsis-vertical" - class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" + class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" aria-hidden="true" data-slot="icon" /> -
+ <.dropdown_link patch={~p"/scrobbled-tracks/#{track.scrobbled_at_uts}/edit"}> {gettext("Edit")} diff --git a/lib/music_library_web/live/stats_live/index.html.heex b/lib/music_library_web/live/stats_live/index.html.heex index 3e12d43d..63c219c4 100644 --- a/lib/music_library_web/live/stats_live/index.html.heex +++ b/lib/music_library_web/live/stats_live/index.html.heex @@ -137,7 +137,7 @@ <.tooltip> <.icon name="hero-information-circle" - class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" + class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" aria-hidden="true" data-slot="icon" /> @@ -163,7 +163,7 @@ <.icon name="hero-clipboard-document" - class="-mt-1 h-5 w-5" + class="h-5 w-5" aria-hidden="true" data-slot="icon" /> @@ -190,7 +190,7 @@ <.icon name="hero-clipboard-document" - class="-mt-1 h-5 w-5" + class="h-5 w-5" aria-hidden="true" data-slot="icon" /> @@ -235,13 +235,15 @@ placement="bottom-end" > <:toggle> - {gettext("Choose which format to import")} - <.icon - name="hero-star" - class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" - aria-hidden="true" - data-slot="icon" - /> + <.button variant="ghost"> + {gettext("Choose which format to import")} + <.icon + name="hero-star" + class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" + aria-hidden="true" + data-slot="icon" + /> + <.focus_wrap id={"actions-#{album.scrobbled_at_uts}-albums-focus-wrap"}> <.dropdown_link @@ -326,7 +328,7 @@ <.tooltip> <.icon name="hero-information-circle" - class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" + class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" aria-hidden="true" data-slot="icon" /> @@ -352,7 +354,7 @@ <.icon name="hero-clipboard-document" - class="-mt-1 h-5 w-5" + class="h-5 w-5" aria-hidden="true" data-slot="icon" /> @@ -379,7 +381,7 @@ <.icon name="hero-clipboard-document" - class="-mt-1 h-5 w-5" + class="h-5 w-5" aria-hidden="true" data-slot="icon" /> @@ -406,7 +408,7 @@ <.icon name="hero-clipboard-document" - class="-mt-1 h-5 w-5" + class="h-5 w-5" aria-hidden="true" data-slot="icon" /> @@ -446,13 +448,15 @@ placement="bottom-end" > <:toggle> - {gettext("Choose which format to import")} - <.icon - name="hero-star" - class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" - aria-hidden="true" - data-slot="icon" - /> + <.button variant="ghost"> + {gettext("Choose which format to import")} + <.icon + name="hero-star" + class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" + aria-hidden="true" + data-slot="icon" + /> + <.focus_wrap id={"actions-#{track.scrobbled_at_uts}-tracks-focus-wrap"}> <.dropdown_link diff --git a/lib/music_library_web/live/universal_search_live/index.ex b/lib/music_library_web/live/universal_search_live/index.ex index 208d4434..c98876df 100644 --- a/lib/music_library_web/live/universal_search_live/index.ex +++ b/lib/music_library_web/live/universal_search_live/index.ex @@ -30,7 +30,7 @@ defmodule MusicLibraryWeb.UniversalSearchLive.Index do <.button id="universal-search-button" - variant="ghost" + variant="soft" title={gettext("Search (Cmd/Ctrl+K)")} phx-click="open_modal" phx-target="#universal-search" diff --git a/lib/music_library_web/live/wishlist_live/show.html.heex b/lib/music_library_web/live/wishlist_live/show.html.heex index 601086fd..023e81d3 100644 --- a/lib/music_library_web/live/wishlist_live/show.html.heex +++ b/lib/music_library_web/live/wishlist_live/show.html.heex @@ -14,13 +14,15 @@ <.dropdown id={"actions-#{@record.id}"} placement="bottom-end"> <:toggle class="h-5 block"> - {gettext("Actions")} - <.icon - name="hero-ellipsis-vertical" - class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" - aria-hidden="true" - data-slot="icon" - /> + <.button variant="ghost"> + {gettext("Actions")} + <.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" + /> + <.focus_wrap id={"actions-#{@record.id}-focus-wrap"}> <.dropdown_link