Merge pull request #20048 from overleaf/jel-plans-light-touch

[web] Plans page light touch redesign updates

GitOrigin-RevId: 71bb1a594e1767fe406bb63334534fd73b3d368a

services/web/app/views/subscriptions/plans-light-design.pug

@@ -38,6 +38,8 @@ block content
 					
 				+currency_and_payment_methods()
 
+				include ./plans/_university_info
+
 				//- TODO: changing .plans-page-quote-row-hidden causes flickering on page load
 				.plans-page-quote-row(data-ol-show-for-plan-type="individual")
 					+collinsQuote1()
@@ -48,9 +50,6 @@ block content
 				.plans-page-quote-row.plans-page-quote-row-hidden(data-ol-show-for-plan-type="student")
 					+collinsQuote2()
 
-
-				include ./plans/_university_info
-
 				include ./plans/_faq_new
 
 			include ./plans/light-redesign/_group_plan_modal

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

@@ -18,8 +18,8 @@ mixin currency_and_payment_methods()
 	.row.plans-payment-methods.text-centered
 		.col-xs-12
 			p
-				| #{translate("all_prices_displayed_are_in_currency", { recommendedCurrency })}
-				| #{translate("subject_to_additional_vat")}
+				b #{translate("all_prices_displayed_are_in_currency", { recommendedCurrency })}
+				|  #{translate("subject_to_additional_vat")}
 
 			.plans-payment-methods-icons
 				img(src=buildImgPath('/other-brands/logo_mastercard.svg') aria-hidden="true")

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

@@ -1,5 +1,6 @@
 // m-a stands for: monthly annual
-@plans-m-a-switch-height: 20px;
+@plans-m-a-switch-height: 34px;
+@plans-m-a-switch-padding: 2px;
 @plans-highlighted-text-height-desktop: 32px;
 @plans-highlighted-text-height-mobile: 41px;
 @plans-learn-more-link-color: hsl(206, 100%, 52%);
@@ -247,7 +248,7 @@
     label {
       position: relative;
       display: inline-block;
-      width: 34px;
+      width: 60px;
       height: @plans-m-a-switch-height;
       margin: 0 var(--spacing-05);
 
@@ -266,7 +267,7 @@
       }
 
       input:checked + span::before {
-        transform: translateX(14px);
+        transform: translateX(26px);
       }
 
       span {
@@ -282,10 +283,12 @@
         &::before {
           position: absolute;
           content: '';
-          height: 16px;
-          width: 16px;
-          left: 2px;
-          bottom: 2px;
+          height: @plans-m-a-switch-height - @plans-m-a-switch-padding -
+            @plans-m-a-switch-padding;
+          width: @plans-m-a-switch-height - @plans-m-a-switch-padding -
+            @plans-m-a-switch-padding;
+          left: @plans-m-a-switch-padding;
+          bottom: @plans-m-a-switch-padding;
           background-color: @white;
           transition: 0.4s;
           border-radius: 50%;