From 5bca67925b4b740a8f25be27ec9087be68ee25dc Mon Sep 17 00:00:00 2001
From: Luke Bowsher <lukebowsher@MacBookPro.lan>
Date: Sun, 22 Mar 2026 21:09:16 -0400
Subject: [PATCH] feat: add position color coding to team roster page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Match the draft page's position color scheme with colored left borders
and position badges on team player rows.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/league/[id]/team/[teamid]/one-team.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/league/[id]/team/[teamid]/one-team.tsx b/app/league/[id]/team/[teamid]/one-team.tsx
index 4222a96..f332163 100644
--- a/app/league/[id]/team/[teamid]/one-team.tsx
+++ b/app/league/[id]/team/[teamid]/one-team.tsx
@@ -6,6 +6,7 @@ import { useCallback, useMemo } from 'react';
 import Image from 'next/image';
 import { calculatePlayerScore } from '../../../../utils/scoring';
 import { Card, CardContent } from "@/components/ui/card";
+import { getPositionColor, getPositionBorderColor } from '../../../../draft/[id]/utils';
 
 export default function OneTeam({ team }: { team: TeamWithPlayers & { leagues: League } }) {
     const orderedPlayers = useCallback(() => {
@@ -65,6 +66,7 @@ export default function OneTeam({ team }: { team: TeamWithPlayers & { leagues: L
                     <div
                         key={player.id}
                         className={`flex items-center p-4 bg-background rounded-lg border border-border hover:border-accent transition-colors ${player.eliminated ? 'opacity-50' : ''}`}
+                        style={{ borderLeft: `3px solid ${getPositionBorderColor(player.position, team.leagues?.league || 'NFL')}` }}
                     >
                         <div className="flex-shrink-0">
                             <Image
@@ -88,7 +90,7 @@ export default function OneTeam({ team }: { team: TeamWithPlayers & { leagues: L
                                 </div>
 
                                 <div className="text-right flex items-center gap-2">
-                                    <span className="inline-block px-2 py-1 bg-card rounded text-xs font-medium text-accent">
+                                    <span className={`inline-block px-2 py-1 rounded text-xs font-bold text-white ${getPositionColor(player.position, team.leagues?.league || 'NFL')}`}>
                                         {player.position}
                                     </span>
                                     {player.eliminated && (