Phase 1: Dashboard Polish + Theming (#457) (#458)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/components/dashboard/QuickActions.tsx

@@ -12,10 +12,10 @@ interface QuickAction {
 }
 
 const actions: QuickAction[] = [
-  { id: "new-project", label: "New Project", icon: "🚀", iconBg: "rgba(47,128,255,0.15)" },
-  { id: "spawn-agent", label: "Spawn Agent", icon: "🤖", iconBg: "rgba(139,92,246,0.15)" },
-  { id: "view-telemetry", label: "View Telemetry", icon: "📊", iconBg: "rgba(20,184,166,0.15)" },
-  { id: "review-tasks", label: "Review Tasks", icon: "📋", iconBg: "rgba(245,158,11,0.15)" },
+  { id: "new-project", label: "New Project", icon: "🚀", iconBg: "rgba(47,128,255,0.12)" },
+  { id: "spawn-agent", label: "Spawn Agent", icon: "🤖", iconBg: "rgba(139,92,246,0.12)" },
+  { id: "view-telemetry", label: "View Telemetry", icon: "📊", iconBg: "rgba(20,184,166,0.12)" },
+  { id: "review-tasks", label: "Review Tasks", icon: "📋", iconBg: "rgba(245,158,11,0.12)" },
 ];
 
 interface ActionButtonProps {
@@ -36,24 +36,25 @@ function ActionButton({ action }: ActionButtonProps): ReactElement {
       }}
       style={{
         display: "flex",
-        flexDirection: "column",
         alignItems: "center",
-        justifyContent: "center",
         gap: 8,
-        padding: "16px 12px",
-        borderRadius: "var(--r-md)",
+        padding: "10px 12px",
+        borderRadius: "var(--r)",
         border: `1px solid ${hovered ? "var(--ms-border-700)" : "var(--border)"}`,
         background: hovered ? "var(--surface)" : "var(--bg-mid)",
         cursor: "pointer",
-        transition: "border-color 0.15s, background 0.15s",
+        transition: "border-color 0.15s, background 0.15s, color 0.15s",
         width: "100%",
+        fontSize: "0.8rem",
+        fontWeight: 600,
+        color: hovered ? "var(--text)" : "var(--text-2)",
       }}
     >
       <div
         style={{
           width: 24,
           height: 24,
-          borderRadius: 6,
+          borderRadius: 5,
           background: action.iconBg,
           display: "flex",
           alignItems: "center",
@@ -63,15 +64,7 @@ function ActionButton({ action }: ActionButtonProps): ReactElement {
       >
         {action.icon}
       </div>
-      <span
-        style={{
-          fontSize: "0.8rem",
-          fontWeight: 600,
-          color: "var(--text)",
-        }}
-      >
-        {action.label}
-      </span>
+      <span>{action.label}</span>
     </button>
   );
 }
@@ -84,7 +77,7 @@ export function QuickActions(): ReactElement {
         style={{
           display: "grid",
           gridTemplateColumns: "1fr 1fr",
-          gap: 10,
+          gap: 8,
         }}
       >
         {actions.map((action) => (