From fbe31b701b7d83e329b5349b2c2f3d69c8b8902f Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sat, 14 Mar 2026 23:40:51 +0100
Subject: [PATCH] style(dashboard): refine hover effects and transitions for
 activity items and continue watching widget

---
 .../continue-watching-widget.component.scss   | 20 +++++++---------
 .../dashboard-activity-items.component.html   |  2 +-
 .../dashboard-activity-items.component.scss   | 24 ++++---------------
 .../dashboard-widget-shell.component.scss     |  2 +-
 4 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/libs/workspace/dashboard/ui/src/lib/widgets/continue-watching-widget.component.scss b/libs/workspace/dashboard/ui/src/lib/widgets/continue-watching-widget.component.scss
index 2a9fdab00..726b6de10 100644
--- a/libs/workspace/dashboard/ui/src/lib/widgets/continue-watching-widget.component.scss
+++ b/libs/workspace/dashboard/ui/src/lib/widgets/continue-watching-widget.component.scss
@@ -26,17 +26,16 @@
     text-decoration: none;
     color: inherit;
     cursor: pointer;
-    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+    transition:
+        background-color 0.18s ease,
+        color 0.18s ease;
     min-width: 0;
 
     &:hover {
-        background: var(--mat-sys-surface-container);
-        border-color: color-mix(in srgb, var(--mat-sys-outline) 60%, var(--app-eyebrow-color) 40%);
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.15);
+        background: var(--app-selection-surface);
 
         .hero__play mat-icon {
-            color: var(--mat-sys-primary);
+            color: var(--app-selection-color);
             transform: scale(1.1);
         }
     }
@@ -285,13 +284,12 @@
     text-decoration: none;
     color: inherit;
     min-width: 0;
-    transition: background 0.12s ease, border-color 0.12s ease, transform 0.2s ease, box-shadow 0.2s ease;
+    transition:
+        background-color 0.18s ease,
+        color 0.18s ease;
 
     &:hover {
-        border-color: color-mix(in srgb, var(--mat-sys-outline) 60%, var(--app-eyebrow-color) 40%);
-        background: var(--mat-sys-surface-container-high);
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.15);
+        background: var(--app-selection-surface);
     }
 }
 
diff --git a/libs/workspace/dashboard/ui/src/lib/widgets/dashboard-activity-items.component.html b/libs/workspace/dashboard/ui/src/lib/widgets/dashboard-activity-items.component.html
index 8d805fd14..59ef86fc1 100644
--- a/libs/workspace/dashboard/ui/src/lib/widgets/dashboard-activity-items.component.html
+++ b/libs/workspace/dashboard/ui/src/lib/widgets/dashboard-activity-items.component.html
@@ -36,7 +36,7 @@
                             loading="lazy"
                             (error)="markImageAsFailed(item.id)"
                         />
-                    } @else if (viewMode() === 'grid') {
+                    } @else {
                         <mat-icon>{{ getFallbackIcon(item) }}</mat-icon>
                     }
                 </span>
diff --git a/libs/workspace/dashboard/ui/src/lib/widgets/dashboard-activity-items.component.scss b/libs/workspace/dashboard/ui/src/lib/widgets/dashboard-activity-items.component.scss
index c4e411e07..872772d2c 100644
--- a/libs/workspace/dashboard/ui/src/lib/widgets/dashboard-activity-items.component.scss
+++ b/libs/workspace/dashboard/ui/src/lib/widgets/dashboard-activity-items.component.scss
@@ -54,7 +54,9 @@
     grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: center;
     gap: 10px;
-    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
+    transition:
+        background-color 0.18s ease,
+        color 0.18s ease;
 }
 
 .activity-item__action-btn {
@@ -89,14 +91,7 @@
 }
 
 .activity-item:hover {
-    transform: translateY(-2px);
-    border-color: color-mix(in srgb, var(--mat-sys-outline) 60%, var(--mat-sys-primary) 40%);
-    background: linear-gradient(
-        180deg,
-        var(--mat-sys-surface-container-high) 0%,
-        var(--mat-sys-surface-container-low) 100%
-    );
-    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.15);
+    background: var(--app-selection-surface);
 }
 
 .activity-item__media {
@@ -218,17 +213,6 @@
     gap: 5px;
     padding: 5px;
     position: relative;
-
-    &:hover {
-        transform: translateY(-2px);
-        border-color: color-mix(in srgb, var(--mat-sys-outline) 60%, var(--mat-sys-primary) 40%);
-        background: linear-gradient(
-            180deg,
-            var(--mat-sys-surface-container-high) 0%,
-            var(--mat-sys-surface-container-low) 100%
-        );
-        box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.15);
-    }
 }
 
 // In grid mode: float the remove button over the top-right corner
diff --git a/libs/workspace/dashboard/ui/src/lib/widgets/dashboard-widget-shell.component.scss b/libs/workspace/dashboard/ui/src/lib/widgets/dashboard-widget-shell.component.scss
index d8998da1e..3e9299de8 100644
--- a/libs/workspace/dashboard/ui/src/lib/widgets/dashboard-widget-shell.component.scss
+++ b/libs/workspace/dashboard/ui/src/lib/widgets/dashboard-widget-shell.component.scss
@@ -71,7 +71,7 @@
     gap: 12px;
     min-height: 0;
     flex: 1;
-    padding: 0 16px 12px;
+    padding: 5px 16px 12px;
     box-sizing: border-box;
     overflow-y: auto;
     overflow-x: hidden;