Merge pull request #19447 from overleaf/jel-light-touch-table-final-bits

[web] Updates for the light touch redesign of the plans table

GitOrigin-RevId: 44ba4fde9b192f3792bf295557fa1018c83a2119

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

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

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

@@ -469,7 +469,7 @@
     }
 
     .plans-table-short-feature-list ul {
-      color: var(--neutral-90);
+      color: var(--neutral-70);
       font-size: var(--font-size-02);
       line-height: var(--line-height-02);
       hyphens: auto;
@@ -517,7 +517,7 @@
       // padding adjustments
       &.plans-table-th > div {
         padding-top: var(--spacing-06);
-        padding-bottom: var(--spacing-06);
+        padding-bottom: var(--spacing-04);
       }
       &.plans-table-cell-price > div {
         padding-top: 0;
@@ -923,14 +923,24 @@
     }
   }
 
-  @media (min-width: (@screen-xs-max+1)) {
-    .hidden-desktop {
-      display: none;
+  .visible-desktop,
+  .visible-tablet,
+  .visible-mobile {
+    display: none;
+  }
+  @media (min-width: (@screen-md-max+1)) {
+    .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) {
-    .hidden-mobile {
-      display: none;
+    .visible-mobile {
+      display: inline-block;
     }
   }
 

services/web/locales/en.json

@@ -390,6 +390,7 @@
   "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",