complete style and add skeleton

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor

@@ -10,9 +10,9 @@
 @inherits ComponentBase
 
 <div class="header-tab">
-    <div class="icon-container" @onclick="HandleIconClicked">
+    <a href="/Games" class="icon-container">
         <img src="icon.png" alt="Game Ideas">
-    </div>
+    </a>
 
     @ChildContent
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs

@@ -32,11 +32,6 @@ public partial class GameHeader : ComponentBase
         base.OnInitialized();
     }
 
-    private void HandleIconClicked()
-    {
-        throw new NotImplementedException();
-    }
-
     private async Task HandleAddTypeClicked(IEnumerable<KeyValuePair<AddType, string>> values)
     {
         SelectListAdd?.Close();

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Components/Login.razor

@@ -1,7 +1,7 @@
 @using Blazored.FluentValidation
 
 <EditForm EditContext="EditContext" OnSubmit="HandleLoginSubmit">
-    <FluentValidationValidator />
+    <FluentValidationValidator Validator="Validator" />
     <div class="login-form">
         <div class="login-field">
             <div class="input-title">@ResourcesKey.EnterUsername</div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Components/Login.razor.cs

@@ -12,7 +12,7 @@ public partial class Login
     private EditContext? EditContext;
     private UserDto UserDto = new();
     private bool IsLoading = false;
-
+    private LoginValidator Validator = new();
     protected override void OnInitialized()
     {
         EditContext = new EditContext(UserDto);

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor

@@ -16,7 +16,7 @@
         </div>
         <div class="role">
             <Select TItem="RoleDto" THeader="object" DisableClicked=!CanEdit Type="SelectType.Single"
-                    Theme="SelectTheme.Creation" Values="Roles" ValuesChanged="HandleValuesChanged" Params="SelectRoleParams">
+                    Theme="SelectTheme.Single" Values="Roles" ValuesChanged="HandleValuesChanged" Params="SelectRoleParams">
                 <span class="role-label @(!CanEdit ? "disabled" : "")">@(User.Role?.Name ?? ResourcesKey.Unknown)</span>
             </Select>
         </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.cs

@@ -16,10 +16,17 @@ public partial class UserRow
 
     private SelectParams<RoleDto, object> SelectRoleParams = new();
     private EditContext? EditContext;
+    private UserDto? OriginalUser;
 
     protected override void OnInitialized()
     {
         EditContext = new(User);
+        OriginalUser = new()
+        {
+            Username = User.Username,
+            Role = User.Role
+        };
+
         base.OnInitialized();
     }
 
@@ -48,11 +55,19 @@ public partial class UserRow
 
         CanEdit = false;
         await OnSubmit.InvokeAsync(User);
+        User.Password = null;
     }
 
 
     private void HandleEditClicked()
     {
+        if (CanEdit)
+        {
+            User.Username = OriginalUser?.Username;
+            User.Role = OriginalUser?.Role;
+            User.Password = null;
+        }
+
         CanEdit = !CanEdit;
     }
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.css

@@ -13,6 +13,15 @@
     align-content: center;
 }
 
+.icon ::deep svg {
+    fill: var(--line);
+}
+
+.role {
+    min-width: 160px;
+    width: fit-content;
+}
+
 input[disabled], input, input::placeholder {
     color: var(--white);
 }
@@ -37,7 +46,6 @@ input, .role-label {
 .role-label {
     display: block;
     align-content: center;
-    width: fit-content;
 }
 
 .buttons {

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRowSkeleton.razor

@@ -0,0 +1,12 @@
+@using GameIdeas.BlazorApp.Shared.Constants
+
+<div class="row">
+    <div class="icon">@Icons.Account</div>
+    <div class="name pill"></div>
+    <div class="password pill"></div>
+    <div class="role pill"></div>
+    <div class="buttons">
+        <span class="remove">@Icons.Bin</span>
+        <span class="edit">@Icons.Pen</span>
+    </div>
+</div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRowSkeleton.razor.css

@@ -0,0 +1,69 @@
+.row {
+    height: 64px;
+    display: grid;
+    grid-template-columns: 48px 1fr 1fr 1fr auto;
+    grid-gap: 8px;
+    padding: 0 8px;
+    background: var(--input-secondary);
+    box-shadow: var(--drop-shadow);
+    border-radius: var(--big-radius);
+    align-content: center;
+}
+
+.icon {
+    height: 48px;
+    width: 48px;
+}
+
+.icon ::deep svg {
+    fill: var(--line);
+}
+
+.pill {
+    animation: loading 3s ease infinite;
+    align-self: center;
+    height: 28px;
+    border-radius: var(--small-radius);
+    box-sizing: border-box;
+    max-width: 180px;
+}
+
+.buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    height: auto;
+    width: auto;
+}
+
+    .buttons > * {
+        margin: auto;
+        height: 28px;
+        width: 28px;
+        background: none;
+        border-radius: var(--small-radius);
+        padding: 2px;
+        box-sizing: border-box;
+    }
+
+.remove ::deep svg {
+    fill: var(--red);
+}
+
+.edit ::deep svg {
+    fill: var(--yellow);
+}
+
+@keyframes loading {
+    0% {
+        background: rgb(255, 255, 255, 0.05);
+    }
+
+    50% {
+        background: rgb(255, 255, 255, 0.2);
+    }
+
+    100% {
+        background: rgb(255, 255, 255, 0.05);
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor

@@ -33,7 +33,7 @@
         {
             @for (int i = 0; i < 20; i++)
             {
-
+                <UserRowSkeleton />
             }
         }
     </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor.css

@@ -4,15 +4,21 @@
     gap: 8px;
 }
 
-::deep.header-content>* {
+::deep .search-container .select-container {
     box-sizing: border-box;
-    width: 200px;
+    max-width: 200px;
 }
 
 .container {
     padding: 20px 200px;
 }
 
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
 @media screen and (max-width: 1000px) {
     .container {
         padding: 20px 20px;

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

@@ -43,3 +43,12 @@
     .navigation .selected {
         display: none;
     }
+
+/***** Single Theme *****/
+.single {
+    padding: 4px 8px;
+}
+
+.single .selected {
+    display: none;
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Helpers/SelectHelper.cs

@@ -13,6 +13,7 @@ public static class SelectHelper
             SelectTheme.Filter => "filter",
             SelectTheme.AdvancedFilter => "advanced-filter",
             SelectTheme.Creation => "creation",
+            SelectTheme.Single => "single",
             _ => string.Empty
         };
     }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs

@@ -6,5 +6,6 @@ public enum SelectTheme
     Sort,
     Filter,
     AdvancedFilter,
-    Creation
+    Creation,
+    Single
 }

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

@@ -14,6 +14,7 @@
     z-index: var(--index-dropdown);
     border-radius: var(--small-radius);
     width: 100%;
+    box-shadow: var(--drop-shadow);
 }
 
 .content {
@@ -23,7 +24,6 @@
     flex-direction: column;
     animation-name: fade-in;
     animation-duration: 0.2s;
-    box-shadow: var(--drop-shadow);
 }
 
 .line {
@@ -87,7 +87,7 @@
         border-bottom: 2px solid var(--input-selected);
     }
 
-/***** Sort Theme *****/
+/***** Creation Theme *****/
 .creation .content {
     border-radius: var(--small-radius);
     box-sizing: border-box;
@@ -100,3 +100,7 @@
     border-bottom: 2px solid var(--input-selected);
 }
 
+/***** Single Theme *****/
+.single {
+    border: none;
+}