Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

style(console): username (#3025)

Browse source
This commit is contained in:
Xiao Yijun 2023-01-31 11:51:52 +08:00 committed by GitHub
parent 28023a5f26
commit 7d89a55a7c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/console/src/components/UserName/index.module.scss
View file

@ -4,13 +4,22 @@
font: var(--body-medium); font: var(--body-medium);
color: var(--color-text); color: var(--color-text);
.userId { .title {
display: inline-block;
max-width: 100%;
@include _.text-ellipsis;
margin-right: _.unit(1);
}
.id {
display: inline-block;
font: var(--body-small); font: var(--body-small);
color: var(--color-text-secondary); color: var(--color-text-secondary);
margin-left: _.unit(1); @include _.text-ellipsis;
} }
.link { .link {
display: inline-block;
text-decoration: none; text-decoration: none;
color: var(--color-text-link); color: var(--color-text-link);
} }

11
packages/console/src/components/UserName/index.tsx
View file

@ -1,4 +1,5 @@
import type { User } from '@logto/schemas'; import type { User } from '@logto/schemas';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import useSWR from 'swr'; import useSWR from 'swr';
@ -26,13 +27,17 @@ const UserName = ({ userId, isLink = false }: Props) => {
return ( return (
<div className={styles.userName}> <div className={styles.userName}>
{isLink ? ( {isLink ? (
<Link to={`/users/${userId}`} target="_blank" className={styles.link}> <Link
to={`/users/${userId}`}
target="_blank"
className={classNames(styles.title, styles.link)}
>
{name} {name}
</Link> </Link>
) : ( ) : (
<span>{name}</span> <div className={styles.title}>{name}</div>
)} )}
<span className={styles.userId}>{userId}</span> <div className={styles.id}>{userId}</div>
</div> </div>
); );
}; };