* Pong menus CSS

* user feedback on game creation

front/volume/public/global.css

@@ -64,7 +64,7 @@ button {
 }
 
 button:disabled {
-	color: #6c757d;
+	color: #aab3bb;
 	cursor: not-allowed;
 }
 

front/volume/src/components/Pong/GameCreation.svelte

@@ -33,7 +33,7 @@
   <div class="window" on:click|stopPropagation on:keydown|stopPropagation>
     Friend:
     <input class="name-input" bind:value={invitedUsername} />
-    <button on:click={createGame}>
+    <button on:click={createGame} disabled={invitedUsername === undefined || invitedUsername === ''}>
       Create game vs {invitedUsername}
     </button>
     <div>
@@ -74,7 +74,7 @@
   }
 
   .window {
-    background-color: #fff;
+    background-color: #343a40;
     border: 1px solid #ccc;
     border-radius: 5px;
     padding: 1rem;

front/volume/src/components/Pong/Matchmaking.svelte

@@ -24,7 +24,7 @@
   }
 
   .window {
-    background-color: #fff;
+    background-color: #343a40;
     border: 1px solid #ccc;
     border-radius: 5px;
     padding: 1rem;

front/volume/src/components/Pong/Pong.svelte

@@ -12,6 +12,9 @@
   import { io, Socket } from "socket.io-client";
   import type { GameUpdate } from "./dtos/GameUpdate";
   import type { GameInfo } from "./dtos/GameInfo";
+  import { popup } from "../Alert/content";
+  import Alert from "../Alert/Alert.svelte";
+  import { bind } from 'svelte-simple-modal';
 
   export function inviteToGame(event: CustomEvent<string>) {
     setAppState(APPSTATE.CREATE_GAME);
@@ -97,6 +100,9 @@
     socket.on(GAME_EVENTS.CREATE_GAME, (succeeded: boolean) => {
       if (succeeded) {
         gamePlaying = true;
+      } else {
+        gamePlaying = false;
+        popup.set(bind(Alert, { message: "Failed to invite user. Is he currently connected to the game?", form: false }))
       }
     });
     socket.on(GAME_EVENTS.MATCHMAKING, (data: MatchmakingDto) => {