Skip to content

feat: Branded illustrations + actionable CTAs#1177

Open
Ugasutun wants to merge 1 commit into
Stellar-Mail:mainfrom
Ugasutun:main
Open

feat: Branded illustrations + actionable CTAs#1177
Ugasutun wants to merge 1 commit into
Stellar-Mail:mainfrom
Ugasutun:main

Conversation

@Ugasutun

Copy link
Copy Markdown

Closes #108

Summary
Replaces the generic, placeholder "nothing here" empty panels with a shared, reusable empty-state illustration system across Inbox, Requests, Proofs, Receipts, Archive, Spam, and Search Results. Each view now gets a distinct, on-brand illustration paired with contextual copy and a clear call-to-action.

Scope

Built reusable empty-state illustration primitives entirely from inline SVG + CSS — no bitmap/raster assets, so there's no added bundle weight from images.
Wrote custom copy and a clear CTA for each major empty folder, nudging the user toward a useful next action rather than leaving them stuck.
Added subtle ambient motion (gentle float/pulse) to bring the illustrations to life, fully disabled under prefers-reduced-motion: reduce for accessibility.

Acceptance Criteria

Empty states guide the user toward a useful next action (not just a static "nothing here" message)
Illustrations load instantly and do not bloat the bundle (verified via inline SVG approach, no image assets)
Search empty state preserves the user's query and suggests relevant filters instead of a dead end

Implementation Notes

Illustrations are theme-aware via CSS variables, so they adapt automatically to light/dark mode without separate asset sets.
Motion is intentionally subtle (float/pulse) and respects prefers-reduced-motion to avoid motion-sensitivity issues.
Goal: make unfinished/empty folders feel intentionally designed rather than like a forgotten or broken state.

Testing

Verified each empty state (Inbox, Requests, Proofs, Receipts, Archive, Spam, Search) renders its correct illustration, copy, and CTA.
Confirmed motion stops correctly when prefers-reduced-motion: reduce is set at the OS/browser level.
Confirmed search empty state retains the typed query and surfaces filter suggestions.
Checked bundle size impact — no new image assets added; illustrations are inline SVG.

Notes for Reviewers

Since these are shared primitives, a single component change updates the look across all empty states — please check that each folder's specific copy/CTA still reads naturally with the shared illustration shapes.
Flag if any illustration doesn't feel sufficiently distinct per folder (e.g. Spam vs Archive) — happy to tweak shape/color per view if needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

app-ui: add branded empty-state illustrations with CSS/SVG

1 participant