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 @@
-
\ 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