From 3a481d3d16979fe4bcc956ad3f35a78f93214736 Mon Sep 17 00:00:00 2001
From: Demonessica <37988730+Demonessica@users.noreply.github.com>
Date: Tue, 27 May 2025 20:29:52 -0700
Subject: [PATCH] Main menu UI cleanup (#857)

## Description:

- Fixes right side of the username box not being aligned with the rest
of the menu by fully hiding the news button
- Styled news button to match flag button (although a style more like
the secondary buttons would be better IMO, this is more of a temp fix)
- Invalid username popup no longer vertically shifts the rest of the
menu


![image](https://github.com/user-attachments/assets/451d0184-3f0f-44af-9b2c-a93f9dc38e49)


I uhhh kinda forgot how branches work and ended up pushing some changes
to the public lobby button to the same branch:

![image](https://github.com/user-attachments/assets/cee68ac3-361a-4185-a5c5-70602dbbb040)

![image](https://github.com/user-attachments/assets/fb9067e7-6e28-464e-b50e-dcd2ba5afdc3)


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

Demonessica

---------

Co-authored-by: evanpelle <evanpelle@gmail.com>
---
 src/client/PublicLobby.ts           | 65 +++++++++++++++--------------
 src/client/UsernameInput.ts         |  2 +-
 src/client/components/NewsButton.ts | 47 +++++----------------
 src/client/index.html               | 11 +++--
 4 files changed, 54 insertions(+), 71 deletions(-)

diff --git a/src/client/PublicLobby.ts b/src/client/PublicLobby.ts
index 1a59f77ea..ee3069504 100644
--- a/src/client/PublicLobby.ts
+++ b/src/client/PublicLobby.ts
@@ -100,47 +100,50 @@ export class PublicLobby extends LitElement {
       <button
         @click=${() => this.lobbyClicked(lobby)}
         ?disabled=${this.isButtonDebounced}
-        class="w-full mx-auto p-4 md:p-6 ${this.isLobbyHighlighted
+        class="isolate grid h-40 grid-cols-[100%] grid-rows-[100%] place-content-stretch w-full overflow-hidden ${this
+          .isLobbyHighlighted
           ? "bg-gradient-to-r from-green-600 to-green-500"
           : "bg-gradient-to-r from-blue-600 to-blue-500"} text-white font-medium rounded-xl transition-opacity duration-200 hover:opacity-90 ${this
           .isButtonDebounced
           ? "opacity-70 cursor-not-allowed"
           : ""}"
       >
-        <div class="text-lg md:text-2xl font-semibold mb-2">
-          ${translateText("public_lobby.join")}
-        </div>
-        <div class="flex">
-          <img
-            src="${getMapsImage(lobby.gameConfig.gameMap)}"
-            alt="${lobby.gameConfig.gameMap}"
-            class="w-1/3 md:w-1/5 md:h-[80px]"
-            style="border: 1px solid rgba(255, 255, 255, 0.5)"
-          />
-          <div
-            class="w-full flex flex-col md:flex-row items-center justify-center md:justify-evenly"
-          >
-            <div class="flex flex-col items-center">
-              <div class="text-md font-medium text-blue-100 mb-4">
-                <!-- ${lobby.gameConfig.gameMap} -->
-                ${translateText(
-                  `map.${lobby.gameConfig.gameMap.toLowerCase().replace(/\s+/g, "")}`,
-                )}
-              </div>
-              <div class="text-md font-medium text-blue-100">
+        <img
+          src="${getMapsImage(lobby.gameConfig.gameMap)}"
+          alt="${lobby.gameConfig.gameMap}"
+          class="place-self-start col-span-full row-span-full h-full -z-10"
+          style="mask-image: linear-gradient(to left, transparent, #fff)"
+        />
+        <div
+          class="flex flex-col justify-between h-full col-span-full row-span-full p-4 md:p-6 text-right z-0"
+        >
+          <div>
+            <div class="text-lg md:text-2xl font-semibold">
+              ${translateText("public_lobby.join")}
+            </div>
+            <div class="text-md font-medium text-blue-100">
+              <span
+                class="text-sm ${this.isLobbyHighlighted
+                  ? "text-green-600"
+                  : "text-blue-600"} bg-white rounded-sm px-1"
+              >
                 ${lobby.gameConfig.gameMode === GameMode.Team
                   ? translateText("public_lobby.teams", { num: teamCount ?? 0 })
-                  : translateText("game_mode.ffa")}
-              </div>
+                  : translateText("game_mode.ffa")}</span
+              >
+              <span
+                >${translateText(
+                  `map.${lobby.gameConfig.gameMap.toLowerCase().replace(/\s+/g, "")}`,
+                )}</span
+              >
             </div>
-            <div class="flex flex-col items-center">
-              <div class="text-md font-medium text-blue-100 mb-4">
-                ${lobby.numClients} / ${lobby.gameConfig.maxPlayers}
-              </div>
-              <div class="text-md font-medium text-blue-100">
-                ${timeDisplay}
-              </div>
+          </div>
+
+          <div>
+            <div class="text-md font-medium text-blue-100">
+              ${lobby.numClients} / ${lobby.gameConfig.maxPlayers}
             </div>
+            <div class="text-md font-medium text-blue-100">${timeDisplay}</div>
           </div>
         </div>
       </button>
diff --git a/src/client/UsernameInput.ts b/src/client/UsernameInput.ts
index 39b94d73d..1f699da06 100644
--- a/src/client/UsernameInput.ts
+++ b/src/client/UsernameInput.ts
@@ -47,7 +47,7 @@ export class UsernameInput extends LitElement {
       />
       ${this.validationError
         ? html`<div
-            class="mt-2 px-3 py-1 text-lg border rounded bg-white text-red-600 border-red-600 dark:bg-gray-700 dark:text-red-300 dark:border-red-300"
+            class="absolute w-full mt-2 px-3 py-1 text-lg border rounded bg-white text-red-600 border-red-600 dark:bg-gray-700 dark:text-red-300 dark:border-red-300"
           >
             ${this.validationError}
           </div>`
diff --git a/src/client/components/NewsButton.ts b/src/client/components/NewsButton.ts
index 2fda8e1ac..52ecf5479 100644
--- a/src/client/components/NewsButton.ts
+++ b/src/client/components/NewsButton.ts
@@ -1,4 +1,4 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import megaphone from "../../../resources/images/Megaphone.svg";
 import { NewsModal } from "../NewsModal";
@@ -9,38 +9,6 @@ export class NewsButton extends LitElement {
   @property({ type: Boolean })
   hidden = false;
 
-  static styles = css`
-    .news-button {
-      opacity: 0.75;
-      transition: opacity 0.2s ease;
-      width: 40px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      margin: 0;
-      border: none;
-      background: none;
-      cursor: pointer;
-    }
-
-    .news-button:hover {
-      opacity: 1;
-    }
-
-    .news-button img {
-      width: 24px;
-      height: 24px;
-      display: block;
-      margin-left: 12px;
-    }
-
-    .hidden {
-      display: none !important;
-    }
-  `;
-
   private handleClick() {
     const newsModal = document.querySelector("news-modal") as NewsModal;
     if (newsModal) {
@@ -50,9 +18,16 @@ export class NewsButton extends LitElement {
 
   render() {
     return html`
-      <div class="text-center mb-0.5 ${this.hidden ? "hidden" : ""}">
-        <button class="news-button" @click=${this.handleClick}>
-          <img src="${megaphone}" alt=${translateText("news.title")} />
+      <div class="flex relative ${this.hidden ? "parent-hidden" : ""}">
+        <button
+          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)]"
+          @click=${this.handleClick}
+        >
+          <img
+            class="size-[48px]"
+            src="${megaphone}"
+            alt=${translateText("news.title")}
+          />
         </button>
       </div>
     `;
diff --git a/src/client/index.html b/src/client/index.html
index 35454680e..5d1985adb 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -99,6 +99,11 @@
           display: none;
         }
       }
+
+      /* display:none if child has class parent-hidden since we can't use shadow DOM in Lit due to Tailwind */
+      *:has(> .parent-hidden) {
+        display: none;
+      }
     </style>
 
     <!-- Immediate execution to prevent FOUC -->
@@ -223,12 +228,12 @@
 
         <div class="container__row">
           <flag-input class="w-[20%] md:w-[15%]"></flag-input>
-          <username-input class="w-full"></username-input>
-          <news-button class="mt-3"></news-button>
+          <username-input class="relative w-full"></username-input>
+          <news-button class="w-[20%] md:w-[15%]"></news-button>
         </div>
         <div></div>
         <div>
-          <public-lobby class="w-full"></public-lobby>
+          <public-lobby class="block"></public-lobby>
         </div>
         <div class="container__row container__row--equal">
           <o-button