Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-04-07 23:01:25 -05:00
Code Issues Activity

feat(console): add most popular tag for pro plan item (#4225)

Browse source
This commit is contained in:
Xiao Yijun 2023-07-25 16:13:18 +08:00 • committed by GitHub
parent c83f5251e8
commit 9eca310f6c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/PlanCardItem/index.module.scss
View file

@ -1,6 +1,7 @@
@use '@/scss/underscore' as _;
.container {
position: relative;
flex: 1;
border-radius: 12px;
border: 1px solid var(--color-divider);
@ -81,3 +82,26 @@
padding-bottom: _.unit(8);
}
}
.mostPopularTag {
position: absolute;
border-radius: 4px 4px 0;
font: var(--font-label-3);
padding: _.unit(1.5) _.unit(2) _.unit(1.5) _.unit(2.5);
color: var(--color-white);
background-color: var(--color-primary-50);
right: -5px;
top: _.unit(6);
width: 64px;
text-align: center;
&::after {
display: block;
content: '';
position: absolute;
right: 0;
bottom: -3px;
border-left: 4px solid var(--color-primary-60);
border-bottom: 3px solid transparent;
}
}

3
packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/PlanCardItem/index.tsx
View file

@ -120,6 +120,9 @@ function PlanCardItem({ plan, onSelect }: Props) {
onClick={onSelect}
/>
</div>
{planId === ReservedPlanId.pro && (
<div className={styles.mostPopularTag}>{t('most_popular')}</div>
)}
</div>
);
}