Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

plans_page: Implement button styles and icons.

This commit is contained in:
Karl Stolley 2023-11-27 16:36:44 -06:00 committed by Tim Abbott
parent c5b4b452c1
commit 5bfe45b244
3 changed files with 77 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/corporate/plans.html
View File

@ -54,7 +54,7 @@
<span><a href="/for/communities/">Non-profits and communities</a></span>
</li>
</ul>
<a href="{{ sponsorship_url }}" class="sponsorship-button">Request sponsorship</a>
<a href="{{ sponsorship_url }}" class="button sponsorship-button">Request sponsorship</a>
<p class="contact-note">
Wondering if your organization will qualify, but not
ready to request sponsorship yet? E-mail us at <a

19
templates/corporate/pricing_model.html
View File

@ -33,12 +33,12 @@
<div class="bottom">
<div class="text-content">
{% if not realm or realm.plan_type == realm.PLAN_TYPE_SELF_HOSTED %}
<a href="/new/" class="button green">
<a href="/new/" class="button get-started-button">
Create organization
</a>
{% elif realm.plan_type == realm.PLAN_TYPE_LIMITED or sponsorship_pending %}
<div class="pricing-details"></div>
<a href='/upgrade/' class="button black-current-value" type="button">
<a href='/upgrade/' class="button current-plan-button" type="button">
Current plan
</a>
{% endif %}
@ -70,7 +70,7 @@
</div>
</div>
{% if not realm %}
<a href="/upgrade/" class="button green">
<a href="/upgrade/" class="button upgrade-button">
{% if free_trial_days %}
Start {{ free_trial_days }}-day free trial
{% else %}
@ -78,7 +78,8 @@
{% endif %}
</a>
{% elif realm.plan_type in [realm.PLAN_TYPE_STANDARD, realm.PLAN_TYPE_STANDARD_FREE] %}
<a href='/billing' class="button black-current-value" type="button">
<a href='/billing' class="button current-plan-button" type="button">
<i class="icon current-plan-icon"></i>
{% if realm_on_free_trial %}
Current plan (free trial)
{% else %}
@ -86,11 +87,11 @@
{% endif %}
</a>
{% elif sponsorship_pending %}
<a href="/billing/" class="button black-current-value" type="button">
<a href="/billing/" class="button current-plan-button" type="button">
Sponsorship pending
</a>
{% else %}
<a href="/upgrade/" class="button green">
<a href="/upgrade/" class="button upgrade-button">
{% if free_trial_days %}
Start {{ free_trial_days }}-day free trial
{% else %}
@ -124,7 +125,7 @@
</p>
</div>
</div>
<a href="mailto:sales@zulip.com" target="_blank" rel="noopener noreferrer" class="no-action button green">
<a href="mailto:sales@zulip.com" target="_blank" rel="noopener noreferrer" class="button upgrade-button">
Contact sales
</a>
</div>
@ -155,7 +156,7 @@
</div>
<div class="bottom">
<div class="text-content">
<a href="/self-hosting/" class="button green">
<a href="/self-hosting/" class="button get-started-button">
Self-host Zulip
</a>
</div>
@ -176,7 +177,7 @@
</div>
<div class="bottom">
<div class="text-content">
<a href="mailto:sales@zulip.com" target="_blank" rel="noopener noreferrer" class="no-action button green">
<a href="mailto:sales@zulip.com" target="_blank" rel="noopener noreferrer" class="button upgrade-button">
Contact sales
</a>
</div>

74
web/styles/portico/hello.css
View File

@ -1077,6 +1077,7 @@ ul {
--icon-left-outward-tab-curve: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M0 16h16V0c0 8.837-7.163 16-16 16Z'/%3e%3c/svg%3e");
--icon-right-outward-tab-curve: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M16 16H0V0c0 8.837 7.163 16 16 16Z'/%3e%3c/svg%3e");
--icon-question-header-swoosh: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='33' height='56' fill='none' viewBox='0 0 33 56'%3e%3cpath fill='%23E2EBF4' d='M33 37 1 56C1 35-3.5 0 33 0 7.5 3 7.776 37 33 37Z'/%3e%3c/svg%3e");
--icon-current-plan-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3e%3cg fill='%230F8544'%3e%3cpath d='M14.396 9.813a.914.914 0 1 0-1.293-1.293l-3.02 3.02-1.186-1.186a.914.914 0 1 0-1.294 1.293l1.834 1.833a.914.914 0 0 0 1.293 0l3.666-3.667Z'/%3e%3cpath fill-rule='evenodd' d='M11 .923a4.58 4.58 0 0 0-3.495 1.62 4.581 4.581 0 0 0-4.961 4.949 4.58 4.58 0 0 0 0 7.016 4.58 4.58 0 0 0 4.96 4.949 4.583 4.583 0 0 0 7.003-.001 4.582 4.582 0 0 0 4.95-4.96 4.583 4.583 0 0 0 0-6.991 4.58 4.58 0 0 0-4.962-4.962A4.581 4.581 0 0 0 11 .923ZM9.678 3.09a2.752 2.752 0 0 1 3.64.932.914.914 0 0 0 .972.4 2.752 2.752 0 0 1 3.289 3.288.914.914 0 0 0 .4.971 2.753 2.753 0 0 1 0 4.638.914.914 0 0 0-.4.97 2.752 2.752 0 0 1-3.283 3.29.914.914 0 0 0-.97.401 2.75 2.75 0 0 1-4.644 0 .914.914 0 0 0-.971-.401 2.752 2.752 0 0 1-3.29-3.283.914.914 0 0 0-.403-.97 2.753 2.753 0 0 1 0-4.652.914.914 0 0 0 .404-.97A2.752 2.752 0 0 1 7.71 4.42a.914.914 0 0 0 .97-.4c.25-.389.592-.709.997-.93Z' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e");
padding: 102px 0 58px;
background: linear-gradient(
@ -1325,14 +1326,6 @@ ul {
line-height: 17px;
}
}
.button {
display: block;
font-weight: 550;
font-size: 15px;
text-align: center;
padding: 8px 10px;
}
}
.additional-pricing-information {
@ -1431,6 +1424,71 @@ ul {
}
}
.button {
display: block;
font-family: var(--font-ss3);
font-weight: 550;
font-size: 15px;
text-align: center;
text-decoration: none;
letter-spacing: 0.06ch;
padding: 8px 10px;
border-radius: 4px;
}
.get-started-button {
color: hsl(0deg 0% 100%);
background-color: hsl(146deg 92% 26%);
&:hover {
color: hsl(0deg 0% 100%);
background-color: hsl(146deg 92% 24%);
}
}
.upgrade-button {
color: hsl(0deg 0% 100%);
background-color: hsl(219deg 62% 54%);
&:hover {
color: hsl(0deg 0% 100%);
background-color: hsl(219deg 62% 50%);
}
}
.current-plan-button {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5ch;
color: hsl(147deg 57% 25%);
&:hover {
color: hsl(147deg 57% 25%);
background-color: hsl(152deg 79% 24% / 14%);
}
.current-plan-icon {
width: 22px;
height: 22px;
display: block;
background-color: currentcolor;
mask-position: center;
mask-repeat: no-repeat;
mask-image: var(--icon-current-plan-icon);
}
}
.sponsorship-button {
color: hsl(147deg 57% 25%);
background-color: hsl(152deg 79% 24% / 10%);
&:hover {
color: hsl(147deg 57% 25%);
background-color: hsla(146deg 92% 24% / 15%);
}
}
&.showing-cloud {
.self-hosted-plan-pricing,
.self-hosted-additional-pricing {