chore: tweak line height

This commit is contained in:
Steven
2024-03-20 00:40:46 +08:00
parent ed89cb8310
commit 96a7d0eb25
5 changed files with 16 additions and 18 deletions

View File

@ -3,7 +3,7 @@ interface Props {
} }
const Code: React.FC<Props> = ({ content }: Props) => { const Code: React.FC<Props> = ({ content }: Props) => {
return <code className="inline break-all px-1 py-0.5 leading-none text-sm rounded bg-gray-100 dark:bg-zinc-700">{content}</code>; return <code className="inline break-all px-1 rounded bg-gray-100 dark:bg-zinc-700">{content}</code>;
}; };
export default Code; export default Code;

View File

@ -90,16 +90,14 @@ const MemoView: React.FC<Props> = (props: Props) => {
<UserAvatar className="mr-2 shrink-0" avatarUrl={creator.avatarUrl} /> <UserAvatar className="mr-2 shrink-0" avatarUrl={creator.avatarUrl} />
</Link> </Link>
<div className="w-full flex flex-col justify-center items-start"> <div className="w-full flex flex-col justify-center items-start">
<Link <Link className="w-auto hover:opacity-80" to={`/u/${encodeURIComponent(creator.username)}`} unstable_viewTransition>
className="w-auto leading-none hover:opacity-80" <span className="text-gray-600 text-lg leading-tight max-w-[80%] truncate dark:text-gray-400">
to={`/u/${encodeURIComponent(creator.username)}`}
unstable_viewTransition
>
<span className="text-gray-600 text-lg leading-none max-w-[80%] truncate dark:text-gray-400">
{creator.nickname || creator.username} {creator.nickname || creator.username}
</span> </span>
</Link> </Link>
<span className="text-gray-400 text-sm leading-none max-w-[80%] truncate dark:text-gray-500">{creator.description}</span> <span className="-mt-1 text-gray-400 text-sm leading-tight max-w-[80%] truncate dark:text-gray-500">
{creator.description}
</span>
</div> </div>
</div> </div>
)} )}
@ -146,7 +144,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
/> />
<MemoResourceListView resources={memo.resources} /> <MemoResourceListView resources={memo.resources} />
<div className="w-full flex flex-row justify-between items-center"> <div className="w-full flex flex-row justify-between items-center">
<div className="text-sm leading-none text-gray-400 select-none"> <div className="text-sm leading-tight text-gray-400 select-none">
<relative-time datetime={memo.displayTime?.toISOString()} tense="past" onClick={handleGotoMemoDetailPage}></relative-time> <relative-time datetime={memo.displayTime?.toISOString()} tense="past" onClick={handleGotoMemoDetailPage}></relative-time>
</div> </div>
</div> </div>

View File

@ -26,10 +26,10 @@ const MyAccountSection = () => {
<UserAvatar className="mr-2 shrink-0 w-10 h-10" avatarUrl={user.avatarUrl} /> <UserAvatar className="mr-2 shrink-0 w-10 h-10" avatarUrl={user.avatarUrl} />
<div className="max-w-[calc(100%-3rem)] flex flex-col justify-center items-start"> <div className="max-w-[calc(100%-3rem)] flex flex-col justify-center items-start">
<p className="w-full"> <p className="w-full">
<span className="text-xl leading-none font-medium">{user.nickname}</span> <span className="text-xl leading-tight font-medium">{user.nickname}</span>
<span className="ml-1 text-base leading-none text-gray-500 dark:text-gray-400">({user.username})</span> <span className="ml-1 text-base leading-tight text-gray-500 dark:text-gray-400">({user.username})</span>
</p> </p>
<p className="w-4/5 leading-none text-sm truncate">{user.description}</p> <p className="w-4/5 leading-tight text-sm truncate">{user.description}</p>
</div> </div>
</div> </div>
<div className="w-full flex flex-row justify-start items-center mt-2 space-x-2"> <div className="w-full flex flex-row justify-start items-center mt-2 space-x-2">

View File

@ -153,7 +153,7 @@ const Timeline = () => {
<div className={classNames("flex flex-col justify-start items-start w-full mt-2 last:mb-4")}> <div className={classNames("flex flex-col justify-start items-start w-full mt-2 last:mb-4")}>
<div className={classNames("flex shrink-0 flex-row w-full pl-1 mt-2 mb-2")}> <div className={classNames("flex shrink-0 flex-row w-full pl-1 mt-2 mb-2")}>
<div className={classNames("w-full flex flex-col")}> <div className={classNames("w-full flex flex-col")}>
<span className="font-medium text-3xl leading-none mb-1"> <span className="font-medium text-3xl leading-tight mb-1">
{new Date(group.month).toLocaleString(i18n.language, { month: "short", timeZone: "UTC" })} {new Date(group.month).toLocaleString(i18n.language, { month: "short", timeZone: "UTC" })}
</span> </span>
<span className="opacity-60">{new Date(group.month).getUTCFullYear()}</span> <span className="opacity-60">{new Date(group.month).getUTCFullYear()}</span>

View File

@ -118,16 +118,16 @@ const UserProfile = () => {
endDecorator={<Icon.ExternalLink className="w-4 h-auto opacity-60" />} endDecorator={<Icon.ExternalLink className="w-4 h-auto opacity-60" />}
onClick={handleCopyProfileLink} onClick={handleCopyProfileLink}
> >
Share {t("common.share")}
</Button> </Button>
</div> </div>
<div className="w-full flex flex-row justify-start items-center pt-4 pb-8 px-4"> <div className="w-full flex flex-row justify-start items-center pt-4 pb-8 px-3">
<UserAvatar className="!w-16 !h-16 drop-shadow mr-3" avatarUrl={user?.avatarUrl} /> <UserAvatar className="!w-16 !h-16 drop-shadow mr-3 rounded-3xl" avatarUrl={user?.avatarUrl} />
<div className="w-auto max-w-[calc(100%-6rem)] flex flex-col justify-center items-start"> <div className="w-auto max-w-[calc(100%-6rem)] flex flex-col justify-center items-start">
<p className="w-full text-4xl text-black leading-none opacity-80 dark:text-gray-200 truncate"> <p className="w-full text-4xl text-black leading-tight opacity-80 dark:text-gray-200 truncate">
{user.nickname || user.username} {user.nickname || user.username}
</p> </p>
<p className="w-full mt-1 text-gray-500 leading-none opacity-80 dark:text-gray-400 truncate">{user.description}</p> <p className="w-full text-gray-500 opacity-80 dark:text-gray-400 truncate">{user.description}</p>
</div> </div>
</div> </div>
<MemoFilter className="px-2 pb-3" /> <MemoFilter className="px-2 pb-3" />