style upload

lib/cobblemon_ui_web/live/battle_components.ex

@@ -9,33 +9,19 @@ defmodule CobblemonUiWeb.BattleComponents do
 
   def battle_panel(assigns) do
     ~H"""
-    <div class="rounded-xl border border-error/20 bg-error/5 overflow-hidden mb-6">
+    <div class="rounded-xl overflow-hidden mb-6">
-      <%!-- Header --%>
-      <div class="px-5 py-3 border-b border-error/15 flex items-center gap-2.5 bg-error/5">
-        <span class="w-2 h-2 rounded-full bg-error animate-pulse inline-block"></span>
-        <span class="text-sm font-semibold text-error tracking-wide">Active Battle</span>
-      </div>
-
       <%!-- Actors --%>
       <div class="grid grid-cols-1 md:grid-cols-2">
         <%= for {actor, idx} <- Enum.with_index(@battle.actors) do %>
-          <%!-- Divider between actors on mobile, VS bar on desktop --%>
-          <div :if={idx == 1} class="md:hidden border-t border-base-300/20 mx-4" />
           <div class={[
             "p-4",
-            if(idx == 0, do: "md:border-r border-base-300/20", else: "")
+            if(actor.type == "player", do: "bg-primary/10", else: "bg-warning/10")
           ]}>
             <%!-- Actor header --%>
-            <div class={[
+            <div class="flex items-center gap-2 mb-3">
-              "flex items-center gap-2 mb-3 pb-3 border-b",
-              if(actor.player_id == @player_id,
-                do: "border-primary/15",
-                else: "border-warning/15"
-              )
-            ]}>
               <div class={[
                 "w-8 h-8 rounded-lg flex items-center justify-center shrink-0",
-                if(actor.type == "player", do: "bg-primary/15", else: "bg-warning/15")
+                if(actor.type == "player", do: "bg-primary/20", else: "bg-warning/20")
               ]}>
                 <%= if actor.type == "player" do %>
                   <.icon name="hero-user" class="size-4 text-primary" />
@@ -52,10 +38,7 @@ defmodule CobblemonUiWeb.BattleComponents do
                   {actor.type}
                 </p>
               </div>
-              <%!-- VS badge for desktop --%>
+              <span :if={idx == 0} class="hidden md:block text-xs font-black text-base-content/20">VS</span>
-              <div :if={idx == 0} class="hidden md:flex items-center justify-center">
-                <span class="text-xs font-black text-base-content/20">VS</span>
-              </div>
             </div>
 
             <%!-- Pokemon cards --%>
@@ -63,27 +46,27 @@ defmodule CobblemonUiWeb.BattleComponents do
               <%= for poke <- actor.active_pokemon do %>
                 <% tier = Map.get(@tier_list, String.downcase(poke.species || ""), nil) %>
                 <% hp_pct = if poke.max_hp > 0, do: Float.round(poke.hp / poke.max_hp * 100, 1), else: 0.0 %>
-                <div class="flex items-center gap-3 rounded-lg bg-base-100/40 border border-base-300/20 p-3">
+                <div class="flex items-center gap-3 rounded-lg p-2">
-                  <%!-- Sprite --%>
+                  <%!-- Sprite with tier badge pinned to corner --%>
-                  <div class="w-16 h-16 rounded-lg bg-base-300/15 flex items-center justify-center shrink-0">
+                  <div class="relative w-16 h-16 shrink-0">
                     <img
                       src={"https://img.rankedboost.com/wp-content/plugins/k-Pokemon/assets/sprites-official/#{String.downcase(poke.species || "")}.png"}
                       alt={poke.species}
-                      class="w-14 h-14 object-contain drop-shadow-sm"
+                      class="w-16 h-16 object-contain drop-shadow-sm"
                     />
+                    <div class="absolute -bottom-1 -right-1">
+                      <.tier_badge :if={tier} tier={tier} species={poke.species} compact={true} />
+                    </div>
                   </div>
                   <%!-- Info --%>
                   <div class="flex-1 min-w-0">
                     <%!-- Name row --%>
-                    <div class="flex items-center gap-2 mb-1.5">
+                    <div class="flex items-center gap-1.5 mb-1.5">
                       <span class="text-sm font-bold text-base-content capitalize truncate">{poke.species}</span>
-                      <span class="text-[10px] text-base-content/35 bg-base-300/30 px-1.5 py-0.5 rounded font-mono shrink-0">
+                      <span class="text-[10px] text-base-content/35 font-mono shrink-0">Lv.{poke.level}</span>
-                        Lv.{poke.level}
-                      </span>
-                      <.tier_badge :if={tier} tier={tier} species={poke.species} compact={true} />
                     </div>
                     <%!-- HP bar --%>
-                    <div class="w-full h-2 rounded-full bg-base-300/40 overflow-hidden mb-1">
+                    <div class="w-full h-2 rounded-full bg-base-content/10 overflow-hidden mb-1">
                       <div
                         class={[
                           "h-full rounded-full transition-all duration-500",
@@ -101,7 +84,7 @@ defmodule CobblemonUiWeb.BattleComponents do
                     <div class="flex items-center justify-between">
                       <span class="text-[10px] text-base-content/35 font-medium">HP</span>
                       <span class="text-[10px] font-mono text-base-content/40">
-                        {poke.hp} / {poke.max_hp}
+                        {poke.hp}/{poke.max_hp}
                         <span class="text-base-content/25 ml-1">({hp_pct}%)</span>
                       </span>
                     </div>

lib/cobblemon_ui_web/live/dashboard_live.ex

@@ -185,7 +185,6 @@ defmodule CobblemonUiWeb.DashboardLive do
                   <h1 class="text-2xl font-bold tracking-tight text-base-content">
                     {player_name(@players, @selected_player)}
                   </h1>
-                  <p class="text-sm text-base-content/50">Player Data Explorer</p>
                 </div>
               </div>
             </div>

lib/cobblemon_ui_web/live/pokemon_components.ex

@@ -50,12 +50,13 @@ defmodule CobblemonUiWeb.PokemonComponents do
             :if={!@tier}
             title="Tier data not downloaded"
             class={[
-              "inline-flex items-center justify-center font-black rounded leading-none shrink-0",
+              "inline-flex flex-col items-center justify-center rounded leading-none shrink-0",
-              "bg-base-300/20 text-base-content/25 ring-1 ring-base-300/30",
+              "bg-base-300/20 text-base-content/25",
-              if(@compact, do: "text-[11px] w-6 h-6", else: "text-sm w-7 h-7")
+              if(@compact, do: "w-7 h-8 px-1", else: "w-8 h-9 px-1.5")
             ]}
           >
-            ?
+            <span class={["font-black leading-none", if(@compact, do: "text-[11px]", else: "text-sm")]}>?</span>
+            <span class="text-[7px] font-semibold opacity-40 leading-none mt-0.5">tier</span>
           </div>
           <div :if={@pokemon.shiny} title="Shiny">
             <.icon
@@ -100,19 +101,20 @@ defmodule CobblemonUiWeb.PokemonComponents do
       target="_blank"
       rel="noopener noreferrer"
       class={[
-        "inline-flex items-center justify-center font-black rounded leading-none shrink-0 hover:scale-110 transition-transform",
+        "inline-flex flex-col items-center justify-center rounded leading-none shrink-0 hover:scale-110 transition-transform",
-        if(@compact, do: "text-[11px] w-6 h-6", else: "text-sm w-7 h-7"),
+        if(@compact, do: "w-7 h-8 px-1", else: "w-8 h-9 px-1.5"),
         case @tier do
-          "S" -> "bg-red-500/20 text-red-400 ring-1 ring-red-500/30 hover:bg-red-500/30"
+          "S" -> "bg-red-500/20 text-red-400 hover:bg-red-500/30"
-          "A" -> "bg-orange-500/20 text-orange-400 ring-1 ring-orange-500/30 hover:bg-orange-500/30"
+          "A" -> "bg-orange-500/20 text-orange-400 hover:bg-orange-500/30"
-          "B" -> "bg-yellow-500/20 text-yellow-400 ring-1 ring-yellow-500/30 hover:bg-yellow-500/30"
+          "B" -> "bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30"
-          "C" -> "bg-green-500/20 text-green-400 ring-1 ring-green-500/30 hover:bg-green-500/30"
+          "C" -> "bg-green-500/20 text-green-400 hover:bg-green-500/30"
-          "D" -> "bg-blue-500/20 text-blue-400 ring-1 ring-blue-500/30 hover:bg-blue-500/30"
+          "D" -> "bg-blue-500/20 text-blue-400 hover:bg-blue-500/30"
-          _ -> "bg-base-300/30 text-base-content/40 ring-1 ring-base-300/40"
+          _ -> "bg-base-300/30 text-base-content/40"
         end
       ]}
     >
-      {@tier}
+      <span class={["font-black leading-none", if(@compact, do: "text-[11px]", else: "text-sm")]}>{@tier}</span>
+      <span class="text-[7px] font-semibold opacity-40 leading-none mt-0.5">tier</span>
     </a>
     """
   end