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>

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 {
+::deep .button {
-    transform: scale(0.6, 1) rotate(-90deg);
+    width: fit-content;
-    background: none;
+    transform: rotate(-90deg);
-    border: none;
+    transition: transform 0.2s ease-in-out;
-    outline: none;
+    justify-self: center;
-    cursor: pointer;
 }
 
-::deep .detail svg {
+    ::deep .button svg {
-    fill: var(--white);
+        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 {

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

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

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

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

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>
 

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