Main Menu UI Overhaul (#2829)

## Description:

Overhauls the Main Menu UI, visit https://menu.openfront.dev to see
everything.

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

w.o.n

src/client/components/baseComponents/setting/SettingNumber.ts

@@ -29,18 +29,28 @@ export class SettingNumber extends LitElement {
   }
 
   render() {
+    const rainbowClass = this.easter
+      ? "bg-[linear-gradient(270deg,#990033,#996600,#336600,#008080,#1c3f99,#5e0099,#990033)] bg-[length:1400%_1400%] animate-rainbow-bg text-white hover:bg-[linear-gradient(270deg,#990033,#996600,#336600,#008080,#1c3f99,#5e0099,#990033)]"
+      : "";
+
     return html`
-      <div class="setting-item${this.easter ? " easter-egg" : ""}">
-        <div class="setting-label-group">
-          <label class="setting-label" for="setting-number-input"
+      <div
+        class="flex flex-row items-center justify-between w-full p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 transition-all gap-4 ${rainbowClass}"
+      >
+        <div class="flex flex-col flex-1 min-w-0 mr-4">
+          <label
+            class="text-white font-bold text-base block mb-1"
+            for="setting-number-input"
             >${this.label}</label
           >
-          <div class="setting-description">${this.description}</div>
+          <div class="text-white/50 text-sm leading-snug">
+            ${this.description}
+          </div>
         </div>
         <input
           type="number"
           id="setting-number-input"
-          class="setting-input number"
+          class="shrink-0 w-[100px] py-2 px-3 border border-white/20 rounded-lg bg-black/40 text-white font-mono text-center focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all"
           .value=${String(this.value ?? 0)}
           min=${this.min}
           max=${this.max}