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/stats/DiscordUserHeader.ts

@@ -1,32 +1,13 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import type { DiscordUser } from "../../../../core/ApiSchemas";
 import { translateText } from "../../../Utils";
 
 @customElement("discord-user-header")
 export class DiscordUserHeader extends LitElement {
-  static styles = css`
-    .wrap {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-    .avatarFrame {
-      padding: 3px;
-      border-radius: 9999px;
-      background: #6b7280; /* bg-gray-500 */
-    }
-    .avatar {
-      width: 48px;
-      height: 48px;
-      border-radius: 9999px;
-      display: block;
-    }
-    .name {
-      font-weight: 600;
-      color: white;
-    }
-  `;
+  createRenderRoot() {
+    return this;
+  }
 
   @state() private _data: DiscordUser | null = null;
 
@@ -59,19 +40,19 @@ export class DiscordUserHeader extends LitElement {
 
   render() {
     return html`
-      <div class="wrap">
+      <div class="flex items-center gap-2">
         ${this.avatarUrl
           ? html`
-              <div class="avatarFrame">
+              <div class="p-[3px] rounded-full bg-gray-500">
                 <img
-                  class="avatar"
+                  class="w-12 h-12 rounded-full block"
                   src="${this.avatarUrl}"
                   alt="${translateText("discord_user_header.avatar_alt")}"
                 />
               </div>
             `
           : null}
-        <span class="name">${this.discordDisplayName}</span>
+        <span class="font-semibold text-white">${this.discordDisplayName}</span>
       </div>
     `;
   }