src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs

@@ -1,3 +1,4 @@
+using GameIdeas.BlazorApp.Shared.Components.Popup;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
@@ -9,6 +10,7 @@ namespace GameIdeas.BlazorApp.Pages.Games.Components;
 public partial class GameCreationForm
 {
     [Inject] private IJSRuntime Js { get; set; } = default!;
+    [CascadingParameter] private Popup? Popup { get; set; }
 
     private GameDto GameDto = new();
     private EditContext? EditContext;
@@ -17,12 +19,16 @@ public partial class GameCreationForm
     protected override void OnInitialized()
     {
         EditContext = new(GameDto);
+        if (Popup != null)
+        {
+            Popup.StateChanged += async (_, isOpen) => await HandlePopupStateChanged();
+        }
+
         base.OnInitialized();
     }
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+    private async Task HandlePopupStateChanged()
     {
-        await Js.InvokeVoidAsync("addResizeGameFormListener");
+        await Js.InvokeVoidAsync("resizeGameForm");
-        await base.OnAfterRenderAsync(firstRender);
     }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css

@@ -35,6 +35,11 @@ input {
     color: var(--white);
 }
 
+    input[type="date"]::-webkit-calendar-picker-indicator {
+        filter: invert(1);
+        cursor: pointer;
+    }
+
 .description-container {
     margin-top: 8px;
     display: grid;

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.js

@@ -1,10 +1,5 @@
-function resizeFormContent() {
+window.resizeGameForm = () => {
     const label = document.getElementById('first-label');
     const targetLabel = document.getElementById('label-description');
     targetLabel.style.width = window.getComputedStyle(label).getPropertyValue("width");
-}
-
-window.addResizeGameFormListener = () => {
-    resizeFormContent();
-    window.addEventListener('resize', resizeFormContent);
 };

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor

@@ -1,15 +1,18 @@
 @using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
 @using GameIdeas.BlazorApp.Shared.Constants
 
-<div class="popup-wrapper" style="@GetDisplayStyle()">
+<CascadingValue Value="this">
-    <div class="popup-content">
+    <div class="popup-wrapper" style="@GetDisplayStyle()">
-        @if (Closable)
+        <div class="popup-content">
-        {
+            @if (Closable)
-            <button @onclick="HandleBackdropFilterClicked">@Icons.Shared.Close</button>
+            {
-        }
+                <button @onclick="HandleBackdropFilterClicked">@Icons.Shared.Close</button>
-        @ChildContent
+            }
-    </div>  
+            @ChildContent
-</div>
+        </div>
+    </div>
+</CascadingValue>
+
 
 <BackdropFilter @ref="BackdropFilter" OnClick="HandleBackdropFilterClicked" CloseOnClick="@Closable"
                 AllowBodyScroll="false" Color="BackdropFilterColor.Overlay" />

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs

@@ -8,9 +8,10 @@ public partial class Popup
     [Parameter] public bool IsDrawerOpen { get; set; }
     [Parameter] public EventCallback BackdropFilterClicked { get; set; }
     [Parameter] public bool Closable { get; set; } = true;
+    public bool IsOpen { get; set; }
+    public EventHandler<bool>? StateChanged { get; set; }
 
     private BackdropFilter.BackdropFilter? BackdropFilter;
-    public bool IsOpen { get; set; }
 
     protected override async Task OnParametersSetAsync()
     {
@@ -30,6 +31,7 @@ public partial class Popup
     {
         IsOpen = true;
         await BackdropFilter?.Show()!;
+        StateChanged?.Invoke(null, IsOpen);
         StateHasChanged();
     }
 
@@ -37,6 +39,7 @@ public partial class Popup
     {
         IsOpen = false;
         await BackdropFilter?.Hide()!;
+        StateChanged?.Invoke(null, IsOpen);
         StateHasChanged();
     }
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css

@@ -29,7 +29,7 @@
     width: 20px;
 }
 
-    .popup-content button svg {
+    ::deep .popup-content button svg {
         height: 18px;
         fill: var(--white);
     }