Merge pull request #18909 from overleaf/mf-new-plans-page-table-highlighted-column

[web] Implement highlighted column based on hardcoded column id on new plans page table

GitOrigin-RevId: 241913c81670ea158f436c29060bd9e1836ed4fc

services/web/frontend/stylesheets/app/plans/plans-new-design.less

@@ -1,5 +1,4 @@
-@z-index-plans-new-tabs: 1;
-@z-index-plans-new-tabs-content: 0;
+@import './plans-new-variables.less';
 
 .plans-new-design {
   padding-top: calc(var(--spacing-16) + var(--header-height));
@@ -184,14 +183,6 @@
     }
   }
 
-  @switcher-container-width: 270px;
-  @switcher-container-height: 44px;
-  @switcher-container-border-radius: @switcher-container-height / 2;
-  @switcher-container-padding: 6px;
-  @switcher-padding-vertical: 2px;
-  @switcher-height: @switcher-container-height - 2 * @switcher-container-padding;
-  @switcher-border-radius: @switcher-height / 2;
-
   .plans-new-period-switcher-container {
     display: flex;
     justify-content: center;
@@ -201,7 +192,7 @@
     border-radius: @switcher-container-border-radius;
     padding: @switcher-container-padding;
     margin-top: @spacing-09;
-    margin-bottom: 40px;
+    margin-bottom: @switcher-container-margin-bottom;
 
     .plans-new-period-switcher {
       font-size: var(--font-size-05);
@@ -320,6 +311,7 @@
   }
 
   .plans-new-table-header {
+    position: relative;
     padding: @spacing-06 @spacing-08;
 
     @media (max-width: @screen-md-max) {
@@ -411,6 +403,14 @@
     }
   }
 
+  .plans-new-table-body:last-of-type {
+    .plans-new-table-feature-row {
+      .plans-new-table-feature-td.plans-new-table-highlighted-cell {
+        border-bottom: var(--border-width-base) solid var(--green-50);
+      }
+    }
+  }
+
   .plans-new-table-heading-row {
     // this means min-height, min-height does not work in table layout
     // https://stackoverflow.com/questions/7790222
@@ -468,7 +468,7 @@
         font-size: var(--font-size-02);
         text-align: left;
         background-color: var(--neutral-90);
-        border-radius: var(--border-radius-base);
+        border-radius: var(--border-radius-base-new);
       }
     }
   }
@@ -483,6 +483,27 @@
     }
   }
 
+  .plans-new-table-highlighted-heading {
+    position: absolute;
+    left: calc(-1 * var(--border-width-base));
+    top: -1 * @highlighted-heading-height;
+    height: @highlighted-heading-height;
+    width: calc(100% + (2 * var(--border-width-base)));
+    border-top-left-radius: var(--border-radius-large-new);
+    border-top-right-radius: var(--border-radius-large-new);
+    padding: @highlighted-heading-padding-vertical var(--spacing-04);
+    font-weight: 600;
+    text-align: center;
+    line-height: @highlighted-heading-line-height;
+    background-color: var(--green-50);
+    color: white;
+  }
+
+  .plans-new-table-highlighted-cell {
+    border-right: var(--border-width-base) solid var(--green-50);
+    border-left: var(--border-width-base) solid var(--green-50);
+  }
+
   // ------------------------------------------------------------------
   // ------------------------------------------------------------------
   // These comments will be deleted before merging this PR

services/web/frontend/stylesheets/app/plans/plans-new-variables.less

@@ -0,0 +1,17 @@
+@z-index-plans-new-tabs: 1;
+@z-index-plans-new-tabs-content: 0;
+
+@highlighted-heading-line-height: (@line-height-03 / 1rem) * 16px; // convert to px
+@highlighted-heading-padding-vertical: @spacing-02;
+@highlighted-heading-height: (
+  @highlighted-heading-line-height + (2 * @highlighted-heading-padding-vertical)
+);
+
+@switcher-container-width: 270px;
+@switcher-container-height: 44px;
+@switcher-container-border-radius: @switcher-container-height / 2;
+@switcher-container-padding: 6px;
+@switcher-container-margin-bottom: @highlighted-heading-height + @spacing-10;
+@switcher-padding-vertical: 2px;
+@switcher-height: @switcher-container-height - 2 * @switcher-container-padding;
+@switcher-border-radius: @switcher-height / 2;

services/web/frontend/stylesheets/variables/all.less

@@ -108,10 +108,6 @@
 @line-height-large: 1.33;
 @line-height-small: 1.5;
 
-@border-radius-base: 3px;
-@border-radius-base-new: 4px;
-@border-radius-large: 5px;
-@border-radius-small: 2px;
 @border-width-sm: 1px;
 @border-width-base: 3px; // only used by plans and cards
 @border-size: 1px;

services/web/frontend/stylesheets/variables/border-radius.less

@@ -1,4 +1,9 @@
-@border-radius-base: 4px;
-@border-radius-medium: 8px;
-@border-radius-large: 16px;
-@border-radius-full: 9999px;
+// TODO: Convert all of the border-radius usage to the new values
+@border-radius-small: 2px;
+@border-radius-base: 3px;
+@border-radius-large: 5px;
+
+@border-radius-base-new: 4px;
+@border-radius-medium-new: 8px;
+@border-radius-large-new: 16px;
+@border-radius-full-new: 9999px;

services/web/frontend/stylesheets/variables/css-variables.less

@@ -145,8 +145,12 @@
   --line-height-12: @line-height-12;
 
   // border-radius
-  --border-radius-base: @border-radius-base;
-  --border-radius-medium: @border-radius-medium;
-  --border-radius-large: @border-radius-large;
-  --border-radius-full: @border-radius-full;
+  --border-radius-base-new: @border-radius-base-new;
+  --border-radius-medium-new: @border-radius-medium-new;
+  --border-radius-large-new: @border-radius-large-new;
+  --border-radius-full-new: @border-radius-full-new;
+
+  // border-width
+  --border-width-sm: @border-width-sm;
+  --border-width-base: @border-width-base;
 }

services/web/locales/en.json

@@ -1163,6 +1163,7 @@
   "more_project_collaborators": "<0>More</0> project <0>collaborators</0>",
   "more_than_one_kind_of_snippet_was_requested": "The link to open this content on Overleaf included some invalid parameters. If this keeps happening for links on a particular site, please report this to them.",
   "most_popular": "most popular",
+  "most_popular_uppercase": "Most popular",
   "must_be_email_address": "Must be an email address",
   "must_be_purchased_online": "Must be purchased online",
   "my_library": "My Library",