refactor(ui): migrate tailwindcss v3 to v4 (#2735)

## Description:

migrate tailwindcss v3 to v4

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

wraith4081

---------

Co-authored-by: iamlewis <lewismmmm@gmail.com>
Co-authored-by: Ryan <7389646+ryanbarlow97@users.noreply.github.com>

src/client/components/baseComponents/ranking/PlayerRow.ts

@@ -22,16 +22,18 @@ export class PlayerRow extends LitElement {
     const visibleBorder = player.winner || this.currentPlayer;
     return html`
       <li
-        class="bg-gradient-to-r ${player.winner
-          ? "from-sky-400 to-blue-700"
-          : "bg-slate-700"} border-[2px]
+        class="${player.winner
+          ? "bg-linear-to-r via-none from-sky-400 to-blue-700"
+          : "bg-slate-700"} border-2
           ${player.winner
           ? "border-yellow-500"
-          : "border-yellow-50"} ${visibleBorder ? "" : "border-opacity-0"}
-          relative pt-1 pb-1 pr-2 pl-2 sm:pl-5 sm:pr-5 mb-[5px] rounded-lg flex justify-between items-center hover:bg-slate-500 transition duration-150 ease-in-out"
+          : visibleBorder
+            ? "border-yellow-50"
+            : "border-yellow-50/0"}
+          relative pt-1 pb-1 pr-2 pl-2 sm:pl-5 sm:pr-5 mb-1.25 rounded-lg flex justify-between items-center hover:bg-slate-500 transition duration-150 ease-in-out"
       >
         <div
-          class="font-bold text-right w-[30px] text-lg text-white absolute left-[-40px]"
+          class="font-bold text-right w-7.5 text-lg text-white absolute -left-10"
         >
           ${this.rank}
         </div>
@@ -50,7 +52,7 @@ export class PlayerRow extends LitElement {
     return html`
       <img
         src="/images/CrownIcon.svg"
-        class="absolute top-[-3px] left-[16px] w-[15px] h-[15px] sm:top-[-7px] sm:left-[30px] sm:w-[20px] sm:h-[20px]"
+        class="absolute -top-0.75 left-4 size-3.75 sm:-top-1.75 sm:left-7.5 sm:size-5"
       />
     `;
   }
@@ -84,7 +86,7 @@ export class PlayerRow extends LitElement {
       </div>
       <div>
         <div
-          class="font-bold rounded-[50%] w-[30px] h-[30px] leading-[1.6rem] border text-center bg-white text-black"
+          class="font-bold rounded-[50%] size-7.5 leading-[1.6rem] border border-gray-200 text-center bg-white text-black"
         >
           ${Number(this.score).toFixed(0)}
         </div>
@@ -96,10 +98,13 @@ export class PlayerRow extends LitElement {
     const bestScore = Math.max(this.bestScore, 1);
     const width = Math.min(Math.max((this.score / bestScore) * 100, 0), 100);
     return html`
-      <div class="w-full pr-[10px] m-auto">
-        <div class="h-[7px] bg-neutral-800" style="width: 100%;">
+      <div class="w-full pr-2.5 m-auto">
+        <div class="h-1.75 bg-neutral-800 w-full">
           <!-- bar background -->
-          <div class="h-[7px] bg-white" style="width: ${width}%;"></div>
+          <div
+            class="h-1.75 bg-white w-(--width)"
+            style="--width: ${width}%;"
+          ></div>
         </div>
       </div>
     `;
@@ -109,7 +114,7 @@ export class PlayerRow extends LitElement {
       <div
         class="${highlight
           ? "font-bold text-[18px]"
-          : ""} min-w-[30px] sm:min-w-[60px] inline-block text-center"
+          : ""} min-w-7.5 sm:min-w-15 inline-block text-center"
       >
         ${value}
       </div>
@@ -152,32 +157,27 @@ export class PlayerRow extends LitElement {
     return html`
       <div class="flex gap-3 items-center">
         ${this.renderPlayerIcon()}
-        <div
-          class="text-left w-[125px] max-w-[125px] sm:w-[250px] sm:max-w-[250px]"
-        >
+        <div class="text-left w-31.25 sm:w-62.5">
           ${this.renderPlayerName()}
         </div>
       </div>
       <div class="flex gap-2">
         <div
-          class="font-bold rounded-md w-[60px] max-w-[60px] h-[30px] text-sm sm:w-[100px] sm:h-[30px] leading-[1.9rem] text-center"
+          class="font-bold rounded-md w-15 shrink-0 h-7.5 text-sm sm:w-25 sm:h-7.5 leading-[1.9rem] text-center"
         >
           ${renderNumber(this.score)}
         </div>
-        <img
-          src="/images/GoldCoinIcon.svg"
-          class="w-[14px] h-[14px] sm:w-[20px] sm:h-[20px] m-auto"
-        />
+        <img src="/images/GoldCoinIcon.svg" class="size-3.5 sm:size-5 m-auto" />
       </div>
     `;
   }
 
   private renderPlayerName() {
     return html`
-      <div class="flex gap-1 items-center max-w-[200px] min-w-[200px]">
+      <div class="flex gap-1 items-center w-50 shrink-0">
         ${this.player.tag ? this.renderTag(this.player.tag) : ""}
         <div
-          class="text-xs sm:text-sm font-bold text-ellipsis max-w-[150px] min-w-[150px] overflow-hidden whitespace-nowrap"
+          class="text-xs sm:text-sm font-bold text-ellipsis w-37.5 shrink-0 overflow-hidden whitespace-nowrap"
         >
           ${this.player.username}
         </div>
@@ -188,7 +188,7 @@ export class PlayerRow extends LitElement {
   private renderTag(tag: string) {
     return html`
       <div
-        class="bg-white text-black rounded-lg sm:rounded-xl border text-xs leading-[12px] sm:leading-[18px] text-blue-900 h-[15px] pr-[4px] pl-[4px] sm:h-[20px] sm:pr-[8px] sm:pl-[8px] font-bold"
+        class="bg-white text-black rounded-lg sm:rounded-xl border border-gray-200 text-xs leading-3 sm:leading-4.5 text-blue-900 h-3.75 px-1 sm:h-5 sm:px-2 font-bold"
       >
         ${tag}
       </div>
@@ -198,24 +198,24 @@ export class PlayerRow extends LitElement {
   private renderIcon() {
     if (this.player.killedAt) {
       return html` <div
-        class="w-[30px] h-[30px] leading-[5px] text-lg sm:min-w-[40px] sm:w-[40px] sm:h-[40px] pt-[12px] sm:leading-[15px] sm:rounded-[50%] sm:border text-center sm:bg-slate-500 sm:text-2xl"
+        class="size-7.5 leading-1.25 shrink-0 text-lg sm:size-10 pt-3 sm:leading-3.75 sm:rounded-[50%] sm:border sm:border-gray-200 text-center sm:bg-slate-500 sm:text-2xl"
       >
         💀
       </div>`;
     } else if (this.player.flag) {
       return html`<img
         src="/flags/${this.player.flag}.svg"
-        class="min-w-[30px] h-[30px] sm:min-w-[40px] sm:h-[40px]"
+        class="min-w-7.5 h-7.5 sm:min-w-10 sm:h-10 shrink-0"
       />`;
     }
 
     return html`
       <div
-        class="w-[30px] h-[30px] min-w-[30px] leading-[5px] rounded-[50%] sm:min-w-[40px] sm:w-[40px] sm:h-[40px] sm:pt-[10px] sm:leading-[14px] border text-center bg-slate-500"
+        class="size-7.5 leading-1.25 shrink-0 rounded-[50%] sm:size-10 sm:pt-2.5 sm:leading-3.5 border border-gray-200 text-center bg-slate-500"
       >
         <img
           src="/images/ProfileIcon.svg"
-          class="w-[20px] h-[20px] mt-[2px] sm:w-[25px] sm:h-[25px] sm:mt-[-5px] m-auto"
+          class="size-5 mt-0.5 sm:size-6.25 sm:-mt-1.25 m-auto"
         />
       </div>
     `;

src/client/components/baseComponents/ranking/RankingControls.ts

@@ -55,9 +55,8 @@ export class RankingControls extends LitElement {
     return html`
       <button
         class="rounded-lg bg-blue-600 text-white text-lg p-3 hover:bg-blue-400 ${active
-          ? "active"
+          ? "active outline-2 outline-white font-bold"
           : ""}"
-        style="${active ? "outline: solid 2px white; font-weight: bold;" : ""}"
         @click=${() => this.onSort(type)}
       >
         ${translateText(label)}
@@ -107,8 +106,9 @@ export class RankingControls extends LitElement {
     return html`
       <button
         @click=${() => this.onSort(type)}
-        class="rounded-md bg-blue-50 text-black text-sm p-2 hover:bg-blue-200"
-        style="${active ? "outline: solid 2px white; font-weight: bold;" : ""}"
+        class="rounded-md bg-blue-50 text-black text-sm p-2 hover:bg-blue-200 ${active
+          ? "outline-2 outline-white font-bold"
+          : ""}"
       >
         ${translateText(label)}
       </button>

src/client/components/baseComponents/ranking/RankingHeader.ts

@@ -14,7 +14,7 @@ export class RankingHeader extends LitElement {
   render() {
     return html`
       <li
-        class="text-lg bg-gray-800 font-bold relative pt-2 pb-2 pr-5 pl-5 mb-[5px] rounded-md flex justify-between items-center"
+        class="text-lg bg-gray-800 font-bold relative pt-2 pb-2 pr-5 pl-5 mb-1.25 rounded-md flex justify-between items-center"
       >
         ${this.renderHeaderContent()}
       </li>
@@ -35,7 +35,7 @@ export class RankingHeader extends LitElement {
       case RankType.Hydros:
       case RankType.MIRV:
         return html`
-          <div class="flex justify-between sm:pl-[70px] sm:pr-[70px] w-full">
+          <div class="flex justify-between sm:px-17.5 w-full">
             ${this.renderBombHeaderButton(
               translateText("game_info_modal.atoms"),
               RankType.Atoms,
@@ -78,8 +78,8 @@ export class RankingHeader extends LitElement {
     return html`
       <button
         @click=${() => this.onSort(type)}
-        style="${this.rankType === type
-          ? "border-bottom: solid 2px white;"
+        class="${this.rankType === type
+          ? "border-b-2 border-b-white"
           : nothing}"
       >
         ${label}

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

@@ -21,12 +21,11 @@ export class SettingKeybind extends LitElement {
     return html`
       <div class="setting-item column${this.easter ? " easter-egg" : ""}">
         <div class="setting-label-group">
-          <label class="setting-label block mb-1">${this.label}</label>
+          <label class="setting-label block mb-1">${this.label} </label>
 
           <div class="setting-keybind-box flex flex-wrap items-start gap-2">
             <div
-              class="setting-keybind-description flex-1 min-w-[240px] max-w-full whitespace-normal break-words text-sm text-gray-300"
-              style="word-break: break-word;"
+              class="setting-keybind-description flex-1 min-w-60 max-w-full whitespace-normal wrap-break-words text-sm text-gray-300 [word-break:break-word]"
             >
               ${this.description}
             </div>
@@ -44,13 +43,13 @@ export class SettingKeybind extends LitElement {
               </span>
 
               <button
-                class="text-xs text-gray-400 hover:text-white border border-gray-500 px-2 py-0.5 rounded transition whitespace-normal break-words max-w-full"
+                class="text-xs text-gray-400 hover:text-white border border-gray-500 px-2 py-0.5 rounded-sm transition whitespace-normal wrap-break-words max-w-full"
                 @click=${this.resetToDefault}
               >
                 ${translateText("user_setting.reset")}
               </button>
               <button
-                class="text-xs text-gray-400 hover:text-white border border-gray-500 px-2 py-0.5 rounded transition whitespace-normal break-words max-w-full"
+                class="text-xs text-gray-400 hover:text-white border border-gray-500 px-2 py-0.5 rounded-sm transition whitespace-normal wrap-break-words max-w-full"
                 @click=${this.unbindKey}
               >
                 ${translateText("user_setting.unbind")}

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

@@ -120,21 +120,19 @@ export class GameList extends LitElement {
                   </div>
                 </div>
                 <div
-                  class="details"
-                  style="max-height:${this.expandedGameId === game.gameId
-                    ? "200px"
-                    : "0"}; ${this.expandedGameId === game.gameId
-                    ? ""
-                    : "padding-top:0; padding-bottom:0;"}"
+                  class="details max-h-(--max-height) ${this.expandedGameId ===
+                  game.gameId
+                    ? "max-h-50"
+                    : "py-0"}"
                 >
                   <div>
-                    <span class="title" style="font-size:0.75rem;"
+                    <span class="title text-xs"
                       >${translateText("game_list.started")}:</span
                     >
                     ${new Date(game.start).toLocaleString()}
                   </div>
                   <div>
-                    <span class="title" style="font-size:0.75rem;"
+                    <span class="title text-xs"
                       >${translateText("game_list.mode")}:</span
                     >
                     ${game.mode === GameMode.FFA
@@ -142,19 +140,19 @@ export class GameList extends LitElement {
                       : translateText("game_list.mode_team")}
                   </div>
                   <div>
-                    <span class="title" style="font-size:0.75rem;"
+                    <span class="title text-xs"
                       >${translateText("game_list.map")}:</span
                     >
                     ${game.map}
                   </div>
                   <div>
-                    <span class="title" style="font-size:0.75rem;"
+                    <span class="title text-xs"
                       >${translateText("game_list.difficulty")}:</span
                     >
                     ${game.difficulty}
                   </div>
                   <div>
-                    <span class="title" style="font-size:0.75rem;"
+                    <span class="title text-xs"
                       >${translateText("game_list.type")}:</span
                     >
                     ${game.type}

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

@@ -117,16 +117,16 @@ export class PlayerStatsTable extends LitElement {
         <table>
           <thead>
             <tr>
-              <th class="text-left" style="width:40%">
+              <th class="text-left w-2/5">
                 ${translateText("player_stats_table.weapon")}
               </th>
-              <th class="text-center" style="width:20%">
+              <th class="text-center w-1/5">
                 ${translateText("player_stats_table.launched")}
               </th>
-              <th class="text-center" style="width:20%">
+              <th class="text-center w-1/5">
                 ${translateText("player_stats_table.landed")}
               </th>
-              <th class="text-center" style="width:20%">
+              <th class="text-center w-1/5">
                 ${translateText("player_stats_table.hits")}
               </th>
             </tr>
@@ -170,7 +170,7 @@ export class PlayerStatsTable extends LitElement {
             </tr>
           </tbody>
         </table>
-        <table style="margin-top: 0.75rem;">
+        <table class="mt-3">
           <thead>
             <tr>
               <th>${translateText("player_stats_table.gold")}</th>

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

@@ -122,8 +122,8 @@ export class PlayerStatsTreeView extends LitElement {
         ${types.map(
           (t) => html`
             <button
-              class="text-xs px-2 py-0.5 rounded border ${this.selectedType ===
-              t
+              class="text-xs px-2 py-0.5 rounded-sm border ${this
+                .selectedType === t
                 ? "border-white/60 text-white"
                 : "border-white/20 text-gray-300"}"
               @click=${() => this.setGameType(t)}
@@ -143,7 +143,7 @@ export class PlayerStatsTreeView extends LitElement {
             ${modes.map(
               (m) => html`
                 <button
-                  class="text-xs px-2 py-0.5 rounded border ${this
+                  class="text-xs px-2 py-0.5 rounded-sm border ${this
                     .selectedMode === m
                     ? "border-white/60 text-white"
                     : "border-white/20 text-gray-300"}"
@@ -162,7 +162,7 @@ export class PlayerStatsTreeView extends LitElement {
             ${diffs.map(
               (d) =>
                 html` <button
-                  class="text-xs px-2 py-0.5 rounded border ${this
+                  class="text-xs px-2 py-0.5 rounded-sm border ${this
                     .selectedDifficulty === d
                     ? "border-white/60 text-white"
                     : "border-white/20 text-gray-300"}"