From 8285ba73e1037c3399b6d3cdc6ff5cb7e072b704 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 6 Oct 2026 12:11:16 +0000 Subject: [PATCH] Increase header and sidebar icon scale on web and mobile Raise shared --icon-sm/md/lg tokens (~25%) for web shell chrome, widen chat header action controls, and align Expo home/thread header glyphs with 44pt tap targets. Co-authored-by: cynarAI --- apps/mobile/app/index.tsx | 20 ++++++++++++-------- apps/mobile/app/thread.tsx | 6 +++--- apps/mobile/lib/appearance.ts | 6 ++++++ apps/web/src/pages/SettingsOverlay.tsx | 2 +- apps/web/src/pages/Shell.tsx | 4 ++-- packages/ui-tokens/src/index.ts | 6 +++--- packages/ui-tokens/src/tokens.css | 12 ++++++------ 7 files changed, 33 insertions(+), 23 deletions(-) diff --git a/apps/mobile/app/index.tsx b/apps/mobile/app/index.tsx index 9af0370..c0715a2 100644 --- a/apps/mobile/app/index.tsx +++ b/apps/mobile/app/index.tsx @@ -46,7 +46,7 @@ import { selectInitialSpace, selectSpace, } from "../lib/api"; -import { mobileTokens, resolveMobileAppearance } from "../lib/appearance"; +import { mobileShellIconSizes, mobileTokens, resolveMobileAppearance } from "../lib/appearance"; import { autopilotSummary } from "../lib/autopilot"; import { allowFocusPrompt, scheduleFocusPrompt } from "../lib/focus-prompt"; import { t, useI18n } from "../lib/i18n"; @@ -461,7 +461,7 @@ export default function Home() { @@ -475,7 +475,7 @@ export default function Home() { }) } > - + - + @@ -610,7 +610,11 @@ export default function Home() { }} style={({ pressed }) => [styles.spaceActions, pressed && styles.rowPressed]} > - + ) : null} @@ -1058,9 +1062,9 @@ function createHomeStyles() { gap: 12, }, circleButton: { - width: 40, - height: 40, - borderRadius: 20, + width: 44, + height: 44, + borderRadius: 22, backgroundColor: native.fillPressed, alignItems: "center", justifyContent: "center", diff --git a/apps/mobile/app/thread.tsx b/apps/mobile/app/thread.tsx index 086c3ae..4153099 100644 --- a/apps/mobile/app/thread.tsx +++ b/apps/mobile/app/thread.tsx @@ -101,7 +101,7 @@ import { shouldApplyMobileThreadRefresh, subscribeThread, } from "../lib/api"; -import { mobileTokens } from "../lib/appearance"; +import { mobileShellIconSizes, mobileTokens } from "../lib/appearance"; import { type MobileArtifactTarget, openMobileArtifact } from "../lib/artifact-open"; import { confirmDeleteBot } from "../lib/bot-lifecycle"; import { cancelFocusPrompt, focusPromptThreadActive } from "../lib/focus-prompt"; @@ -585,7 +585,7 @@ function Thread() { @@ -594,7 +594,7 @@ function Thread() { diff --git a/apps/mobile/lib/appearance.ts b/apps/mobile/lib/appearance.ts index 97232ab..48f9de0 100644 --- a/apps/mobile/lib/appearance.ts +++ b/apps/mobile/lib/appearance.ts @@ -60,6 +60,12 @@ export function mobileTokens( return tokensForAppearance(resolveMobileAppearance(preference, scheme)); } +/** Header and inbox nav glyphs — aligned with web `--icon-*` scale (~25% larger). */ +export const mobileShellIconSizes = { + md: 22, + lg: 26, +} as const; + export function subscribeAppearance(listener: () => void): () => void { listeners.add(listener); return () => { diff --git a/apps/web/src/pages/SettingsOverlay.tsx b/apps/web/src/pages/SettingsOverlay.tsx index d757994..1236e3a 100644 --- a/apps/web/src/pages/SettingsOverlay.tsx +++ b/apps/web/src/pages/SettingsOverlay.tsx @@ -195,7 +195,7 @@ export function SettingsOverlay({ : "text-muted-foreground hover:bg-accent hover:text-foreground" }`} > - + {item.label} ); diff --git a/apps/web/src/pages/Shell.tsx b/apps/web/src/pages/Shell.tsx index 3262b28..ddec27f 100644 --- a/apps/web/src/pages/Shell.tsx +++ b/apps/web/src/pages/Shell.tsx @@ -3232,7 +3232,7 @@ export function ShellPage() { aria-label={t`Browser`} onClick={() => setPanel(panel === "browser" ? null : "browser")} data-active={panel === "browser" ? "" : undefined} - className="app-no-drag rk-touch-target grid h-[30px] w-[34px] place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent" + className="app-no-drag rk-touch-target grid size-control-sm min-h-control-sm min-w-control-sm place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent" > @@ -3251,7 +3251,7 @@ export function ShellPage() { } }} data-active={panel === "computer" ? "" : undefined} - className="app-no-drag rk-touch-target grid h-[30px] w-[34px] place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent" + className="app-no-drag rk-touch-target grid size-control-sm min-h-control-sm min-w-control-sm place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent" > diff --git a/packages/ui-tokens/src/index.ts b/packages/ui-tokens/src/index.ts index 459745e..e8daadc 100644 --- a/packages/ui-tokens/src/index.ts +++ b/packages/ui-tokens/src/index.ts @@ -165,9 +165,9 @@ export const scaleTokens = { lineHeightBody: "1.5", lineHeightReading: "1.65", lineHeightTight: "1.3", - iconSm: "1rem", - iconMd: "1.125rem", - iconLg: "1.25rem", + iconSm: "1.25rem", + iconMd: "1.375rem", + iconLg: "1.5rem", controlHeightXs: "1.75rem", controlHeightSm: "2.25rem", controlHeightMd: "2.5rem", diff --git a/packages/ui-tokens/src/tokens.css b/packages/ui-tokens/src/tokens.css index cb1e40f..8644d88 100644 --- a/packages/ui-tokens/src/tokens.css +++ b/packages/ui-tokens/src/tokens.css @@ -46,9 +46,9 @@ --line-height-body: 1.5; --line-height-reading: 1.65; --line-height-tight: 1.3; - --icon-sm: 1rem; - --icon-md: 1.125rem; - --icon-lg: 1.25rem; + --icon-sm: 1.25rem; + --icon-md: 1.375rem; + --icon-lg: 1.5rem; --control-height-xs: 1.75rem; --control-height-sm: 2.25rem; --control-height-md: 2.5rem; @@ -108,9 +108,9 @@ --line-height-body: 1.5; --line-height-reading: 1.65; --line-height-tight: 1.3; - --icon-sm: 1rem; - --icon-md: 1.125rem; - --icon-lg: 1.25rem; + --icon-sm: 1.25rem; + --icon-md: 1.375rem; + --icon-lg: 1.5rem; --control-height-xs: 1.75rem; --control-height-sm: 2.25rem; --control-height-md: 2.5rem;