Tune team element backgrounds and badges

app/api/teams/[teamId]/image/route.tsx

@@ -127,7 +127,7 @@ export async function GET(
                 {member.weapon && memberAssets[index].weapon ? (
                   <div style={{ position: "relative", display: "flex", width: 50, height: 50, overflow: "hidden", borderRadius: 10, background: rarityGradient(member.weapon.rarity) }}>
                     <img src={memberAssets[index].weapon} alt="" width={50} height={50} style={{ objectFit: "contain" }} />
-                    <div style={{ position: "absolute", top: 2, left: 2, display: "flex", borderRadius: 4, background: "transparent", color: "#ffffff", padding: "1px 4px", fontSize: 11, fontWeight: 700 }}>
+                    <div style={{ position: "absolute", top: 1, left: 1, display: "flex", borderRadius: 4, background: "transparent", color: "#ffffff", padding: "0 2px", fontSize: 9, fontWeight: 700 }}>
                       R{member.refinement}
                     </div>
                   </div>

components/public/team-search.tsx

@@ -112,7 +112,7 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                                   fill
                                   className="object-contain p-1"
                                 />
-                                <Kbd className="absolute top-0 left-0 whitespace-nowrap bg-transparent text-white">
+                                <Kbd className="absolute top-0 left-0 h-4 min-w-4 whitespace-nowrap bg-transparent px-0.5 text-[9px] text-white">
                                   R{member.refinement}
                                 </Kbd>
                               </div>

lib/catalog/element.test.ts

@@ -3,19 +3,19 @@ import { describe, expect, it } from "vitest";
 import { elementBackgroundColor } from "@/lib/catalog/element";
 
 describe("catalog element backgrounds", () => {
-  it("maps every character element to its flat color", () => {
+  it("maps every character element to its 80% opacity color", () => {
-    expect(elementBackgroundColor("Pyro")).toBe("#EF7938");
+    expect(elementBackgroundColor("Pyro")).toBe("#EF7938CC");
-    expect(elementBackgroundColor("Hydro")).toBe("#4CC2F1");
+    expect(elementBackgroundColor("Hydro")).toBe("#4CC2F1CC");
-    expect(elementBackgroundColor("Anemo")).toBe("#74C2A8");
+    expect(elementBackgroundColor("Anemo")).toBe("#74C2A8CC");
-    expect(elementBackgroundColor("Electro")).toBe("#AF8EC1");
+    expect(elementBackgroundColor("Electro")).toBe("#AF8EC1CC");
-    expect(elementBackgroundColor("Dendro")).toBe("#A5C83B");
+    expect(elementBackgroundColor("Dendro")).toBe("#A5C83BCC");
-    expect(elementBackgroundColor("Cryo")).toBe("#9FD6E3");
+    expect(elementBackgroundColor("Cryo")).toBe("#9FD6E3CC");
-    expect(elementBackgroundColor("Geo")).toBe("#FAB632");
+    expect(elementBackgroundColor("Geo")).toBe("#FAB632CC");
   });
 
   it("uses the neutral character background when the element is unavailable", () => {
-    expect(elementBackgroundColor(null)).toBe("#17383d");
+    expect(elementBackgroundColor(null)).toBe("#17383dcc");
-    expect(elementBackgroundColor(undefined)).toBe("#17383d");
+    expect(elementBackgroundColor(undefined)).toBe("#17383dcc");
-    expect(elementBackgroundColor("Unknown")).toBe("#17383d");
+    expect(elementBackgroundColor("Unknown")).toBe("#17383dcc");
   });
 });

lib/catalog/element.ts

@@ -1,13 +1,13 @@
 const elementBackgroundColors: Record<string, string> = {
-  Pyro: "#EF7938",
+  Pyro: "#EF7938CC",
-  Hydro: "#4CC2F1",
+  Hydro: "#4CC2F1CC",
-  Anemo: "#74C2A8",
+  Anemo: "#74C2A8CC",
-  Electro: "#AF8EC1",
+  Electro: "#AF8EC1CC",
-  Dendro: "#A5C83B",
+  Dendro: "#A5C83BCC",
-  Cryo: "#9FD6E3",
+  Cryo: "#9FD6E3CC",
-  Geo: "#FAB632",
+  Geo: "#FAB632CC",
 };
 
 export function elementBackgroundColor(element: string | null | undefined): string {
-  return (element && elementBackgroundColors[element]) || "#17383d";
+  return (element && elementBackgroundColors[element]) || "#17383dcc";
 }