Merge pull request #19360 from overleaf/mf-new-plans-page-nondiscounted-price-on-top

[web] New plans page - move nondiscounted price on top of the price

GitOrigin-RevId: 411e07a0d6646b922cb3104de091f260da9efb89

services/web/frontend/stylesheets/app/plans/plans-new-design.less

@@ -1,4 +1,22 @@
-@import './plans-new-variables.less';
+@z-index-plans-new-tabs: 1;
+@z-index-plans-new-tabs-content: 0;
+
+@highlighted-heading-line-height: (@line-height-03 / 1rem) * 16px; // convert to px
+@highlighted-heading-padding-vertical: @spacing-02;
+@highlighted-heading-height: (
+  @highlighted-heading-line-height + (2 * @highlighted-heading-padding-vertical)
+);
+
+@switcher-container-width: 270px;
+@switcher-container-height: 44px;
+@switcher-container-border-radius: @switcher-container-height / 2;
+@switcher-container-padding: 6px;
+@switcher-container-margin-bottom: @highlighted-heading-height + @spacing-10;
+@switcher-padding-vertical: 2px;
+@switcher-height: @switcher-container-height - 2 * @switcher-container-padding;
+@switcher-border-radius: @switcher-height / 2;
+
+@nondiscounted-price-element-height: var(--line-height-02);
 
 .plans-new-design {
   padding-top: calc(var(--spacing-16) + var(--header-height));
@@ -337,60 +355,43 @@
     }
 
     .plans-new-table-header-grid-container {
-      display: grid;
+      display: flex;
-      grid-column-gap: var(--spacing-04);
+      flex-direction: column;
-      // priceUnitTotal is an optional row
+      align-items: center;
-      grid-template:
+
-        'nonDiscountedPrice price .' 2fr
+      s {
-        'priceUnit priceUnit priceUnit' 1fr
+        font-size: var(--font-size-02);
-        'priceUnitTotal priceUnitTotal priceUnitTotal' auto / 1fr 1fr 1fr;
+        line-height: @nondiscounted-price-element-height;
+        color: var(--neutral-40);
+        font-weight: 600;
+      }
 
       .plans-new-table-header-price {
-        grid-area: price;
-        justify-self: center;
-
         font-size: var(--font-size-08);
         font-weight: 600;
         line-height: var(--line-height-07);
         color: var(--neutral-90);
+
+        // will affect the element if header does not have nondiscounted price
+        &:first-child {
+          margin-top: @nondiscounted-price-element-height;
+        }
       }
 
       .plans-new-table-header-price-unit {
-        grid-area: priceUnit;
-        justify-self: center;
-
         font-size: var(--font-size-02);
         line-height: var(--line-height-02);
       }
 
       .plans-new-table-header-price-unit-total {
-        grid-area: priceUnitTotal;
-        justify-self: center;
-
         font-size: var(--font-size-01);
         line-height: var(--line-height-01);
       }
 
-      .plans-new-table-header-nondiscounted-price {
-        grid-area: nonDiscountedPrice;
-        justify-self: end;
-        align-self: end;
-
-        font-size: var(--font-size-04);
-        line-height: var(--line-height-05);
-        color: var(--neutral-40);
-        font-weight: 600;
-      }
-
       .plans-new-table-header-icon {
-        // this element should only be placed in the grid
-        // where it's the only element in the grid
-        // the grid-area below will make sure that it covers the whole grid
-        grid-area: ~'span 2 / span 3';
-        justify-self: center;
-
         font-size: 56px;
         color: var(--neutral-90);
+        margin-top: @nondiscounted-price-element-height;
       }
     }
 

services/web/frontend/stylesheets/app/plans/plans-new-variables.less

@@ -1,17 +0,0 @@
-@z-index-plans-new-tabs: 1;
-@z-index-plans-new-tabs-content: 0;
-
-@highlighted-heading-line-height: (@line-height-03 / 1rem) * 16px; // convert to px
-@highlighted-heading-padding-vertical: @spacing-02;
-@highlighted-heading-height: (
-  @highlighted-heading-line-height + (2 * @highlighted-heading-padding-vertical)
-);
-
-@switcher-container-width: 270px;
-@switcher-container-height: 44px;
-@switcher-container-border-radius: @switcher-container-height / 2;
-@switcher-container-padding: 6px;
-@switcher-container-margin-bottom: @highlighted-heading-height + @spacing-10;
-@switcher-padding-vertical: 2px;
-@switcher-height: @switcher-container-height - 2 * @switcher-container-padding;
-@switcher-border-radius: @switcher-height / 2;

services/web/locales/en.json

@@ -372,6 +372,7 @@
   "currency": "Currency",
   "current_file": "Current file",
   "current_password": "Current Password",
+  "current_price": "Current price",
   "current_session": "Current Session",
   "currently_seeing_only_24_hrs_history": "You’re currently seeing the last 24 hours of changes in this project.",
   "currently_signed_in_as_x": "Currently signed in as <0>__userEmail__</0>.",
@@ -1327,6 +1328,7 @@
   "organization_or_company_name": "Organization or company name",
   "organization_or_company_type": "Organization or company type",
   "organize_projects": "Organize Projects",
+  "original_price": "Original price",
   "other": "Other",
   "other_actions": "Other Actions",
   "other_logs_and_files": "Other logs and files",