From b746926ba73a9027f56fc54ea191bec760315c2d Mon Sep 17 00:00:00 2001 From: Antoine Clausse Date: Thu, 16 Apr 2026 16:23:44 +0200 Subject: [PATCH] [web] Address design feedback on pricing cards (#32844) * Add AI allowance tooltip copy and wire into plans feature comparison Adds per-tier tooltip strings for basic, increased, and max AI allowance. Splits the ai_allowance feature entry in the individual and student plan configs into separate per-tier objects so each can carry its own featureExplanation key. Co-Authored-By: Claude Sonnet 4.6 * Fix plans page styling: section padding, badge line-height, checkbox accent-color - Replace padding-block shorthand with explicit start/end on .plans-and-pricing-section to avoid overriding the bottom spacing - Add missing line-height to .price-plan-card-badge - Add accent-color to .plans-educational-discount-checkbox Co-Authored-By: Claude Sonnet 4.6 * Only render geo-banner-container when there is content Previously, .geo-banner-container was always rendered even when no banners or errors were present, which introduced an unnecessary empty wrapper in the DOM. Also moves the payment error conditions to be top-level siblings (removing the `if paymentError` indirection) to make each case independently explicit. Co-Authored-By: Claude Sonnet 4.6 * Migrate plans page to .plans-2026 gap-based layout Replaces .plans-new-design's per-section padding rules with a single flex column + gap on .plans-2026, letting the layout engine handle spacing uniformly. Removes the now-redundant .plans-and-pricing-section padding block, .plans-cards-content padding, and .plans-new-design-content-spacing class from the heading row. Co-Authored-By: Claude Sonnet 4.6 --------- Co-authored-by: Claude Sonnet 4.6 GitOrigin-RevId: 3a112c46759419ef0bc994dfb88498fc19b18c10 --- .../stylesheets/pages/plans-2026.scss | 32 +++++-------------- services/web/locales/en.json | 3 ++ 2 files changed, 11 insertions(+), 24 deletions(-) diff --git a/services/web/frontend/stylesheets/pages/plans-2026.scss b/services/web/frontend/stylesheets/pages/plans-2026.scss index 240512a29b..da58f06f82 100644 --- a/services/web/frontend/stylesheets/pages/plans-2026.scss +++ b/services/web/frontend/stylesheets/pages/plans-2026.scss @@ -1,23 +1,9 @@ -// Styles for plans_2026.pug (plans-2026-phase-1 split test). -// All rules are scoped to .plans-new-design or sub-selectors that -// only appear in plans_2026.pug, so plans.pug is unaffected. - -.plans-new-design { - .plans-and-pricing-section { - padding-block: var(--spacing-09); - - &:first-of-type { - padding-block-start: var(--spacing-10); - } - - @include media-breakpoint-up(md) { - padding-block: var(--spacing-13); - - &:first-of-type { - padding-block-start: var(--spacing-15); - } - } - } +.plans-2026 { + display: flex; + flex-direction: column; + gap: var(--spacing-14); + padding-top: calc($header-height + var(--spacing-15)); + padding-bottom: var(--spacing-15); // Period toggle switch — used only by _plans-period-toggle.pug .plans-period-switch-wrapper { @@ -88,10 +74,6 @@ .plans-cards-section { background-color: var(--bg-light-primary); - .plans-cards-content { - padding-block: var(--spacing-08); - } - .plans-cards-toggles { align-items: center; display: flex; @@ -244,6 +226,7 @@ border-radius: var(--border-radius-medium); color: var(--neutral-90); font-size: var(--font-size-03); + line-height: var(--line-height-02); left: 50%; padding: var(--spacing-04) var(--spacing-06); position: absolute; @@ -406,6 +389,7 @@ } .plans-educational-discount-checkbox { + accent-color: var(--green-50); background-color: var(--bg-light-primary); border: 1px solid var(--border-primary); border-radius: var(--border-radius-base); diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 7669310d7c..6f0485edae 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -248,6 +248,7 @@ "back_to_your_projects": "Back to your projects", "basic": "Basic", "basic_ai_allowance": "Basic AI allowance", + "basic_ai_allowance_tooltip": "5 AI uses per day. Enough for the occasional nudge — fix an error, check a formula, or get unstuck when you need it most.", "basic_compile_time": "Basic compile time", "basic_compile_timeout": "Basic compile timeout", "basic_compile_timeout_on_fast_servers": "Basic compile timeout on fast servers", @@ -1153,6 +1154,7 @@ "includes": "includes", "increase_indent": "Increase indentation", "increased_ai_allowance": "Increased AI allowance", + "increased_ai_allowance_tooltip": "10 AI uses per day. Enough for most researchers and writers. Use it to catch errors, tidy formatting, and sharpen your writing throughout the day.", "increased_compile_timeout": "Increased compile timeout", "individuals": "Individuals", "info": "Info", @@ -1460,6 +1462,7 @@ "math_display": "Math Display", "math_inline": "Math Inline", "max_ai_allowance": "Max AI allowance", + "max_ai_allowance_tooltip": "Unlimited AI usage. Use AI as much as you like — just write, and let Overleaf handle the rest. Fair usage applies.", "maximum_files_uploaded_together": "Maximum __max__ files uploaded together", "may": "May", "maybe_later": "Maybe later",