From ea47b00e1275df15c63b9b3c199ad1d3f29d6419 Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Sun, 27 Apr 2025 03:09:06 +0200
Subject: [PATCH] udpate style on user row

---
 .../Pages/Users/Components/UserRow.razor      | 18 ++----
 .../Pages/Users/Components/UserRow.razor.cs   |  3 +-
 .../Pages/Users/Components/UserRow.razor.css  | 61 +++++++++++++++++++
 .../Components/Search/SearchInput.razor       |  3 +-
 4 files changed, 70 insertions(+), 15 deletions(-)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor
index 763feb1..647d835 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor
@@ -9,27 +9,21 @@
             @Icons.Account
         </div>
         <div class="name">
-            <input type="text" class="input-name" @bind="@User.Username" disabled="@CanEdit">
+            <input type="text" class="input-name" @bind="@User.Username" disabled="@(!CanEdit)">
         </div>
         <div class="password">
-            <input type="password" class="input-password" placeholder="********" @bind="@User.Password" disabled="@CanEdit">
+            <input type="password" class="input-password" placeholder="********" @bind="@User.Password" disabled="@(!CanEdit)">
         </div>
         <div class="role">
             <Select TItem="RoleDto" THeader="object" DisableClicked=!CanEdit Type="SelectType.Single"
                     Theme="SelectTheme.Creation" Values="Roles" ValuesChanged="HandleValuesChanged" Params="SelectRoleParams">
-                <span class="role-label">@(User.Role?.Name ?? ResourcesKey.Unknown)</span>
+                <span class="role-label @(!CanEdit ? "disabled" : "")">@(User.Role?.Name ?? ResourcesKey.Unknown)</span>
             </Select>
         </div>
         <div class="buttons">
-            <button class="remove" @onclick="HandleRemoveClicked">@Icons.Bin</button>
-            @if (!CanEdit)
-            {
-                <button class="edit" @onclick="HandleEditClicked">@Icons.Pen</button>
-            }
-            else
-            {
-                <button type="submit" class="submit">@Icons.Check</button>
-            }
+            <button type="button" class="remove" @onclick="HandleRemoveClicked">@Icons.Bin</button>
+            <button type="button" class="edit @(CanEdit ? "selected" : "")" @onclick="HandleEditClicked">@Icons.Pen</button>
+            <button type="submit" class="submit" style="display: @(CanEdit ? "block" : "none");">@Icons.Check</button>
         </div>
     </div>
 </EditForm>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.cs
index c8eaca8..6cd0411 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.cs
@@ -53,8 +53,9 @@ public partial class UserRow
 
     private void HandleEditClicked()
     {
-        CanEdit = true;
+        CanEdit = !CanEdit;
     }
+
     private async Task HandleRemoveClicked()
     {
         await OnRemove.InvokeAsync(User);
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.css
index 5c0ab4a..30e2589 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.css
@@ -12,3 +12,64 @@
 .row > * {
     align-content: center;
 }
+
+input[disabled], input, input::placeholder {
+    color: var(--white);
+}
+
+input, .role-label {
+    border: none;
+    outline: none;
+    background: none;
+    height: 28px;
+    padding: 0 10px;
+    box-sizing: border-box;
+    border-radius: var(--small-radius);
+    border: solid 1px var(--line);
+    background: rgb(0, 0, 0, 0.2);
+}
+
+    input[disabled], .disabled {
+        border: none;
+        background: none;
+    }
+
+.role-label {
+    display: block;
+    align-content: center;
+    width: fit-content;
+}
+
+.buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    height:auto;
+}
+
+.buttons > * {
+    border: none;
+    outline: none;
+    margin: auto;
+    height: 28px;
+    width: 28px;
+    background: none;
+    border-radius: var(--small-radius);
+    padding: 2px;
+}
+
+.buttons > *:hover, .selected {
+    background: var(--input-selected)
+}
+
+.remove ::deep svg {
+    fill: var(--red);
+}
+
+.edit ::deep svg {
+    fill: var(--yellow);
+}
+
+.submit ::deep svg {
+    fill: var(--green);
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
index 5c1e7f6..410062d 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
@@ -2,8 +2,7 @@
 @using GameIdeas.Shared.Constants
 
 <div class="search-container">
-    <input id="searchInput"
-           type="text"
+    <input type="text"
            class="search-field"
            placeholder="@Placeholder"
            disabled="@IsDisable"