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

Merge pull request #18652 from overleaf/mf-create-main-tab-new-plans-page

Browse source 
[web] Create new plans page tabs and period switcher

GitOrigin-RevId: 2dfea413fdcbbca8e90c1ab76844f35b2da4bd62
This commit is contained in:
M Fahru 2024-06-06 10:39:02 -07:00 committed by Copybot
parent 29837ec838
commit 0f783a7346
3 changed files with 130 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
services/web/frontend/stylesheets/app/plans/plans-new-design.less Normal file
View file

@ -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;
}
}

1
services/web/frontend/stylesheets/main-style.less
View file

@ -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';

4
services/web/locales/en.json
View file

@ -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",