FancyStageBanners in Match modal

app/components/Modal.tsx

@@ -16,7 +16,7 @@ export default function Modal({
         <Link to={closeUrl} className="modal-close">
           Close
         </Link>
-        <h1>{title}</h1>
+        <h2>{title}</h2>
         <div>{children}</div>
       </div>
     </div>

app/components/tournament/DuringMatchActions.tsx

@@ -1,13 +1,13 @@
 import { Form, useMatches } from "remix";
 import invariant from "tiny-invariant";
-import { modesShortToLong } from "~/constants";
 import { resolveHostInfo } from "~/core/tournament/utils";
-import type { FindTournamentByNameForUrlI } from "~/services/tournament";
 import type { BracketModified } from "~/services/bracket";
-import { modeToImageUrl, Unpacked } from "~/utils";
+import type { FindTournamentByNameForUrlI } from "~/services/tournament";
+import { Unpacked } from "~/utils";
 import { SubmitButton } from "../SubmitButton";
 import { ActionSectionWrapper } from "./ActionSectionWrapper";
 import { DuringMatchActionsRosters } from "./DuringMatchActionsRosters";
+import { FancyStageBanner } from "./FancyStageBanner";
 
 export function DuringMatchActions({
   ownTeam,
@@ -58,17 +58,11 @@ export function DuringMatchActions({
 
   return (
     <div className="tournament-bracket__during-match-actions">
-      <div className="tournament-bracket__stage-banner">
-        <div className="tournament-bracket__stage-banner__top-bar">
-          <h4 className="tournament-bracket__stage-banner__top-bar__header">
-            <img
-              className="tournament-bracket__stage-banner__top-bar__mode-image"
-              src={modeToImageUrl(stage.mode)}
-            />
-            {modesShortToLong[stage.mode]} on {stage.name}
-          </h4>
-          <h4>Stage {currentPosition}</h4>
-        </div>
+      <FancyStageBanner
+        stage={stage}
+        roundNumber={currentPosition}
+        infos={roundInfos}
+      >
         {currentPosition > 1 && (
           <Form method="post">
             <input type="hidden" name="_action" value="UNDO_REPORT_SCORE" />
@@ -85,12 +79,7 @@ export function DuringMatchActions({
             </div>
           </Form>
         )}
-      </div>
-      <div className="tournament-bracket__infos">
-        {roundInfos.map((info, i) => (
-          <div key={i}>{info}</div>
-        ))}
-      </div>
+      </FancyStageBanner>
       <ActionSectionWrapper>
         <DuringMatchActionsRosters
           ownTeam={ownTeam}

app/components/tournament/FancyStageBanner.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import type { Mode } from "@prisma/client";
+import { modesShortToLong } from "~/constants";
+import { modeToImageUrl } from "~/utils";
+import clsx from "clsx";
+
+export function FancyStageBanner({
+  stage,
+  roundNumber,
+  infos,
+  children,
+}: {
+  stage: { mode: Mode; name: string };
+  roundNumber: number;
+  infos?: JSX.Element[];
+  children?: React.ReactNode;
+}) {
+  return (
+    <>
+      <div
+        className={clsx("tournament-bracket__stage-banner", {
+          rounded: !infos,
+        })}
+      >
+        <div className="tournament-bracket__stage-banner__top-bar">
+          <h4 className="tournament-bracket__stage-banner__top-bar__header">
+            <img
+              className="tournament-bracket__stage-banner__top-bar__mode-image"
+              src={modeToImageUrl(stage.mode)}
+            />
+            {modesShortToLong[stage.mode]} on {stage.name}
+          </h4>
+          <h4>Stage {roundNumber}</h4>
+        </div>
+        {children}
+      </div>
+      {infos && (
+        <div className="tournament-bracket__infos">
+          {infos.map((info, i) => (
+            <div key={i}>{info}</div>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}

app/db/tournament/queries/findMatchModalInfoByNumber.ts

@@ -15,7 +15,7 @@ export type FindMatchModalInfoByNumber =
       title: string;
       roundName: string;
       matchInfos: {
-        idForReact: string;
+        idForFrontend: string;
         teamUpper: TeamRosterInputTeam;
         teamLower: TeamRosterInputTeam;
         winnerId?: string;
@@ -80,7 +80,7 @@ export async function findMatchModalInfoByNumber({
       });
 
       return {
-        idForReact: uuidv4(),
+        idForFrontend: uuidv4(),
         teamUpper: {
           name: upperTeam.team.name,
           id: upperTeam.teamId,

app/routes/to/$organization.$tournament/bracket.$bid/match.$num.tsx

@@ -14,6 +14,7 @@ import {
 } from "~/db/tournament/queries/findMatchModalInfoByNumber";
 import { Unpacked } from "~/utils";
 import styles from "~/styles/tournament-match.css";
+import { FancyStageBanner } from "~/components/tournament/FancyStageBanner";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -38,22 +39,27 @@ export default function MatchModal() {
 
   return (
     <Modal title={data.title} closeUrl={location.pathname.split("/match")[0]}>
-      <h4>{data.roundName}</h4>
+      <h4 className="tournament-match-modal__round-name">{data.roundName}</h4>
       <div className="tournament-match-modal__rounds">
         {data.matchInfos
           .filter((matchInfo) => matchInfo.winnerId)
-          .map((matchInfo) => {
+          .map((matchInfo, i) => {
             return (
-              <TeamRosterInputs
-                key={matchInfo.idForReact}
-                teamUpper={matchInfo.teamUpper}
-                teamLower={matchInfo.teamLower}
-                checkedPlayers={matchInfoToCheckedPlayers(matchInfo)}
-                setCheckedPlayers={() => null}
-                setWinnerId={() => null}
-                winnerId={matchInfo.winnerId}
-                presentational
-              />
+              <div
+                className="tournament-match-modal__round"
+                key={matchInfo.idForFrontend}
+              >
+                <FancyStageBanner stage={matchInfo.stage} roundNumber={i + 1} />
+                <TeamRosterInputs
+                  teamUpper={matchInfo.teamUpper}
+                  teamLower={matchInfo.teamLower}
+                  checkedPlayers={matchInfoToCheckedPlayers(matchInfo)}
+                  setCheckedPlayers={() => null}
+                  setWinnerId={() => null}
+                  winnerId={matchInfo.winnerId}
+                  presentational
+                />
+              </div>
             );
           })}
       </div>

app/styles/global.css

@@ -290,7 +290,6 @@ select::selection {
   padding: 2em;
   background-color: var(--bg-lighter);
   border-radius: var(--rounded);
-  overscroll-behavior: contain;
   transform: translate(-50%, -50%);
 }
 
@@ -426,3 +425,7 @@ select::selection {
 .items-center {
   align-items: center;
 }
+
+.rounded {
+  border-radius: var(--rounded);
+}

app/styles/tournament-match.css

@@ -1,6 +1,18 @@
+.tournament-match-modal__round-name {
+  color: var(--theme);
+  font-size: var(--fonts-sm);
+}
+
 .tournament-match-modal__rounds {
   display: flex;
   flex-direction: column;
   gap: var(--s-8);
-  margin-block-start: var(--s-4);
+  padding-block-start: var(--s-4);
+}
+
+.tournament-match-modal__round {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-4);
+  padding-block-start: var(--s-4);
 }