feat(preview-server): ui improvements

[zehfernandes]

CleanShot.2025-11-06.at.17.58.31.mp4

---

Summary by cubic

Polished the preview server topbar and icons for a cleaner look and better usability. Centers the view toggle, adds an animated dark mode toggle, and updates the sun/moon icons.

• UI Improvements

  • Centered the view-mode toggle on large screens.
  • Moved the dark mode toggle before size controls and added a smooth moon/sun swap animation.
  • Updated sun and moon to stroked icons for visual consistency.
  • Preset highlight in size controls now checks width only, so it stays selected when height changes.

• Bug Fixes

  • Fixed active state styling by using 'preview' instead of 'desktop' so the correct tab is highlighted.

^{Written for commit c5ca418. Summary will update automatically on new commits.}

[changeset-bot]

🦋 Changeset detected

Latest commit: c5ca418

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@react-email/preview-server	Patch
react-email	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
react-email	Ready	Preview	Comment	Nov 7, 2025 11:20am
react-email-demo	Ready	Preview	Comment	Nov 7, 2025 11:20am

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/resend/react-email/@react-email/preview-server@2656

commit: c5ca418

[cubic-dev-ai]

1 issue found across 6 files

Prompt for AI agents (all 1 issues)

Understand the root cause of the following 1 issues and fix them.


<file name="packages/preview-server/src/components/topbar/view-size-controls.tsx">

<violation number="1" location="packages/preview-server/src/components/topbar/view-size-controls.tsx:91">
This highlight should only appear when both width and height match the preset; otherwise the UI shows the preset as active even after customizing height.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}