Merge pull request #19084 from overleaf/jel-light-touch-rename-css

[web] Rename CSS variables for light touch redesign

GitOrigin-RevId: c84eb75a45af8270895795ceffef944696037881

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

@@ -51,7 +51,7 @@ include ./_mixins
 
 +table_sticky_header_all(plansConfig)
 
-.row.plans-v2-table-container(hidden data-ol-plans-v2-period='monthly')
+.row.plans-table-container(hidden data-ol-plans-v2-period='monthly')
 	.col-sm-12(data-ol-plans-v2-view='individual' role="tabpanel")
 		.row
 			+table_individual('monthly')
@@ -59,7 +59,7 @@ include ./_mixins
 		.row
 			+table_student('monthly')
 
-.row.plans-v2-table-container(data-ol-plans-v2-period='annual')
+.row.plans-table-container(data-ol-plans-v2-period='annual')
 	.col-sm-12(data-ol-plans-v2-view='individual' id="panel-individual" role="tabpanel")
 		.row
 			+table_individual('annual')

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

@@ -27,11 +27,11 @@ mixin currency_and_payment_methods()
 			span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Paypal' })}
 
 
-mixin plans_v2_table(period, config)
+mixin plans_table(period, config)
 	- var baseColspan = config.baseColspan || 1
 	- var maxColumn = config.maxColumn || 4
 	- var tableHeadKeys = Object.keys(config.tableHead)
-	tr(class=`plans-v2-table-cols-${tableHeadKeys.length}`)
+	tr(class=`plans-table-cols-${tableHeadKeys.length}`)
 		th(colspan=baseColspan)
 		- for (var i = 0; i < maxColumn; i++)
 			- var tableHeadKey = tableHeadKeys[i]
@@ -42,13 +42,13 @@ mixin plans_v2_table(period, config)
 			- var additionalEventSegmentation = config.additionalEventSegmentation || {}
 			-
 				if (highlighted) {
-					var thClass = 'plans-v2-table-green-highlighted'
+					var thClass = 'plans-table-green-highlighted'
 				} else if (i === config.highlightedColumn.index - 1) {
-					var thClass = 'plans-v2-table-cell-before-green-highlighted-column'
+					var thClass = 'plans-table-cell-before-green-highlighted-column'
 				} else {
 					var thClass = ''
 				}
-				thClass += ' plans-v2-table-column-header'
+				thClass += ' plans-table-column-header'
 				if (colspan > 1) {
 					var scopeValue = 'colgroup'
 				}
@@ -82,9 +82,9 @@ mixin plans_v2_table(period, config)
 				colspan=colspan
 				scope=scopeValue
 			)
-				.plans-v2-table-th
+				.plans-table-th
 					if (highlighted)
-						p.plans-v2-table-green-highlighted-text #{translate(config.highlightedColumn.text[period]).toUpperCase()}
+						p.plans-table-green-highlighted-text #{translate(config.highlightedColumn.text[period]).toUpperCase()}
 					case tableHeadKey
 						when 'individual_free'
 							+table_head_individual_free(highlighted, period)
@@ -133,10 +133,10 @@ mixin plans_v2_table(period, config)
 						span.sr-only #{translate(featuresPerSection.dividerInfo)}
 		for feature, featureIndex in featuresPerSection.items
 			tr(
-				class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-v2-table-row-last-row-per-section plans-v2-table-cols-${tableHeadKeys.length}` : `plans-v2-table-cols-${tableHeadKeys.length}`)
+				class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-table-row-last-row-per-section plans-table-cols-${tableHeadKeys.length}` : `plans-table-cols-${tableHeadKeys.length}`)
 			)
 				th(
-					class="plans-v2-table-row-header"
+					class="plans-table-row-header"
 					event-tracking="plans-page-table"
 					event-tracking-trigger="hover"
 					event-tracking-ga="subscription-funnel"
@@ -170,9 +170,9 @@ mixin plans_v2_table(period, config)
 					- var colspan = tableHeadOptions.colspan || baseColspan
 					-
 						if (planIndex === config.highlightedColumn.index) {
-							var tdClass = 'plans-v2-table-green-highlighted'
+							var tdClass = 'plans-table-green-highlighted'
 						} else if (planIndex === config.highlightedColumn.index - 1) {
-							var tdClass = 'plans-v2-table-cell-before-green-highlighted-column'
+							var tdClass = 'plans-table-cell-before-green-highlighted-column'
 						} else {
 							var tdClass = ''
 						}
@@ -183,55 +183,55 @@ mixin plans_v2_table(period, config)
 						+table_cell(feature, plan)
 
 mixin table_individual(period)
-	table.card.plans-v2-table.plans-v2-table-individual
-		+plans_v2_table(period, plansConfig.individual)
+	table.card.plans-table.plans-table-individual
+		+plans_table(period, plansConfig.individual)
 
 mixin table_group
-	table.card.plans-v2-table.plans-v2-table-group
-		+plans_v2_table('annual', plansConfig.group)
+	table.card.plans-table.plans-table-group
+		+plans_table('annual', plansConfig.group)
 
 mixin table_student(period)
-	table.card.plans-v2-table.plans-v2-table-student
-		+plans_v2_table(period, plansConfig.student)
+	table.card.plans-table.plans-table-student
+		+plans_table(period, plansConfig.student)
 
 mixin table_head_individual_free(highlighted, period)
-	.plans-v2-table-th-content
-		p.plans-v2-table-th-content-title #{translate("free")}
+	.plans-table-th-content
+		p.plans-table-th-content-title #{translate("free")}
 		+table_head_price('free', period)
-		.plans-v2-table-btn-buy-container-mobile
+		.plans-table-btn-buy-container-mobile
 			+btn_buy_individual_free(highlighted)
-		ul.plans-v2-table-th-content-benefit
+		ul.plans-table-th-content-benefit
 			li #{translate("one_collaborator")}
-		.plans-v2-table-btn-buy-container-desktop
+		.plans-table-btn-buy-container-desktop
 			+btn_buy_individual_free(highlighted)
 
 mixin table_head_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
-	.plans-v2-table-th-content
-		p.plans-v2-table-th-content-title #{translate("standard")}
+	.plans-table-th-content
+		p.plans-table-th-content-title #{translate("standard")}
 		+table_head_price('collaborator', period)
-		.plans-v2-table-btn-buy-container-mobile
+		.plans-table-btn-buy-container-mobile
 			+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
-		ul.plans-v2-table-th-content-benefit
+		ul.plans-table-th-content-benefit
 			li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
 			li #{translate("all_premium_features")}
-		.plans-v2-table-btn-buy-container-desktop
+		.plans-table-btn-buy-container-desktop
 			+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
 
 mixin table_head_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
-	.plans-v2-table-th-content
-		p.plans-v2-table-th-content-title #{translate("professional")}
+	.plans-table-th-content
+		p.plans-table-th-content-title #{translate("professional")}
 		+table_head_price('professional', period)
-		.plans-v2-table-btn-buy-container-mobile
+		.plans-table-btn-buy-container-mobile
 			+btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
-		ul.plans-v2-table-th-content-benefit
+		ul.plans-table-th-content-benefit
 			li !{translate("unlimited_collabs_rt",{},["b"])}
 			li #{translate("all_premium_features")}
-		.plans-v2-table-btn-buy-container-desktop
+		.plans-table-btn-buy-container-desktop
 			+btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
 
 mixin table_head_group_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation)
-	.plans-v2-table-th-content
-		p.plans-v2-table-th-content-title #{translate("group_standard")}
+	.plans-table-th-content
+		p.plans-table-th-content-title #{translate("group_standard")}
 		.plans-v2-table-price-container
 			strike.plans-v2-table-price-before-discount
 				+gen_localized_price_for_plan_view('collaborator', 'annual')
@@ -239,20 +239,20 @@ mixin table_head_group_collaborator(highlighted, eventTrackingKey, additionalEve
 				span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator}
 			p.plans-v2-table-price-period-label
 				| #{translate('per_user_year')}
-		.plans-v2-table-btn-buy-container-mobile
+		.plans-table-btn-buy-container-mobile
 			+btn_buy_group_collaborator(highlighted, eventTrackingKey)
 			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')
-		ul.plans-v2-table-th-content-benefit
+		ul.plans-table-th-content-benefit
 			li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
 			li
 				+table_head_group_total_per_year('collaborator')
-		.plans-v2-table-btn-buy-container-desktop
+		.plans-table-btn-buy-container-desktop
 			+btn_buy_group_collaborator(highlighted, eventTrackingKey)
 			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')
 
 mixin table_head_group_professional(highlighted, eventTrackingKey, additionalEventSegmentation)
-	.plans-v2-table-th-content
-		p.plans-v2-table-th-content-title #{translate("group_professional")}
+	.plans-table-th-content
+		p.plans-table-th-content-title #{translate("group_professional")}
 		.plans-v2-table-price-container
 			strike.plans-v2-table-price-before-discount
 				+gen_localized_price_for_plan_view('professional', 'annual')
@@ -260,14 +260,14 @@ mixin table_head_group_professional(highlighted, eventTrackingKey, additionalEve
 				span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional}
 			p.plans-v2-table-price-period-label
 				| #{translate('per_user_year')}
-		.plans-v2-table-btn-buy-container-mobile
+		.plans-table-btn-buy-container-mobile
 			+btn_buy_group_professional(highlighted, eventTrackingKey)
 			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')
-		ul.plans-v2-table-th-content-benefit
+		ul.plans-table-th-content-benefit
 			li #{translate("unlimited_collaborators_in_each_project")}
 			li
 				+table_head_group_total_per_year('professional')
-		.plans-v2-table-btn-buy-container-desktop
+		.plans-table-btn-buy-container-desktop
 			+btn_buy_group_professional(highlighted, eventTrackingKey)
 			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')
 
@@ -283,14 +283,14 @@ mixin table_head_group_total_per_year(groupPlan)
 
 mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation)
 	- var segmentation = JSON.stringify(Object.assign({}, {button: 'group_organization-link', location: 'table-header-list', period: 'annual'}, additionalEventSegmentation))
-	.plans-v2-table-th-content
-		p.plans-v2-table-th-content-title #{translate("organization")}
+	.plans-table-th-content
+		p.plans-table-th-content-title #{translate("organization")}
 		.plans-v2-table-comments-icon
 			i.fa.fa-comments-o
-		.plans-v2-table-btn-buy-container-mobile
+		.plans-table-btn-buy-container-mobile
 			+btn_buy_group_organization(highlighted, eventTrackingKey)
-			small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true")
-		ul.plans-v2-table-th-content-benefit
+			small.plans-table-th-content-additional-link.invisible(aria-hidden="true")
+		ul.plans-table-th-content-benefit
 			li #{translate("best_choices_companies_universities_non_profits")}
 			li #{translate("for_groups_or_site_wide")}
 			li
@@ -302,46 +302,46 @@ mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEve
 					event-tracking-trigger="click"
 					event-segmentation=segmentation
 				) #{translate("also_available_as_on_premises")}
-		.plans-v2-table-btn-buy-container-desktop
+		.plans-table-btn-buy-container-desktop
 			+btn_buy_group_organization(highlighted, eventTrackingKey)
-			small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true")
+			small.plans-table-th-content-additional-link.invisible(aria-hidden="true")
 
 mixin table_head_student_free(highlighted, period)
-	div.plans-v2-table-th-content
-		p.plans-v2-table-th-content-title #{translate("free")}
+	div.plans-table-th-content
+		p.plans-table-th-content-title #{translate("free")}
 		+table_head_price('free', period)
-		.plans-v2-table-btn-buy-container-mobile
+		.plans-table-btn-buy-container-mobile
 			+btn_buy_student_free(highlighted)
-		ul.plans-v2-table-th-content-benefit
+		ul.plans-table-th-content-benefit
 			li #{translate("one_collaborator")}
-		.plans-v2-table-btn-buy-container-desktop
+		.plans-table-btn-buy-container-desktop
 			+btn_buy_student_free(highlighted)
 
 mixin table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, showExtraContent)
-	div.plans-v2-table-th-content
-		p.plans-v2-table-th-content-title #{translate("student")}
+	div.plans-table-th-content
+		p.plans-table-th-content-title #{translate("student")}
 		+table_head_price('student', period)
-		.plans-v2-table-btn-buy-container-mobile
+		.plans-table-btn-buy-container-mobile
 			+btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
-		ul.plans-v2-table-th-content-benefit
+		ul.plans-table-th-content-benefit
 			li !{translate("x_collaborators_per_project", {collaboratorsCount: '6'})}
 			li #{translate("all_premium_features")}
 			if showExtraContent
 				li 
 					b !{translate("for_students_only")}
 
-		.plans-v2-table-btn-buy-container-desktop
+		.plans-table-btn-buy-container-desktop
 			+btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
 
 mixin table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
-	div.plans-v2-table-th-content
-		p.plans-v2-table-th-content-title #{translate("university")}
+	div.plans-table-th-content
+		p.plans-table-th-content-title #{translate("university")}
 		div.plans-v2-table-comments-icon
 			i.fa.fa-comments-o
-		.plans-v2-table-btn-buy-container-mobile
+		.plans-table-btn-buy-container-mobile
 			+btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
-		p.plans-v2-table-th-content-benefit !{translate("all_our_group_plans_offer_educational_discount", {}, [{name: 'b'}, {name: 'b'}])}
-		.plans-v2-table-btn-buy-container-desktop
+		p.plans-table-th-content-benefit !{translate("all_our_group_plans_offer_educational_discount", {}, [{name: 'b'}, {name: 'b'}])}
+		.plans-table-btn-buy-container-desktop
 			+btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
 
 mixin table_head_price(plan, period)
@@ -361,8 +361,8 @@ mixin table_cell(feature, plan)
 	- var planValue = feature.plans[plan]
 	- var featureName = feature.feature
 
-	.plans-v2-table-cell
-		.plans-v2-table-cell-content(
+	.plans-table-cell
+		.plans-table-cell-content(
 			data-ol-plans-v2-table-cell-plan=plan
 			data-ol-plans-v2-table-cell-feature=featureName
 		)
@@ -538,7 +538,7 @@ mixin btn_buy_student_university(highlighted, eventTrackingKey, additionalEventS
 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-v2-table-th-content-additional-link
+	small.plans-table-th-content-additional-link
 		| #{translate("or")} 
 		a(
 			href="/for/contact-sales"
@@ -555,7 +555,7 @@ 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-v2-table-th-content-additional-link
+	small.plans-table-th-content-additional-link
 		| #{translate("or")} 
 		a(
 			href=`/user/subscription/new?${qs.toString()}`

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

@@ -342,7 +342,7 @@
     }
   }
 
-  .plans-v2-table-container {
+  .plans-table-container {
     position: relative;
   }
 
@@ -434,23 +434,23 @@
     }
   }
 
-  .plans-v2-table-individual,
-  .plans-v2-table-student {
+  .plans-table-individual,
+  .plans-table-student {
     margin-top: 40px + @plans-highlighted-text-height-desktop;
 
     @media (max-width: @screen-xs-max) {
       margin-top: 60px + @plans-highlighted-text-height-desktop;
 
-      th .plans-v2-table-th-content {
+      th .plans-table-th-content {
         min-height: 280px;
       }
     }
   }
 
-  .plans-v2-table-student {
+  .plans-table-student {
     tr {
       // "hide" the last column on desktop by making the background-color as the default background color
-      th:last-of-type > .plans-v2-table-th {
+      th:last-of-type > .plans-table-th {
         background-color: @ol-blue-gray-0;
       }
 
@@ -470,7 +470,7 @@
         td:last-child {
           background-color: @ol-blue-gray-0;
 
-          .plans-v2-table-cell {
+          .plans-table-cell {
             border-bottom-right-radius: @plans-table-border-radius;
 
             @media (max-width: @screen-xs-max) {
@@ -482,8 +482,8 @@
     }
 
     // only make corners have round borders if the column is not highlighted
-    th:not(.plans-v2-table-green-highlighted) {
-      &:nth-last-child(2) .plans-v2-table-th {
+    th:not(.plans-table-green-highlighted) {
+      &:nth-last-child(2) .plans-table-th {
         border-top-right-radius: @plans-table-border-radius;
 
         @media (max-width: @screen-xs-max) {
@@ -491,7 +491,7 @@
         }
       }
 
-      &:nth-child(2) .plans-v2-table-th {
+      &:nth-child(2) .plans-table-th {
         border-top-left-radius: @plans-table-border-radius;
 
         @media (max-width: @screen-xs-max) {
@@ -512,7 +512,7 @@
     }
   }
 
-  .plans-v2-table-individual {
+  .plans-table-individual {
     tr {
       &:last-child {
         td:first-child {
@@ -530,7 +530,7 @@
         td:last-child {
           background-color: @ol-blue-gray-0;
 
-          .plans-v2-table-cell {
+          .plans-table-cell {
             border-bottom-right-radius: @plans-table-border-radius;
 
             @media (max-width: @screen-xs-max) {
@@ -546,7 +546,7 @@
     }
 
     th {
-      &:last-child .plans-v2-table-th {
+      &:last-child .plans-table-th {
         border-top-right-radius: @plans-table-border-radius;
 
         @media (max-width: @screen-xs-max) {
@@ -554,7 +554,7 @@
         }
       }
 
-      &:nth-child(2) .plans-v2-table-th {
+      &:nth-child(2) .plans-table-th {
         border-top-left-radius: @plans-table-border-radius;
 
         @media (max-width: @screen-xs-max) {
@@ -564,10 +564,10 @@
     }
   }
 
-  .plans-v2-table-group {
+  .plans-table-group {
     margin-top: 26px + @plans-highlighted-text-height-desktop;
 
-    p.plans-v2-table-th-content-title {
+    p.plans-table-th-content-title {
       // Reduce font size of table heading for screen size >= @screen-lg (1200px) from 20px to 19px
       // In the English version of overleaf, 20px is enough for the text to not be wrapped to the next line, the longest text is the 2nd column of group tab: "Group Professional".
       // In the English version, "Group Professional" won't be wrapped to two separate lines with 20px font size for big screen.
@@ -588,7 +588,7 @@
     tr {
       // top right border radius on desktop only
       &:first-of-type {
-        th:last-child > .plans-v2-table-th {
+        th:last-child > .plans-table-th {
           border-top-right-radius: @plans-table-border-radius;
 
           @media (max-width: @screen-xs-max) {
@@ -599,7 +599,7 @@
 
       // bottom right border radius on desktop only
       &:last-of-type {
-        td:last-child > .plans-v2-table-cell {
+        td:last-child > .plans-table-cell {
           border-bottom-right-radius: @plans-table-border-radius;
 
           @media (max-width: @screen-xs-max) {
@@ -610,15 +610,15 @@
     }
   }
 
-  .plans-v2-table {
+  .plans-table {
     background-color: @ol-blue-gray-0;
     margin-bottom: 15px;
     table-layout: fixed;
     width: 100%;
     // We want these `div` inside `th` and `td` to have a 100% height since
     // white backgrounds are defined here:
-    // 1. `td > div.plans-v2-table-cell`
-    // 2. `th > div.plans-v2-table-th`
+    // 1. `td > div.plans-table-cell`
+    // 2. `th > div.plans-table-th`
     //
     // To make both of them have 100% height of their respective `td` and `th`,
     // we need to have the `table` has an explicit `height` rule.
@@ -627,7 +627,7 @@
     // See https://stackoverflow.com/a/56913789 for more details
     height: 100%;
 
-    .plans-v2-table-row-header {
+    .plans-table-row-header {
       font-weight: 500;
     }
 
@@ -635,13 +635,13 @@
       height: 100%;
     }
 
-    .plans-v2-table-column-header,
+    .plans-table-column-header,
     td {
       background-clip: padding-box; /* needed for firefox when there is bg color */
       text-align: center;
 
-      &:not(.plans-v2-table-cell-before-green-highlighted-column):not(
-          .plans-v2-table-green-highlighted
+      &:not(.plans-table-cell-before-green-highlighted-column):not(
+          .plans-table-green-highlighted
         ):not(.plans-v2-table-divider-highlighted) {
         border-right: 1px solid @ol-blue-gray-0;
 
@@ -651,7 +651,7 @@
       }
     }
 
-    .plans-v2-table-column-header {
+    .plans-table-column-header {
       border-top: 0;
       font-family: @headings-font-family;
       font-size: @font-size-h2;
@@ -675,7 +675,7 @@
       vertical-align: middle;
       height: 100%;
 
-      &:last-child:not(.plans-v2-table-green-highlighted):not(
+      &:last-child:not(.plans-table-green-highlighted):not(
           .plans-v2-table-divider-highlighted
         ) {
         border-right: 0;
@@ -690,7 +690,7 @@
 
       // css hack for table border-radius on the first feature name
       &:nth-child(2) {
-        .plans-v2-table-row-header:first-child {
+        .plans-table-row-header:first-child {
           background-color: @ol-blue-gray-0;
 
           .plans-v2-table-feature-name {
@@ -703,12 +703,12 @@
         }
       }
 
-      &:not(.plans-v2-table-row-last-row-per-section):not(
+      &:not(.plans-table-row-last-row-per-section):not(
           .plans-v2-table-divider
         ):not(:last-of-type) {
-        th > .plans-v2-table-th > .plans-v2-table-th-content,
+        th > .plans-table-th > .plans-table-th-content,
         td > .plans-v2-table-feature-name,
-        td > .plans-v2-table-cell > .plans-v2-table-cell-content {
+        td > .plans-table-cell > .plans-table-cell-content {
           border-bottom: 1px solid @ol-blue-gray-0;
 
           @media (max-width: @screen-xs-max) {
@@ -718,8 +718,8 @@
       }
 
       // this will show highlghted border-bottom on the last row
-      &:last-child td.plans-v2-table-green-highlighted {
-        > .plans-v2-table-cell {
+      &:last-child td.plans-table-green-highlighted {
+        > .plans-table-cell {
           border-bottom: 2px solid @ol-green;
 
           @media (max-width: @screen-xs-max) {
@@ -739,7 +739,7 @@
         background-color: @table-hover-bg;
 
         .plans-v2-table-feature-name,
-        .plans-v2-table-cell {
+        .plans-table-cell {
           background-color: @table-hover-bg;
         }
       }
@@ -760,31 +760,31 @@
         justify-content: space-around;
       }
 
-      // The forced width below (plans-v2-table-cols-n) is to ensure the table columns have an equal width
+      // The forced width below (plans-table-cols-n) is to ensure the table columns have an equal width
       // because on mobile, the first column (empty cell on first `tr` and feature name on the rest of `tr`) will be shown as its own row
       // and the rest of the `tr` will incorporate a full width of the viewport
-      tr.plans-v2-table-cols-4:not(.plans-v2-table-divider) {
+      tr.plans-table-cols-4:not(.plans-v2-table-divider) {
         td,
         th:not(:first-of-type) {
           width: 25%;
         }
       }
 
-      tr.plans-v2-table-cols-3:not(.plans-v2-table-divider) {
+      tr.plans-table-cols-3:not(.plans-v2-table-divider) {
         td,
         th:not(:first-of-type) {
           width: calc(100% / 3);
         }
       }
 
-      tr.plans-v2-table-cols-2:not(.plans-v2-table-divider) {
+      tr.plans-table-cols-2:not(.plans-v2-table-divider) {
         td,
         th:not(:first-of-type) {
           width: 50%;
         }
       }
 
-      .plans-v2-table-column-header {
+      .plans-table-column-header {
         font-size: 12px;
       }
 
@@ -797,7 +797,7 @@
       // the width: 100vw rule will enhance the flex-flow on the tr by ensuring the feature name (first column of each feature row)
       // will have the full width of viewport,
       // and making the first td appear like the it is in its own row (although it's technically still on the same tr as the other tds)
-      .plans-v2-table-row-header {
+      .plans-table-row-header {
         background: @gray-lightest;
         width: 100vw;
 
@@ -812,14 +812,14 @@
     }
   }
 
-  // plans-v2-table-cell class only appears for the inner `div` of a `td`
+  // plans-table-cell class only appears for the inner `div` of a `td`
   // that doesn't contain divider or feature name
   // (i.e it contains either check mark icon or a dash)
-  .plans-v2-table-cell {
+  .plans-table-cell {
     background-color: @white;
     height: 100%;
 
-    .plans-v2-table-cell-content {
+    .plans-table-cell-content {
       height: 100%;
       display: flex;
       align-items: center;
@@ -827,18 +827,18 @@
     }
 
     @media (max-width: @screen-xs-max) {
-      .plans-v2-table-cell-content {
+      .plans-table-cell-content {
         padding: 6px;
         min-height: @plans-table-td-mobile-min-height;
       }
     }
   }
 
-  .plans-v2-table-th {
+  .plans-table-th {
     height: 100%;
     background-color: @white;
 
-    .plans-v2-table-th-content {
+    .plans-table-th-content {
       display: flex;
       flex-direction: column;
       min-height: 321px;
@@ -856,7 +856,7 @@
     }
   }
 
-  .plans-v2-table-btn-buy-container-desktop {
+  .plans-table-btn-buy-container-desktop {
     margin-top: auto;
     display: flex;
     flex-direction: column;
@@ -867,7 +867,7 @@
     }
   }
 
-  .plans-v2-table-btn-buy-container-mobile {
+  .plans-table-btn-buy-container-mobile {
     display: none;
 
     @media (max-width: @screen-xs-max) {
@@ -901,7 +901,7 @@
     }
   }
 
-  p.plans-v2-table-th-content-title {
+  p.plans-table-th-content-title {
     font-size: @font-size-large;
     padding-bottom: @padding-sm;
     border-bottom: 1px solid @gray-lighter;
@@ -911,10 +911,10 @@
       font-size: @font-size-base;
     }
 
-    // `plans-v2-table-th-content-title` is visually invisible on screen size less than @screen-xs-max
+    // `plans-table-th-content-title` is visually invisible on screen size less than @screen-xs-max
     // because there is a sticky header (`plans-v2-table-sticky-header` class) that "replace" the content visually
     // (see the `@plans-table-sticky-header-z-index` variable that make the sticky header element is "above" the whole table)
-    // however, we still need to properly styling the `plans-v2-table-th-content-title` for small screen size to
+    // however, we still need to properly styling the `plans-table-th-content-title` for small screen size to
     // fit this element to the size of the sticky header
     // this trick is used because th element can not have a `position: sticky` rule, at least for our use case
     @media (max-width: @screen-xs-max) {
@@ -925,8 +925,8 @@
     }
   }
 
-  p.plans-v2-table-th-content-benefit,
-  ul.plans-v2-table-th-content-benefit {
+  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;
@@ -934,7 +934,7 @@
     hyphens: auto;
   }
 
-  ul.plans-v2-table-th-content-benefit {
+  ul.plans-table-th-content-benefit {
     padding-left: 15px;
     text-align: left;
     margin-bottom: 0;
@@ -992,7 +992,7 @@
     }
   }
 
-  small.plans-v2-table-th-content-additional-link {
+  small.plans-table-th-content-additional-link {
     text-transform: lowercase;
     margin-top: @margin-xs;
     font-size: @font-size-extra-small;
@@ -1116,10 +1116,10 @@
     }
   }
 
-  // the `.plans-v2-table-green-highlighted` class below can be applied to both `th` and `td`
-  .plans-v2-table-green-highlighted {
-    > .plans-v2-table-cell,
-    > .plans-v2-table-th {
+  // the `.plans-table-green-highlighted` class below can be applied to both `th` and `td`
+  .plans-table-green-highlighted {
+    > .plans-table-cell,
+    > .plans-table-th {
       border-left: 2px solid @ol-green;
       border-right: 2px solid @ol-green;
 
@@ -1130,7 +1130,7 @@
     }
   }
 
-  p.plans-v2-table-green-highlighted-text {
+  p.plans-table-green-highlighted-text {
     border: 2px solid @ol-green;
     position: absolute;
     top: -1 * @plans-highlighted-text-height-desktop;
@@ -1284,8 +1284,8 @@
     margin-top: var(--spacing-09);
   }
 
-  .plans-v2-table,
-  .plans-v2-table-column-header {
+  .plans-table,
+  .plans-table-column-header {
     background-color: transparent; // remove colors set by default variant
   }
 

services/web/frontend/stylesheets/app/plans/plans-v2.less

@@ -1348,22 +1348,6 @@ p.plans-v2-table-green-highlighted-text {
   }
 }
 
-.website-redesign {
-  .plans-page {
-    padding-top: calc(var(--spacing-16) + var(--header-height));
-
-    h1 {
-      margin-top: 0;
-      margin-bottom: var(--spacing-08);
-    }
-
-    .plans-v2-table,
-    .plans-v2-table-column-header {
-      background-color: transparent; // remove colors set by default variant
-    }
-  }
-}
-
 .plans-page-quote-row {
   margin: var(--spacing-13) 0;
 }