From 2547294353beb7194048f87376036412285aab49 Mon Sep 17 00:00:00 2001 From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com> Date: Thu, 20 Jun 2024 08:19:18 -0500 Subject: [PATCH] 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 --- .../app/plans/plans-new-design.less | 45 ++++++++++++++----- .../app/plans/plans-new-variables.less | 17 +++++++ .../frontend/stylesheets/variables/all.less | 4 -- .../stylesheets/variables/border-radius.less | 13 ++++-- .../stylesheets/variables/css-variables.less | 12 +++-- services/web/locales/en.json | 1 + 6 files changed, 68 insertions(+), 24 deletions(-) create mode 100644 services/web/frontend/stylesheets/app/plans/plans-new-variables.less diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-design.less b/services/web/frontend/stylesheets/app/plans/plans-new-design.less index 68c3bcce32..fe0fbcdac7 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less +++ b/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 diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-variables.less b/services/web/frontend/stylesheets/app/plans/plans-new-variables.less new file mode 100644 index 0000000000..8e43ca0c59 --- /dev/null +++ b/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; diff --git a/services/web/frontend/stylesheets/variables/all.less b/services/web/frontend/stylesheets/variables/all.less index df8417464d..a04be6169a 100644 --- a/services/web/frontend/stylesheets/variables/all.less +++ b/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; diff --git a/services/web/frontend/stylesheets/variables/border-radius.less b/services/web/frontend/stylesheets/variables/border-radius.less index 86e5c86bc7..802571a28e 100644 --- a/services/web/frontend/stylesheets/variables/border-radius.less +++ b/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; diff --git a/services/web/frontend/stylesheets/variables/css-variables.less b/services/web/frontend/stylesheets/variables/css-variables.less index 7d52eac22e..41d38f6fa3 100644 --- a/services/web/frontend/stylesheets/variables/css-variables.less +++ b/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; } diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 39695834ca..91848b87cc 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -1163,6 +1163,7 @@ "more_project_collaborators": "<0>More project <0>collaborators", "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",