Merge pull request #845 from web3dev1337/fix/dashboard-ultrawide-baseline

fix: make dashboard text pure white

Author: AnrokX

client/dashboard.js

@@ -261,7 +261,7 @@ class Dashboard {
           <div class="dashboard-create-desc">Set up a new workspace environment to begin building.</div>
         </div>
         <button id="dashboard-add-workspace-btn" class="btn-primary workspace-create-empty-btn dashboard-create-btn">
-          ➕ Create Workspace
+          + Create Workspace
         </button>
       </div>
     ` : '';
@@ -309,16 +309,15 @@ class Dashboard {
     return `
       <div class="dashboard-wrapper">
         <div class="dashboard-topbar">
-          ${canReturnToWorkspaces ? `<button class="dashboard-topbar-btn" id="dashboard-back-btn" title="Back to workspaces">← Back</button>` : '<div></div>'}
+          ${canReturnToWorkspaces ? `<button class="dashboard-topbar-btn" id="dashboard-back-btn" title="Back to workspaces">← Back to workspaces</button>` : '<div></div>'}
           ${showProcessBanner ? `<div id="dashboard-process-banner" class="process-banner" title="WIP and queue status"></div>` : '<div></div>'}
         </div>
         
         <div class="dashboard-header-modern">
           <div class="dashboard-title-group">
-            <div class="dashboard-title-icon" style="font-size:24px;">🏠</div>
+            <div class="dashboard-title-icon" aria-hidden="true"></div>
             <div>
               <h1>Agent Workspace</h1>
-              <p>Select a workspace to begin development</p>
             </div>
           </div>
         </div>
@@ -3481,7 +3480,7 @@ class Dashboard {
           </button>
           <div class="bento-action-group">
             <button class="btn-icon workspace-rename-btn" title="Rename workspace">
-              ✎
+              ✏️
             </button>
             <button class="btn-icon workspace-delete-btn btn-danger-icon" title="Delete workspace">
               🗑️
@@ -3583,16 +3582,14 @@ class Dashboard {
   setupEventListeners() {
     // Back button to return to the current tabbed workspace view (when available)
     document.getElementById('dashboard-back-btn')?.addEventListener('click', () => {
-      this.orchestrator.hideDashboard();
+      this.returnToWorkspaceView();
     });
 
     // Workspace card click handlers
     document.querySelectorAll('.workspace-open-btn').forEach(btn => {
       btn.addEventListener('click', (e) => {
         e.stopPropagation();
-        const card = e.target.closest('.workspace-card');
-        const workspaceId = card.dataset.workspaceId;
-        this.openWorkspace(workspaceId);
+        this.returnToWorkspaceView();
       });
     });
 
@@ -3651,7 +3648,7 @@ class Dashboard {
     this._escHandler = (e) => {
       if (e.key !== 'Escape' || !this.isVisible) return;
       if (this.orchestrator.tabManager?.tabs?.size) {
-        this.orchestrator.hideDashboard();
+        this.returnToWorkspaceView();
       }
     };
     document.addEventListener('keydown', this._escHandler);
@@ -3785,6 +3782,10 @@ class Dashboard {
     wizard.show(options);
   }
 
+  returnToWorkspaceView() {
+    this.orchestrator.hideDashboard();
+  }
+
   async createEmptyWorkspaceQuick() {
     try {
       const existingIds = new Set(this.workspaces.map(ws => ws.id));

client/styles.css

@@ -14276,15 +14276,17 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 .dashboard-title-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-pressed) 100%);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 8px 16px rgba(31, 111, 235, 0.25);
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: conic-gradient(from 180deg at 50% 50%, #52d3ff 0deg, #4b92ff 180deg, #52d3ff 360deg);
+  flex-shrink: 0;
+  box-shadow: 0 0 20px rgba(82, 211, 255, 0.7);
+  animation: dashboard-title-orb-spin 4s linear infinite;
+}
+
+@keyframes dashboard-title-orb-spin {
+  100% { transform: rotate(360deg); }
 }
 
 .dashboard-title-group h1 {
@@ -14478,8 +14480,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 /* Dashboard Layout */
 .dashboard-wrapper {
-  max-width: 1800px;
-  margin: 0 auto;
+  max-width: none;
+  margin: 0;
   padding: 0 var(--space-lg) var(--space-lg);
   display: flex;
   flex-direction: column;
@@ -14554,6 +14556,22 @@ body.dependency-onboarding-active #dependency-setup-modal {
   font-weight: 600 !important;
   font-size: 0.82rem !important;
   white-space: nowrap;
+  border: 1px solid color-mix(in srgb, var(--accent-success) 72%, rgba(255, 255, 255, 0.14)) !important;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 40%),
+    linear-gradient(180deg, color-mix(in srgb, var(--accent-success) 58%, white 42%) 0%, color-mix(in srgb, var(--accent-success) 88%, #09110b 12%) 100%) !important;
+  color: #09110b !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.42),
+    0 8px 18px rgba(0, 0, 0, 0.22) !important;
+}
+
+.dashboard-create-btn:hover {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 42%),
+    linear-gradient(180deg, color-mix(in srgb, var(--accent-success) 66%, white 34%) 0%, color-mix(in srgb, var(--accent-success) 92%, #09110b 8%) 100%) !important;
+  color: #09110b !important;
+  transform: translateY(-1px);
 }
 
 /* Bento Cards */
@@ -14741,6 +14759,37 @@ body.dependency-onboarding-active #dependency-setup-modal {
   border: 1px solid var(--border-color);
 }
 
+.dashboard-wrapper,
+.dashboard-wrapper :is(
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  span,
+  strong,
+  small,
+  code,
+  label,
+  button:not(.dashboard-create-btn),
+  a,
+  .dashboard-create-title,
+  .dashboard-create-desc,
+  .workspace-meta,
+  .port-card-port,
+  .dashboard-project-group-title,
+  .dashboard-project-group-count,
+  .dashboard-project-tile-name,
+  .dashboard-project-tile-subtitle,
+  .dashboard-project-tile-live,
+  .quick-link-label
+) {
+  color: #fff !important;
+  opacity: 1 !important;
+}
+
 @media (max-width: 1200px) {
   .dashboard-main-content {
     grid-template-columns: 1fr;