diff --git a/apps/web/src/app.css b/apps/web/src/app.css index 1f8ff7c2b..37a6dd404 100644 --- a/apps/web/src/app.css +++ b/apps/web/src/app.css @@ -2118,7 +2118,7 @@ a.drawer-li:hover, display: flex; align-items: center; gap: 8px; - padding: 8px 8px 0; + padding: 8px 0 0; margin-top: 6px; border-top: 1px solid var(--line); position: relative; @@ -2138,34 +2138,40 @@ a.drawer-li:hover, .sb-profile:hover { background: var(--hover); } +/* A tonal pill one step off the canvas: no ring, no shadow, content leads. */ .sb-tools { flex: 1; height: 36px; + padding: 0 14px; border: 0; - border-radius: var(--r-md); - background: var(--surface); - box-shadow: var(--raised); + border-radius: 10px; + background: var(--hover); display: inline-flex; align-items: center; - justify-content: center; - gap: 8px; + justify-content: flex-start; + gap: 10px; font: inherit; - font-size: 13.5px; + font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; transition: - box-shadow 150ms ease-out, + background-color 120ms ease, transform 160ms var(--ease-out); } +.sb-tools svg { + width: 18px; + height: 18px; + stroke-width: 2; +} .sb-tools:hover { - box-shadow: var(--raised-hover); + background: color-mix(in srgb, var(--ink) 9%, transparent); } .sb-tools:active { transform: scale(0.97); } .sb-tools[data-active="true"] { - box-shadow: 0 0 0 1.5px var(--ink); + background: color-mix(in srgb, var(--ink) 12%, transparent); } .sb-profile:focus-visible, .sb-tools:focus-visible, diff --git a/apps/web/src/pages/new-workbench-picker.tsx b/apps/web/src/pages/new-workbench-picker.tsx index e6e5ba2ee..2b1bc3a94 100644 --- a/apps/web/src/pages/new-workbench-picker.tsx +++ b/apps/web/src/pages/new-workbench-picker.tsx @@ -107,10 +107,6 @@ export function NewWorkbenchPickerRoute() { voiceUnavailable="Voice starts inside a workbench" onSend={submit} /> -

- No templates. Your co-worker asks what it needs, connects tools with you, and suggests - skills and workflows as you go. -

)} diff --git a/apps/web/src/pages/new-workbench.css b/apps/web/src/pages/new-workbench.css index 8f15aa8ec..88bac7ae4 100644 --- a/apps/web/src/pages/new-workbench.css +++ b/apps/web/src/pages/new-workbench.css @@ -18,10 +18,3 @@ outline: 2px solid var(--ring); outline-offset: 2px; } - -.new-hint { - margin: 16px 0 0; - text-align: center; - font-size: 13px; - color: var(--muted-foreground); -} diff --git a/apps/web/src/shell/chrome.css b/apps/web/src/shell/chrome.css index 2c172ee75..3a12ced5b 100644 --- a/apps/web/src/shell/chrome.css +++ b/apps/web/src/shell/chrome.css @@ -7,7 +7,7 @@ .shell-frame .shell-sidebar { background: transparent; border-right: 0; - padding: 10px 0 8px; + padding: 10px 8px 8px; } .shell-frame .shell-main { @@ -24,21 +24,34 @@ .shell-sidebar .shell-sidebar-brand-row { height: 40px; - padding: 0 10px 0 16px; + gap: 2px; + padding: 0 2px 0 8px; margin-bottom: 8px; } +.shell-sidebar .shell-sidebar-brand-row button { + width: 32px; + height: 32px; + padding: 0; +} + +.shell-sidebar .shell-sidebar-brand-row button svg { + width: 16px; + height: 16px; +} + .shell-sidebar .shell-sidebar-wordmark { padding-left: 0; } .shell-sidebar [data-slot="sidebar-panel-body"] { + margin: 0 -8px; padding: 0 8px; } .shell-sidebar .panel-stack { - gap: 14px; - padding: 4px 0; + gap: 18px; + padding: 0; } .shell-sidebar .panel-stack-group { @@ -47,6 +60,7 @@ .shell-sidebar .shell-panel-section-label { padding: 0 8px 4px; + margin-bottom: 3px; font-size: 12px; font-weight: 700; letter-spacing: 0; @@ -109,9 +123,11 @@ color: var(--ink); } -.sb-bottom .sb-menu { - left: 8px; - right: 8px; +.shell-sidebar .shell-ch-row .wb-av { + width: 20px; + height: 20px; + font-size: 11px; + font-weight: 800; } .sb-menu-head > div b { diff --git a/apps/web/src/shell/sidebar-footer.css b/apps/web/src/shell/sidebar-footer.css index 501dbe613..1788bc30d 100644 --- a/apps/web/src/shell/sidebar-footer.css +++ b/apps/web/src/shell/sidebar-footer.css @@ -1,10 +1,11 @@ -/* Canvas surface is near-white; the Tools button sits on the sunk token. */ -[data-theme="canvas"] .sb-tools { - background: var(--surface-sunk); +/* The mark is a 28px ink circle, off-center inside the 36px button like the mockup. */ +.sb-profile { + padding: 1px 6px; } -/* The profile mark is a filled ink circle with a surface-colored initial. */ -.sb-profile [role="img"] { - background: var(--ink); - color: var(--surface); +.sb-profile .wb-av { + width: 28px; + height: 28px; + font-size: 12.5px; + font-weight: 800; }