From 09eca3c8b5c78f8605f90cd51a289a929f3a5263 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 5 Dec 2023 20:51:13 +0200
Subject: [PATCH] Show text on settings page when map is banned Closes #1582

---
 app/features/sendouq-settings/q-settings.css        | 11 +++++++++--
 app/features/sendouq-settings/routes/q.settings.tsx | 13 ++++++++++---
 public/locales/en/q.json                            |  1 +
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/app/features/sendouq-settings/q-settings.css b/app/features/sendouq-settings/q-settings.css
index 0832df17f..714c56858 100644
--- a/app/features/sendouq-settings/q-settings.css
+++ b/app/features/sendouq-settings/q-settings.css
@@ -1,4 +1,4 @@
-.q__map-mode-radios-container {
+.q-settings__map-mode-radios-container {
   display: flex;
   gap: var(--s-2);
   flex-direction: column;
@@ -6,11 +6,18 @@
 }
 
 @media screen and (min-width: 600px) {
-  .q__map-mode-radios-container {
+  .q-settings__map-mode-radios-container {
     flex-direction: row;
   }
 }
 
+.q-settings__banned {
+  text-transform: uppercase;
+  font-weight: var(--semi-bold);
+  font-size: var(--fonts-xs);
+  color: var(--text-lighter);
+}
+
 .q-settings__radio {
   background-color: var(--bg-lighter);
   font-size: var(--fonts-xs);
diff --git a/app/features/sendouq-settings/routes/q.settings.tsx b/app/features/sendouq-settings/routes/q.settings.tsx
index 78fa11ed8..1b66f3d82 100644
--- a/app/features/sendouq-settings/routes/q.settings.tsx
+++ b/app/features/sendouq-settings/routes/q.settings.tsx
@@ -36,6 +36,7 @@ import { SENDOUQ_WEAPON_POOL_MAX_SIZE } from "../q-settings-constants";
 import { settingsActionSchema } from "../q-settings-schemas.server";
 import styles from "../q-settings.css";
 import { BANNED_MAPS } from "../banned-maps";
+import { Divider } from "~/components/Divider";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -256,8 +257,10 @@ function MapModeRadios({
     preference: Preference & "NEUTRAL";
   }) => void;
 }) {
+  const { t } = useTranslation(["q"]);
+
   return (
-    <div className="q__map-mode-radios-container">
+    <div className="q-settings__map-mode-radios-container">
       <StageImage stageId={stageId} width={250} className="rounded" />
       <div className="stack justify-evenly">
         {modesShort.map((modeShort) => {
@@ -271,14 +274,18 @@ function MapModeRadios({
           return (
             <div key={modeShort} className="stack horizontal xs my-1">
               <ModeImage mode={modeShort} width={24} />
-              {!isBanned ? (
+              {isBanned ? (
+                <Divider className="q-settings__banned">
+                  {t("q:settings.banned")}
+                </Divider>
+              ) : (
                 <PreferenceRadioGroup
                   preference={preference?.preference}
                   onPreferenceChange={(preference) =>
                     onPreferenceChange({ mode: modeShort, preference, stageId })
                   }
                 />
-              ) : null}
+              )}
             </div>
           );
         })}
diff --git a/public/locales/en/q.json b/public/locales/en/q.json
index 5f5e1d422..d30dce941 100644
--- a/public/locales/en/q.json
+++ b/public/locales/en/q.json
@@ -63,6 +63,7 @@
   "settings.sounds.likeReceived": "Like received",
   "settings.sounds.groupNewMember": "Group new member",
   "settings.sounds.matchStarted": "Match started",
+  "settings.banned": "Banned",
 
   "looking.joiningGroupError": "Before joining another group, leave the current one",
   "looking.goToSettingsPrompt": "To help group finding set your weapon pool and voice chat status on the settings page",