Fix colors of mixed badges

lib/music_library_web/components/scrobble_components.ex

@@ -153,12 +153,16 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
 
   defp record_group_badge(assigns) do
     ~H"""
-    <span class={[
+    <.badge
-      "inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium cursor-pointer",
+      color={badge_color(@status)}
-      badge_classes(@status)
+      class={[
-    ]}>
+        "cursor-pointer",
+        @status == :mixed &&
+          "bg-linear-50 from-success/10 to-warning/30 dark:from-success/20 dark:to-warning/60 text-foreground-success-soft"
+      ]}
+    >
       {ngettext("1 record", "%{count} records", @count)}
-    </span>
+    </.badge>
     """
   end
 
@@ -205,17 +209,9 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
     end
   end
 
-  def badge_classes(:collected),
+  def badge_color(:collected), do: "success"
-    do:
+  def badge_color(:wishlisted), do: "warning"
-      "bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/20"
+  def badge_color(:mixed), do: "success"
-
-  def badge_classes(:wishlisted),
-    do:
-      "bg-yellow-50 text-yellow-800 ring-1 ring-yellow-600/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:ring-yellow-400/20"
-
-  def badge_classes(:mixed),
-    do:
-      "bg-yellow-50 text-emerald-700 ring-1 ring-emerald-600/40 dark:bg-yellow-400/10 dark:text-emerald-400 dark:ring-emerald-400/40"
 
   attr :id, :string, required: true
   attr :musicbrainz_id, :string, required: true

lib/music_library_web/live/stats_live/top_albums.ex

@@ -2,7 +2,7 @@ defmodule MusicLibraryWeb.StatsLive.TopAlbums do
   use MusicLibraryWeb, :html
 
   import MusicLibraryWeb.ScrobbleComponents,
-    only: [record_dropdown_link: 1, badge_status: 1, badge_classes: 1]
+    only: [record_dropdown_link: 1, badge_status: 1, badge_color: 1]
 
   alias MusicLibrary.Assets.Transform
   alias MusicLibrary.ListeningStats
@@ -77,12 +77,16 @@ defmodule MusicLibraryWeb.StatsLive.TopAlbums do
           placement="bottom-end"
         >
           <:toggle>
-            <span class={[
+            <.badge
-              "inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium cursor-pointer",
+              color={badge_color(status)}
-              badge_classes(status)
+              class={[
-            ]}>
+                "cursor-pointer",
+                status == :mixed &&
+                  "bg-linear-50 from-success/10 to-warning/30 dark:from-success/20 dark:to-warning/60 text-foreground-success-soft"
+              ]}
+            >
               {@album.play_count}
-            </span>
+            </.badge>
           </:toggle>
           <.record_dropdown_link
             :for={record <- @album.matching_records}