Move language selector flag from navbar to footer, display in natural colors and sized responsively.

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"

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"

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"

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