Clean up utility classes

app/components/tournament/DuringMatchActions.tsx

@@ -24,9 +24,7 @@ export function DuringMatchActions({
   const [, parentRoute] = useMatches();
   const { teams, seeds } = parentRoute.data as FindTournamentByNameForUrlI;
   const [joinedRoom, setJoinedRoom] = useState(
-    true ||
-      (currentMatch.score?.[0] ?? 0) > 0 ||
-      (currentMatch.score?.[1] ?? 0) > 0
+    (currentMatch.score?.[0] ?? 0) > 0 || (currentMatch.score?.[1] ?? 0) > 0
   );
 
   const opponentTeam = teams.find(
@@ -94,8 +92,10 @@ export function DuringMatchActions({
 
   return (
     <ActionSectionWrapper>
-      <h4 className="mr-6 font-bold">Opponent: {opponentTeam.name}</h4>
-      <ol className="list-decimal">
+      <h4 className="tournament-bracket__during-match__opponent-info">
+        Opponent: {opponentTeam.name}
+      </h4>
+      <ol>
         <li>Add FC: {friendCodeToAdd}</li>
         {weHost ? (
           <li>

app/components/tournament/EliminationBracket.tsx

@@ -169,7 +169,7 @@ export function Match({
         {match.participants?.[0]}{" "}
         <span
           className={classNames("tournament-bracket__elim__score", {
-            "visibility-hidden": typeof match.score?.[0] !== "number",
+            invisible: typeof match.score?.[0] !== "number",
           })}
         >
           {match.score?.[0] ?? 0}
@@ -190,7 +190,7 @@ export function Match({
         {match.participants?.[1]}{" "}
         <span
           className={classNames("tournament-bracket__elim__score", {
-            "visibility-hidden": typeof match.score?.[0] !== "number",
+            invisible: typeof match.score?.[0] !== "number",
           })}
         >
           {match.score?.[1] ?? 0}

app/routes/to/$organization.$tournament/manage-roster.tsx

@@ -217,7 +217,7 @@ export default function ManageRosterPage() {
           <label className="mt-3" htmlFor="canHost">
             Does your team want to host?
           </label>
-          <div className="flex align-center">
+          <div className="tournament__manage-roster__radio-with-label">
             <input
               type="radio"
               id="yes"
@@ -225,12 +225,15 @@ export default function ManageRosterPage() {
               value="yes"
               defaultChecked={ownTeam.canHost}
             />
-            <label className="mb-0 ml-2" htmlFor="yes">
+            <label
+              className="tournament__manage-roster__radio-label"
+              htmlFor="yes"
+            >
               Yes
             </label>
           </div>
 
-          <div className="mt-1 flex align-center">
+          <div className="tournament__manage-roster__radio-with-label">
             <input
               type="radio"
               id="no"
@@ -238,7 +241,10 @@ export default function ManageRosterPage() {
               value="no"
               defaultChecked={!ownTeam.canHost}
             />
-            <label className="mb-0 ml-2" htmlFor="no">
+            <label
+              className="tournament__manage-roster__radio-label"
+              htmlFor="no"
+            >
               No
             </label>
           </div>

app/routes/to/$organization.$tournament/seeds.tsx

@@ -169,7 +169,7 @@ export default function SeedsTab() {
                   "sortable",
                   {
                     disabled: transition.state !== "idle",
-                    "visibility-hidden": activeTeam?.id === team.id,
+                    invisible: activeTeam?.id === team.id,
                   }
                 )}
               >

app/routes/to/$organization.$tournament/start.tsx

@@ -122,7 +122,7 @@ export default function StartBracketTab() {
   };
 
   return (
-    <Form method="post" className="width-100">
+    <Form method="post" className="width-full">
       <input
         type="hidden"
         name="map-list"

app/styles/global.css

@@ -334,48 +334,14 @@ select::selection {
 
 /* Utility classes */
 
-.ml-2 {
-  margin-inline-start: var(--s-2);
-}
-
-.mt-1 {
-  margin-block-start: var(--s-1);
-}
-
 .mt-3 {
   margin-block-start: var(--s-3);
 }
 
-.mt-4 {
-  margin-block-start: var(--s-4);
-}
-
-.mb-0 {
-  margin-block-end: 0;
-}
-
-.visibility-hidden {
+.invisible {
   visibility: hidden;
 }
 
-.width-100 {
+.width-full {
   width: 100%;
 }
-
-.flex {
-  display: flex;
-}
-
-.align-center {
-  align-items: center;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-/* CSS Var helpers */
-
-.css-var-tournaments-bg {
-  background: var(--tournaments-bg);
-}

app/styles/tournament-bracket.css

@@ -41,6 +41,12 @@
   gap: var(--s-2);
 }
 
+.tournament-bracket__during-match__opponent-info {
+  margin-right: var(--s-6);
+  font-size: var(--fonts-md);
+  font-weight: var(--bold);
+}
+
 .tournament-bracket__during-match-actions-container {
   display: flex;
   width: 100%;

app/styles/tournament-manage-roster.css

@@ -33,6 +33,18 @@
   width: min(100%, 10rem);
 }
 
+.tournament__manage-roster__radio-with-label {
+  display: flex;
+  align-items: center;
+  margin-block-start: var(--s-1);
+}
+
+.tournament__manage-roster__radio-label {
+  /* TODO: better way for global styles... <Label> component */
+  margin-block-end: 0 !important;
+  margin-inline-start: var(--s-2);
+}
+
 .tournament__manage-roster__input__button {
   margin-block-start: var(--s-4);
 }