Selaa lähdekoodia

[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 <noreply@anthropic.com>

* 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 <noreply@anthropic.com>

* 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 <noreply@anthropic.com>

* 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 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
GitOrigin-RevId: 3a112c46759419ef0bc994dfb88498fc19b18c10
Antoine Clausse 3 kuukautta sitten
vanhempi
sitoutus
b746926ba7

+ 8 - 24
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);

+ 3 - 0
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",