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 += '
'; - // h += 'Looking for Puter\'s desktop interface?'; - // h += ''; - // h += '
'; - // h += '
'; - // Usage card (spans full width on second row) h += '
'; h += @@ -208,6 +200,23 @@ const TabHome = { h += '
'; h += ''; + // Open Desktop card (spans full width, links to the desktop interface) + h += ''; + h += '
'; + h += + ''; + h += '
'; + h += '
'; + h += `

${i18n('open_desktop')}

`; + h += ''; + h += + ''; + h += 'Switch to the desktop interface'; + h += ''; + h += '
'; + h += ''; + h += '
'; + h += ''; return h; }, @@ -271,11 +280,6 @@ const TabHome = { }, ); - // Handle desktop switch button - $el_window.on('click', '.bento-desktop-switch-btn', function () { - window.location.href = '/desktop'; - }); - // Handle "Save Account" warning click $el_window.on('click', '.bento-save-account-warning', function (e) { e.preventDefault(); diff --git a/src/gui/src/UI/Dashboard/UIDashboard.js b/src/gui/src/UI/Dashboard/UIDashboard.js index 12820b787..8fdedf1b9 100644 --- a/src/gui/src/UI/Dashboard/UIDashboard.js +++ b/src/gui/src/UI/Dashboard/UIDashboard.js @@ -106,12 +106,6 @@ async function UIDashboard (options) { } h += ''; - // Open Desktop button, pinned above user options - h += ``; - h += ''; - h += i18n('open_desktop'); - h += ''; - // User options button at bottom 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;