Minor changes to the flag-input-modal (#1975)

## Description:

Noticed things were a bit not centered and title had Modal in it.

<img width="643" height="271" alt="image"
src="https://github.com/user-attachments/assets/15e113b7-9d77-42d8-8eb0-9b55f8cdbd19"
/>
<div>↓</div>

<img width="643" height="271" alt="image"
src="https://github.com/user-attachments/assets/aaa64ede-dd1f-44e3-afde-982bd67a1367"
/>

<div>---------------------------------------------------------------------------------------------------------------------------</div>
<img width="867" height="420" alt="image"
src="https://github.com/user-attachments/assets/af545ff4-3d2b-417d-8a96-c8594ffea754"
/>
<div>↓</div>
<img width="867" height="420" alt="image"
src="https://github.com/user-attachments/assets/d3380df7-1c78-40be-8dd2-162768773af6"
/>


## 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:

boostry

resources/lang/en.json

@@ -627,6 +627,11 @@
       "grogu": "Grogu"
     }
   },
+  "flag_input": {
+    "title": "Select Flag",
+    "button_title": "Pick a flag!",
+    "search_flag": "Search..."
+  },
   "spawn_ad": {
     "loading": "Loading advertisement..."
   },

src/client/FlagInput.ts

@@ -2,6 +2,8 @@ import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { renderPlayerFlag } from "../core/CustomFlag";
 import { FlagSchema } from "../core/Schemas";
+import { translateText } from "./Utils";
+
 const flagKey: string = "flag";
 
 @customElement("flag-input")
@@ -71,12 +73,16 @@ export class FlagInput extends LitElement {
       <div class="flex relative">
         <button
           id="flag-input_"
-          class="border p-[4px] rounded-lg flex cursor-pointer border-black/30 dark:border-gray-300/60 bg-white/70 dark:bg-[rgba(55,65,81,0.7)]"
-          title="Pick a flag!"
+          class="border rounded-lg flex cursor-pointer border-black/30
+          dark:border-gray-300/60 bg-white/70 dark:bg-[rgba(55,65,81,0.7)]
+          "
+          title=${translateText("flag_input.button_title")}
         >
           <span
             id="flag-preview"
-            style="display:inline-block;width:48px;height:64px;vertical-align:middle;background:#333;border-radius:6px;overflow:hidden;"
+            style="display:inline-block;
+            vertical-align:middle; background:#333; border-radius:6px;
+            overflow:hidden;"
           ></span>
         </button>
       </div>

src/client/FlagInputModal.ts

@@ -1,6 +1,7 @@
 import { LitElement, html } from "lit";
 import { customElement, query, state } from "lit/decorators.js";
 import Countries from "./data/countries.json";
+import { translateText } from "./Utils";
 
 @customElement("flag-input-modal")
 export class FlagInputModal extends LitElement {
@@ -18,14 +19,20 @@ export class FlagInputModal extends LitElement {
 
   render() {
     return html`
-      <o-modal title="Flag Selector Modal" alwaysMaximized>
-        <input
-          class="h-[2rem] border-none text-center border border-gray-300 rounded-xl shadow-sm text-2xl text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-black dark:border-gray-300/60 dark:bg-gray-700 dark:text-white"
-          type="text"
-          placeholder="Search..."
-          @change=${this.handleSearch}
-          @keyup=${this.handleSearch}
-        />
+      <o-modal alwaysMaximized title=${translateText("flag_input.title")}>
+        <div class="flex justify-center w-full p-[1rem]">
+          <input
+            class="h-[2rem] border-none border border-gray-300 
+          rounded-xl shadow-sm text-2xl text-center focus:outline-none
+          focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-black
+          dark:border-gray-300/60 dark:bg-gray-700 dark:text-white"
+            type="text"
+            placeholder=${translateText("flag_input.search_flag")}
+            @change=${this.handleSearch}
+            @keyup=${this.handleSearch}
+          />
+        </div>
+
         <div
           class="flex flex-wrap justify-evenly gap-[1rem] overflow-y-auto overflow-x-hidden h-[90%]"
         >

src/client/index.html

@@ -198,7 +198,7 @@
         <token-login class="w-[20%] md:w-[15%]"></token-login>
 
         <div class="container__row">
-          <flag-input class="w-[20%] md:w-[15%]"></flag-input>
+          <flag-input class="w-[20%] md:w-[20%]"></flag-input>
           <territory-patterns-modal class="w-[20%] md:w-[15%]">
             <button
               id="territory-patterns-input-preview-button"