From 1f432ca5a9c2cc02cdcd8e8a43bc49d9c35c77fd Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Thu, 25 Jul 2024 08:45:20 -0500
Subject: [PATCH] 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
---
 .../plans/light-redesign/_table_ctas.pug      | 10 ++++----
 .../app/plans/plans-light-touch-redesign.less | 24 +++++++++++++------
 services/web/locales/en.json                  |  1 +
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/services/web/app/views/subscriptions/plans/light-redesign/_table_ctas.pug b/services/web/app/views/subscriptions/plans/light-redesign/_table_ctas.pug
index d2aaa8e211..948a298ffb 100644
--- a/services/web/app/views/subscriptions/plans/light-redesign/_table_ctas.pug
+++ b/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(
diff --git a/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less b/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less
index c9a275e2c2..88cfa5041b 100644
--- a/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less
+++ b/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;
     }
   }
 
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 6d2eb6583e..9fe293727a 100644
--- a/services/web/locales/en.json
+++ b/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",