Merge pull request #19415 from overleaf/jel-highlighted-col

[web] Update highlighted column for plans page light touch redesign

GitOrigin-RevId: 98a0d6c34762bb7f4530da9cd6d954c2ae1aae56

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

@@ -69,7 +69,9 @@ mixin plans_table(period, config)
 			)
 				.plans-table-th
 					if (highlighted)
-						p.plans-table-green-highlighted-text #{translate(config.highlightedColumn.text[period]).toUpperCase()}
+						//-most_popular_uppercase
+						-var translationKey  = config.highlightedColumn.text[period] === 'most_popular' ? 'most_popular_uppercase' : config.highlightedColumn.text[period] === 'saving_20_percent' ? 'saving_20_percent_no_exclamation' : config.highlightedColumn.text[period] 
+						p.plans-table-green-highlighted-text #{translate(translationKey)}
 					.plans-table-th-content
 						if tableHeadKey
 							case tableHeadKey

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

@@ -2,7 +2,7 @@
 @plans-top-switch-item-height: 34px;
 @plans-top-switch-item-border-radius: @plans-top-switch-item-height / 2;
 @plans-m-a-switch-height: 34px;
-@plans-highlighted-text-height-desktop: 30px;
+@plans-highlighted-text-height-desktop: 32px;
 @plans-highlighted-text-height-mobile: 41px;
 @plans-learn-more-link-color: hsl(206, 100%, 52%);
 @plans-top-switch-group-width-mobile: 46%;
@@ -229,7 +229,7 @@
       }
 
       input + span {
-        background-color: @ol-green;
+        background-color: var(--green-50);
       }
 
       input:checked + span {
@@ -279,11 +279,11 @@
 
       &.tooltip.in.left {
         .tooltip-inner {
-          background-color: @ol-green;
+          background-color: var(--green-50);
         }
 
         .tooltip-arrow {
-          border-left-color: @ol-green;
+          border-left-color: var(--green-50);
         }
       }
 
@@ -297,12 +297,12 @@
 
         &.tooltip.in.bottom {
           .tooltip-inner {
-            background-color: @ol-green;
+            background-color: var(--green-50);
           }
 
           .tooltip-arrow {
             border-left-color: unset;
-            border-bottom-color: @ol-green;
+            border-bottom-color: var(--green-50);
           }
         }
 
@@ -659,7 +659,7 @@
 
       &.plans-table-green-highlighted {
         .plans-table-th {
-          border-top: @table-border-size solid @ol-green;
+          border-top: @table-border-size solid var(--green-50);
         }
       }
     }
@@ -1010,17 +1010,17 @@
   }
 
   p.plans-table-green-highlighted-text {
-    border: 2px solid @ol-green;
+    border: 2px solid var(--green-50);
     position: absolute;
     top: -1 * @plans-highlighted-text-height-desktop;
     left: 0;
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: @font-size-small;
-    line-height: 19px;
-    font-weight: 700;
-    background-color: @ol-green;
+    font-size: var(--font-size-03);
+    line-height: var(--line-height-02);
+    font-weight: 600;
+    background-color: var(--green-50);
     border-radius: var(--border-radius-large-new) var(--border-radius-large-new)
       0 0;
     color: @white;
@@ -1031,13 +1031,8 @@
     @media (max-width: @screen-sm-max) {
       top: -1 * @plans-highlighted-text-height-mobile;
       height: @plans-highlighted-text-height-mobile;
-    }
-
-    @media (max-width: @screen-xs-max) {
-      padding-left: 5px;
-      padding-right: 5px;
-      font-size: @font-size-extra-small;
-      line-height: 15px;
+      font-size: var(--font-size-01);
+      line-height: var(--line-height-01);
     }
   }
 
@@ -1104,7 +1099,7 @@
   }
 
   .plans-table-sticky-header-item-green-highlighted span {
-    color: @ol-green;
+    color: var(--green-50);
   }
 
   .plans-v2-faq {

services/web/locales/en.json

@@ -1693,6 +1693,7 @@
   "save_x_percent_or_more": "Save __percent__% or more",
   "saving": "Saving",
   "saving_20_percent": "Saving 20%!",
+  "saving_20_percent_no_exclamation": "Saving 20%",
   "saving_notification_with_seconds": "Saving __docname__... (__seconds__ seconds of unsaved changes)",
   "search": "Search",
   "search_bib_files": "Search by author, title, year",