Make hover effect stand out more

This commit is contained in:
Claudio Ortolina
2026-03-24 11:05:17 +00:00
parent 3e200fc47e
commit 1bd5b54bb5
11 changed files with 15 additions and 15 deletions
@@ -71,7 +71,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do
defp result(assigns) do
~H"""
<li id={@id} class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700">
<li id={@id} class="flex justify-between gap-x-6 py-5 hover:bg-zinc-100 dark:hover:bg-zinc-700">
<div class="flex w-full shrink-0 items-center justify-between px-4">
<img
class="mr-4 w-20 flex-none rounded-lg"
+1 -1
View File
@@ -156,7 +156,7 @@ defmodule MusicLibraryWeb.Components.Chat do
phx-click="select_chat"
phx-value-id={chat.id}
phx-target={@myself}
class="w-full rounded-lg p-3 text-left transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800"
class="w-full rounded-lg p-3 text-left transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800"
>
<p class="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
{chat.topic || gettext("Untitled")}
@@ -85,7 +85,7 @@ defmodule MusicLibraryWeb.RecordComponents do
<li
:for={{id, record} <- @records}
phx-click={JS.navigate(@record_show_path.(record))}
class="-mx-2 flex cursor-pointer justify-between gap-x-6 px-2 py-5 hover:bg-zinc-50 md:-mx-4 md:px-4 dark:hover:bg-zinc-800"
class="-mx-2 flex cursor-pointer justify-between gap-x-6 px-2 py-5 hover:bg-zinc-100 md:-mx-4 md:px-4 dark:hover:bg-zinc-800"
id={id}
>
<div class="flex min-w-0 items-center gap-x-4">
@@ -27,7 +27,7 @@ defmodule MusicLibraryWeb.SearchComponents do
<div
class={[
"cursor-pointer rounded-lg p-3 transition-colors",
"hover:bg-zinc-50 dark:hover:bg-zinc-700",
"hover:bg-zinc-100 dark:hover:bg-zinc-700",
"aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-700"
]}
role="option"
@@ -90,7 +90,7 @@ defmodule MusicLibraryWeb.SearchComponents do
<div
class={[
"cursor-pointer rounded-lg p-3 transition-colors",
"hover:bg-zinc-50 dark:hover:bg-zinc-700",
"hover:bg-zinc-100 dark:hover:bg-zinc-700",
"aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-700"
]}
role="option"
@@ -133,7 +133,7 @@ defmodule MusicLibraryWeb.SearchComponents do
<div
class={[
"cursor-pointer rounded-lg p-3 transition-colors",
"hover:bg-zinc-50 dark:hover:bg-zinc-700",
"hover:bg-zinc-100 dark:hover:bg-zinc-700",
"aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-700"
]}
role="option"
@@ -175,7 +175,7 @@ defmodule MusicLibraryWeb.SearchComponents do
<div
class={[
"cursor-pointer rounded-lg p-3 transition-colors",
"hover:bg-zinc-50 dark:hover:bg-zinc-700",
"hover:bg-zinc-100 dark:hover:bg-zinc-700",
"aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-700"
]}
role="option"