anyproto/anytype-ts
1
0
Fork 0
mirror of https://github.com/anyproto/anytype-ts.git synced 2025-06-10 10:00:48 +09:00
Code Activity

membership flexible tiers fixed

Browse source
This commit is contained in:
Andrew Simachev 2024-04-01 13:52:18 +02:00
parent 4ade7b72b6
commit 76dfddec6e
No known key found for this signature in database
GPG key ID: 49A163D0D14E6FD8
3 changed files with 36 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/scss/form/button.scss
View file

@ -1,7 +1,7 @@
@import "~scss/_vars";
.button {
display: inline-flex; border: 0px; font-weight: 500; text-decoration: none;
display: inline-flex; border: 0px; font-weight: 500; text-decoration: none; text-align: center;
height: 40px; padding: 0px 16px; border-radius: 8px; transition: $transitionAllCommon;
vertical-align: middle; position: relative; overflow: hidden; align-items: center; justify-content: center;
@include text-paragraph; cursor: default; -webkit-app-region: no-drag;

45
src/scss/popup/settings.scss
View file

@ -760,29 +760,44 @@
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; padding-top: 18px; margin-bottom: 48px; }
.tiers {
.tier { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 296px; flex-shrink: 0; text-align: left; border-radius: 16px; padding: 16px 16px 20px; }
.tier { position: relative; display: flex; flex-direction: column; justify-content: space-between; text-align: left; border-radius: 16px; padding: 16px 16px 20px; }
.tier {
.currentLabel { position: absolute; top: 16px; right: 16px; border: 1px solid var(--color-control-accent); border-radius: 10px; @include text-small; font-weight: 500; height: 20px; padding: 0px 8px; }
.icon { width: 64px; height: 64px; background-size: 64px 64px; margin-bottom: 10px; }
.icon.tier1 { background-image: url('~img/icon/payment/tier1.svg'); }
.icon.tier2 { background-image: url('~img/icon/payment/tier2.svg'); width: 60px; height: 60px; margin: 2px 0px 12px; background-size: 60px 60px; }
.icon.tier3 { background-image: url('~img/icon/payment/tier3.svg'); }
.title { @include text-paragraph; margin-bottom: 4px; }
.label { @include text-small; }
.priceWrapper { margin-bottom: 10px; @include text-small; }
.priceWrapper {
.price { @include text-paragraph; font-weight: 600; display: inline-block; padding-right: 4px; }
.iconWrapper { display: flex; align-items: flex-start; flex-direction: row; margin: 0px 0px 10px 0px; justify-content: space-between; gap: 0px 8px; }
.iconWrapper {
.icon { width: 64px; height: 64px; background-size: contain; }
.current {
border: 1px solid var(--color-control-accent); border-radius: 10px; @include text-small; font-weight: 500; height: 20px;
padding: 0px 8px; display: none;
}
}
.title { @include text-paragraph; margin: 0px 0px 4px 0px; }
.label { @include text-small; margin: 0px 0px 42px 0px; }
.button { width: 100%; }
.priceWrapper { margin: 0px 0px 10px 0px; @include text-small; display: flex; align-items: baseline; gap: 0px 4px; }
.priceWrapper {
.price { @include text-paragraph; font-weight: 600; }
}
}
.tier.tier1 { background: linear-gradient(180deg, #d7faff 0%, #f3f3f3 25.64%); }
.tier.tier1 {
.icon { background-image: url('~img/icon/payment/tier1.svg'); }
}
.tier.tier2 { background: linear-gradient(180deg, #eaecfe 0%, #f3f3f3 25.64%); }
.tier.tier2 {
.icon { background-image: url('~img/icon/payment/tier2.svg'); width: 60px; height: 60px; margin: 2px 0px 0px 0px; }
}
.tier.tier3 { background: linear-gradient(180deg, #ffebeb 0%, #f3f3f3 25.64%); }
.tier.current {
.tier.tier3 {
.icon { background-image: url('~img/icon/payment/tier3.svg'); }
}
.tier.isCurrent {
.iconWrap {
.current { display: block; }
}
.priceWrapper {
.price { display: none; }
}
@ -793,8 +808,6 @@
.actionItems {
.icon { width: 16px; height: 16px; background: url('~img/icon/payment/hyperlink.svg'); }
}
.special {}
}
}

11
src/ts/component/popup/page/settings/membership.tsx
View file

@ -44,7 +44,6 @@ const PopupSettingsPageMembership = observer(class PopupSettingsPageMembership e
const price = item.price ? `$${item.price}` : translate('popupSettingsMembershipJustEmail');
let period = '';
let currentLabel = null;
let buttonText = translate('popupSettingsMembershipLearnMore');
if (isCurrent) {
@ -54,7 +53,6 @@ const PopupSettingsPageMembership = observer(class PopupSettingsPageMembership e
period = translate('popupSettingsMembershipForeverFree');
};
currentLabel = <div className="currentLabel">{translate('popupSettingsMembershipCurrent')}</div>;
buttonText = translate('popupSettingsMembershipManage');
} else
if (item.period) {
@ -65,12 +63,15 @@ const PopupSettingsPageMembership = observer(class PopupSettingsPageMembership e
return (
<div
className={[ 'tier', `tier${item.idx}`, isCurrent ? 'current' : '' ].join(' ')}
className={[ 'tier', `tier${item.idx}`, (isCurrent ? 'isCurrent' : '') ].join(' ')}
onClick={() => popupStore.open('membership', { data: { tier: item.id } })}
>
<div className="top">
{currentLabel}
<div className={[ 'icon', `tier${item.idx}` ].join(' ')} />
<div className="iconWrapper">
<Icon />
<div className="current">{translate('popupSettingsMembershipCurrent')}</div>
</div>
<Title text={translate(`popupSettingsMembershipTier${item.idx}Title`)} />
<Label text={translate(`popupSettingsMembershipTier${item.idx}Text`)} />
</div>