udpate style on user row

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>
+            <button type="button" class="remove" @onclick="HandleRemoveClicked">@Icons.Bin</button>
-            @if (!CanEdit)
+            <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>
-                <button class="edit" @onclick="HandleEditClicked">@Icons.Pen</button>
-            }
-            else
-            {
-                <button type="submit" class="submit">@Icons.Check</button>
-            }
         </div>
     </div>
 </EditForm>

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

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

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"
+    <input type="text"
-           type="text"
            class="search-field"
            placeholder="@Placeholder"
            disabled="@IsDisable"