Improve start menu responsive design

Author: Markz878

ChessChampion.Client/Components/ChooseOptionComponent.razor

@@ -1,6 +1,8 @@
 <div class="option-button">
     <b style="width: @TextWidth" class="option-text">@Title</b>
-    <button class="left-toggleButton toggleButton @LeftButtonClass" disabled="@IsDisabled" @onclick="SelectLeft">@LeftText</button>
-    <button class="right-toggleButton toggleButton @RightButtonClass" disabled="@IsDisabled" @onclick="SelectRight">@RightText</button>
+    <div class="buttons-container">
+        <button class="left-toggleButton toggleButton @LeftButtonClass" disabled="@IsDisabled" @onclick="SelectLeft">@LeftText</button>
+        <button class="right-toggleButton toggleButton @RightButtonClass" disabled="@IsDisabled" @onclick="SelectRight">@RightText</button>
+    </div>
 </div>
 

ChessChampion.Client/Components/ChooseOptionComponent.razor.css

@@ -1,17 +1,24 @@
 .option-button {
     display: flex;
     align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
 }
 
 .option-text {
-    text-align: right;
+    margin-left: 2rem;
 }
 
 .select {
     margin-left: 1rem;
     width: 10rem;
 }
 
+.buttons-container {
+    display: flex;
+    align-items: center;
+}
+
 .left-toggleButton {
     margin: 1rem 0 1rem 1rem;
     border-radius: 10px 0 0 10px;

ChessChampion.Client/Pages/Home.razor.cs

@@ -138,14 +138,21 @@ private async Task LeaveGame()
         if (ViewModel.GameId.HasValue && ViewModel.Player is not null && await JS.InvokeAsync<bool>("confirm", "Leave game?"))
         {
             Guid gameIdToLeave = ViewModel.GameId.Value;
-            BaseError? error = await ChessService.LeaveGame(new LeaveGameRequest(gameIdToLeave, ViewModel.Player.Name));
+            try
+            {
+                BaseError? error = await ChessService.LeaveGame(new LeaveGameRequest(gameIdToLeave, ViewModel.Player.Name));
+                await Hub.LeaveGame(gameIdToLeave);
+                ViewModel.StatusMessage = error.HasValue ? error.Value.Error : "You have left the game";
+            }
+            catch (Exception)
+            {
+                ViewModel.StatusMessage = "You have left the game";
+            }
             ViewModel.GameState = null;
             ViewModel.GameId = null;
             ViewModel.Winner = null;
             ViewModel.OtherPlayer = null;
             ViewModel.GameCode = "";
-            ViewModel.StatusMessage = error.HasValue ? error.Value.Error : "You have left the game";
-            await Hub.LeaveGame(gameIdToLeave);
         }
     }
 }

ChessChampion.Server/Endpoints/EndpointsMapper.cs

@@ -22,7 +22,7 @@ public static async Task<Results<Ok<CreateGameResponse>, BadRequest<string>>> Cr
         Result<CreateGameResponse, BaseError> response = await chessService.CreateGame(createGameRequest);
         return response.Match<Results<Ok<CreateGameResponse>, BadRequest<string>>>(
             ok => TypedResults.Ok(ok),
-            error => TypedResults.BadRequest(error.ToString())
+            error => TypedResults.BadRequest(error.Error)
         );
     }
 
@@ -31,7 +31,7 @@ public static async Task<Results<Ok<JoinGameResponse>, BadRequest<string>>> Join
         Result<JoinGameResponse, BaseError> response = await chessService.JoinGame(joinGameRequest);
         return response.Match<Results<Ok<JoinGameResponse>, BadRequest<string>>>(
             ok => TypedResults.Ok(ok),
-            error => TypedResults.BadRequest(error.ToString())
+            error => TypedResults.BadRequest(error.Error)
         );
     }
 

ChessChampion.Server/Program.cs

@@ -25,13 +25,8 @@
 
 app.MapStaticAssets();
 app.UseHttpLogging();
-if (app.Environment.IsProduction())
-{
-    app.UseMiddleware<SecurityHeadersMiddleware>();
-}
 app.UseAntiforgery();
 app.UseRateLimiter();
-app.MapStaticAssets();
 app.MapEndpoints();
 app.MapHub<ChessHub>("/chesshub", options => options.AllowStatefulReconnects = true);
 app.MapRazorComponents<App>()

ChessChampion.Server/wwwroot/app.css

@@ -30,30 +30,28 @@ a, .btn-link {
 
 
 .btn {
-    border-radius: 5px;
-    border: 2px solid gray;
-    margin: 5px;
+    border-radius: 0.5rem;
+    border: none;
     font-size: 16px;
     padding: 6px 10px;
     white-space: nowrap;
+    width: 130px;
+    min-height: 50px;
 }
 
-    .btn :focus {
-        border-color: black;
-        outline: none;
-    }
+
 
 .btn-primary {
-    background-color: rgb(70, 148, 225);
+    background-color: rgb(30, 121, 255);
+    color: white;
 }
 
     .btn-primary:hover {
         background-color: #1F7EC7;
-        color: white;
     }
 
     .btn-primary:active {
-        background-color: blue;
+        background-color: rgb(30, 94, 255);
     }
 
 .valid.modified:not([type=checkbox]) {

ChessChampionWebUI/wwwroot/site.css

@@ -44,7 +44,8 @@ a, .btn-link {
     }
 
 .btn-primary {
-    background-color: rgb(70, 148, 225);
+    background-color: rgb(30, 121, 255);
+    color: white;
 }
 
     .btn-primary:hover {