update overal typography

This commit is contained in:
Ren Amamiya
2023-05-20 21:00:09 +07:00
parent 4be64f7730
commit caeffe98a7
54 changed files with 157 additions and 165 deletions

View File

@@ -23,7 +23,7 @@ export default function ChatsListItem({ pubkey }: { pubkey: string }) {
<div className="inline-flex h-8 items-center gap-2.5 rounded-md px-2.5">
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
<div>
<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-sm font-medium" />
<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
</div>
</div>
) : (
@@ -32,7 +32,7 @@ export default function ChatsListItem({ pubkey }: { pubkey: string }) {
className={twMerge(
"group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
pagePubkey === pubkey
? "dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
: "",
)}
>
@@ -44,8 +44,8 @@ export default function ChatsListItem({ pubkey }: { pubkey: string }) {
/>
</div>
<div>
<h5 className="truncate text-[13px] font-semibold text-zinc-400 group-hover:text-zinc-200">
{user.display_name || user.name || shortenKey(pubkey)}
<h5 className="truncate font-medium text-zinc-400 group-hover:text-white">
{user.nip05 || user.name || shortenKey(pubkey)}
</h5>
</div>
</a>

View File

@@ -66,7 +66,7 @@ export default function ChatMessageForm({
onKeyDown={handleEnterPress}
spellCheck={false}
placeholder="Message"
className="relative h-24 w-full resize-none rounded-lg border border-black/5 px-3.5 py-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
className="relative h-24 w-full resize-none rounded-lg border border-black/5 px-3.5 py-3 text-base shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
/>
</div>
<div className="absolute bottom-2 w-full px-2">
@@ -80,7 +80,7 @@ export default function ChatMessageForm({
type="button"
onClick={() => submitEvent()}
disabled={value.length === 0 ? true : false}
className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-base font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
>
Send
</button>

View File

@@ -29,7 +29,7 @@ export const ChatMessageItem = memo(function MessageListItem({
<div className="flex flex-col">
<ChatMessageUser pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-[17px] pl-[48px]">
<div className="whitespace-pre-line break-words text-sm leading-tight">
<div className="whitespace-pre-line break-words text-base leading-tight">
{content.parsed}
</div>
{Array.isArray(content.images) && content.images.length ? (

View File

@@ -22,7 +22,7 @@ export default function ChatMessageUser({
<>
<div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800" />
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex items-baseline gap-2 text-sm">
<div className="flex items-baseline gap-2 text-base">
<div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
</div>
</div>
@@ -39,8 +39,8 @@ export default function ChatMessageUser({
/>
</div>
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex items-baseline gap-2 text-sm">
<span className="font-semibold leading-none text-zinc-200 group-hover:underline">
<div className="flex items-baseline gap-2 text-base">
<span className="font-semibold leading-none text-white group-hover:underline">
{user?.display_name || user?.name || shortenKey(pubkey)}
</span>
<span className="leading-none text-zinc-500">·</span>

View File

@@ -24,7 +24,7 @@ export default function ChatsListSelfItem() {
<div className="inline-flex h-8 items-center gap-2.5 rounded-md px-2.5">
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
<div>
<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-sm font-medium" />
<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
</div>
</div>
) : (
@@ -33,7 +33,7 @@ export default function ChatsListSelfItem() {
className={twMerge(
"inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
pagePubkey === account.pubkey
? "dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
: "",
)}
>
@@ -45,11 +45,9 @@ export default function ChatsListSelfItem() {
/>
</div>
<div>
<h5 className="truncate text-[13px] font-semibold text-zinc-400">
{profile?.display_name ||
profile?.name ||
shortenKey(account.pubkey)}{" "}
<span className="text-zinc-500">(you)</span>
<h5 className="truncate font-medium text-zinc-400">
{profile?.nip05 || profile?.name || shortenKey(account.pubkey)}{" "}
<span className="text-zinc-600">(you)</span>
</h5>
</div>
</a>