Highlight own team in different color

app/features/tournament-bracket/brackets-viewer.css

@@ -69,3 +69,7 @@
   font-size: var(--fonts-xxs);
   margin-inline-end: var(--space-after-seed);
 }
+
+.participant > .name {
+  color: var(--team-text-color);
+}

app/features/tournament-bracket/routes/to.$id.brackets.tsx

@@ -187,19 +187,23 @@ export default function TournamentBracketsPage() {
 
     // my beautiful hack to show seeds
     // clean up probably not needed as it's not harmful to append more than one
-    appendStyleTagToHead(
-      parentRouteData.teams
-        .map((team, i) => {
-          const participantId = data.hasStarted ? team.id : i;
-          return `
-            [data-participant-id="${participantId}"] {
-              --seed: "${i + 1}  ";
-              --space-after-seed: ${i < 10 ? "6px" : "0px"};
-            }
-          `;
-        })
-        .join("\n")
-    );
+    const cssRulesToAppend = parentRouteData.teams.map((team, i) => {
+      const participantId = data.hasStarted ? team.id : i;
+      return `
+        [data-participant-id="${participantId}"] {
+          --seed: "${i + 1}  ";
+          --space-after-seed: ${i < 10 ? "6px" : "0px"};
+        }
+      `;
+    });
+    if (parentRouteData.teamMemberOfName) {
+      cssRulesToAppend.push(`
+        [title="${parentRouteData.teamMemberOfName}"] {
+          --team-text-color: var(--theme-secondary);
+        }
+      `);
+    }
+    appendStyleTagToHead(cssRulesToAppend.join("\n"));
 
     const element = ref.current;
     return () => {

app/features/tournament/routes/to.$id.tsx

@@ -80,6 +80,9 @@ export const loader = async ({ params, request }: LoaderArgs) => {
   const ownedTeamId = teams.find((team) =>
     team.members.some((member) => member.userId === user?.id && member.isOwner)
   )?.id;
+  const teamMemberOfName = teams.find((team) =>
+    team.members.some((member) => member.userId === user?.id)
+  )?.name;
 
   return {
     event,
@@ -87,6 +90,7 @@ export const loader = async ({ params, request }: LoaderArgs) => {
       event.eventId
     ),
     ownedTeamId,
+    teamMemberOfName,
     teams: censorMapPools(teams),
     mapListGeneratorAvailable,
     hasStarted,