Move language button to bottom left (#2796)

## Description:

Move the language button to the bottom left so it takes up less space.

<img width="615" height="567" alt="Screenshot 2026-01-05 at 5 54 23 PM"
src="https://github.com/user-attachments/assets/f29d5bcb-8627-493a-8c0f-1966cb9c9be6"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan
This commit is contained in:
Evan
2026-01-05 17:57:26 -08:00
committed by GitHub
parent b9f4a8d77b
commit 38f8c6b995
2 changed files with 16 additions and 20 deletions
+3 -5
View File
@@ -311,9 +311,6 @@
block
secondary
></o-button>
<div class="container__row">
<lang-selector class="w-full"></lang-selector>
</div>
</div>
</main>
@@ -322,12 +319,12 @@
id="settings-button"
title="Settings"
class="fixed bottom-4 right-4 z-50 rounded-full p-2 shadow-lg transition-colors duration-300 flex items-center justify-center"
style="width: 80px; height: 80px; background-color: #0075ff"
style="width: 60px; height: 60px; background-color: #0075ff"
>
<img
src="/images/SettingIconWhite.svg"
alt="Settings"
style="width: 72px; height: 72px"
style="width: 52px; height: 52px"
/>
</button>
@@ -455,6 +452,7 @@
<help-modal></help-modal>
<game-info-modal></game-info-modal>
<dark-mode-button></dark-mode-button>
<lang-selector></lang-selector>
<stats-button></stats-button>
<alert-frame></alert-frame>
<chat-modal></chat-modal>
+13 -15
View File
@@ -264,21 +264,19 @@ export class LangSelector extends LitElement {
});
return html`
<div class="container__row">
<button
id="lang-selector"
@click=${this.openModal}
class="text-center appearance-none w-full bg-blue-100 dark:bg-gray-700 hover:bg-blue-200 dark:hover:bg-gray-600 text-blue-900 dark:text-gray-100 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md border-none cursor-pointer transition-colors duration-300 flex items-center gap-2 justify-center"
>
<img
id="lang-flag"
class="w-6 h-4"
src="/flags/${currentLang.svg}.svg"
alt="flag"
/>
<span id="lang-name">${currentLang.native} (${currentLang.en})</span>
</button>
</div>
<button
id="lang-selector"
title="Change Language"
@click=${this.openModal}
class="fixed bottom-4 left-4 z-50 border-none bg-none cursor-pointer"
>
<img
id="lang-flag"
class="w-20 h-14"
src="/flags/${currentLang.svg}.svg"
alt="flag"
/>
</button>
<language-modal
.visible=${this.showModal}