Merge pull request #19616 from overleaf/jel-light-touch-educational

[web] Light touch plans redesign license picker and `?` icon

GitOrigin-RevId: 071842c37e2129cf62981317f7a23b8cd5410dba

services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug

@@ -133,14 +133,14 @@ mixin plans_table(period, config)
 				)
 					.plans-table-cell-divider
 						//- all cells need 2 layers of divs for handling border and padding. See .plans-table in CSS for more details
-						div
+						.plans-table-cell-divider-content
 							b.plans-table-divider-label #{translate(featuresPerSection.dividerLabel)}
 							//- will only appear on screen width >= 768px (using CSS)
-							i.fa.fa-question-circle(
+							i.material-symbols.material-symbols-outlined.icon-sm(
 								data-toggle="tooltip"
 								title=translate(featuresPerSection.dividerInfo),
 								data-placement="top"
-							)
+							) help
 							//- will only appear on screen width < 768px (using CSS)
 							span.plans-table-divider-learn-more-container
 								span (
@@ -168,11 +168,11 @@ mixin plans_table(period, config)
 							if feature.info
 								span #{translate(feature.feature)}
 								//- will only appear on screen width >= 768px (using CSS)
-								i.fa.fa-question-circle.plans-table-feature-question-icon(
+								i.material-symbols.material-symbols-outlined.icon-sm.plans-table-feature-question-icon(
 									data-toggle="tooltip"
 									title=translate(feature.info),
 									data-placement="right"
-								)
+								) help
 								//- will only appear on screen width < 768px (using CSS)
 								span.plans-table-feature-learn-more-container
 									span (
@@ -236,9 +236,9 @@ mixin table_head_group_total_per_year(groupPlan)
 
 mixin group_plans_license_picker()
 	form.plans-license-picker-form(data-ol-plans-v2-license-picker-form)
-		.plans-v2-license-picker-select-container
+		.plans-license-picker-select-container
 			span #{translate("number_of_users_with_colon")}
-			select.plans-v2-license-picker-select(
+			select(
 				name="plans-v2-license-picker-select"
 				id="plans-v2-license-picker-select"
 				autocomplete="off"
@@ -256,7 +256,7 @@ mixin group_plans_license_picker()
 				option(value="20") 20
 				option(value="50") 50
 		.plans-v2-license-picker-educational-discount
-			label.plans-v2-license-picker-educational-discount-label(data-ol-plans-v2-license-picker-educational-discount-label)
+			label(data-ol-plans-v2-license-picker-educational-discount-label)
 				input.plans-v2-license-picker-educational-discount-checkbox(
 					type="checkbox"
 					id="license-picker-educational-discount"
@@ -269,11 +269,12 @@ mixin group_plans_license_picker()
 				)
 				span #{translate("apply_educational_discount")}
 			//- will only appear on screen width >= 768px (using CSS)
-			i.fa.fa-question-circle.plans-v2-license-picker-educational-discount-question-icon(
+			i.material-symbols.material-symbols-outlined.icon-sm(
 				data-toggle="tooltip"
 				title=translate("apply_educational_discount_info"),
 				data-placement="bottom"
-			)
+			) help
+			
 			//- will only appear on screen width < 768px (using CSS)
 			span.plans-v2-license-picker-educational-discount-learn-more-container
 				span (

services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js

@@ -78,6 +78,13 @@ export function updateMainGroupPlanPricing() {
     )
     .classList.toggle('disabled', notEligibleForEducationalDiscount)
 
+  formEl
+    .querySelector('.plans-v2-license-picker-educational-discount')
+    .classList.toggle(
+      'total-licenses-not-eligible-for-discount',
+      notEligibleForEducationalDiscount
+    )
+
   formEl.querySelector(
     '[data-ol-plans-v2-license-picker-educational-discount-input]'
   ).disabled = notEligibleForEducationalDiscount

services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less

@@ -337,91 +337,108 @@
   }
 
   .plans-license-picker-form {
-    margin-top: 25px;
+    margin-top: var(--spacing-08);
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
+    font-size: var(--font-size-03);
+    line-height: var(--line-height-03);
 
-    @media (max-width: @screen-xs-max) {
-      font-size: @font-size-small;
-      margin-top: 15px;
-      flex-direction: column;
+    .plans-license-picker-select-container {
+      span {
+        font-weight: 700;
+      }
     }
-  }
 
-  .plans-v2-license-picker-select {
-    background-color: @white;
-    border: 1px solid #cccccc;
-    width: 64px;
-    height: 30px;
-    margin: 0 @margin-sm;
-    padding-left: @padding-sm;
+    select {
+      background-color: @white;
+      border: 1px solid var(--neutral-60);
+      border-radius: var(--border-radius-base-new);
+      width: 53px;
+      height: 31px;
+      margin-left: var(--spacing-04);
+      padding: 5.5px var(--spacing-04);
+      font-size: var(--font-size-02);
+      line-height: var(--line-height-02);
 
-    @media (max-width: @screen-xs-max) {
-      margin: 0 15px;
+      @media (max-width: @screen-xs-max) {
+        margin: 0 15px;
+      }
     }
-  }
 
-  .plans-v2-license-picker-educational-discount {
-    display: flex;
-    align-items: center;
+    i {
+      margin-left: var(--spacing-04);
 
-    @media (max-width: @screen-xs-max) {
-      margin-top: 15px;
+      @media (max-width: @screen-xs-max) {
+        display: none;
+      }
     }
-  }
 
-  .plans-v2-license-picker-educational-discount-label {
-    margin-bottom: 0;
-    display: flex;
-    align-items: center;
-    font-weight: normal;
+    //- element is selected by shared JS with default variant
+    .plans-v2-license-picker-educational-discount {
+      display: flex;
+      align-items: center;
+      margin-left: var(--spacing-06);
 
-    &.disabled span {
-      color: @ol-blue-gray-2;
+      &.total-licenses-not-eligible-for-discount {
+        display: none;
+      }
+
+      @media (max-width: @screen-xs-max) {
+        margin-top: 15px;
+      }
     }
-  }
 
-  input[type='checkbox'].plans-v2-license-picker-educational-discount-checkbox {
-    margin-top: 0;
-    margin-right: @margin-sm;
+    label {
+      margin-bottom: 0;
+      display: flex;
+      align-items: center;
+      font-weight: normal;
 
-    @media (max-width: @screen-xs-max) {
-      margin-right: 25px;
-      // scale the checkbox to around 30px width and height
-      transform: scale(2.307);
+      &.disabled span {
+        color: var(--neutral-40);
+      }
     }
-  }
 
-  i.plans-v2-license-picker-educational-discount-question-icon {
-    margin-left: @margin-xs;
+    input[type='checkbox'].plans-v2-license-picker-educational-discount-checkbox {
+      margin-top: 0;
+      margin-right: var(--spacing-04);
 
-    @media (max-width: @screen-xs-max) {
-      display: none;
+      @media (max-width: @screen-xs-max) {
+        margin-right: 25px;
+        // scale the checkbox to around 30px width and height
+        transform: scale(2.307);
+      }
     }
-  }
 
-  span.plans-v2-license-picker-educational-discount-learn-more-container {
-    display: none;
+    span.plans-v2-license-picker-educational-discount-learn-more-container {
+      display: none;
 
-    @media (max-width: @screen-xs-max) {
-      margin-left: 5px;
-      display: inline;
-      // this white-space is important to ensure the "learn more" text won't get separated by a newline
-      white-space: nowrap;
+      @media (max-width: @screen-xs-max) {
+        margin-left: 5px;
+        display: inline;
+        // this white-space is important to ensure the "learn more" text won't get separated by a newline
+        white-space: nowrap;
 
-      span.plans-v2-license-picker-educational-discount-learn-more-text {
-        color: @plans-learn-more-link-color;
-      }
+        span.plans-v2-license-picker-educational-discount-learn-more-text {
+          color: @plans-learn-more-link-color;
+        }
 
-      .tooltip {
-        // force white-space to have initial value since the `white-space: nowrap` rule
-        // on .plans-v2-license-picker-educational-discount-learn-more-container selector (the current code block) above
-        // will also affect every child inside of it, including the generated tooltip
-        white-space: initial;
+        .tooltip {
+          // force white-space to have initial value since the `white-space: nowrap` rule
+          // on .plans-v2-license-picker-educational-discount-learn-more-container selector (the current code block) above
+          // will also affect every child inside of it, including the generated tooltip
+          white-space: initial;
+        }
       }
     }
+
+    @media (max-width: @screen-xs-max) {
+      font-size: var(--font-size-02);
+      margin-top: var(--spacing-06);
+      flex-direction: column;
+    }
   }
 
   .plans-table-individual,
@@ -447,7 +464,11 @@
   }
 
   .plans-table-group {
-    margin-top: 26px + @plans-highlighted-text-height-desktop;
+    margin-top: 40px + @plans-highlighted-text-height-desktop;
+
+    @media (max-width: @screen-xs-max) {
+      margin-top: 40px + @plans-highlighted-text-height-mobile;
+    }
   }
 
   .plans-table {
@@ -732,6 +753,12 @@
     tr.plans-table-divider {
       background-color: var(--neutral-10);
 
+      .plans-table-cell-divider-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
       // direct child selector to NOT affect the generated tooltip
       td > div {
         text-align: center;
@@ -1067,7 +1094,8 @@
 
     .plans-table-sticky-header-without-switch {
       margin-bottom: -107px;
-      margin-top: @plans-table-sticky-header-size;
+      margin-top: @plans-highlighted-text-height-mobile + 40px +
+        @table-border-size;
     }
 
     .plans-table-sticky-header-with-switch {