From d56f274122ae614ea3f448d84f0455e6a039ec9e Mon Sep 17 00:00:00 2001 From: M Fahru Date: Thu, 6 Jun 2024 10:39:02 -0700 Subject: [PATCH] Merge pull request #18652 from overleaf/mf-create-main-tab-new-plans-page [web] Create new plans page tabs and period switcher GitOrigin-RevId: 2dfea413fdcbbca8e90c1ab76844f35b2da4bd62 --- .../app/plans/plans-new-design.less | 125 ++++++++++++++++++ .../web/frontend/stylesheets/main-style.less | 1 + services/web/locales/en.json | 4 + 3 files changed, 130 insertions(+) create mode 100644 services/web/frontend/stylesheets/app/plans/plans-new-design.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 new file mode 100644 index 0000000000..4e861b1c22 --- /dev/null +++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less @@ -0,0 +1,125 @@ +.plans-new-design { + .plans-new-content { + display: flex; + flex-direction: column; + align-items: center; + } + + .plans-new-tabs { + display: flex; + justify-content: center; + gap: 8px; + + .plans-new-tab { + cursor: pointer; + font-size: 16px; + font-weight: 600; + border-top-right-radius: 8px; + border-top-left-radius: 8px; + + .plans-new-tab-link { + border: unset; + display: flex; + align-items: center; + gap: 12px; + color: var(--neutral-70); + margin: 0; + border-top-right-radius: 8px; + border-top-left-radius: 8px; + border: 1px solid var(--neutral-20); + + &:focus { + background-color: unset; + border: 1px solid var(--emerald-green); + border-bottom-color: white; + } + + &:hover { + background-color: var(--neutral-20); + } + } + + &.active { + .plans-new-tab-link { + border: 1px solid var(--emerald-green); + color: var(--emerald-green); + border-bottom-color: white; + + &:hover { + background-color: unset; + } + } + + .plans-new-discount-badge { + background-color: #eaf6ef; + color: var(--emerald-green); + } + } + } + } + + @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; + background-color: var(--neutral-10); + width: @switcher-container-width; + height: @switcher-container-height; + border-radius: @switcher-container-border-radius; + padding: @switcher-container-padding; + margin-top: 64px; + margin-bottom: 40px; + + .plans-new-period-switcher { + font-size: 20px; + font-weight: 600; + line-height: 1.4; + text-align: center; + padding: 2px 8px; + height: @switcher-height; + border-radius: @switcher-border-radius; + display: flex; + align-items: center; + border: unset; + background-color: unset; + + &:hover { + background-color: var(--neutral-20); + } + + &.active { + background-color: var(--emerald-green); + color: white; + box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16); + + .plans-new-discount-badge { + background-color: #eaf6ef; + color: var(--emerald-green); + } + } + + .plans-new-discount-badge { + margin-left: 6px; + } + } + } + + .plans-new-discount-badge { + font-size: 12px; + font-family: 'DM Mono', monospace; + padding: 2px 8px; + height: 20px; + border-radius: 10px; + background-color: var(--neutral-70); + color: white; + display: flex; + align-items: center; + } +} diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less index 6426fc3db0..7449f89d14 100644 --- a/services/web/frontend/stylesheets/main-style.less +++ b/services/web/frontend/stylesheets/main-style.less @@ -105,6 +105,7 @@ @import 'app/editor.less'; @import 'app/homepage.less'; @import 'app/plans/plans-v2.less'; +@import 'app/plans/plans-new-design.less'; @import 'app/recurly.less'; @import 'app/bonus.less'; @import 'app/register.less'; diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 4c02ae9d7c..5b2fd8b97d 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -854,6 +854,7 @@ "include_caption": "Include caption", "include_label": "Include label", "increased_compile_timeout": "Increased compile timeout", + "individuals": "Individuals", "indvidual_plans": "Individual Plans", "info": "Info", "inr_discount_modal_info": "Get document history, track changes, additional collaborators, and more at Purchasing Power Parity prices.", @@ -1601,6 +1602,7 @@ "saml_missing_signature_error": "Sorry, the information received from your identity provider is not signed (both response and assertion signatures are required). Please contact your administrator for more information.", "saml_response": "SAML Response", "save": "Save", + "save_20_percent": "save 20%", "save_20_percent_by_paying_annually": "Save 20% by paying annually", "save_30_percent_or_more": "save 30% or more", "save_30_percent_or_more_uppercase": "Save 30% or more", @@ -1815,6 +1817,7 @@ "student_and_faculty_support_make_difference": "Student and faculty support make a difference! We can share this information with our contacts at your university when discussing an Overleaf institutional account.", "student_disclaimer": "The educational discount applies to all students at secondary and postsecondary institutions (schools and universities). We may contact you to confirm that you’re eligible for the discount.", "student_plans": "Student Plans", + "students": "Students", "subject": "Subject", "subject_area": "Subject area", "subject_to_additional_vat": "Prices may be subject to additional VAT, depending on your country.", @@ -2196,6 +2199,7 @@ "x_price_per_user": "__price__ per user", "x_price_per_year": "__price__ per year", "year": "year", + "yearly": "Yearly", "yes_im_in": "Yes, I’m in", "yes_move_me_to_personal_plan": "Yes, move me to the Personal plan", "yes_that_is_correct": "Yes, that’s correct",