Merge pull request #19414 from overleaf/jel-light-touch-col-headers

[web] Update column header styling for light touch redesign of plans table

GitOrigin-RevId: d6b24f1c355256a5dcb2c75255eec610e064fd03

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

@@ -113,7 +113,8 @@ mixin plans_table(period, config)
 							+table_price_group_professional()
 						when 'group_organization'
 							.plans-table-comments-icon
-								i.fa.fa-comments-o
+								.match-non-discounted-price-alignment  
+								i.material-symbols.material-symbols-outlined(aria-hidden="true") forum
 						when 'student_free'
 							+table_head_price('free', period)
 						when 'student_student'
@@ -241,15 +242,15 @@ mixin plans_table(period, config)
 						+table_cell(feature, plan)
 
 mixin table_individual(period)
-	table.card.plans-table.plans-table-individual
+	table.plans-table.plans-table-individual
 		+plans_table(period, plansConfig.individual)
 
 mixin table_group
-	table.card.plans-table.plans-table-group
+	table.plans-table.plans-table-group
 		+plans_table('annual', plansConfig.group)
 
 mixin table_student(period)
-	table.card.plans-table.plans-table-student
+	table.plans-table.plans-table-student
 		+plans_table(period, plansConfig.student)
 
 //- free plan mixins
@@ -284,9 +285,9 @@ mixin table_price_group_collaborator()
 	.plans-table-price-container
 		s
 			+gen_localized_price_for_plan_view('collaborator', 'annual')
-		p.plans-v2-table-price
+		p.plans-table-price
 			span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator}
-		p.plans-v2-table-price-period-label
+		p.plans-table-price-period-label
 			| #{translate('per_user_year')}
 
 //- group_professional plan mixins
@@ -301,16 +302,16 @@ mixin table_price_group_professional()
 	.plans-table-price-container
 		s
 			+gen_localized_price_for_plan_view('professional', 'annual')
-		p.plans-v2-table-price
+		p.plans-table-price
 			span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional}
-		p.plans-v2-table-price-period-label
+		p.plans-table-price-period-label
 			| #{translate('per_user_year')}
 
 //- group mixins
 
 mixin table_head_group_total_per_year(groupPlan)
 	- var initialLicenseSize = '2'
-	span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price=groupPlan) #{initialLocalizedGroupPrice.price[groupPlan]}
+	span.plans-group-total-price(data-ol-plans-v2-group-total-price=groupPlan) #{initialLocalizedGroupPrice.price[groupPlan]}
 	|  
 	for licenseSize in groupPlanModalOptions.sizes
 		span(
@@ -324,7 +325,7 @@ mixin table_short_feature_list_group_organization(additionalEventSegmentation)
 		li #{translate("best_choices_companies_universities_non_profits")}
 		li #{translate("for_groups_or_site_wide")}
 		li
-			a(
+			a.inline-green-link(
 				target="_blank"
 				href="/for/contact-sales"
 				event-tracking="plans-page-click"
@@ -401,9 +402,11 @@ mixin table_head_price(plan, period)
 		if plan !== 'free' && period === 'annual'
 			s
 				+gen_localized_price_for_plan_view(plan, 'monthlyTimesTwelve')
-		p.plans-v2-table-price
+		else
+			.match-non-discounted-price-alignment  
+		p.plans-table-price
 			+gen_localized_price_for_plan_view(plan, period)
-		p.plans-v2-table-price-period-label
+		p.plans-table-price-period-label
 			if period == 'annual'
 				| #{translate("per_year")}
 			else
@@ -431,11 +434,11 @@ mixin table_cell(feature, plan)
 //- CTA mixins
 
 mixin btn_buy_individual(highlighted, eventTrackingKey, subscriptionPlan, period) 
-	a.btn.plans-v2-table-btn-buy(
+	a.btn(
 		data-ol-start-new-subscription=subscriptionPlan
 		data-ol-event-tracking-key=eventTrackingKey
 		data-ol-item-view=period
-		class=(highlighted ? 'btn-primary' : 'btn-default')
+		class=(highlighted ? 'btn-primary' : 'btn-secondary')
 	)
 		if (period === 'monthly')
 			span #{translate("try_for_free")}
@@ -444,15 +447,15 @@ mixin btn_buy_individual(highlighted, eventTrackingKey, subscriptionPlan, period
 
 mixin btn_buy_individual_free()
 	if (!getSessionUser())
-		a.btn.plans-v2-table-btn-buy(
+		a.btn(
 			href="/register"
-			class=(highlighted ? 'btn-primary' : 'btn-default')
+			class=(highlighted ? 'btn-primary' : 'btn-secondary')
 		)
 			span #{translate("try_for_free")}
 	else
-		a.btn.plans-v2-table-btn-buy.invisible(
+		a.btn.invisible(
 			aria-hidden="true"
-			class=(highlighted ? 'btn-primary' : 'btn-default')
+			class=(highlighted ? 'btn-primary' : 'btn-secondary')
 		)
 
 mixin btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
@@ -466,31 +469,31 @@ mixin btn_buy_individual_professional(highlighted, eventTrackingKey, additionalE
 		+additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'professional', period)
 
 mixin btn_buy_group_collaborator(highlighted, eventTrackingKey) 
-	a.btn.plans-v2-table-btn-buy(
+	a.btn(
 		data-ol-start-new-subscription='group_collaborator'
 		data-ol-event-tracking-key=eventTrackingKey
 		data-ol-item-view='annual'
 		data-ol-has-custom-href
 		data-ol-location='table-header'
-		class=(highlighted ? 'btn-primary' : 'btn-default')
+		class=(highlighted ? 'btn-primary' : 'btn-secondary')
 	)
 		span.hidden-desktop #{translate("customize")} 
 		span.hidden-mobile #{translate("customize_your_plan")}
 
 mixin btn_buy_group_professional(highlighted, eventTrackingKey) 
-	a.btn.plans-v2-table-btn-buy(
+	a.btn(
 		data-ol-start-new-subscription='group_professional'
 		data-ol-event-tracking-key=eventTrackingKey
 		data-ol-item-view='annual'
 		data-ol-has-custom-href
 		data-ol-location='table-header'
-		class=(highlighted ? 'btn-primary' : 'btn-default')
+		class=(highlighted ? 'btn-primary' : 'btn-secondary')
 	)
 		span.hidden-desktop #{translate("customize")} 
 		span.hidden-mobile #{translate("customize_your_plan")}
 
 mixin btn_buy_group_organization(highlighted, eventTrackingKey) 
-	a.btn.plans-v2-table-btn-buy(
+	a.btn(
 		data-ol-start-new-subscription='group_organization'
 		data-ol-event-tracking-key=eventTrackingKey
 		data-ol-item-view='annual'
@@ -498,25 +501,25 @@ mixin btn_buy_group_organization(highlighted, eventTrackingKey)
 		data-ol-location='table-header'
 		href='/for/contact-sales'
 		target='_blank'
-		class=(highlighted ? 'btn-primary' : 'btn-default')
+		class=(highlighted ? 'btn-primary' : 'btn-secondary')
 	)
 		span #{translate("contact_us_lowercase")}
 
 mixin btn_buy_student_free(highlighted)
 	if (!getSessionUser())
-		a.btn.plans-v2-table-btn-buy(
+		a.btn(
 			href="/register"
-			class=(highlighted ? 'btn-primary' : 'btn-default')
+			class=(highlighted ? 'btn-primary' : 'btn-secondary')
 		)
 			span #{translate("try_for_free")}
 
 mixin btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
-	a.btn.plans-v2-table-btn-buy(
+	a.btn(
 		data-ol-start-new-subscription='student'
 		data-ol-event-tracking-key=eventTrackingKey
 		data-ol-item-view=period
 		data-ol-location='card'
-		class=(highlighted ? 'btn-primary' : 'btn-default')
+		class=(highlighted ? 'btn-primary' : 'btn-secondary')
 	)
 		if (period === 'monthly')
 			span #{translate("try_for_free")}
@@ -528,16 +531,15 @@ mixin btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegm
 mixin additional_link_group(eventTrackingKey, additionalEventSegmentation, plan)
 	- var buttonSegmentation = plan + '-link'
 	- var segmentation = JSON.stringify(Object.assign({}, {button: buttonSegmentation, location: 'table-header'}, additionalEventSegmentation))
-	small.plans-table-th-content-additional-link
-		| #{translate("or")} 
-		a(
-			href="/for/contact-sales"
-			target="_blank"
-			event-tracking=eventTrackingKey
-			event-tracking-mb="true"
-			event-tracking-trigger="click"
-			event-segmentation=segmentation
-		) #{translate("contact_us_lowercase")}
+
+	a.btn.btn-bg-ghost(
+		href="/for/contact-sales"
+		target="_blank"
+		event-tracking=eventTrackingKey
+		event-tracking-mb="true"
+		event-tracking-trigger="click"
+		event-segmentation=segmentation
+	) #{translate("contact_us_lowercase")}
 
 mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, period)
 	- var buttonSegmentation = plan + '-link'
@@ -545,15 +547,14 @@ mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, p
 	- var itmCampaign = itm_campaign ? { itm_campaign } : {itm_campaign: 'plans'}
 	- var itmReferrer = itm_referrer ? { itm_referrer } : {}
 	- var qs = new URLSearchParams({planCode: plan, currency: recommendedCurrency, itm_content: 'card', ...itmCampaign, ...itmReferrer})
-	small.plans-table-th-content-additional-link
-		| #{translate("or")} 
-		a(
-			href=`/user/subscription/new?${qs.toString()}`
-			event-tracking=eventTrackingKey
-			event-tracking-mb="true"
-			event-tracking-trigger="click"
-			event-segmentation=segmentation
-		) #{translate("buy_now_no_exclamation_mark")}
+
+	a.btn.btn-bg-ghost(
+		href=`/user/subscription/new?${qs.toString()}`
+		event-tracking=eventTrackingKey
+		event-tracking-mb="true"
+		event-tracking-trigger="click"
+		event-segmentation=segmentation
+	) #{translate("buy_now_no_exclamation_mark")}
 
 //- table header and control mixins
 

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

@@ -333,14 +333,8 @@
   }
 
   .plans-table-comments-icon {
-    height: 65px;
-
     i {
-      font-size: 50px;
-    }
-
-    @media (max-width: @screen-xs-max) {
-      height: 58px;
+      font-size: 64px;
     }
   }
 
@@ -468,6 +462,13 @@
     table-layout: fixed;
     width: 100%;
 
+    .plans-table-th-content,
+    .plans-table-price,
+    .plans-table-comments-icon,
+    .plans-table-th-content-benefit {
+      color: var(--neutral-90);
+    }
+
     // cannot add border to td,th directly due to highlighted column border
     td > div,
     th > div {
@@ -552,6 +553,26 @@
       padding: var(--spacing-05) var(--spacing-08);
     }
 
+    tr.plans-table-price-row > td > div > div {
+      padding-top: 0;
+      padding-bottom: var(--spacing-06);
+    }
+    tr.plans-table-short-feature-list > td > div > div {
+      padding-top: 0;
+      padding-bottom: 0;
+
+      @media (max-width: @screen-xs-max) {
+        padding-bottom: var(--spacing-06);
+      }
+    }
+    tr.plans-table-cta-desktop > td > div > div {
+      padding-top: var(--spacing-08);
+    }
+    tr.plans-table-cta-mobile > td > div > div {
+      padding-top: 0;
+      padding-bottom: var(--spacing-06);
+    }
+
     // We want these `div` inside `th` and `td` to have a 100% height since
     // white backgrounds are defined here:
     // 1. `td > div.plans-table-cell`
@@ -866,12 +887,14 @@
     }
   }
 
+  .plans-table-btn-buy-container-desktop,
+  .plans-table-btn-buy-container-mobile {
+    gap: var(--spacing-04);
+  }
+
   .plans-table-btn-buy-container-desktop {
-    margin-top: auto;
     display: flex;
     flex-direction: column;
-    min-height: 60px;
-
     @media (max-width: @screen-xs-max) {
       display: none;
     }
@@ -883,112 +906,62 @@
     @media (max-width: @screen-xs-max) {
       display: flex;
       flex-direction: column;
-      min-height: 50px;
-      margin-top: @padding-sm;
     }
   }
 
-  .plans-v2-table-btn-buy {
-    padding: 4px 15px 5px;
-
-    @media (min-width: (@screen-xs-max+1)) {
-      .hidden-desktop {
-        display: none;
-      }
-    }
-
-    @media (max-width: @screen-sm-max) {
-      font-size: @font-size-small;
+  @media (min-width: (@screen-xs-max+1)) {
+    .hidden-desktop {
+      display: none;
     }
-
-    @media (max-width: @screen-xs-max) {
-      padding-left: 9px;
-      padding-right: 9px;
-      // truncating group plans long button text for mobile
-      .hidden-mobile {
-        display: none;
-      }
+  }
+  @media (max-width: @screen-xs-max) {
+    .hidden-mobile {
+      display: none;
     }
   }
 
-  p.plans-table-th-content-benefit,
   ul.plans-table-th-content-benefit {
-    padding-top: 15px;
-    font-size: @font-size-small;
-    font-family: @font-family-sans-serif;
-    line-height: 23px;
+    font-size: var(--font-size-02);
+    line-height: var(--line-height-02);
     hyphens: auto;
-  }
-
-  ul.plans-table-th-content-benefit {
     padding-left: 15px;
     text-align: left;
     margin-bottom: 0;
-
-    li a {
-      color: @ol-blue-gray-3;
-      text-decoration: underline;
-    }
   }
 
   // this class should only appear on the group table
-  .plans-v2-group-total-price {
+  .plans-group-total-price {
     font-weight: 700;
   }
 
-  .plans-table-price-container {
-    position: relative;
-
+  .plans-table-price-row {
+    .match-non-discounted-price-alignment,
     s {
-      position: absolute;
-      left: 0;
-      top: -27px;
-      font-weight: 700;
-      font-size: @font-size-small;
-      line-height: 42px;
-      display: flex;
-      justify-content: center;
-      width: 100%;
-      color: @ol-blue-gray-2;
-
-      @media (max-width: @screen-xs-max) {
-        font-size: @font-size-extra-small;
-      }
+      display: block;
+      font-weight: 600;
+      font-size: var(--font-size-02);
+      line-height: var(--line-height-02);
+      color: var(--neutral-60);
     }
-  }
 
-  p.plans-v2-table-price-period-label {
-    margin: 0;
-    font-size: @font-size-small;
-    line-height: 23px;
-    color: @ol-blue-gray-3;
-  }
-
-  p.plans-v2-table-price {
-    margin: 0;
-
-    span {
-      font-weight: 700;
-      font-size: 32px;
-      line-height: 42px;
-
-      @media (max-width: @screen-xs-max) {
-        line-height: 35px;
-        font-size: @font-size-large;
+    .plans-table-price-container {
+      p.plans-table-price-period-label {
+        margin: 0;
+        font-size: var(--font-size-02);
+        line-height: var(--line-height-02);
+        color: @ol-blue-gray-3;
+        font-weight: 400;
       }
-    }
-  }
 
-  small.plans-table-th-content-additional-link {
-    text-transform: lowercase;
-    margin-top: @margin-xs;
-    font-size: @font-size-extra-small;
-    height: 16px;
-    font-family: @font-family-sans-serif;
+      p.plans-table-price {
+        margin: 0;
 
-    a {
-      color: @ol-blue-gray-5;
-      text-decoration: underline;
+        span {
+          font-weight: 600;
+          font-size: var(--font-size-07);
+          line-height: var(--line-height-06);
+        }
+      }
     }
   }
 
@@ -1095,11 +1068,12 @@
 
     @media (max-width: @screen-xs-max) {
       display: flex;
-      width: 100vw;
+      width: 100%;
       top: 0;
       left: 0;
       z-index: @z-index-plans-page-table-header-mobile;
       height: 42px;
+      border-bottom: @table-border;
 
       // separate sticky class because we want to remove the class (to visually remove the sticky header)
       // with javascript whenever the table is not visible anymore
@@ -1114,18 +1088,17 @@
     flex: 1 1 0px;
 
     span {
-      margin: @margin-xs;
-      border-bottom: 1px solid #cccccc;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-family: @font-family-serif;
 
       @media (max-width: @screen-xs-max) {
-        font-size: @font-size-small;
+        color: var(--neutral-90);
+        font-size: var(--font-size-03);
+        font-weight: 600;
         text-align: center;
-        line-height: 19px;
+        line-height: var(--line-height-02);
       }
     }
   }