Show text on settings page when map is banned Closes #1582

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);

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>
           );
         })}

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",