update overal typography
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 ? (
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user