From 1ea6587e82f12bc42bc5f450679f3b45c63102c2 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 1 Jan 2022 12:25:20 +0200
Subject: [PATCH] Clean up utility classes

---
 .../tournament/DuringMatchActions.tsx         | 10 ++---
 .../tournament/EliminationBracket.tsx         |  4 +-
 .../manage-roster.tsx                         | 14 +++++--
 .../to/$organization.$tournament/seeds.tsx    |  2 +-
 .../to/$organization.$tournament/start.tsx    |  2 +-
 app/styles/global.css                         | 38 +------------------
 app/styles/tournament-bracket.css             |  6 +++
 app/styles/tournament-manage-roster.css       | 12 ++++++
 8 files changed, 39 insertions(+), 49 deletions(-)

diff --git a/app/components/tournament/DuringMatchActions.tsx b/app/components/tournament/DuringMatchActions.tsx
index 43b8d114d..f974653d1 100644
--- a/app/components/tournament/DuringMatchActions.tsx
+++ b/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>
diff --git a/app/components/tournament/EliminationBracket.tsx b/app/components/tournament/EliminationBracket.tsx
index 201c6e6c3..7365618a1 100644
--- a/app/components/tournament/EliminationBracket.tsx
+++ b/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}
diff --git a/app/routes/to/$organization.$tournament/manage-roster.tsx b/app/routes/to/$organization.$tournament/manage-roster.tsx
index dfcac5528..66e3f5adb 100644
--- a/app/routes/to/$organization.$tournament/manage-roster.tsx
+++ b/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>
diff --git a/app/routes/to/$organization.$tournament/seeds.tsx b/app/routes/to/$organization.$tournament/seeds.tsx
index 83e52fb96..67b7ff5d6 100644
--- a/app/routes/to/$organization.$tournament/seeds.tsx
+++ b/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,
                   }
                 )}
               >
diff --git a/app/routes/to/$organization.$tournament/start.tsx b/app/routes/to/$organization.$tournament/start.tsx
index 14dd02255..1919db342 100644
--- a/app/routes/to/$organization.$tournament/start.tsx
+++ b/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"
diff --git a/app/styles/global.css b/app/styles/global.css
index 188d3d92b..ccaf7eef2 100644
--- a/app/styles/global.css
+++ b/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);
-}
diff --git a/app/styles/tournament-bracket.css b/app/styles/tournament-bracket.css
index 50144fcf6..6daacb2a2 100644
--- a/app/styles/tournament-bracket.css
+++ b/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%;
diff --git a/app/styles/tournament-manage-roster.css b/app/styles/tournament-manage-roster.css
index 7ad63f3f1..4bbf73d0e 100644
--- a/app/styles/tournament-manage-roster.css
+++ b/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);
 }