From 27476b89388e49835c73bb7921cb0c83f798d394 Mon Sep 17 00:00:00 2001
From: evanpelle <evanpelle@gmail.com>
Date: Mon, 9 Mar 2026 15:49:52 -0700
Subject: [PATCH] Move language selector flag from navbar to footer, display in
 natural colors and sized responsively.

---
 src/client/LangSelector.ts             | 7 ++-----
 src/client/components/DesktopNavBar.ts | 1 -
 src/client/components/Footer.ts        | 7 ++++++-
 src/client/components/MobileNavBar.ts  | 4 +---
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/client/LangSelector.ts b/src/client/LangSelector.ts
index 73b922b85..2ba0ee498 100644
--- a/src/client/LangSelector.ts
+++ b/src/client/LangSelector.ts
@@ -349,14 +349,11 @@ export class LangSelector extends LitElement {
         id="lang-selector"
         title="Change Language"
         @click=${this.openModal}
-        class="border-none bg-none cursor-pointer p-0 flex items-center justify-center transition-transform duration-200 hover:scale-[1.1] active:scale-[0.9]"
-        style="width: 28px; height: 28px;"
+        class="border-none bg-none cursor-pointer p-0 flex items-center justify-center transition-transform duration-200 hover:scale-[1.1] active:scale-[0.9] opacity-60 hover:opacity-100 w-[40px] h-[40px] lg:w-[56px] lg:h-[56px]"
       >
         <img
           id="lang-flag"
-          class="object-contain pointer-events-none transition-all"
-          style="filter: grayscale(1) sepia(1) saturate(3) hue-rotate(190deg) brightness(0.85)"
-          style="width: 28px; height: 28px;"
+          class="object-contain pointer-events-none transition-all w-[40px] h-[40px] lg:w-[48px] lg:h-[48px]"
           src="/flags/${currentLang.svg}.svg"
           alt="flag"
           draggable="false"
diff --git a/src/client/components/DesktopNavBar.ts b/src/client/components/DesktopNavBar.ts
index 93bb3b8b2..22e9b9b0f 100644
--- a/src/client/components/DesktopNavBar.ts
+++ b/src/client/components/DesktopNavBar.ts
@@ -175,7 +175,6 @@ export class DesktopNavBar extends LitElement {
               `
             : ""}
         </div>
-        <lang-selector></lang-selector>
         <button
           id="nav-account-button"
           class="no-crazygames nav-menu-item relative h-10 rounded-full overflow-hidden flex items-center justify-center gap-2 px-3 bg-transparent border border-white/20 text-white/80 hover:text-white cursor-pointer transition-colors [&.active]:text-white"
diff --git a/src/client/components/Footer.ts b/src/client/components/Footer.ts
index 6851a393d..db2f9c0e1 100644
--- a/src/client/components/Footer.ts
+++ b/src/client/components/Footer.ts
@@ -12,7 +12,9 @@ export class Footer extends LitElement {
       <footer
         class="[.in-game_&]:hidden bg-zinc-900/90 backdrop-blur-md flex flex-col items-center justify-center gap-1 pt-1 pb-3 text-white/50 w-full border-t border-white/10 shrink-0 relative z-50"
       >
-        <div class="flex items-center justify-center gap-4 lg:gap-6 pt-2">
+        <div
+          class="flex items-center justify-center gap-4 lg:gap-6 pt-2 w-full relative"
+        >
           <a
             href="https://github.com/openfrontio/OpenFrontIO"
             target="_blank"
@@ -72,6 +74,9 @@ export class Footer extends LitElement {
               draggable="false"
             />
           </a>
+          <lang-selector
+            class="absolute right-4 top-0 sm:top-[10px]"
+          ></lang-selector>
         </div>
         <div
           class="text-xs mt-1 lg:mt-2 flex items-center justify-center gap-4 px-4"
diff --git a/src/client/components/MobileNavBar.ts b/src/client/components/MobileNavBar.ts
index 002432431..36b240aaf 100644
--- a/src/client/components/MobileNavBar.ts
+++ b/src/client/components/MobileNavBar.ts
@@ -189,9 +189,7 @@ export class MobileNavBar extends LitElement {
         </div>
         <div
           class="flex flex-col w-full mt-auto [.in-game_&]:hidden items-end justify-end pt-4 border-t border-white/10"
-        >
-          <lang-selector></lang-selector>
-        </div>
+        ></div>
       </div>
     `;
   }