Repository navigation
The MailPoet window earns its brand - #42
Merged
Merged
Conversation
Three fixes from design review of #41, one of them structural. The window would not scroll: `.atfm` was missing from the shared window-root rule, so it never got the flex column and bounded height that let its body own the scrolling — the *window body* scrolled instead, and the shell-scroll pin snapped it back to the top on every wheel tick. The root joins the rule, the body scrolls, the pin now protects instead of fighting. The borrowed logo goes: MailPoet's real wordmark and symbol ship as bundled brand assets, which also lets the window introduce MailPoet properly before it is installed — exactly when the introduction matters. The wordmark carries a proper hero now: warm orange gradient glows, the mark large on a lit white chip, "Turn submissions into subscribers", and a status pill with a live dot. And the window becomes a place worth reading: three cards on why MailPoet is worth meeting (the visual editor, double opt-in, the free tier), doors into their features, guides and pricing, a three-step strip for how connecting works, and form cards wearing the MailPoet symbol — full colour when connected, greyed while not — with the editor grouped under three captions: where they land, who they are, when to subscribe. The `consent` field type joins the opt-in picker, which the QA form showed it was missing from. One CSS lesson recorded where it bit: `overflow: hidden` on a grid item zeroes its automatic minimum size, and the hero collapsed to its padding under it — the gradients it guarded are backgrounds, which cannot overflow anything. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0119U4sRRWGcTQdwYreTwpAp
"Checking MailPoet…" was a corner spinner in an empty window. It is a landing now: the MailPoet symbol breathing on a lit chip in the middle of the window, the words beneath it — and the same centered surface carries the error sentence if the one request fails. Reduced motion stills the breath. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0119U4sRRWGcTQdwYreTwpAp
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.
Fixes from design review of #41
1. The scroll bug (structural).
.atfmwas missing from the shared window-root rule, so the pane never got the flex column + bounded height that let its body own the scrolling. The window body scrolled instead, and the shell-scroll pin snapped it back to the top on every wheel tick — the "jumpy back to top". The root joins the rule; the pane scrolls and holds.2. Real brand assets. The small borrowed logo is replaced by MailPoet's actual wordmark + symbol, bundled under
assets/img/(they ship —assets/is in the ships list). This also lets the window introduce MailPoet before it's installed, when the introduction matters most.3. The window becomes a place worth reading.
consentfield type joins the opt-in picker (the QA form exposed the gap).One CSS lesson recorded in a comment where it bit:
overflow: hiddenon a grid item zeroes its automatic minimum size — the hero collapsed to its padding under it.Verified live on 8889: scroll holds, hero renders, connected/unconnected marks correct, editor flow works.
tscclean, 372 vitest pass, PHPCS clean; all 12 bundles rebuilt.Not merging — awaiting Daniel's review.
🤖 Generated with Claude Code
https://claude.ai/code/session_0119U4sRRWGcTQdwYreTwpAp