github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #20048 from overleaf/jel-plans-light-touch

Browse source 
[web] Plans page light touch redesign updates

GitOrigin-RevId: 71bb1a594e1767fe406bb63334534fd73b3d368a
This commit is contained in:
Jessica Lawshe 2024-08-21 12:35:15 -05:00 committed by Copybot
parent cabf9b40d8
commit 493bdc92d5
3 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
services/web/app/views/subscriptions/plans-light-design.pug
View file

@ -38,6 +38,8 @@ block content
+currency_and_payment_methods()
include ./plans/_university_info
//- TODO: changing .plans-page-quote-row-hidden causes flickering on page load
.plans-page-quote-row(data-ol-show-for-plan-type="individual")
+collinsQuote1()
@ -48,9 +50,6 @@ block content
.plans-page-quote-row.plans-page-quote-row-hidden(data-ol-show-for-plan-type="student")
+collinsQuote2()
include ./plans/_university_info
include ./plans/_faq_new
include ./plans/light-redesign/_group_plan_modal

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

@ -18,8 +18,8 @@ mixin currency_and_payment_methods()
.row.plans-payment-methods.text-centered
.col-xs-12
p
| #{translate("all_prices_displayed_are_in_currency", { recommendedCurrency })}
| #{translate("subject_to_additional_vat")}
b #{translate("all_prices_displayed_are_in_currency", { recommendedCurrency })}
|  #{translate("subject_to_additional_vat")}
.plans-payment-methods-icons
img(src=buildImgPath('/other-brands/logo_mastercard.svg') aria-hidden="true")

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

@ -1,5 +1,6 @@
// m-a stands for: monthly annual
@plans-m-a-switch-height: 20px;
@plans-m-a-switch-height: 34px;
@plans-m-a-switch-padding: 2px;
@plans-highlighted-text-height-desktop: 32px;
@plans-highlighted-text-height-mobile: 41px;
@plans-learn-more-link-color: hsl(206, 100%, 52%);
@ -247,7 +248,7 @@
label {
position: relative;
display: inline-block;
width: 34px;
width: 60px;
height: @plans-m-a-switch-height;
margin: 0 var(--spacing-05);
@ -266,7 +267,7 @@
}
input:checked + span::before {
transform: translateX(14px);
transform: translateX(26px);
}
span {
@ -282,10 +283,12 @@
&::before {
position: absolute;
content: '';
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
height: @plans-m-a-switch-height - @plans-m-a-switch-padding -
@plans-m-a-switch-padding;
width: @plans-m-a-switch-height - @plans-m-a-switch-padding -
@plans-m-a-switch-padding;
left: @plans-m-a-switch-padding;
bottom: @plans-m-a-switch-padding;
background-color: @white;
transition: 0.4s;
border-radius: 50%;