From bb42aa6dc175cd19bc3519181ee403b2eb02d136 Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Mon, 12 May 2025 11:35:22 +0200
Subject: [PATCH] Fix style for detail row option

---
 .../Pages/Games/Components/GameRow.razor      |  4 +--
 .../Pages/Games/Components/GameRow.razor.css  | 25 +++++++++++--------
 .../Select/Components/SelectRow.razor.css     | 17 +++++++++++++
 .../Components/Select/Helpers/SelectHelper.cs |  1 +
 .../Components/Select/Models/SelectTheme.cs   |  3 ++-
 .../Shared/Components/Select/Select.razor     |  2 +-
 .../Shared/Components/Select/Select.razor.css | 10 ++++++++
 7 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor
index 1510d62..dae3abf 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor
@@ -35,8 +35,8 @@
 
     <Interest Value="GameDto.Interest" />
 
-    <Select TItem="DetailOptions" THeader="object" Type="SelectType.Single" QuickAdd="false" Theme="SelectTheme.Navigation"
+    <Select TItem="DetailOptions" THeader="object" Type="SelectType.Single" Theme="SelectTheme.RowOption"
             Params="SelectParams" ValuesChanged="HandlerSelectValuesChanged">
-        <button class="detail">@Icons.Triangle</button>
+        @Icons.Triangle
     </Select>
 </div>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor.css
index ab958ce..fd6ce91 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor.css
@@ -8,7 +8,6 @@
     box-shadow: var(--drop-shadow);
     border-radius: var(--big-radius);
     align-items: center;
-    overflow: hidden;
 }
 
 .row > * {
@@ -69,17 +68,23 @@
         text-decoration: underline;
     }
 
-::deep .detail {
-    transform: scale(0.6, 1) rotate(-90deg);
-    background: none;
-    border: none;
-    outline: none;
-    cursor: pointer;
+::deep .button {
+    width: fit-content;
+    transform: rotate(-90deg);
+    transition: transform 0.2s ease-in-out;
+    justify-self: center;
 }
 
-::deep .detail svg {
-    fill: var(--white);
-}
+    ::deep .button svg {
+        fill: var(--white);
+        height: 20px;
+        width: 20px;
+        transform: scale(1, 0.6);
+    }
+
+    ::deep .button:hover, ::deep .button.selected {
+        transform: translate(-4px, 2px);
+    }
 
 @media screen and (max-width: 700px) {
     .release-date, .tags, .storage {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectRow.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectRow.razor.css
index 5651f0a..50f47b0 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectRow.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectRow.razor.css
@@ -51,4 +51,21 @@
 
 .single .selected {
     display: none;
+}
+
+/***** Navigation Theme *****/
+.row-option {
+    padding: 4px 8px;
+}
+
+    .row-option:hover {
+        background: var(--violet-selected);
+    }
+
+    .row-option .selected {
+        display: none;
+    }
+
+.row-option:last-child {
+    color: var(--red);
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Helpers/SelectHelper.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Helpers/SelectHelper.cs
index a327106..e184354 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Helpers/SelectHelper.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Helpers/SelectHelper.cs
@@ -14,6 +14,7 @@ public static class SelectHelper
             SelectTheme.AdvancedFilter => "advanced-filter",
             SelectTheme.Creation => "creation",
             SelectTheme.Single => "single",
+            SelectTheme.RowOption => "row-option",
             _ => string.Empty
         };
     }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs
index c5af5a2..fb09cf1 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs
@@ -7,5 +7,6 @@ public enum SelectTheme
     Filter,
     AdvancedFilter,
     Creation,
-    Single
+    Single,
+    RowOption
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor
index 04bf62a..745b972 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor
@@ -6,7 +6,7 @@
 @typeparam THeader
 
 <div class="select-container">
-    <div class="button" @onclick=HandleButtonClicked>
+    <div class="button @(IsContentOpen ? "selected" : "")" @onclick=HandleButtonClicked>
         @ChildContent
     </div>
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css
index eec629c..4faecde 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css
@@ -104,3 +104,13 @@
 .single {
     border: none;
 }
+
+/***** Row Option Theme *****/
+.dropdown.row-option {
+    width: auto;
+    right: 10px;
+}
+
+.row-option .content {
+    background: var(--violet);
+}