From a3ea5e38035d827f52bfbd64f60cc39972ac597a Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 2 Jul 2023 16:22:07 +0300
Subject: [PATCH] Score reporter improved mobile look

---
 .../components/ScoreReporter.tsx              | 10 +++++++--
 .../tournament-bracket/tournament-bracket.css | 21 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/app/features/tournament-bracket/components/ScoreReporter.tsx b/app/features/tournament-bracket/components/ScoreReporter.tsx
index bf31fda30..08294dfb6 100644
--- a/app/features/tournament-bracket/components/ScoreReporter.tsx
+++ b/app/features/tournament-bracket/components/ScoreReporter.tsx
@@ -242,8 +242,14 @@ function FancyStageBanner({
               alt=""
               width={24}
             />
-            {t(`game-misc:MODE_LONG_${stage.mode}`)} on{" "}
-            {t(`game-misc:STAGE_${stage.stageId}`)}
+            <span className="tournament-bracket__stage-banner__top-bar__map-text-small">
+              {t(`game-misc:MODE_SHORT_${stage.mode}`)}{" "}
+              {t(`game-misc:STAGE_${stage.stageId}`)}
+            </span>
+            <span className="tournament-bracket__stage-banner__top-bar__map-text-big">
+              {t(`game-misc:MODE_LONG_${stage.mode}`)} on{" "}
+              {t(`game-misc:STAGE_${stage.stageId}`)}
+            </span>
           </h4>
           <h4>{pickInfoText()}</h4>
         </div>
diff --git a/app/features/tournament-bracket/tournament-bracket.css b/app/features/tournament-bracket/tournament-bracket.css
index 7cf7cd56d..58bf07299 100644
--- a/app/features/tournament-bracket/tournament-bracket.css
+++ b/app/features/tournament-bracket/tournament-bracket.css
@@ -55,10 +55,11 @@
 
   /* TODO: add fallback from Firefox */
   backdrop-filter: blur(5px);
-  background: rgb(0 0 0 / 25%);
+  background: rgb(0 0 0 / 40%);
   border-start-end-radius: var(--rounded);
   border-start-start-radius: var(--rounded);
   color: var(--badge-text);
+  font-size: var(--fonts-xs);
 }
 
 .tournament-bracket__stage-banner__bottom-bar {
@@ -83,6 +84,24 @@
   gap: var(--s-2);
 }
 
+.tournament-bracket__stage-banner__top-bar__map-text-big {
+  display: none;
+}
+
+@media screen and (min-width: 480px) {
+  .tournament-bracket__stage-banner__top-bar {
+    font-size: initial;
+  }
+
+  .tournament-bracket__stage-banner__top-bar__map-text-small {
+    display: none;
+  }
+
+  .tournament-bracket__stage-banner__top-bar__map-text-big {
+    display: initial;
+  }
+}
+
 .tournament-bracket__during-match-actions {
   display: grid;
   grid-template-areas: