diff --git a/src/gui/src/UI/Dashboard/TabHome.js b/src/gui/src/UI/Dashboard/TabHome.js
index 7e715704e..fa8fa6b2b 100644
--- a/src/gui/src/UI/Dashboard/TabHome.js
+++ b/src/gui/src/UI/Dashboard/TabHome.js
@@ -178,14 +178,6 @@ const TabHome = {
h += '';
h += '';
- // Desktop switch card (spans full width)
- // h += '
';
h += '
';
diff --git a/src/gui/src/css/dashboard.css b/src/gui/src/css/dashboard.css
index eb2b1d9a0..013efcb25 100644
--- a/src/gui/src/css/dashboard.css
+++ b/src/gui/src/css/dashboard.css
@@ -75,6 +75,11 @@
--dashboard-bento-usage-surface: #eef2ff;
--dashboard-bento-usage-header-bg: #e0e7ff;
--dashboard-bento-usage-bar-fill: #ea580c;
+ /* Emerald (matches the green icon accent used elsewhere) */
+ --dashboard-bento-desktop-icon-bg: #059669;
+ --dashboard-bento-desktop-icon-shadow: rgba(5, 150, 105, 0.22);
+ --dashboard-bento-desktop-surface: #ecfdf5;
+ --dashboard-bento-desktop-header-bg: #d1fae5;
--dashboard-shadow-subtle: rgba(0, 0, 0, 0.04);
--dashboard-shadow-light: rgba(0, 0, 0, 0.06);
@@ -166,6 +171,10 @@ body {
--dashboard-bento-usage-surface: #1c1d2e;
--dashboard-bento-usage-header-bg: #252a42;
--dashboard-bento-usage-bar-fill: #fb923c;
+ --dashboard-bento-desktop-icon-bg: #10b981;
+ --dashboard-bento-desktop-icon-shadow: rgba(16, 185, 129, 0.32);
+ --dashboard-bento-desktop-surface: #16241f;
+ --dashboard-bento-desktop-header-bg: #172e26;
--dashboard-shadow-subtle: rgba(0, 0, 0, 0.2);
--dashboard-shadow-light: rgba(0, 0, 0, 0.3);
@@ -404,17 +413,6 @@ body {
font-weight: 500;
}
-/* Open Desktop button pinned above user options */
-.dashboard-desktop-btn {
- border: 1px solid var(--dashboard-border);
- margin-bottom: 0;
- justify-content: center;
-}
-
-.dashboard-sidebar.collapsed .dashboard-desktop-btn {
- border: none;
-}
-
/* User options button at bottom of sidebar */
.dashboard-user-options {
border-top: 1px solid var(--dashboard-border);
@@ -1257,6 +1255,11 @@ input.myapps-search::placeholder {
color: #fff;
}
+.dashboard .bento-card-fancy-icon-desktop {
+ background-color: var(--dashboard-bento-desktop-icon-bg);
+ color: #fff;
+}
+
.dashboard .bento-card-fancy-text {
display: flex;
flex-direction: column;
@@ -1397,46 +1400,39 @@ input.myapps-search::placeholder {
color: var(--dashboard-text-tertiary);
}
-/* Desktop switch bento card */
-.dashboard .bento-desktop-switch {
+/* Open Desktop bento card (full width; links to the desktop interface) */
+.dashboard .bento-desktop {
grid-column: 1 / -1;
- min-height: auto;
- background-color: var(--dashboard-bento-apps-surface);
- padding: 16px 24px;
-}
-
-.dashboard .bento-desktop-switch-inner {
display: flex;
align-items: center;
- justify-content: space-between;
- gap: 16px;
-}
-
-.dashboard .bento-desktop-switch-text {
- font-size: 14px;
- font-weight: 500;
- color: var(--dashboard-text-secondary);
-}
-
-.dashboard .bento-desktop-switch-btn {
- flex-shrink: 0;
- padding: 8px 16px;
- font-size: 13px;
- font-weight: 500;
- color: var(--dashboard-background);
- background: var(--dashboard-icon-blue-start);
- border: 1px solid var(--dashboard-primary);
- border-radius: 8px;
- cursor: pointer;
+ gap: 14px;
+ padding: 18px 24px;
+ background-color: var(--dashboard-bento-desktop-header-bg);
text-decoration: none;
- transition: background 0.15s, color 0.15s;
+ color: inherit;
+ transition: box-shadow 0.15s ease;
}
@media (hover: hover) {
- .dashboard .bento-desktop-switch-btn:hover {
- background: var(--dashboard-icon-blue-end);
- color: white;
+ .dashboard .bento-desktop:hover {
+ box-shadow:
+ 0 2px 4px var(--dashboard-shadow-subtle),
+ 0 10px 28px var(--dashboard-bento-desktop-icon-shadow);
}
+
+ .dashboard .bento-desktop:hover .bento-desktop-arrow {
+ transform: translateX(3px);
+ color: var(--dashboard-text-primary);
+ }
+}
+
+.dashboard .bento-desktop-arrow {
+ margin-left: auto;
+ font-size: 22px;
+ font-weight: 300;
+ line-height: 1;
+ color: var(--dashboard-text-hint);
+ transition: transform 0.15s ease, color 0.15s ease;
}
/* Usage bento card (cool indigo surfaces; orange bars stay as progress accent) */
@@ -1712,6 +1708,11 @@ input.myapps-search::placeholder {
gap: 12px;
}
+ .dashboard .bento-desktop {
+ padding: 16px 20px;
+ gap: 12px;
+ }
+
.dashboard .bento-card-fancy-icon {
width: 40px;
height: 40px;