From e91fc80bbcdfdd11e79ca5334c5922aed91f9d7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?= <35082514+alezmad@users.noreply.github.com> Date: Sun, 5 Apr 2026 15:15:53 +0100 Subject: [PATCH] =?UTF-8?q?fix(web):=20emoji=20=E2=86=92=20inline=20SVG=20?= =?UTF-8?q?icons=20for=20claude.ai-style=20visual=20consistency?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Anthropic design language is icon-only, no emoji. User flagged that claude-intercom components (and copy I wrote) were leaning on emoji decoration. Swept all user-visible emojis in apps/web + packages/ui. Changes: - meshes/new onboarding banner: "Welcome to claudemesh πŸ‘‹" β†’ drop the wave, text stands alone - meshes/[id]/invite banner: "πŸŽ‰ Mesh created" β†’ "Mesh created" - demo-dashboard script message: "thanks πŸ™" β†’ "thanks." (inline prose) - MeshStream message-type chips: replaced the ⟐ / ← / β†’ unicode glyphs with proper inline SVG icons (10Γ—10 stroke paths). Each chip now carries: plus-sign for broadcast, up-arrow for hand-raise, right-arrow for direct. Same claude-orange / emerald / neutral coloring, same typography β€” just geometry instead of text symbols. Nothing swapped to Lucide React imports yet β€” Icons barrel in packages/ui/web only exports a subset (Circle, Check, MessageCircle, Sparkles, Megaphone), and the four glyphs we needed were simpler as inline SVG than adding barrel exports + per-component import plumbing. If emojiβ†’Lucide fully lands, we'll add the rest to the Icons barrel in one pass. Skipped per PM spec: TTS announcements, commit messages, code comments, logs β€” not user-visible. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../(user)/meshes/[id]/invite/page.tsx | 2 +- .../dashboard/(user)/meshes/new/page.tsx | 2 +- .../marketing/home/demo-dashboard-script.ts | 2 +- .../modules/marketing/home/mesh-stream.tsx | 32 ++++++++++++++++--- 4 files changed, 31 insertions(+), 7 deletions(-) diff --git a/apps/web/src/app/[locale]/dashboard/(user)/meshes/[id]/invite/page.tsx b/apps/web/src/app/[locale]/dashboard/(user)/meshes/[id]/invite/page.tsx index dbc1138..032ddf0 100644 --- a/apps/web/src/app/[locale]/dashboard/(user)/meshes/[id]/invite/page.tsx +++ b/apps/web/src/app/[locale]/dashboard/(user)/meshes/[id]/invite/page.tsx @@ -27,7 +27,7 @@ export default async function InvitePage({ {isOnboarding && (

- πŸŽ‰ Mesh created + Mesh created

Now generate your first invite link to share with a teammate β€” or diff --git a/apps/web/src/app/[locale]/dashboard/(user)/meshes/new/page.tsx b/apps/web/src/app/[locale]/dashboard/(user)/meshes/new/page.tsx index a9c0ed3..47724d9 100644 --- a/apps/web/src/app/[locale]/dashboard/(user)/meshes/new/page.tsx +++ b/apps/web/src/app/[locale]/dashboard/(user)/meshes/new/page.tsx @@ -24,7 +24,7 @@ export default async function NewMeshPage({ {isOnboarding && (

- Welcome to claudemesh πŸ‘‹ + Welcome to claudemesh

Create your first mesh in 10 seconds. A mesh is the space where diff --git a/apps/web/src/modules/marketing/home/demo-dashboard-script.ts b/apps/web/src/modules/marketing/home/demo-dashboard-script.ts index 2ee02f4..29bd073 100644 --- a/apps/web/src/modules/marketing/home/demo-dashboard-script.ts +++ b/apps/web/src/modules/marketing/home/demo-dashboard-script.ts @@ -93,7 +93,7 @@ export const SCRIPT: DemoMessage[] = [ from: "bob-desktop", to: "alice-laptop", type: "direct", - text: "saved me. applying now. thanks πŸ™", + text: "saved me. applying now. thanks.", ciphertext: "DYtZ+j0v4eB=.xNtP8qU5rM1aKw6cH…", }, { diff --git a/apps/web/src/modules/marketing/home/mesh-stream.tsx b/apps/web/src/modules/marketing/home/mesh-stream.tsx index 06e6294..1a1e21b 100644 --- a/apps/web/src/modules/marketing/home/mesh-stream.tsx +++ b/apps/web/src/modules/marketing/home/mesh-stream.tsx @@ -39,26 +39,49 @@ const STATUS_DOT: Record = { const TYPE_CHIP: Record = { ask_mesh: { - label: "⟐ broadcast", + label: "broadcast", className: "border-[var(--cm-border)] bg-[var(--cm-bg)] text-[var(--cm-clay)]", }, broadcast: { - label: "⟐ broadcast", + label: "broadcast", className: "border-[var(--cm-border)] bg-[var(--cm-bg)] text-[var(--cm-clay)]", }, self_nominate: { - label: "← hand-raise", + label: "hand-raise", className: "border-emerald-500/40 bg-emerald-500/10 text-emerald-500", }, direct: { - label: "β†’ direct", + label: "direct", className: "border-[var(--cm-border)] bg-[var(--cm-bg)] text-[var(--cm-fg-secondary)]", }, }; +const TYPE_ICON: Record = { + ask_mesh: ( + + + + ), + broadcast: ( + + + + ), + self_nominate: ( + + + + ), + direct: ( + + + + ), +}; + const surfaceGlyph = (s?: StreamPeer["surface"]) => { if (s === "phone") return ( @@ -272,6 +295,7 @@ export const MeshStream = ({ TYPE_CHIP[m.type].className } > + {TYPE_ICON[m.type]} {TYPE_CHIP[m.type].label} {m.createdAt && (