Refactor: Update style and dropdown (#10)

Co-authored-by: Maxime Adler <madler@sqli.com> Reviewed-on: #10
2025-04-08 16:10:01 +02:00
parent 003f2547a3
commit 3d5056ce91
38 changed files with 426 additions and 303 deletions
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
@@ -1,12 +1,13 @@
 .page {
+    display: flex;
+    flex-direction: column;
    height: 100%;
-    overflow: hidden;
 }

 .orb {
    position: absolute;
    border-radius: 100%;
-    z-index: -999;
+    z-index: var(--index-orb);
 }

 .green {
@@ -42,5 +43,5 @@
    position: fixed;
    top: 0;
    left: 0;
-    z-index: -1000;
+    z-index: var(--index-background);
 }
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs
@@ -27,7 +27,7 @@ public partial class AdvancedGameFilter
        new() { Item = "Electronic Arts", Label = "Electronic Arts" },
        new() { Item = "Ubisoft", Label = "Ubisoft" },
        new() { Item = "Activision Blizzard", Label = "Activision Blizzard" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" }
    ];

    private readonly IEnumerable<SelectElement<string>> Developers = [
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css
@@ -5,7 +5,10 @@
    padding-right: 20px;
    padding-left: 10px;
    height: 100%;
-    border-left: 2px solid var(--light-grey);
+    box-sizing: border-box;
+    width: 240px;
+    border-left: 2px solid var(--line);
+    z-index: var(--index-component);
 }

 .duplicate {
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
@@ -2,11 +2,9 @@
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
@using GameIdeas.BlazorApp.Shared.Components.SliderRange
+@using GameIdeas.BlazorApp.Shared.Models
@using GameIdeas.Shared.Dto
-@using GameIdeas.BlazorApp.Pages.Games.Models

-
-<EditForm EditContext="EditContext">
 <div class="form-filter">
    <SelectList TItem="Func<GameDto, object>"
                Headers="SortTypes"
@@ -14,13 +12,11 @@
                @bind-Value=GameFilterParams!.SortProperty
                HeaderChanged=HandleSortTypeChanged
                Theme="SelectListTheme.Sort">
-            <Button>
        <div class="square-button">
            <svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z" />
            </svg>
        </div>
-            </Button>
    </SelectList>

    <div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.List))">
@@ -62,7 +58,5 @@
                        @bind-Min=GameFilterParams.MinRating />
    </div>
 </div>
-</EditForm>
-


--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
@@ -1,6 +1,6 @@
-using GameIdeas.BlazorApp.Pages.Games.Models;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.BlazorApp.Shared.Components.SliderRange;
+using GameIdeas.BlazorApp.Shared.Models;
 using GameIdeas.Shared.Dto;
 using GameIdeas.Shared.Enum;
 using Microsoft.AspNetCore.Components;
@@ -10,7 +10,7 @@ namespace GameIdeas.BlazorApp.Pages.Games.Filter;

 public partial class GameFilter
 {
-    [Parameter] public GameFilterParams? GameFilterParams { get; set; }
+    [Parameter] public GameFilterParams GameFilterParams { get; set; } = new();
    [Parameter] public EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
    [Parameter] public DisplayType DisplayType { get; set; }
    [Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; }
@@ -45,7 +45,7 @@ public partial class GameFilter

    protected override void OnInitialized()
    {
-        EditContext = new EditContext(GameFilterParams!);
+        EditContext = new EditContext(GameFilterParams);
        EditContext.OnFieldChanged += async (s, e) =>
        {
            await GameFilterParamsChanged.InvokeAsync(GameFilterParams);
@@ -54,7 +54,7 @@ public partial class GameFilter

    private void HandleSortTypeChanged(Func<GameDto?, object?> getHeader)
    {
-        GameFilterParams!.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
+        GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
    }

    private async Task HandleDisplayClicked(DisplayType displayType)
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
@@ -3,6 +3,7 @@
    flex-direction: row;
    gap: 8px;
    align-items: center;
+    z-index: var(--index-component);
 }

 .search-container {
@@ -26,7 +27,7 @@
    width: 28px;
    min-width: 28px;
    border-radius: var(--small-radius);
-    background: var(--black);
+    background: var(--input-primary);
    overflow: hidden;
 }

@@ -40,7 +41,7 @@

    .square-button svg:hover {
        cursor: pointer;
-        background: var(--low-white);
+        background: var(--input-selected);
    }

 .selected-icon {
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
@@ -1,20 +1,18 @@
@page "/Games"
@using GameIdeas.BlazorApp.Layouts
@using GameIdeas.BlazorApp.Pages.Games.Filter
+@using GameIdeas.BlazorApp.Pages.Games.Header
@using GameIdeas.BlazorApp.Shared.Components
-@using GameIdeas.BlazorApp.Shared.Layouts.Header
@using GameIdeas.Resources

@layout MainLayout

 <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>

-<HeaderLayout>
-    <Body>
+<GamesHeader>
    <GameFilter @bind-DisplayType=DisplayType
                @bind-GameFilterParams=GameFilterParams />
-    </Body>
-</HeaderLayout>
+</GamesHeader>

 <div class="container">
    <div class="content">
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
@@ -1,5 +1,5 @@
 using GameIdeas.BlazorApp.Pages.Games.Filter;
-using GameIdeas.BlazorApp.Pages.Games.Models;
+using GameIdeas.BlazorApp.Shared.Models;

 namespace GameIdeas.BlazorApp.Pages.Games;

--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css
@@ -1,5 +1,6 @@
 .container {
    margin-top: 20px;
+    margin-bottom: 10px;
    justify-content: space-between;
    display: flex;
    flex-direction: row;
@@ -7,5 +8,5 @@
 }

 .content {
-
+    z-index: var(--index-content);
 }
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
@@ -1,18 +1,18 @@
@using GameIdeas.BlazorApp.Pages.Games
-@using GameIdeas.BlazorApp.Pages.Games.Models
@using GameIdeas.BlazorApp.Shared.Components.Account
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
+@using GameIdeas.BlazorApp.Shared.Models
@using GameIdeas.Resources

-@inherits LayoutComponentBase
+@inherits ComponentBase

 <div class="header-tab">
    <div class="icon-container" @onclick="HandleIconClicked">
        <img src="icon.png" alt="Game Ideas">
    </div>

-    @Body
+    @ChildContent

    <div class="account-add-container">
        <div class="add-container">
@@ -27,13 +27,11 @@
                            ValueChanged=HandleAddTypeClickedAsync
                            Theme="SelectListTheme.Navigation"
                            AlignRight=true>
-                    <Button>
                    <div class="second-button button">
                        <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M1 3H23L12 22" />
                        </svg>
                    </div>
-                    </Button>
                </SelectList>
            </div>
        </div>
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
@@ -1,14 +1,16 @@
-using GameIdeas.BlazorApp.Pages.Games.Models;
 using GameIdeas.BlazorApp.Shared.Components.Account;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.BlazorApp.Shared.Models;
 using GameIdeas.Resources;
 using Microsoft.AspNetCore.Components;

-namespace GameIdeas.BlazorApp.Shared.Layouts.Header;
+namespace GameIdeas.BlazorApp.Pages.Games.Header;

-public partial class HeaderLayout : LayoutComponentBase
+public partial class GamesHeader : ComponentBase
 {
    [Parameter] public EventCallback<AddType> AddTypeChanged { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+

    private readonly IEnumerable<SelectElement<AddType>> SelectElements = [
        new SelectElement<AddType> { Item = AddType.Manual, Label = ResourcesKey.ManualAdd },
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
@@ -33,7 +33,6 @@
 }

 .add-container {
-    overflow: visible;
    margin-right: 40px;
 }

@@ -42,7 +41,6 @@
    flex-direction: row;
    background: var(--violet);
    border-radius: var(--small-radius);
-    overflow: visible;
 }

 .button {
@@ -54,11 +52,15 @@
 }

 .first-button {
-    border-right: 2px solid var(--line-black);
+    border-right: 2px solid var(--violet-selected);
+    border-radius: var(--small-radius) 0 0 var(--small-radius);
+    overflow: hidden;
 }

 .second-button .button-icon {
    padding: 6px;
+    border-radius: 0 var(--small-radius) var(--small-radius) 0;
+    overflow: hidden;
 }

 .button-icon {
@@ -66,10 +68,10 @@
 }

    .button-icon:hover {
-        background: var(--line-black);
+        background: var(--violet-selected);
        cursor: pointer;
    }

 .account-icon {
-    fill: var(--light-grey);
+    fill: var(--line);
 }
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs
@@ -1,7 +0,0 @@
-namespace GameIdeas.BlazorApp.Pages.Games.Models;
-
-public enum AddType
-{
-    Manual,
-    Auto
-}
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs
@@ -1,7 +0,0 @@
-namespace GameIdeas.BlazorApp.Pages.Games.Models;
-
-public enum DisplayType
-{
-    Card,
-    List
-}
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
@@ -4,10 +4,11 @@
    position: fixed;
    animation-name: fade-in;
    animation-duration: 0.4s;
-    border: 2px solid var(--low-white);
-    background: var(--semi-black);
+    border: 2px solid var(--input-selected);
+    background: var(--dropdown-content);
    right: 10px;
    margin-top: 4px;
+    z-index: var(--index-floating);
 }

 .invisible {
@@ -30,8 +31,8 @@
 }

 ::deep .input-text {
-    background: var(--low-white);
-    border: 2px solid var(--low-white);
+    background: var(--input-selected);
+    border: 2px solid var(--input-selected);
    border-radius: var(--small-radius);
    padding: 6px;
    color: var(--white);
@@ -64,7 +65,7 @@
    width: 18px;
    height: 18px;
    border-radius: 50%;
-    border: 3px solid var(--line-black);
+    border: 3px solid rgba(0, 0, 0, 0.2);
    border-top-color: var(--white);
    animation: loading 1s linear infinite;
    justify-self: center;
@@ -77,7 +78,7 @@

 .line {
    margin: 0 6px;
-    border-bottom: 2px solid var(--light-grey);
+    border-bottom: 2px solid var(--line);
 }

 .settings-element {
@@ -88,7 +89,7 @@
 }

    .settings-element:hover {
-        background: var(--light-grey)
+        background: var(--line)
    }


--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor
@@ -0,0 +1,55 @@
+@if (IsVisible)
+{
+    <div class="backdrop-filter @Color.ToString().ToLower()" @onclick="HandleBackdropClicked"></div>
+}
+
+@code {
+    [Inject] private IJSRuntime Js { get; set; } = default!;
+    [Parameter] public EventCallback OnClick { get; set; }
+    [Parameter] public bool AllowBodyScroll { get; set; }
+    [Parameter] public BackdropFilterColor Color { get; set; } = BackdropFilterColor.Overlay;
+    [Parameter] public bool CloseOnClick { get; set; } = true;
+    [Parameter] public bool IsVisible { get; set; }
+
+    public async Task Show()
+    {
+        IsVisible = true;
+        await HandleBodyOverflow();
+    }
+
+    public async Task Hide()
+    {
+        IsVisible = false;
+        await HandleBodyOverflow();
+    }
+
+    private async Task HandleBodyOverflow()
+    {
+        try
+        {
+            if (AllowBodyScroll) return;
+
+            if (IsVisible)
+            {
+                await Js.InvokeVoidAsync("setBodyOverflow", "hidden");
+            }
+            else
+            {
+                await Js.InvokeVoidAsync("setBodyOverflow", "auto");
+            }
+        }
+        catch (Exception)
+        {
+            // ignored because js not loaded
+        }
+    }
+
+    private async Task HandleBackdropClicked()
+    {
+        if (!CloseOnClick) return;
+
+        await Hide();
+        await OnClick.InvokeAsync();
+    }
+
+}
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css
@@ -0,0 +1,13 @@
+.backdrop-filter {
+    position: fixed;
+    inset: 0;
+    z-index: var(--index-backdrop);
+}
+
+    .backdrop-filter.overlay {
+        background-color: var(--grey-filter);
+    }
+
+    .backdrop-filter.transparent {
+        background-color: transparent;
+    }
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.js
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.js
@@ -0,0 +1,3 @@
+window.setBodyOverflow = (overflow) => {
+    document.getElementsByTagName('html')[0].style.overflow = overflow;
+}
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilterColor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilterColor.cs
@@ -0,0 +1,7 @@
+namespace GameIdeas.BlazorApp.Shared.Components.BackdropFilter;
+
+public enum BackdropFilterColor
+{
+    Overlay,
+    Transparent
+}
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
@@ -1,31 +1,25 @@
-<div class="search-container">
-    <input type="text"
+@using GameIdeas.Shared.Constants
+<div class="search-container">
+    <input @ref=InputText
+           type="text"
           class="search-field"
           placeholder="@Placeholder"
           @bind=@Text
           @bind:event="oninput"
-           @bind:after=HandleTextChanged />
+           @bind:after=HandleTextChanged
+           @onfocusin=HandleFocusIn/>

+    <div class="buttons">
        @if (!string.IsNullOrEmpty(Text))
        {
            <div class="clear-icon" @onclick=HandleClearClicked>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
-            </svg>
+                @ClearIcon
            </div>
        }

        <div class="search-icon @(Enum.GetName(Icon)?.ToLower())" @onclick=HandleSearchClicked>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-            @if (Icon == SearchInputIcon.Search)
-            {
-                <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
-            }
-            else if (Icon == SearchInputIcon.Dropdown)
-            {
-                <path d="M1 3H23L12 22" />
-            }
-        </svg>
+            @GetSearchIcon()
+        </div>
    </div>
 </div>

--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
@@ -1,3 +1,4 @@
+using GameIdeas.Shared.Constants;
 using Microsoft.AspNetCore.Components;

 namespace GameIdeas.BlazorApp.Shared.Components.Search;
@@ -9,8 +10,12 @@ public partial class SearchInput
    [Parameter] public EventCallback<string> TextChanged { get; set; }
    [Parameter] public EventCallback ClearClicked { get; set; }
    [Parameter] public EventCallback SearchClicked { get; set; }
+    [Parameter] public EventCallback FocusIn { get; set; }
    [Parameter] public SearchInputIcon Icon { get; set; }

+    private ElementReference InputText;
+    private readonly MarkupString ClearIcon = new(Icons.Search.Clear);
+
    protected override void OnInitialized()
    {
        Text = string.Empty;
@@ -36,5 +41,20 @@ public partial class SearchInput
    {
        await TextChanged.InvokeAsync(Text);
        await SearchClicked.InvokeAsync();
+        await InputText.FocusAsync();
+    }
+    private async Task HandleFocusIn()
+    {
+        await FocusIn.InvokeAsync();
+    }
+
+    private MarkupString GetSearchIcon()
+    {
+        return Icon switch
+        {
+            SearchInputIcon.Dropdown => new MarkupString(Icons.Search.Triangle),
+            SearchInputIcon.Search => new MarkupString(Icons.Search.Glass),
+            _ => new MarkupString()
+        };
    }
 }
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
@@ -6,10 +6,16 @@
    padding-left: 8px;
    padding-right: 2px;
    border-radius: var(--small-radius);
-    background: var(--black);
+    background: var(--input-primary);
    overflow: hidden;
    align-items: center;
-    width: 140px;
+    z-index: var(--index-component);
+    justify-content: space-between;
+}
+
+.buttons {
+    display: flex;
+    align-items: center;
 }

 ::deep .search-field {
@@ -33,7 +39,7 @@
        cursor: pointer;
    }

-    .clear-icon svg {
+    ::deep .clear-icon svg {
        fill: var(--white);
    }

@@ -48,11 +54,11 @@
        cursor: pointer;
    }

-    .search-icon svg {
+::deep .search-icon svg {
    fill: var(--white);
 }

-    .search-icon.dropdown svg {
+::deep .search-icon.dropdown svg {
    fill: var(--violet);
    transform: scale(.8, .5);
 }
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
@@ -10,13 +10,6 @@ public partial class SelectListElement<TItem>
    [Parameter] public SelectListTheme Theme { get; set; }
    private async Task HandleItemClicked()
    {
-        if (Value == null)
-        {
-            return;
-        }
-
-        Value.IsSelected = true;
-        StateHasChanged();
        await ValueChanged.InvokeAsync(Value);
    }
 }
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
@@ -1,12 +1,10 @@
 .select-element {
    display: flex;
    flex-direction: row;
-    width: fit-content;
-    width: 100%;
+    width: auto;
    gap: 6px;
    height: 20px;
    align-items: center;
-    z-index: 501;
 }

    .select-element:hover {
@@ -18,6 +16,7 @@
    min-width: 12px;
    height: 12px;
    min-height: 12px;
+    border: 1px solid var(--line);
 }

 .selected svg {
@@ -43,7 +42,7 @@
 }

    .sort:hover {
-        background: var(--low-white);
+        background: var(--input-selected);
    }

    .sort .select-label {
@@ -57,7 +56,7 @@
 }

    .filter:hover {
-        background: var(--low-white);
+        background: var(--input-selected);
    }

    .filter .select-label {
@@ -65,27 +64,13 @@
        margin-right: 6px;
    }

-/***** Filter Theme *****/
-.filter {
-    padding: 2px 6px;
-}
-
-    .filter:hover {
-        background: var(--low-white);
-    }
-
-    .filter .select-label {
-        text-wrap: nowrap;
-        margin-right: 6px;
-    }
-
-/***** Filter Theme *****/
+/***** Advanced Filter Theme *****/
 .advancedfilter {
    padding: 2px 6px;
 }

    .advancedfilter:hover {
-        background: var(--low-white);
+        background: var(--input-selected);
    }

    .advancedfilter .select-label {
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
@@ -1,21 +1,19 @@
-@using GameIdeas.BlazorApp.Shared.Components.Search
+@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
+@using GameIdeas.BlazorApp.Shared.Components.Search
@using GameIdeas.BlazorApp.Shared.Components.Select.Components
@typeparam TItem

-<div class="select-list" tabindex="1001" @ref="BaseElement">
-    <div class="select-button @(Enum.GetName(Theme)?.ToLower())" @onfocusin=HandleFocusIn @onfocusout=HandleFocusOut>
+<div class="select-list">
+    <div class="select-button @(Enum.GetName(Theme)?.ToLower())">
        <SearchInput @ref=SearchInput
                     Icon="SearchInputIcon.Dropdown"
                     Placeholder="@Placeholder"
                     TextChanged="HandleTextChanged"
                     ClearClicked="HandleTextChanged"
-                     SearchClicked="HandleSearchClicked" />
+                     SearchClicked="HandleSearchClicked"
+                     FocusIn="HandleTextFocusIn"/>
    </div>
-    <div class="select-container @(AlignRight ? "align-right" : "")"
-         tabindex="1000"
-         @ref=ContentElement
-         @onfocusin=HandleContentFocusIn
-         @onfocusout=HandleContentFocusOut>
+    <div class="select-container">

        @if (IsContentOpen)
        {
@@ -32,3 +30,6 @@
    </div>
 </div>

+<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
+                IsVisible=IsContentOpen OnClick="HandleContentClosed" />
+
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
@@ -1,11 +1,13 @@
 using GameIdeas.BlazorApp.Shared.Components.Search;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;

 namespace GameIdeas.BlazorApp.Shared.Components.Select;

 public partial class MultipleSelectList<TItem>
 {
+    [Inject] IJSRuntime JS { get; set; } = default!;
    [Parameter] public IEnumerable<TItem>? Values { get; set; }
    [Parameter] public EventCallback<IEnumerable<TItem>?> ValuesChanged { get; set; }
    [Parameter] public IEnumerable<SelectElement<TItem>> Items { get; set; } = [];
@@ -13,60 +15,51 @@ public partial class MultipleSelectList<TItem>
    [Parameter] public bool AlignRight { get; set; }
    [Parameter] public string? Placeholder { get; set; }

-    private bool IsContentOpen
-    {
-        get => InputFocus || ContentFocus;
-    }
-
-    private bool InputFocus = false;
-    private bool ContentFocus = false;
+    private bool IsContentOpen = false;
    private SearchInput? SearchInput;
-    private ElementReference ContentElement;
-    private ElementReference BaseElement;
+
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await JS.InvokeVoidAsync("addResizeListener");
+
+        await base.OnAfterRenderAsync(firstRender);
+    }

    private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
    {
+        selectedValue.IsSelected = !selectedValue.IsSelected;
+
        Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!);
        SearchInput?.SetText(string.Join(", ", Values));
+
        await ValuesChanged.InvokeAsync(Values);
+        StateHasChanged();
    }

    private async Task HandleTextChanged()
    {
-        await BaseElement.FocusAsync();
+        IsContentOpen = false;
+
+        foreach (var item in Items)
+        {
+            item.IsSelected = false;
        }

-    private void HandleFocusIn()
-    {
-        InputFocus = true;
+        Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!);
+        await ValuesChanged.InvokeAsync(Values);
    }

-    private void HandleContentFocusIn()
+    private void HandleSearchClicked()
    {
-        ContentFocus = true;
+        IsContentOpen = !IsContentOpen;
    }
-
-    private async Task HandleContentFocusOut()
+    private void HandleContentClosed()
    {
-        await Task.Delay(TimeSpan.FromSeconds(0.3));
-        ContentFocus = false;
+        IsContentOpen = false;
    }
-
-    private async Task HandleFocusOut()
+    private void HandleTextFocusIn()
    {
-        await Task.Delay(TimeSpan.FromSeconds(0.3));
-        InputFocus = false;
-    }
-
-    private async Task HandleSearchClicked()
-    {
-        if (!IsContentOpen)
-        {
-            await ContentElement.FocusAsync();
-        }
-        else
-        {
-            await BaseElement.FocusAsync();
-        }
+        IsContentOpen = true;
    }
 }
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
@@ -3,63 +3,62 @@
 }

 .select-container {
+    overflow: auto;
+    right: 0;
+    min-width: 100%;
    margin-top: 4px;
    position: absolute;
-    z-index: 500;
-}
-
-.align-right {
-    right: 0;
+    z-index: var(--index-dropdown);
+    border-radius: var(--small-radius);
 }

 .select-content {
-    overflow: hidden;
    display: flex;
    flex-direction: column;
-    border-radius: var(--small-radius);
    animation-name: fade-in;
    animation-duration: 0.4s;
-    z-index: 500;
+    background: var(--dropdown-content);
+    box-shadow: var(--drop-shadow);
+    padding: 4px 0;
+}
+
+.select-button {
+    z-index: var(--index-component)
 }

 .line {
    margin: 2px 6px;
-    border-bottom: 2px solid var(--low-white);
-}
-
-
-/***** Navigation Theme *****/
-.select-content.navigation {
-    background: var(--violet);
-    box-shadow: var(--drop-shadow);
-}
-
-/***** Sort Theme *****/
-.select-content.sort {
-    background: var(--semi-black);
-    box-shadow: var(--drop-shadow);
-    padding: 4px 0;
-}
-
-/***** Filter Theme *****/
-.select-content.filter {
-    background: var(--semi-black);
-    box-shadow: var(--drop-shadow);
-    padding: 4px 0;
-    min-width: 150px;
-}
-
-/***** AdvanceFilter Theme *****/
-.select-content.advancedfilter {
-    background: var(--light-grey);
-    box-shadow: var(--drop-shadow);
-    padding: 4px 0;
-    min-width: 150px;
+    border-bottom: 2px solid var(--input-selected);
 }

 ::deep .select-button.advancedfilter .search-container {
    height: 24px;
-    width: 210px;
-    border: 2px solid var(--low-white);
+    background: var(--input-secondary);
+}
+
+::deep .select-button.advancedfilter .search-container input::placeholder {
+    color: #bbb;
+}
+
+/* width */
+.select-container::-webkit-scrollbar {
+    width: 10px;
+}
+
+/* Track */
+.select-container::-webkit-scrollbar-track {
+    background: var(--input-secondary);
+    border-radius: 0 var(--small-radius) var(--small-radius) 0;
+}
+
+/* Handle */
+.select-container::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: var(--small-radius);
+}
+
+    /* Handle on hover */
+    .select-container::-webkit-scrollbar-thumb:hover {
+        background: #777;
    }

--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.js
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.js
@@ -0,0 +1,19 @@
+function offset(el) {
+    var rect = el.getBoundingClientRect(),
+        scrollLeft = window.scrollY || document.documentElement.scrollLeft,
+        scrollTop = window.scrollX || document.documentElement.scrollTop;
+    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
+}
+
+function resizeSelectContent() {
+    const height = window.innerHeight;
+    const selects = document.getElementsByClassName('select-container');
+    for (var i = 0; i < selects.length; i++) {
+        selects[i].style.maxHeight = height - offset(selects[i]).top - 10 + "px";
+    }
+}
+
+window.addResizeListener = () => {
+    resizeSelectContent();
+    window.addEventListener('resize', resizeSelectContent);
+};
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
@@ -1,15 +1,14 @@
-@using GameIdeas.BlazorApp.Shared.Components.Select.Components
+@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
+@using GameIdeas.BlazorApp.Shared.Components.Select.Components
@typeparam TItem

-<div class="select-list" @onclick=HandleButtonClicked>
-    <div class="select-button">
-        @Button
+<div class="select-list">
+    <div class="select-button" @onclick=HandleButtonClicked>
+        @ChildContent
    </div>
-    <div @ref=Container @onfocusout=HandleFocusOut
-        class="select-container @(AlignRight ? "align-right" : "")" 
-        tabindex="1000">

-        @if (ContentVisile)
+    <div class="select-container @(AlignRight ? "align-right" : "")">
+        @if (IsContentOpen)
        {
            <div class="select-content @(Enum.GetName(Theme)?.ToLower())">
                @foreach (var item in Headers)
@@ -35,3 +34,6 @@
    </div>
 </div>

+<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
+                IsVisible=IsContentOpen OnClick="HandleContentClosed" />
+
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
@@ -5,7 +5,7 @@ namespace GameIdeas.BlazorApp.Shared.Components.Select;

 public partial class SelectList<TItem> 
 {
-    [Parameter] public RenderFragment? Button { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public TItem? Value { get; set; }
    [Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
    [Parameter] public TItem? Header { get; set; }
@@ -15,27 +15,16 @@ public partial class SelectList<TItem>
    [Parameter] public SelectListTheme Theme { get; set; }
    [Parameter] public bool AlignRight { get; set; }

-    private bool ContentVisile = false;
-    private DateTime ContentLastFocusOut = DateTime.Now;
-    private ElementReference Container;
+    private bool IsContentOpen = false;

-    public async Task OpenAsync()
+    private void HandleButtonClicked()
    {
-        if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2))
-        {
-            await Container.FocusAsync();
-            ContentVisile = true;
-        }
+        IsContentOpen = !IsContentOpen;
    }

-    public void Close() => ContentVisile = false;
-
-    private async Task HandleButtonClicked() => await OpenAsync();
-
-    private void HandleFocusOut()
+    private void HandleContentClosed()
    {
-        ContentLastFocusOut = DateTime.Now;
-        ContentVisile = false;
+        IsContentOpen = false;
    }

    private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
@@ -46,6 +35,7 @@ public partial class SelectList<TItem>
        }

        selectedValue.IsSelected = true;
+
        Value = selectedValue.Item;
        await ValueChanged.InvokeAsync(Value);
    }
@@ -58,6 +48,7 @@ public partial class SelectList<TItem>
        }

        selectedValue.IsSelected = true;
+
        Header = selectedValue.Item;
        await HeaderChanged.InvokeAsync(Header);
    }
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
@@ -5,6 +5,7 @@
 .select-container {
    margin-top: 4px;
    position: absolute;
+    z-index: var(--index-dropdown)
 }

 .align-right {
@@ -20,9 +21,13 @@
    animation-duration: 0.4s;
 }

+.select-button {
+    z-index: var(--index-component)
+}
+
 .line {
    margin: 2px 6px;
-    border-bottom: 2px solid var(--low-white);
+    border-bottom: 2px solid var(--input-selected);
 }


@@ -34,7 +39,7 @@

 /***** Sort Theme *****/
 .select-content.sort {
-    background: var(--semi-black);
+    background: var(--dropdown-content);
    box-shadow: var(--drop-shadow);
    padding: 4px 0;
 }
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
@@ -37,7 +37,7 @@ public partial class SliderRange
    {
        var percent1 = (double)(Params.ValueMin - Params.Min) / (Params.Max - Params.Min) * 100;
        var percent2 = (double)(Params.ValueMax - Params.Min) / (Params.Max - Params.Min) * 100;
-        return $"background: linear-gradient(to right, var(--light-grey) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--light-grey) {percent2}%)";
+        return $"background: linear-gradient(to right, var(--line) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--line) {percent2}%)";
    }

    private string StatusColor(int value)
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
@@ -1,6 +1,7 @@
 .container {
    position: relative;
    width: 100%;
+    z-index: var(--index-component)
 }

 input[type="range"] {
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/AddType.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/AddType.cs
@@ -0,0 +1,7 @@
+namespace GameIdeas.BlazorApp.Shared.Models;
+
+public enum AddType
+{
+    Manual,
+    Auto
+}
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/DisplayType.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/DisplayType.cs
@@ -0,0 +1,7 @@
+namespace GameIdeas.BlazorApp.Shared.Models;
+
+public enum DisplayType
+{
+    Card,
+    List
+}
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
@@ -7,29 +7,39 @@
    --red: #FF5E51;
    --yellow: #FFC107;
    --green: #43F8C0;
-    --light-grey: #5C5C5E;
-    --black: rgba(0, 0, 0, 0.8);
    --white: #fff;
-    --low-white: rgb(255, 255, 255, 0.1);
-    --semi-black: rgba(0, 0, 0, 0.5);
-    --line-black: rgba(0, 0, 0, 0.2);
+    --line: #5C5C5E;
+    --input-primary: rgba(0, 0, 0, 0.8);
+    --input-secondary: rgb(45, 45, 48);
+    --input-selected: rgb(255, 255, 255, 0.1);
+    --dropdown-content: rgb(45, 45, 48);
+
    --small-radius: 4px;
    --big-radius: 10px;
-    --radius: 6px;
+
    --drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
+
+    --index-background: -100;
+    --index-orb: -1;
+    --index-content: 0;
+    --index-component: 300;
+    --index-floating: 500;
+    --index-backdrop: 700;
+    --index-dropdown: 900;
+    --index-popup: 1000;
 }

 html {
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px;
-    color: var(--white)
+    color: var(--white);
+    overflow: hidden;
 }

 html, body, #app {
    margin: 0;
    padding: 0;
    height: 100%;
-    overflow: hidden;
 }

 .valid.modified:not([type=checkbox]) {
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html
@@ -26,6 +26,8 @@
        <span class="dismiss">🗙</span>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
+    <script src="Shared/Components/BackdropFilter/BackdropFilter.razor.js"></script>
+    <script src="Shared/Components/Select/MultipleSelectList.razor.js"></script>
 </body>

 </html>
--- a/src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs
+++ b/src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs
@@ -0,0 +1,23 @@
+namespace GameIdeas.Shared.Constants;
+
+public static class Icons
+{
+    private const string OpenBraket = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">";
+    private const string CloseBraket = "</svg>";
+
+
+    public static class Search
+    {
+        public const string Clear = OpenBraket +
+            "<path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />" +
+            CloseBraket;
+
+        public const string Glass = OpenBraket +
+            "<path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />" +
+            CloseBraket;
+
+        public const string Triangle = OpenBraket +
+            "<path d=\"M1 3H23L12 22\" />" +
+            CloseBraket;
+    }
+}