feat: Branded illustrations + actionable CTAs#1177
Open
Ugasutun wants to merge 1 commit into
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.