From ec1ab82789529e39572a09b8d5667ac32919f3fa Mon Sep 17 00:00:00 2001 From: M Fahru Date: Tue, 14 May 2024 08:34:11 -0700 Subject: [PATCH] Merge pull request #17479 from overleaf/mf-clean-up-plans-styling [web] Clean up plans page styling GitOrigin-RevId: fe05e9a1fd6c29c62941c878fe5e676d062c37de --- .../web/app/views/subscriptions/plans.pug | 6 +- .../app/views/subscriptions/plans/_faq.pug | 4 +- .../app/views/subscriptions/plans/_quotes.pug | 2 +- .../stylesheets/app/change-plan-modal.less | 59 +++++ .../app/group-subscription-modal.less | 37 +++ .../stylesheets/app/plans/plans-ol.less | 14 -- .../stylesheets/app/plans/plans-v2.less | 66 +++++ .../frontend/stylesheets/app/plans/plans.less | 225 ------------------ .../stylesheets/app/subscription.less | 6 + .../web/frontend/stylesheets/main-style.less | 4 +- 10 files changed, 176 insertions(+), 247 deletions(-) create mode 100644 services/web/frontend/stylesheets/app/change-plan-modal.less create mode 100644 services/web/frontend/stylesheets/app/group-subscription-modal.less delete mode 100644 services/web/frontend/stylesheets/app/plans/plans-ol.less delete mode 100644 services/web/frontend/stylesheets/app/plans/plans.less diff --git a/services/web/app/views/subscriptions/plans.pug b/services/web/app/views/subscriptions/plans.pug index c10cd0de33..032bae4181 100644 --- a/services/web/app/views/subscriptions/plans.pug +++ b/services/web/app/views/subscriptions/plans.pug @@ -42,14 +42,14 @@ block content .row.row-spaced-large .col-md-12 - .plans-header.plans-subheader.text-centered + .plans-header.text-centered hr - h2.header-with-btn #{translate('still_have_questions')} + h2 #{translate('still_have_questions')} button.btn.plans-v2-btn-header.text-capitalize( data-ol-open-contact-form-modal="general" ) #{translate('contact_us')} - .row.row-spaced + .row.row-spaced-large include ./plans/_group_plan_modal != moduleIncludes("contactModalGeneral-marketing", locals) diff --git a/services/web/app/views/subscriptions/plans/_faq.pug b/services/web/app/views/subscriptions/plans/_faq.pug index 4e8ae14c6d..2c8f2c653e 100644 --- a/services/web/app/views/subscriptions/plans/_faq.pug +++ b/services/web/app/views/subscriptions/plans/_faq.pug @@ -1,7 +1,7 @@ -.faq.plans-v2-faq +.plans-v2-faq .row.row-spaced-large .col-md-12 - .page-header.plans-header.plans-subheader.text-centered + .page-header.plans-header.text-centered h2 FAQ .row .col-md-12 diff --git a/services/web/app/views/subscriptions/plans/_quotes.pug b/services/web/app/views/subscriptions/plans/_quotes.pug index 666124b405..950bff8909 100644 --- a/services/web/app/views/subscriptions/plans/_quotes.pug +++ b/services/web/app/views/subscriptions/plans/_quotes.pug @@ -1,6 +1,6 @@ .row.row-spaced-large .col-md-12 - .page-header.plans-header.plans-subheader.text-centered + .page-header.plans-header.text-centered h2 #{translate('in_good_company')} .row .col-md-6 diff --git a/services/web/frontend/stylesheets/app/change-plan-modal.less b/services/web/frontend/stylesheets/app/change-plan-modal.less new file mode 100644 index 0000000000..1095d417ef --- /dev/null +++ b/services/web/frontend/stylesheets/app/change-plan-modal.less @@ -0,0 +1,59 @@ +#change-plan { + .modal-dialog { + &:extend(.modal-lg); + } + + table { + @media only screen and (min-width: @screen-md-min) { + th:last-child, + td:last-child { + width: 1%; // will expand to fit the content + text-align: center; + } + } + + @media only screen and (max-width: @screen-sm-max) { + display: block; + + thead { + display: none; + } + + tbody, + td, + tr { + display: inline-block; + padding-top: 0; + padding-bottom: 0; + text-align: center; + width: 100%; + } + + td:first-child { + padding-top: @padding-md; + } + td:last-child { + padding-top: @padding-sm; + padding-bottom: @padding-md; + } + + tr:first-child { + td:first-child { + padding-top: @padding-sm; + } + } + + tr { + border-bottom: 1px solid @table-border-color; + td, + th { + border: 0 !important; + } + } + + tr:last-child { + border-bottom: 0; + } + } + } +} diff --git a/services/web/frontend/stylesheets/app/group-subscription-modal.less b/services/web/frontend/stylesheets/app/group-subscription-modal.less new file mode 100644 index 0000000000..78c2fccff3 --- /dev/null +++ b/services/web/frontend/stylesheets/app/group-subscription-modal.less @@ -0,0 +1,37 @@ +.group-subscription-modal { + .modal-header { + text-align: center; + } + + .group-plan-option { + display: block; + + span { + padding-left: 5px; + font-weight: normal; + } + } + + .educational-discount-badge { + height: 50px; + padding-top: 25px; + + p { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + font-weight: bold; + font-size: @font-size-small; + } + + .applied { + background-color: rgba(@ol-dark-green, 0.1); + color: @ol-dark-green; + } + + .ineligible { + background-color: @ol-blue-gray-0; + color: @ol-blue-gray-4; + } + } +} diff --git a/services/web/frontend/stylesheets/app/plans/plans-ol.less b/services/web/frontend/stylesheets/app/plans/plans-ol.less deleted file mode 100644 index c6bc3580db..0000000000 --- a/services/web/frontend/stylesheets/app/plans/plans-ol.less +++ /dev/null @@ -1,14 +0,0 @@ -.plans { - blockquote { - footer { - /* accessibility fix */ - color: @ol-blue-gray-3; - } - } - .plans-header { - h1, - h2 { - color: @gray-dark; - } - } -} diff --git a/services/web/frontend/stylesheets/app/plans/plans-v2.less b/services/web/frontend/stylesheets/app/plans/plans-v2.less index 6d2f3f969a..da9dc26d56 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-v2.less +++ b/services/web/frontend/stylesheets/app/plans/plans-v2.less @@ -11,6 +11,68 @@ @plans-v2-table-td-mobile-min-height: 34px; .plans { + p { + color: @neutral-70; + margin-bottom: @line-height-computed; + } + + blockquote { + footer { + /* accessibility fix */ + color: #6d6d6d; + } + + @media (min-width: @screen-md-min) { + margin-bottom: 0; + } + } + + .plans-header { + h1, + h2 { + color: @neutral-70; + } + } + + .circle { + font-size: 1.5rem; + font-weight: 700; + padding: 46px 18px; + margin: 0 auto @line-height-computed; + text-shadow: 0 -1px 1px darken(@link-color, 10%); + width: 120px; + height: 120px; + border-radius: 50%; + background-color: @brand-secondary; + color: white; + white-space: nowrap; + line-height: 1; + + .small { + color: rgba(255, 255, 255, 0.85); + font-size: @font-size-base * 0.8; + } + } + + .circle-lg { + height: 180px; + padding: 70px 8px; + width: 180px; + } + + .circle-subtext { + font-size: 1rem; + } + + .circle-img { + float: right; + + @media (max-width: @screen-sm-max) { + float: left; + margin: 0 15px; + } + } + @media (max-width: @screen-xs-max) { [data-ol-current-view='group'] [data-ol-plans-v2-m-a-switch-container] { display: none; @@ -1181,6 +1243,10 @@ p.plans-v2-table-green-highlighted-text { } .plans-v2-faq { + p { + margin: 0; + } + // need for specificity to override default a color p > a { color: @ol-blue; diff --git a/services/web/frontend/stylesheets/app/plans/plans.less b/services/web/frontend/stylesheets/app/plans/plans.less deleted file mode 100644 index ad74716c9f..0000000000 --- a/services/web/frontend/stylesheets/app/plans/plans.less +++ /dev/null @@ -1,225 +0,0 @@ -.plans { - p { - color: @gray-dark; - margin-bottom: @line-height-computed; - } - blockquote { - footer { - /* accessibility fix */ - color: @gray-med; - } - } - .card .btn { - white-space: normal; - } - .btn-header { - font-family: @font-family-sans-serif; - margin-left: 10px; - margin-top: -10px; - text-shadow: 0 0 0; - } - .card .btn { - white-space: normal; - } - .circle { - font-size: 1.5rem; - font-weight: 700; - padding: 46px 18px; - margin: 0 auto @line-height-computed; - text-shadow: 0 -1px 1px darken(@link-color, 10%); - width: 120px; - height: 120px; - border-radius: 50%; - background-color: @brand-secondary; - color: white; - white-space: nowrap; - line-height: 1; - .small { - color: rgba(255, 255, 255, 0.85); - font-size: @font-size-base * 0.8; - } - .undiscounted-price { - display: block; - margin-top: -48px; - } - } - .circle-lg { - height: 180px; - padding: 70px 8px; - width: 180px; - } - .circle-subtext { - font-size: 1rem; - } - .circle-img { - float: right; - } - .faq { - p { - margin: 0; - } - } - .header-with-btn { - line-height: 1.6; - } - .plans-header { - h1, - h2, - p { - text-shadow: 0 -1px 1px white; - } - h1, - h2 { - color: @red; - } - p { - margin-bottom: 0; - } - } - .plans-subheader { - margin-bottom: @line-height-computed; - } - .tagline { - margin-bottom: 20px; - } -} - -/** - Plans Test -*/ -@best-val-height: 35px; -@border-width-base: 3px; -@gray-med: #6d6d6d; - -/* Media Queries */ -@media (max-width: @screen-sm-max) { - .plans { - .circle-img { - float: left; - margin: 0 15px; - } - } -} - -@media (min-width: @screen-md-min) { - .plans { - blockquote { - margin-bottom: 0; - } - .faq { - .row:nth-child(2) { - h3 { - margin-top: 0; - } - } - } - } -} - -.student-disclaimer { - font-size: 14px; /* match .paymentPageFeatures p */ - color: @gray; /* match .paymentPageFeatures p */ - margin: 12.5px 0 0 0; -} - -.group-subscription-modal { - .modal-header { - text-align: center; - } - - .group-plan-option { - display: block; - - span { - padding-left: 5px; - font-weight: normal; - } - } - - .educational-discount-badge { - height: 50px; - padding-top: 25px; - - p { - display: inline-block; - padding-left: 5px; - padding-right: 5px; - font-weight: bold; - font-size: @font-size-small; - } - - .applied { - background-color: rgba(@ol-dark-green, 0.1); - color: @ol-dark-green; - } - - .ineligible { - background-color: @ol-blue-gray-0; - color: @ol-blue-gray-4; - } - } -} - -/** - Subscription Dash -*/ - -#change-plan { - .modal-dialog { - &:extend(.modal-lg); - } - - table { - @media only screen and (min-width: @screen-md-min) { - th:last-child, - td:last-child { - width: 1%; // will expand to fit the content - text-align: center; - } - } - - @media only screen and (max-width: @screen-sm-max) { - display: block; - - thead { - display: none; - } - - tbody, - td, - tr { - display: inline-block; - padding-top: 0; - padding-bottom: 0; - text-align: center; - width: 100%; - } - - td:first-child { - padding-top: @padding-md; - } - td:last-child { - padding-top: @padding-sm; - padding-bottom: @padding-md; - } - - tr:first-child { - td:first-child { - padding-top: @padding-sm; - } - } - - tr { - border-bottom: 1px solid @table-border-color; - td, - th { - border: 0 !important; - } - } - - tr:last-child { - border-bottom: 0; - } - } - } -} diff --git a/services/web/frontend/stylesheets/app/subscription.less b/services/web/frontend/stylesheets/app/subscription.less index 0965c6d74c..3443624876 100644 --- a/services/web/frontend/stylesheets/app/subscription.less +++ b/services/web/frontend/stylesheets/app/subscription.less @@ -101,6 +101,12 @@ h2 { margin: 0; } + + .student-disclaimer { + font-size: 14px; + color: @gray; + margin: 12.5px 0 0 0; + } } .price-feature-description { diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less index 5c56f96c5c..a95e9a46a3 100644 --- a/services/web/frontend/stylesheets/main-style.less +++ b/services/web/frontend/stylesheets/main-style.less @@ -104,8 +104,6 @@ @import 'app/project-list-react.less'; @import 'app/editor.less'; @import 'app/homepage.less'; -@import 'app/plans/plans.less'; -@import 'app/plans/plans-ol.less'; @import 'app/plans/plans-v2.less'; @import 'app/recurly.less'; @import 'app/bonus.less'; @@ -117,6 +115,8 @@ @import 'app/translations.less'; @import 'app/contact-us.less'; @import 'app/subscription.less'; +@import 'app/change-plan-modal.less'; +@import 'app/group-subscription-modal.less'; @import 'app/invite.less'; @import 'app/error-pages.less'; @import 'app/editor/history-v2.less';