modal overlay improvements

src/client/JoinPrivateLobbyModal.ts

@@ -20,16 +20,58 @@ export class JoinPrivateLobbyModal extends LitElement {
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.5);
+      overflow-y: auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
     .modal-content {
-      background-color: white;
-      margin: 15% auto;
+      background-color: rgb(35 35 35 / 0.8);
+      -webkit-backdrop-filter: blur(12px);
+      backdrop-filter: blur(12px);
+      color: white;
       padding: 20px;
       border-radius: 8px;
       width: 80%;
       max-width: 500px;
+      max-height: 80vh;
+      overflow-y: auto;
       text-align: center;
+      box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(8px);
+      position: relative;
     }
+
+    /* Add custom scrollbar styles */
+    .modal-content::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .modal-content::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+    }
+
+    .modal-content::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 4px;
+    }
+
+    .modal-content::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+
+    .title {
+      font-size: 28px;
+      color: #fff;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 0 0 20px;
+    }
+
     .close {
       color: #aaa;
       float: right;
@@ -37,47 +79,41 @@ export class JoinPrivateLobbyModal extends LitElement {
       font-weight: bold;
       cursor: pointer;
     }
+
     .close:hover,
     .close:focus {
-      color: black;
+      color: white;
       text-decoration: none;
       cursor: pointer;
     }
-    button {
-      padding: 10px 20px;
+
+    .start-game-button {
+      width: 100%;
+      max-width: 300px;
+      padding: 15px 20px;
       font-size: 16px;
       cursor: pointer;
       background-color: #007bff;
       color: white;
       border: none;
-      border-radius: 4px;
+      border-radius: 8px;
       transition: background-color 0.3s;
+      display: inline-block;
+      margin: 0 0 20px 0;
     }
-    button:hover {
+
+    .start-game-button:not(:disabled):hover {
       background-color: #0056b3;
     }
-    .lobby-id-container {
-      display: flex;
-      align-items: stretch;
-      justify-content: center;
-      gap: 10px;
-      margin: 20px 0;
-    }
-    .lobby-id-container input {
-      flex-grow: 1;
-      max-width: 200px;
-      padding: 10px;
-      font-size: 16px;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-    }
-    .lobby-id-container button {
-      padding: 10px 15px;
-    }
-    .join-button {
-      margin-top: 10px;
+
+    .start-game-button:disabled {
+      background: linear-gradient(to right, #4a4a4a, #3d3d3d);
+      opacity: 0.7;
+      cursor: not-allowed;
     }
 
+    /* JoinPrivateLobbyModal css */
+
     .message-area {
       margin-top: 10px;
       padding: 10px;
@@ -104,26 +140,84 @@ export class JoinPrivateLobbyModal extends LitElement {
       background-color: #e8f5e9;
       color: #2e7d32;
     }
+
+    .lobby-id-box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      margin: 40px 0px 0px 0px;
+    }
+    .lobby-id-box input {
+      flex-grow: 1;
+      max-width: 200px;
+      padding: 10px;
+      font-size: 16px;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+    }
+
+    .lobby-id-paste-button {
+      display: flex;
+      align-items: center;
+      background: rgba(0, 0, 0, 0.2);
+      padding: 10px 16px;
+      border-radius: 8px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+    }
+
+    .lobby-id-paste-button:hover {
+      background: rgba(0, 0, 0, 0.3);
+      border-color: rgba(255, 255, 255, 0.2);
+      transform: translateY(-1px);
+    }
+
+    .lobby-id-paste-button-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+    }
   `;
 
   render() {
     return html`
       <div
         class="modal-overlay"
-        style="display: ${this.isModalOpen ? "block" : "none"}"
+        style="display: ${this.isModalOpen ? "flex" : "none"}"
       >
         <div class="modal-content">
           <span class="close" @click=${this.closeAndLeave}>&times;</span>
-          <h2>Join Private Lobby</h2>
-          <div class="lobby-id-container">
+          <div class="title">Join Private Lobby</div>
+          <div class="lobby-id-box">
             <input type="text" id="lobbyIdInput" placeholder="Enter Lobby ID" />
-            <button @click=${this.pasteFromClipboard}>Paste</button>
+            <button
+              @click=${this.pasteFromClipboard}
+              class="lobby-id-paste-button"
+            >
+              <svg
+                class="lobby-id-paste-button-icon"
+                stroke="currentColor"
+                fill="currentColor"
+                stroke-width="0"
+                viewBox="0 0 32 32"
+                height="18px"
+                width="18px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M 15 3 C 13.742188 3 12.847656 3.890625 12.40625 5 L 5 5 L 5 28 L 13 28 L 13 30 L 27 30 L 27 14 L 25 14 L 25 5 L 17.59375 5 C 17.152344 3.890625 16.257813 3 15 3 Z M 15 5 C 15.554688 5 16 5.445313 16 6 L 16 7 L 19 7 L 19 9 L 11 9 L 11 7 L 14 7 L 14 6 C 14 5.445313 14.445313 5 15 5 Z M 7 7 L 9 7 L 9 11 L 21 11 L 21 7 L 23 7 L 23 14 L 13 14 L 13 26 L 7 26 Z M 15 16 L 25 16 L 25 28 L 15 28 Z"
+                ></path>
+              </svg>
+            </button>
           </div>
           <div class="message-area ${this.message ? "show" : ""}">
             ${this.message}
           </div>
           ${!this.hasJoined
-            ? html`<button class="join-button" @click=${this.joinLobby}>
+            ? html`<button class="start-game-button" @click=${this.joinLobby}>
                 Join Lobby
               </button>`
             : ""}
@@ -150,7 +244,7 @@ export class JoinPrivateLobbyModal extends LitElement {
         detail: { lobby: this.lobbyIdInput.value },
         bubbles: true,
         composed: true,
-      }),
+      })
     );
   }
 
@@ -188,7 +282,7 @@ export class JoinPrivateLobbyModal extends LitElement {
               },
               bubbles: true,
               composed: true,
-            }),
+            })
           );
         } else {
           this.message = "Lobby not found. Please check the ID and try again.";