Move element colors to team member sections

components/public/team-search.tsx

@@ -11,6 +11,7 @@ import { Kbd } from "@/components/ui/kbd";
 import { Separator } from "@/components/ui/separator";
 import { elementBackgroundColor } from "@/lib/catalog/element";
 import { rarityGradientClass } from "@/lib/catalog/rarity";
+import { isCustomTravelerKey } from "@/lib/catalog/travelers";
 import type { PublicGuide } from "@/lib/guides/queries";
 import { cn } from "@/lib/utils";
 
@@ -75,11 +76,17 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                 <CardContent className="flex flex-col gap-4">
                   <div className="grid grid-cols-4 gap-1 sm:gap-3">
                     {team.members.map((member) => (
-                      <div key={member.position} className="min-w-0 text-center">
+                      <div
+                        key={member.position}
+                        className="min-w-0 rounded-lg p-1 text-center sm:p-2"
+                        style={{ backgroundColor: elementBackgroundColor(member.character.element) }}
+                      >
                         <div className="grid grid-cols-3 gap-2">
                           <div
-                            className="relative col-span-2 row-span-2 min-h-0 overflow-hidden rounded-lg"
-                            style={{ backgroundColor: elementBackgroundColor(member.character.element) }}
+                            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),
+                            )}
                           >
                             <Image
                               src={member.character.imageUrl}