updates

lib/cobblemon_ui_web/live/pokemon_components.ex

@@ -386,7 +386,7 @@ defmodule CobblemonUiWeb.PokemonComponents do
             phx-click="select_type"
             phx-value-type={t}
             class={[
-              "inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-semibold capitalize transition-all duration-150 border cursor-pointer",
+              "inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-semibold capitalize transition-all duration-150 border cursor-pointer",
               if(@selected_type == t,
                 do: "ring-2 ring-primary/60 border-primary/40 bg-base-100 shadow-md scale-105",
                 else:
@@ -395,9 +395,11 @@ defmodule CobblemonUiWeb.PokemonComponents do
             ]}
           >
             <span class={[
-              "inline-block w-2.5 h-2.5 rounded-full shrink-0",
-              type_bg(@selected_type == t, t)
-            ]} />
+              "inline-flex items-center justify-center w-5 h-5 rounded-full shrink-0 p-0.5",
+              TypeChart.type_color(t)
+            ]}>
+              <img src={TypeChart.type_icon_path(t)} alt={t} class="w-3.5 h-3.5" />
+            </span>
             {t}
           </button>
         </div>
@@ -411,7 +413,11 @@ defmodule CobblemonUiWeb.PokemonComponents do
               "w-12 h-12 rounded-xl flex items-center justify-center shrink-0 shadow-sm",
               TypeChart.type_color(@selected_type)
             ]}>
-              <.icon name={TypeChart.type_icon(@selected_type)} class="size-6 text-white drop-shadow" />
+              <img
+                src={TypeChart.type_icon_path(@selected_type)}
+                alt={@selected_type}
+                class="w-7 h-7 drop-shadow"
+              />
             </div>
             <div>
               <h4 class="font-bold text-base-content capitalize text-xl">{@selected_type}</h4>
@@ -568,15 +574,16 @@ defmodule CobblemonUiWeb.PokemonComponents do
         "text-white border-white/10"
       ]}
     >
-      <.icon name={TypeChart.type_icon(@type_name)} class="size-3 drop-shadow" />
+      <img
+        src={TypeChart.type_icon_path(@type_name)}
+        alt={@type_name}
+        class="w-3.5 h-3.5 drop-shadow"
+      />
       {@type_name}
     </button>
     """
   end
 
-  defp type_bg(true, type), do: TypeChart.type_color(type)
-  defp type_bg(false, type), do: TypeChart.type_color(type) <> "/60"
-
   # --- Helpers ---
 
   defp gender_symbol("male"), do: "♂"