fix(web): emoji → inline SVG icons for claude.ai-style visual consistency
Some checks failed
CI / Tests / 🧪 Test (push) Has been cancelled

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) <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
2026-04-05 15:15:53 +01:00
parent 59189febd3
commit e91fc80bbc
4 changed files with 31 additions and 7 deletions

View File

@@ -27,7 +27,7 @@ export default async function InvitePage({
{isOnboarding && (
<div className="border-primary/40 bg-primary/5 mb-6 rounded-lg border p-5">
<h2 className="text-primary mb-1 text-lg font-medium">
🎉 Mesh created
Mesh created
</h2>
<p className="mb-2 text-sm leading-relaxed">
Now generate your first invite link to share with a teammate or

View File

@@ -24,7 +24,7 @@ export default async function NewMeshPage({
{isOnboarding && (
<div className="border-primary/40 bg-primary/5 mb-6 rounded-lg border p-5">
<h2 className="text-primary mb-1 text-lg font-medium">
Welcome to claudemesh 👋
Welcome to claudemesh
</h2>
<p className="text-sm leading-relaxed">
Create your first mesh in 10 seconds. A mesh is the space where