From 3d58ef185c5e33cf2b4a1e68e52c4485661d2806 Mon Sep 17 00:00:00 2001
From: evanpelle <evanpelle@gmail.com>
Date: Mon, 27 Jan 2025 16:45:19 -0800
Subject: [PATCH] improve front page UI

---
 src/client/PublicLobby.ts | 38 +++++++++++++++++---------------------
 src/client/index.html     | 12 ++++++------
 2 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/client/PublicLobby.ts b/src/client/PublicLobby.ts
index 9581b75d8..6b495a8b3 100644
--- a/src/client/PublicLobby.ts
+++ b/src/client/PublicLobby.ts
@@ -52,31 +52,27 @@ export class PublicLobby extends LitElement {
 
     render() {
         if (this.lobbies.length === 0) return html``;
+        
         const lobby = this.lobbies[0];
         const timeRemaining = Math.max(0, Math.floor(lobby.msUntilStart / 1000));
 
-        //     return html`
-        //   <div class="bg-blue-500 p-4 rounded-lg text-white hover:bg-blue-600">
-        //     Test Tailwind
-        //   </div>
-        // `;
-
         return html`
-    <button
-        @click=${() => this.lobbyClicked(lobby)}
-        class="w-full mx-auto p-16 md:py-6 md:px-8 ${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"
-    >
-        <div class="text-xl md:text-2xl font-semibold mb-4">Next Game</div>
-        <div class="flex justify-center gap-8 text-blue-100 text-m md:text-lg">
-            <div>Starts in: ${timeRemaining}s</div>
-            <div>Players: ${lobby.numClients}</div>
-            <div>ID: ${lobby.id}</div>
-        </div>
-    </button>
-`;
+            <button
+                @click=${() => this.lobbyClicked(lobby)}
+                class="w-full mx-auto p-4 md:p-6 ${
+                    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"
+            >
+                <div class="text-lg md:text-2xl font-semibold mb-2">Next Game</div>
+                <div class="flex flex-col gap-1 md:gap-2 text-blue-100 text-sm md:text-base">
+                    <div>Starts in: ${timeRemaining}s</div>
+                    <div>Players: ${lobby.numClients}</div>
+                    <div>ID: ${lobby.id}</div>
+                </div>
+            </button>
+        `;
     }
 
     private lobbyClicked(lobby: Lobby) {
diff --git a/src/client/index.html b/src/client/index.html
index 379155105..ddf38982e 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -70,7 +70,7 @@
 	<!-- Logo section remains the same -->
 	<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
 		<img src="../../resources/images/OpenFrontLogo.svg" alt="OpenFront.io"
-			class="pt-6 md:pt-12 h-auto w-3/4 lg:w-1/4 mx-auto transform sm:scale-125 md:scale-150 lg:scale-175">
+			class="pt-6 md:pt-12 h-auto w-3/4 lg:w-1/2 mx-auto transform sm:scale-125 md:scale-150 lg:scale-175">
 		<h3 class="font-sans text-center text-black pb-6 md:pb-12 text-sm sm:text-base lg:text-lg">(v0.14.0)</h3>
 
 		<div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2 pb-4">
@@ -101,15 +101,15 @@
 
 		<!-- Links section -->
 		<div class="flex justify-center mt-4">
+			<a href="https://discord.gg/k22YrnAzGp" id="discord-link" target="_blank" rel="noopener noreferrer"
+				class="flex items-center justify-center px-4 py-2 bg-blue-200 hover:bg-blue-200  rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out mx-2">
+				<img src="../../resources/images/DiscordIcon.svg" alt="Discord" class="w-12 h-12" />
+			</a>
 			<a href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I" id="yt-link" target="_blank"
 				rel="noopener noreferrer"
-				class="flex items-center justify-center px-4 py-2 bg-white hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out mx-2">
+				class="flex items-center justify-center px-4 py-2 bg-blue-200 hover:bg-blue-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out mx-2">
 				<img src="../../resources/images/QuestionMarkIcon.svg" alt="Question Mark" class="w-12 h-12" />
 			</a>
-			<a href="https://discord.gg/k22YrnAzGp" id="discord-link" target="_blank" rel="noopener noreferrer"
-				class="flex items-center justify-center px-4 py-2 bg-white hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out mx-2">
-				<img src="../../resources/images/DiscordIcon.svg" alt="Discord" class="w-12 h-12" />
-			</a>
 		</div>
 	</div>