updates

lib/cobblemon_ui_web/live/pokemon_components.ex

@@ -31,6 +31,19 @@ defmodule CobblemonUiWeb.PokemonComponents do
         if(@compact, do: "p-2.5", else: "p-3.5")
       ]}
     >
+      <div class="flex items-start gap-3">
+        <%!-- Sprite (party only) --%>
+        <div
+          :if={!@compact}
+          class="w-14 h-14 rounded-lg bg-base-300/15 flex items-center justify-center shrink-0 overflow-hidden"
+        >
+          <img
+            src={CobblemonUi.SpriteCache.sprite_url(@pokemon.species || "")}
+            alt={@pokemon.species}
+            class="w-12 h-12 object-contain drop-shadow-sm"
+          />
+        </div>
+        <div class="flex-1 min-w-0">
           <div class="flex items-start justify-between">
             <div class="min-w-0">
               <p class={[
@@ -88,6 +101,8 @@ defmodule CobblemonUiWeb.PokemonComponents do
             </span>
           </div>
         </div>
+      </div>
+    </div>
     """
   end
 
@@ -388,12 +403,12 @@ defmodule CobblemonUiWeb.PokemonComponents do
   def type_chart_card(assigns) do
     ~H"""
     <div class="flex items-start gap-3 rounded-xl bg-base-200/40 border border-base-300/20 px-3.5 py-3 hover:bg-base-200/60 transition-colors">
-      <%!-- Type icon circle --%>
+      <%!-- Type icon --%>
       <div class={[
-        "w-11 h-11 rounded-full flex items-center justify-center shrink-0 shadow-sm mt-0.5 text-white",
+        "w-11 h-11 flex items-center justify-center shrink-0 mt-0.5",
-        TypeChart.type_color(@type_name)
+        TypeChart.type_text_color(@type_name)
       ]}>
-        <TypeIcons.type_icon type={@type_name} class="w-6 h-6" />
+        <TypeIcons.type_icon type={@type_name} class="w-8 h-8" />
       </div>
       <%!-- Weakness / Resistance rows --%>
       <div class="flex-1 min-w-0">
@@ -442,12 +457,12 @@ defmodule CobblemonUiWeb.PokemonComponents do
     ~H"""
     <span
       class={[
-        "inline-flex items-center justify-center w-5 h-5 rounded-full shadow-sm text-white",
+        "inline-flex items-center justify-center w-5 h-5",
-        TypeChart.type_color(@type_name)
+        TypeChart.type_text_color(@type_name)
       ]}
       title={@type_name}
     >
-      <TypeIcons.type_icon type={@type_name} class="w-3 h-3" />
+      <TypeIcons.type_icon type={@type_name} class="w-4 h-4" />
     </span>
     """
   end