Merge pull request #19618 from overleaf/jel-light-touch-btns

[web] Light touch plans redesign CTAs

GitOrigin-RevId: 7b9be331420044fda08eac563567f1cce4c0c1c2

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

@@ -42,8 +42,7 @@ mixin btn_buy_group_collaborator(highlighted, eventTrackingKey)
 		data-ol-location='table-header'
 		class=(highlighted ? 'btn-primary' : 'btn-secondary')
 	)
-		span.visible-mobile #{translate("customize")}
-		span.visible-tablet #{translate("customize_plan")}
+		span.visible-mobile-and-tablet #{translate("customize")}
 		span.visible-desktop #{translate("customize_your_plan")}
 
 mixin btn_buy_group_professional(highlighted, eventTrackingKey) 
@@ -55,8 +54,7 @@ mixin btn_buy_group_professional(highlighted, eventTrackingKey)
 		data-ol-location='table-header'
 		class=(highlighted ? 'btn-primary' : 'btn-secondary')
 	)
-		span.visible-mobile #{translate("customize")}
-		span.visible-tablet #{translate("customize_plan")}
+		span.visible-mobile-and-tablet #{translate("customize")}
 		span.visible-desktop #{translate("customize_your_plan")}
 
 mixin btn_buy_group_organization(highlighted, eventTrackingKey) 

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

@@ -531,9 +531,12 @@
       // padding
       > div {
         padding: var(--spacing-05) var(--spacing-08);
-        @media (max-width: @screen-xs-max) {
+        @media (max-width: @screen-sm-max) {
           padding: var(--spacing-05);
         }
+        @media (max-width: @screen-xs-max) {
+          padding: var(--spacing-03);
+        }
       }
       // padding adjustments
       &.plans-table-th > div {
@@ -944,26 +947,24 @@
     @media (max-width: @screen-xs-max) {
       display: flex;
       flex-direction: column;
+
+      .btn {
+        .btn-xs;
+      }
     }
   }
 
   .visible-desktop,
-  .visible-tablet,
-  .visible-mobile {
+  .visible-mobile-and-tablet {
     display: none;
   }
-  @media (min-width: (@screen-md-max+1)) {
+  @media (min-width: (@screen-lg-min)) {
     .visible-desktop {
       display: inline-block;
     }
   }
-  @media (min-width: (@screen-xs-max+1)) and (max-width: @screen-md-max) {
-    .visible-tablet {
-      display: inline-block;
-    }
-  }
-  @media (max-width: @screen-xs-max) {
-    .visible-mobile {
+  @media (max-width: @screen-md-max) {
+    .visible-mobile-and-tablet {
       display: inline-block;
     }
   }

services/web/locales/en.json

@@ -390,7 +390,6 @@
   "custom_resource_portal_info": "You can have your own custom portal page on Overleaf. This is a great place for your users to find out more about Overleaf, access templates, FAQs and Help resources, and sign up to Overleaf.",
   "customer_resource_portal": "Customer resource portal",
   "customize": "Customize",
-  "customize_plan": "Customize plan",
   "customize_your_group_subscription": "Customize your group subscription",
   "customize_your_plan": "Customize your plan",
   "customizing_figures": "Customizing figures",