New DuringMatchActions style

app/components/tournament/DuringMatchActions.tsx

@@ -26,7 +26,9 @@ export function DuringMatchActions({
   const [, parentRoute] = useMatches();
   const { teams, seeds } = parentRoute.data as FindTournamentByNameForUrlI;
   const [joinedRoom, setJoinedRoom] = useState(
-    (currentMatch.score?.[0] ?? 0) > 0 || (currentMatch.score?.[1] ?? 0) > 0
+    true ||
+      (currentMatch.score?.[0] ?? 0) > 0 ||
+      (currentMatch.score?.[1] ?? 0) > 0
   );
 
   const opponentTeam = teams.find(
@@ -52,26 +54,10 @@ export function DuringMatchActions({
     invariant(currentStage, "currentStage is undefined");
     const { stage } = currentStage;
 
-    const roundInfo: [string, React.ReactElement | string | number][] = [
-      ["Opponent", opponentTeam.name],
-      ["Room pass", `${roomPass} (${weHost ? "We" : "They"} host)`],
-      ["Friend code to add", friendCodeToAdd],
-      [
-        "Score",
-        <>
-          {currentMatch.score?.join("-")}
-          {currentPosition > 1 && (
-            <SubmitButton
-              actionType="UNDO_REPORT_SCORE"
-              variant="minimal-destructive"
-              loadingText="Undoing..."
-            >
-              Undo last score
-            </SubmitButton>
-          )}
-        </>,
-      ],
-      ["Best of", currentRound.stages.length],
+    const roundInfos: string[] = [
+      `Pass ${roomPass} (${weHost ? "We" : "They"} host)`,
+      `Add ${friendCodeToAdd}`,
+      `${currentMatch.score?.join("-")} (Bo${currentRound.stages.length})`,
     ];
 
     return (
@@ -88,7 +74,12 @@ export function DuringMatchActions({
             <h4>Stage {currentPosition}</h4>
           </div>
         </div>
-        <ActionSectionWrapper justify-center>
+        <div className="tournament-bracket__infos">
+          {roundInfos.map((info) => (
+            <div key={info}>{info}</div>
+          ))}
+        </div>
+        {/* <ActionSectionWrapper justify-center>
           <div className="tournament-bracket__infos">
             <Form method="post">
               <input type="hidden" name="_action" value="UNDO_REPORT_SCORE" />
@@ -112,7 +103,7 @@ export function DuringMatchActions({
               </div>
             </Form>
           </div>
-        </ActionSectionWrapper>
+        </ActionSectionWrapper> */}
         <ActionSectionWrapper>
           <DuringMatchActionsRosters
             ownTeam={ownTeam}

app/styles/tournament-bracket.css

@@ -20,7 +20,8 @@
   /* TODO: */
   background-image: url("https://pbs.twimg.com/media/DoAV42MXsAAtHCh?format=jpg&name=large");
   background-position: center;
-  border-radius: var(--rounded);
+  border-start-end-radius: var(--rounded);
+  border-start-start-radius: var(--rounded);
   grid-area: img;
 }
 
@@ -56,27 +57,23 @@
 
 .tournament-bracket__infos {
   display: flex;
-  flex-wrap: wrap;
-}
-
-.tournament-bracket__infos__columns {
-  display: grid;
+  flex-direction: column;
   align-items: center;
-  margin: 0 auto;
-  column-gap: var(--s-6);
-  grid-template-columns: 1fr 1fr;
-  row-gap: var(--s-1-5);
+  justify-content: center;
+  margin-bottom: var(--s-4);
+  background: var(--tournaments-bg);
+  border-end-end-radius: var(--rounded);
+  border-end-start-radius: var(--rounded);
+  color: var(--tournaments-text);
+  column-gap: var(--s-8);
+  font-size: var(--fonts-xxs);
+  font-weight: var(--bold);
 }
 
 .tournament-bracket__infos__label {
   margin-block-end: 0;
 }
 
-.tournament-bracket__infos__value {
-  display: flex;
-  gap: var(--s-2);
-}
-
 .tournament-bracket__infos__value > button {
   font-size: var(--fonts-xxs);
 }
@@ -89,7 +86,6 @@
 .tournament-bracket__during-match-actions {
   display: grid;
   margin-top: var(--s-4);
-  gap: var(--s-4);
   grid-template-areas:
     "img"
     "infos"
@@ -290,10 +286,7 @@
 }
 
 @media screen and (min-width: 480px) {
-  .tournament-bracket__during-match-actions {
-    grid-template-areas:
-      "img img"
-      "infos rosters";
-    grid-template-columns: 1fr 1fr;
+  .tournament-bracket__infos {
+    flex-direction: row;
   }
 }