UI refinements (#2859)

## Description:

UI Refinements requested by @evanpelle  check https://ui.openfront.dev

## 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/Button.ts

@@ -12,33 +12,36 @@ export class OButton extends LitElement {
   @property({ type: Boolean }) blockDesktop = false;
   @property({ type: Boolean }) disable = false;
   @property({ type: Boolean }) fill = false;
+  private static readonly BASE_CLASS =
+    "bg-blue-600 hover:bg-blue-700 text-white font-bold uppercase tracking-wider px-4 py-3 rounded-xl transition-all duration-300 transform hover:-translate-y-px outline-none border border-transparent text-center text-base lg:text-lg";
 
   createRenderRoot() {
     return this;
   }
 
+  private getButtonClasses(): Record<string, boolean> {
+    return {
+      [OButton.BASE_CLASS]: true,
+      "w-full block": this.block,
+      "h-full w-full flex items-center justify-center": this.fill,
+      "lg:w-auto lg:inline-block":
+        !this.block && !this.blockDesktop && !this.fill,
+      "lg:w-1/2 lg:mx-auto lg:block": this.blockDesktop,
+      "bg-gray-700 text-gray-100 hover:bg-gray-600": this.secondary,
+      "disabled:opacity-70 disabled:cursor-not-allowed disabled:transform-none disabled:bg-gray-600":
+        this.disable,
+    };
+  }
+
   render() {
     return html`
       <button
-        class=${classMap({
-          "bg-blue-600 hover:bg-blue-700 text-white font-bold uppercase tracking-wider px-4 py-3 rounded-xl transition-all duration-300 transform hover:-translate-y-px outline-none border border-transparent text-center text-base lg:text-lg":
-            true,
-          "dark:bg-blue-500 dark:hover:bg-blue-600": true,
-          "w-full block": this.block,
-          "h-full w-full flex items-center justify-center": this.fill,
-          "lg:w-auto lg:inline-block":
-            !this.block && !this.blockDesktop && !this.fill,
-          "lg:w-1/2 lg:mx-auto lg:block": this.blockDesktop,
-          "bg-blue-100 text-gray-900 hover:bg-blue-200 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600":
-            this.secondary,
-          "disabled:opacity-70 disabled:cursor-not-allowed disabled:transform-none disabled:bg-gray-600 dark:disabled:bg-gray-600":
-            this.disable,
-        })}
+        class=${classMap(this.getButtonClasses())}
         ?disabled=${this.disable}
       >
-        ${`${this.translationKey}` === ""
-          ? `${this.title}`
-          : `${translateText(this.translationKey)}`}
+        ${this.translationKey === ""
+          ? this.title
+          : translateText(this.translationKey)}
       </button>
     `;
   }

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

@@ -41,7 +41,7 @@ export class SettingKeybind extends LitElement {
 
         <div class="flex items-center gap-3 shrink-0">
           <div
-            class="relative h-12 min-w-[80px] px-4 flex items-center justify-center bg-black/40 border border-white/20 rounded-lg text-xl font-bold font-mono shadow-inner hover:border-blue-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 transition-all cursor-pointer select-none text-white
+            class="relative h-12 min-w-[80px] px-4 flex items-center justify-center bg-black/60 border border-white/20 rounded-lg text-xl font-bold font-mono shadow-inner hover:border-blue-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 transition-all cursor-pointer select-none text-white
             ${this.listening
               ? "border-blue-500 text-blue-400 ring-2 ring-blue-500/50"
               : ""}"

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

@@ -50,7 +50,7 @@ export class SettingNumber extends LitElement {
         <input
           type="number"
           id="setting-number-input"
-          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"
+          class="shrink-0 w-[100px] py-2 px-3 border border-white/20 rounded-lg bg-black/60 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}

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

@@ -52,7 +52,7 @@ export class SettingToggle extends LitElement {
             @change=${this.handleChange}
           />
           <span
-            class="absolute inset-0 bg-black/40 border border-white/10 transition-all duration-300 rounded-full
+            class="absolute inset-0 bg-black/60 border border-white/10 transition-all duration-300 rounded-full
             before:absolute before:content-[''] before:h-5 before:w-5 before:left-[3px] before:top-[3px]
             before:bg-white/40 before:transition-all before:duration-300 before:rounded-full before:shadow-sm hover:before:bg-white/60
             peer-checked:bg-blue-600 peer-checked:border-blue-500 peer-checked:before:translate-x-[24px] peer-checked:before:bg-white"

src/client/components/baseComponents/stats/DiscordUserHeader.ts

@@ -1,7 +1,7 @@
 import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import type { DiscordUser } from "../../../../core/ApiSchemas";
-import { translateText } from "../../../Utils";
+import { getDiscordAvatarUrl, translateText } from "../../../Utils";
 
 @customElement("discord-user-header")
 export class DiscordUserHeader extends LitElement {
@@ -23,15 +23,7 @@ export class DiscordUserHeader extends LitElement {
   private get avatarUrl(): string | null {
     const u = this._data;
     if (!u) return null;
-    if (u.avatar) {
-      const ext = u.avatar.startsWith("a_") ? "gif" : "png";
-      return `https://cdn.discordapp.com/avatars/${u.id}/${u.avatar}.${ext}`;
-    }
-    if (u.discriminator !== undefined) {
-      const idx = Number(u.discriminator) % 5;
-      return `https://cdn.discordapp.com/embed/avatars/${idx}.png`;
-    }
-    return null;
+    return getDiscordAvatarUrl(u);
   }
 
   private get discordDisplayName(): string {