Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-17 22:04:19 -05:00
Code Issues Activity

feat(console): add beta tags to protected app card (#5354)

Browse source
This commit is contained in:
Charles Zhao 2024-01-31 15:54:34 +08:00 • committed by GitHub
parent b008d30ceb
commit 6f6d56ed7c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/console/src/components/FeatureTag/index.module.scss
View file

@ -9,6 +9,7 @@
padding: _.unit(0.5) _.unit(2); padding: _.unit(0.5) _.unit(2);
color: var(--color-white); color: var(--color-white);
text-transform: capitalize; text-transform: capitalize;
user-select: none;
} }
.beta { .beta {

8
packages/console/src/pages/Applications/components/ProtectedAppCard/index.module.scss
View file

@ -30,11 +30,17 @@
height: 48px; height: 48px;
} }
.wrapper { .columnWrapper {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.titleRowWrapper {
display: flex;
align-items: center;
gap: _.unit(3);
}
.title { .title {
font: var(--font-title-2); font: var(--font-title-2);
color: var(--color-text); color: var(--color-text);

10
packages/console/src/pages/Applications/components/ProtectedAppCard/index.tsx
View file

@ -5,6 +5,7 @@ import { Trans, useTranslation } from 'react-i18next';
import ProtectedAppDarkIcon from '@/assets/icons/protected-app-dark.svg'; import ProtectedAppDarkIcon from '@/assets/icons/protected-app-dark.svg';
import ProtectedAppIcon from '@/assets/icons/protected-app.svg'; import ProtectedAppIcon from '@/assets/icons/protected-app.svg';
import { BetaTag } from '@/components/FeatureTag';
import Button from '@/ds-components/Button'; import Button from '@/ds-components/Button';
import TextLink from '@/ds-components/TextLink'; import TextLink from '@/ds-components/TextLink';
import useDocumentationUrl from '@/hooks/use-documentation-url'; import useDocumentationUrl from '@/hooks/use-documentation-url';
@ -42,9 +43,12 @@ function ProtectedAppCard({
{isInAppCreationPage && <label>{t('name')}</label>} {isInAppCreationPage && <label>{t('name')}</label>}
<div className={classNames(styles.card, hasBorder && styles.hasBorder)}> <div className={classNames(styles.card, hasBorder && styles.hasBorder)}>
<Icon className={styles.logo} /> <Icon className={styles.logo} />
<div className={styles.wrapper}> <div className={styles.columnWrapper}>
<div className={isInAppCreationPage ? styles.label : styles.title}> <div className={styles.titleRowWrapper}>
{t(isInAppCreationPage ? 'name' : 'title')} <div className={isInAppCreationPage ? styles.label : styles.title}>
{t(isInAppCreationPage ? 'name' : 'title')}
</div>
<BetaTag />
</div> </div>
<div className={styles.description}> <div className={styles.description}>
<Trans <Trans