Use element colors for team portraits

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

@@ -2,8 +2,8 @@
 import { ImageResponse } from "next/og";
 import sharp from "sharp";
 
+import { elementBackgroundColor } from "@/lib/catalog/element";
 import { rarityGradient } from "@/lib/catalog/rarity";
-import { isCustomTravelerKey } from "@/lib/catalog/travelers";
 import { getCachedPublicTeamExport } from "@/lib/cache/public";
 import { imageContentDisposition } from "@/lib/guides/export-image";
 
@@ -110,10 +110,10 @@ export async function GET(
                   alt=""
                   width={78}
                   height={78}
-                  style={{ borderRadius: 16, border: "2px solid #ffffff2a", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), objectFit: "cover" }}
+                  style={{ borderRadius: 16, border: "2px solid #ffffff2a", background: elementBackgroundColor(member.character.element), objectFit: "cover" }}
                 />
               ) : (
-                <div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", borderRadius: 16, border: "2px solid #ffffff2a", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), color: "#b9b9c2", fontSize: 30 }}>
+                <div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", borderRadius: 16, border: "2px solid #ffffff2a", background: elementBackgroundColor(member.character.element), color: "#b9b9c2", fontSize: 30 }}>
                   {member.character.name.slice(0, 1)}
                 </div>
               )}

components/public/team-search.tsx

@@ -9,7 +9,7 @@ import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle }
 import { Input } from "@/components/ui/input";
 import { Kbd } from "@/components/ui/kbd";
 import { Separator } from "@/components/ui/separator";
-import { isCustomTravelerKey } from "@/lib/catalog/travelers";
+import { elementBackgroundColor } from "@/lib/catalog/element";
 import { rarityGradientClass } from "@/lib/catalog/rarity";
 import type { PublicGuide } from "@/lib/guides/queries";
 import { cn } from "@/lib/utils";
@@ -77,7 +77,10 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                     {team.members.map((member) => (
                       <div key={member.position} className="min-w-0 text-center">
                         <div className="grid grid-cols-3 gap-2">
-                          <div className={cn("relative col-span-2 row-span-2 min-h-0 overflow-hidden rounded-lg bg-muted", rarityGradientClass(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity))}>
+                          <div
+                            className="relative col-span-2 row-span-2 min-h-0 overflow-hidden rounded-lg"
+                            style={{ backgroundColor: elementBackgroundColor(member.character.element) }}
+                          >
                             <Image
                               src={member.character.imageUrl}
                               alt={member.character.name}

lib/catalog/element.test.ts

@@ -0,0 +1,21 @@
+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", () => {
+    expect(elementBackgroundColor("Pyro")).toBe("#EF7938");
+    expect(elementBackgroundColor("Hydro")).toBe("#4CC2F1");
+    expect(elementBackgroundColor("Anemo")).toBe("#74C2A8");
+    expect(elementBackgroundColor("Electro")).toBe("#AF8EC1");
+    expect(elementBackgroundColor("Dendro")).toBe("#A5C83B");
+    expect(elementBackgroundColor("Cryo")).toBe("#9FD6E3");
+    expect(elementBackgroundColor("Geo")).toBe("#FAB632");
+  });
+
+  it("uses the neutral character background when the element is unavailable", () => {
+    expect(elementBackgroundColor(null)).toBe("#17383d");
+    expect(elementBackgroundColor(undefined)).toBe("#17383d");
+    expect(elementBackgroundColor("Unknown")).toBe("#17383d");
+  });
+});

lib/catalog/element.ts

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