From 7f51359e3899c242c055b2cc9d9cb47a327b0cab Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 7 Apr 2024 14:44:20 +0300
Subject: [PATCH] New style for captain/sub badges (fixes getting hidden)
 Closes #1713

---
 .../tournament/components/TeamWithRoster.tsx  | 23 ++++++++--------
 app/features/tournament/tournament.css        | 27 ++++++++++++++-----
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/app/features/tournament/components/TeamWithRoster.tsx b/app/features/tournament/components/TeamWithRoster.tsx
index 774d42938..09860b2ae 100644
--- a/app/features/tournament/components/TeamWithRoster.tsx
+++ b/app/features/tournament/components/TeamWithRoster.tsx
@@ -60,7 +60,17 @@ export function TeamWithRoster({
               tournament.ctx.startTime;
 
             return (
-              <li key={member.userId} className="list-none">
+              <li key={member.userId} className="tournament__team-member-row">
+                {member.isOwner ? (
+                  <span className="tournament__team-member-name__role text-theme">
+                    C
+                  </span>
+                ) : null}
+                {isSub && !member.isOwner ? (
+                  <span className="tournament__team-member-name__role tournament__team-member-name__role__sub">
+                    S
+                  </span>
+                ) : null}
                 <div
                   className={clsx("tournament__team-with-roster__member", {
                     "tournament__team-with-roster__member__inactive":
@@ -71,7 +81,6 @@ export function TeamWithRoster({
                     user={member}
                     size="xxs"
                     className={clsx({
-                      "tournament__team-with-roster__member__avatar-sub": isSub,
                       "tournament__team-with-roster__member__avatar-inactive":
                         activePlayers && !activePlayers.includes(member.userId),
                     })}
@@ -81,16 +90,6 @@ export function TeamWithRoster({
                     className="tournament__team-member-name"
                   >
                     {member.discordName}{" "}
-                    {member.isOwner ? (
-                      <span className="tournament__team-member-name__role text-theme">
-                        (C)
-                      </span>
-                    ) : null}
-                    {isSub ? (
-                      <span className="tournament__team-member-name__role text-info">
-                        Sub
-                      </span>
-                    ) : null}
                   </Link>
                 </div>
                 {friendCode ? (
diff --git a/app/features/tournament/tournament.css b/app/features/tournament/tournament.css
index fc35fb189..c42293f14 100644
--- a/app/features/tournament/tournament.css
+++ b/app/features/tournament/tournament.css
@@ -141,10 +141,6 @@
   opacity: 0.4;
 }
 
-.tournament__team-with-roster__member__avatar-sub {
-  outline: 2px solid var(--theme-info);
-}
-
 .tournament__team-with-roster__map-pool {
   display: grid;
   grid-template-columns: max-content max-content max-content max-content;
@@ -180,6 +176,11 @@
   word-break: break-word;
 }
 
+.tournament__team-member-row {
+  list-style: none;
+  position: relative;
+}
+
 .tournament__team-member-name {
   overflow: hidden;
   color: var(--text);
@@ -189,8 +190,22 @@
 }
 
 .tournament__team-member-name__role {
-  font-size: var(--fonts-xxxs);
-  font-weight: var(--bold);
+  position: absolute;
+  background-color: var(--theme-secondary);
+  color: var(--button-text);
+  font-weight: var(--semi-bold);
+  width: 12px;
+  height: 12px;
+  border-radius: var(--rounded);
+  font-size: var(--fonts-xxxxs);
+  display: grid;
+  place-items: center;
+  top: 14px;
+  left: 15px;
+}
+
+.tournament__team-member-name__role__sub {
+  background-color: var(--theme-info);
 }
 
 .tournament__logo-container {