Skip to content

🎨 Improved the layout of the Portal email preferences screen - #31125

Open
weylandswart wants to merge 1 commit into
mainfrom
weyland-des-1242-portal-unsubscribe-screen-looks-shit
Open

weylandswart wants to merge 1 commit into
mainfrom
weyland-des-1242-portal-unsubscribe-screen-looks-shit

Conversation

@weylandswart

Copy link
Copy Markdown
Contributor

Closes https://linear.app/ghost/issue/DES-1242/portal-unsubscribe-screen-looks-shit

Improves the look of the email preferences modal. Copy and behaviour are unchanged.

Before After
image image

ref https://linear.app/ghost/issue/DES-1242/portal-unsubscribe-screen-looks-shit

The unsubscribe and email preferences screen had uneven spacing and a
stack of footer text under the Unsubscribe button. The confirmation
message now sits 20px under the title, "Not receiving emails?" is the
last row of the list, and the paid subscription note sits directly
under the button. Without the message, the title-to-list gap stays at
40px to match Portal's other detail screens. Copy and behaviour are
unchanged.
@nx-cloud

nx-cloud Bot commented Sep 30, 2026 •

Copy link
Copy Markdown

🤖 Nx Cloud AI Fix

Ensure the fix-ci command is configured to always run in your CI pipeline to get automatic fixes in future runs. For more information, please see https://nx.dev/ci/features/self-healing-ci


View your CI Pipeline Execution ↗ for commit 654c28f

Command Status Duration Result
nx run-many -t test:unit -p @tryghost/portal ✅ Succeeded 1m 25s View ↗
nx run ghost-monorepo:lint:boundaries ✅ Succeeded 30s View ↗
nx run-many -t lint -p @tryghost/portal,ghost-m... ✅ Succeeded 10s View ↗
nx run @tryghost/e2e:test:fixtures ✅ Succeeded 1s View ↗
nx run @tryghost/admin:build ✅ Succeeded 7s View ↗
nx run-many --target=build --projects=tag:publi... ✅ Succeeded 3s View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗


☁️ Nx Cloud last updated this comment at 2026-09-30 10:17:03 UTC

@coderabbitai

coderabbitai Bot commented Sep 30, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository: TryGhost/Ghost/.coderabbit.yaml

Review profile: QUIET

Plan: Advanced

Run ID: cb447110-25d1-4774-a9ab-16e3edcd715b

📥 Commits

Reviewing files that changed from the base of the PR and between 8f6727f and 654c28f.

📒 Files selected for processing (3)
  • apps/portal/src/components/common/newsletter-management.jsx
  • apps/portal/src/components/frame.styles.js
  • apps/portal/src/components/pages/email-suppressed-page.css
💤 Files with no reviewable changes (1)
  • apps/portal/src/components/pages/email-suppressed-page.css

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

📜 Recent review details
⏰ Context from checks skipped due to timeout. (9)
  • GitHub Check: Stripe fixture checks
  • GitHub Check: Unit tests (Node 24.20.0)
  • GitHub Check: Build Admin
  • GitHub Check: Build Docker Images
  • GitHub Check: Unit tests (Node 22.23.3)
  • GitHub Check: Build E2E Public App Assets
  • GitHub Check: Check app version bump
  • GitHub Check: Lint
  • GitHub Check: Analyze (javascript-typescript)
🧰 Additional context used
📓 Path-based instructions (6)
These are independent public UMD/CDN surfaces, not embedded Shade apps.

⚙️ CodeRabbit configuration file

Files:

  • apps/portal/src/components/frame.styles.js
  • apps/portal/src/components/common/newsletter-management.jsx
New source files must be TypeScript: flag new JS files as a required change unless exempt (DB migrations, apps/ember-admin/, tool/config files, scripts/, docker/, generated code).

⚙️ CodeRabbit configuration file

Files:

  • apps/portal/src/components/frame.styles.js
  • apps/portal/src/components/common/newsletter-management.jsx
Prioritise concrete correctness, security, data-integrity, compatibility, and regression risks.

⚙️ CodeRabbit configuration file

Files:

  • apps/portal/src/components/frame.styles.js
  • apps/portal/src/components/common/newsletter-management.jsx
Source excerpt: This extracts source strings, updates all locale files, and synchronizes `packages/i18n/locales/context.json`.

📄 CodeRabbit inference engine (docs/practices/internationalization.md)

Files:

  • apps/portal/src/components/frame.styles.js
  • apps/portal/src/components/common/newsletter-management.jsx
Source excerpt: Built Admin assets are copied into `ghost/core/core/built/admin/` for the Ghost release.

📄 CodeRabbit inference engine (docs/codebase/monorepo-structure.md)

Files:

  • apps/portal/src/components/frame.styles.js
  • apps/portal/src/components/common/newsletter-management.jsx
Source excerpt: Errors are part of the product experience.

📄 CodeRabbit inference engine (docs/practices/error-handling.md)

Files:

  • apps/portal/src/components/frame.styles.js
  • apps/portal/src/components/common/newsletter-management.jsx
🔇 Additional comments (2)
apps/portal/src/components/common/newsletter-management.jsx (1)

242-258: LGTM!

Also applies to: 262-262, 286-286, 312-315, 345-345, 362-362

apps/portal/src/components/frame.styles.js (1)

737-760: LGTM!

Also applies to: 763-765, 773-780


Walkthrough

The email preferences view now displays the email-receiving FAQ link in the preferences list when email suppression is active and preferences are enabled. The notification appears before the close button. The paid-member message appears in the unsubscribe button container. Styles update the help row and unsubscribe note and remove secondary footer styling.

Suggested reviewers: 9larsons

Priority: ⬇️ Low

Change: Bug fix

🚥 Pre-merge checks | ✅ 6
✅ Passed checks (6 passed)
Check name Status Explanation
Description check ✅ Passed The description clearly explains that the pull request improves the email preferences modal layout while preserving copy and behavior. It also provides visual comparisons and links the related issue.
Title check ✅ Passed The title clearly and concisely summarizes the main change: an improved layout for the Portal email preferences screen.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Type-Safe Boundaries ✅ Passed PASS. The PR changes JSX layout, CSS classes, and an existing doAction('switchPage', ...) UI action. It does not add HTTP, API, environment, database, filesystem, queue, or event boundary consumptio…
New Files Are Typescript ✅ Passed The pull request adds no files. The authoritative diff lists only three modified pre-existing files: newsletter-management.jsx, frame.styles.js, and email-suppressed-page.css. Therefore, it does…
✨ Finishing Touches
📝 Generate docstrings
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR

Comment @coderabbitai help to get the list of available commands.

This branch has not been deployed

No deployments
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.

1 participant