Refactor style for dropdown

src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css

@@ -1,6 +1,8 @@
 .page {
-    height: 100%;
+    display: flex;
-    overflow: hidden;
+    flex-direction: column;
+    max-height: 100vh;
+    height: 100vh;
 }
 
 .orb {

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css

@@ -5,6 +5,8 @@
     padding-right: 20px;
     padding-left: 10px;
     height: 100%;
+    box-sizing: border-box;
+    width: 240px;
     border-left: 2px solid var(--line);
     z-index: var(--index-component);
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor

@@ -1,4 +1,5 @@
-<div class="search-container">
+@using GameIdeas.Shared.Constants
+<div class="search-container">
     <input @ref=InputText
            type="text"
            class="search-field"
@@ -8,26 +9,17 @@
            @bind:after=HandleTextChanged
            @onfocusin=HandleFocusIn/>
 
-    @if (!string.IsNullOrEmpty(Text))
+    <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">
+            <div class="clear-icon" @onclick=HandleClearClicked>
-                <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" />
+                @ClearIcon
-            </svg>
+            </div>
-        </div>
+        }
-    }
 
-    <div class="search-icon @(Enum.GetName(Icon)?.ToLower())" @onclick=HandleSearchClicked>
+        <div class="search-icon @(Enum.GetName(Icon)?.ToLower())" @onclick=HandleSearchClicked>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            @GetSearchIcon()
-            @if (Icon == SearchInputIcon.Search)
+        </div>
-            {
-                <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>
     </div>
 </div>
 

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;
@@ -13,6 +14,7 @@ public partial class SearchInput
     [Parameter] public SearchInputIcon Icon { get; set; }
 
     private ElementReference InputText;
+    private readonly MarkupString ClearIcon = new(Icons.Search.Clear);
 
     protected override void OnInitialized()
     {
@@ -45,4 +47,14 @@ public partial class SearchInput
     {
         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()
+        };
+    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css

@@ -9,8 +9,8 @@
     background: var(--input-primary);
     overflow: hidden;
     align-items: center;
-    width: 140px;
     z-index: var(--index-component);
+    justify-content: space-between;
 }
 
 ::deep .search-field {
@@ -34,7 +34,7 @@
         cursor: pointer;
     }
 
-    .clear-icon svg {
+    ::deep .clear-icon svg {
         fill: var(--white);
     }
 
@@ -49,11 +49,11 @@
         cursor: pointer;
     }
 
-    .search-icon svg {
+::deep .search-icon svg {
-        fill: var(--white);
+    fill: var(--white);
-    }
+}
 
-    .search-icon.dropdown svg {
+::deep .search-icon.dropdown svg {
-        fill: var(--violet);
+    fill: var(--violet);
-        transform: scale(.8, .5);
+    transform: scale(.8, .5);
-    }
+}

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);
     }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css

@@ -1,8 +1,7 @@
 .select-element {
     display: flex;
     flex-direction: row;
-    width: fit-content;
+    width: auto;
-    width: 100%;
     gap: 6px;
     height: 20px;
     align-items: center;
@@ -17,6 +16,7 @@
     min-width: 12px;
     height: 12px;
     min-height: 12px;
+    border: 1px solid var(--line);
 }
 
 .selected svg {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor

@@ -13,7 +13,7 @@
                      SearchClicked="HandleSearchClicked"
                      FocusIn="HandleTextFocusIn"/>
     </div>
-    <div class="select-container @(AlignRight ? "align-right" : "")">
+    <div class="select-container">
 
         @if (IsContentOpen)
         {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs

@@ -26,9 +26,17 @@ public partial class MultipleSelectList<TItem>
         await ValuesChanged.InvokeAsync(Values);
     }
 
-    private void HandleTextChanged()
+    private async Task HandleTextChanged()
     {
         IsContentOpen = false;
+
+        foreach (var item in Items)
+        {
+            item.IsSelected = false;
+        }
+
+        Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!);
+        await ValuesChanged.InvokeAsync(Values);
     }
 
     private void HandleSearchClicked()

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css

@@ -3,15 +3,14 @@
 }
 
 .select-container {
+    overflow: auto;
+    right: 0;
+    min-width: 100%;
     margin-top: 4px;
     position: absolute;
     z-index: var(--index-dropdown)
 }
 
-.align-right {
-    right: 0;
-}
-
 .select-content {
     overflow: hidden;
     display: flex;
@@ -33,24 +32,12 @@
     border-bottom: 2px solid var(--input-selected);
 }
 
-/***** Filter Theme *****/
-.select-content.filter {
-    min-width: 140px;
-}
-
-/***** Advanced Filter Theme *****/
-.select-content.advancedfilter {
-    min-width: 210px;
-}
-
 ::deep .select-button.advancedfilter .search-container {
     height: 24px;
-    width: 210px;
-    border: 2px solid var(--input-selected);
     background: var(--input-secondary);
 }
 
 ::deep .select-button.advancedfilter .search-container input::placeholder {
-    color: #ddd;
+    color: #bbb;
 }
 

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css

@@ -40,7 +40,6 @@ html, body, #app {
     margin: 0;
     padding: 0;
     height: 100%;
-    overflow: hidden;
 }
 
 .valid.modified:not([type=checkbox]) {

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;
+    }
+}