From 712a7c84e523ef724f0a259a14010dfd284a634e Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 7 Mar 2023 21:40:16 +0200
Subject: [PATCH] Fix vods timestamps layout Closes #1294

---
 app/features/vods/routes/vods.$id.tsx | 120 +++++++++++++-------------
 app/features/vods/vods.css            |  15 ++--
 2 files changed, 67 insertions(+), 68 deletions(-)

diff --git a/app/features/vods/routes/vods.$id.tsx b/app/features/vods/routes/vods.$id.tsx
index b665ada17..a4997f14e 100644
--- a/app/features/vods/routes/vods.$id.tsx
+++ b/app/features/vods/routes/vods.$id.tsx
@@ -142,71 +142,67 @@ function Match({
   const weapons = match.weapons.length === 8 ? match.weapons : null;
 
   return (
-    <div>
-      <div className="vods__match">
-        <Image
-          alt=""
-          path={stageImageUrl(match.stageId)}
-          width={100}
-          className="rounded"
+    <div className="vods__match">
+      <Image
+        alt=""
+        path={stageImageUrl(match.stageId)}
+        width={120}
+        className="rounded"
+      />
+      {weapon ? (
+        <WeaponImage
+          weaponSplId={weapon}
+          variant="badge"
+          width={42}
+          className="vods__match__weapon"
+          testId={`weapon-img-${weapon}`}
         />
-        {weapon ? (
-          <WeaponImage
-            weaponSplId={weapon}
-            variant="badge"
-            width={42}
-            className="vods__match__weapon"
-            testId={`weapon-img-${weapon}`}
-          />
-        ) : null}
-        <Image
-          alt=""
-          path={modeImageUrl(match.mode)}
-          width={32}
-          className="vods__match__mode"
-        />
-        <div className="vods__match__text">
-          <div>
-            {t(`game-misc:MODE_SHORT_${match.mode}`)}{" "}
-            {t(`game-misc:STAGE_${match.stageId}`)}
+      ) : null}
+      <Image
+        path={modeImageUrl(match.mode)}
+        width={32}
+        className={clsx("vods__match__mode", { cast: Boolean(weapons) })}
+        alt={t(`game-misc:MODE_LONG_${match.mode}`)}
+        title={t(`game-misc:MODE_LONG_${match.mode}`)}
+      />
+      {weapons ? (
+        <div className="stack horizontal md">
+          <div className="vods__match__weapons">
+            {weapons.slice(0, 4).map((weapon, i) => {
+              return (
+                <WeaponImage
+                  key={i}
+                  testId={`weapon-img-${weapon}-${i}`}
+                  weaponSplId={weapon}
+                  variant="badge"
+                  width={30}
+                />
+              );
+            })}
+          </div>
+          <div className="vods__match__weapons">
+            {weapons.slice(4).map((weapon, i) => {
+              const adjustedI = i + 4;
+              return (
+                <WeaponImage
+                  key={i}
+                  testId={`weapon-img-${weapon}-${adjustedI}`}
+                  weaponSplId={weapon}
+                  variant="badge"
+                  width={30}
+                />
+              );
+            })}
           </div>
-          {weapon ? <div>{t(`weapons:MAIN_${weapon}`)}</div> : null}
         </div>
-        {weapons ? (
-          <div className="stack horizontal md">
-            <div className="vods__match__weapons">
-              {weapons.slice(0, 4).map((weapon, i) => {
-                return (
-                  <WeaponImage
-                    key={i}
-                    testId={`weapon-img-${weapon}-${i}`}
-                    weaponSplId={weapon}
-                    variant="badge"
-                    width={30}
-                  />
-                );
-              })}
-            </div>
-            <div className="vods__match__weapons">
-              {weapons.slice(4).map((weapon, i) => {
-                const adjustedI = i + 4;
-                return (
-                  <WeaponImage
-                    key={i}
-                    testId={`weapon-img-${weapon}-${adjustedI}`}
-                    weaponSplId={weapon}
-                    variant="badge"
-                    width={30}
-                  />
-                );
-              })}
-            </div>
-          </div>
-        ) : null}
-        <Button size="tiny" onClick={() => setStart(match.startsAt)}>
-          {secondsToMinutes(match.startsAt)}
-        </Button>
-      </div>
+      ) : null}
+      <Button
+        size="tiny"
+        onClick={() => setStart(match.startsAt)}
+        variant="outlined"
+      >
+        {secondsToMinutes(match.startsAt)}
+      </Button>
     </div>
   );
 }
diff --git a/app/features/vods/vods.css b/app/features/vods/vods.css
index 68b3e664d..354013f26 100644
--- a/app/features/vods/vods.css
+++ b/app/features/vods/vods.css
@@ -6,6 +6,7 @@
   row-gap: var(--s-8);
   justify-content: space-between;
   margin-block-start: var(--s-2);
+  place-items: center;
 }
 
 .vods__match {
@@ -18,16 +19,14 @@
   line-height: 1.3;
   font-weight: var(--semi-bold);
   flex-grow: 1;
-}
-
-.vods__match__text {
-  margin-block: var(--s-2);
+  width: max-content;
+  gap: var(--s-1);
 }
 
 .vods__match__weapon {
   position: absolute;
   top: -15px;
-  left: 15px;
+  left: -20px;
 }
 
 .vods__match__weapons {
@@ -39,7 +38,11 @@
 .vods__match__mode {
   position: absolute;
   top: -15px;
-  right: 20px;
+  right: -15px;
+}
+
+.vods__match__mode.cast {
+  right: -8px;
 }
 
 .vods__listing__list {