fix: update mention popup style

This commit is contained in:
reya
2024-01-27 11:16:17 +07:00
parent 353c18bb76
commit b11e2a4291
2 changed files with 10 additions and 7 deletions

View File

@@ -39,7 +39,10 @@ export function UserAvatar({ className }: { className?: string }) {
alt={user.pubkey} alt={user.pubkey}
loading="eager" loading="eager"
decoding="async" decoding="async"
className={cn("bg-black dark:bg-white", className)} className={cn(
"bg-black dark:bg-white ring-1 ring-black/5 dark:ring-white/5",
className,
)}
/> />
) : ( ) : (
<Avatar.Image <Avatar.Image
@@ -47,7 +50,7 @@ export function UserAvatar({ className }: { className?: string }) {
alt={user.pubkey} alt={user.pubkey}
loading="eager" loading="eager"
decoding="async" decoding="async"
className={className} className={cn("ring-1 ring-black/5 dark:ring-white/5", className)}
/> />
)} )}
<Avatar.Fallback delayMs={120}> <Avatar.Fallback delayMs={120}>

View File

@@ -356,7 +356,7 @@ export function EditorForm() {
<Portal> <Portal>
<div <div
ref={ref} ref={ref}
className="top-[-9999px] left-[-9999px] absolute z-10 w-[250px] p-1 bg-white border border-neutral-50 dark:border-neutral-900 dark:bg-neutral-950 rounded-lg shadow-lg" className="top-[-9999px] left-[-9999px] absolute z-10 w-[250px] p-2 bg-white border border-neutral-50 dark:border-neutral-900 dark:bg-neutral-950 rounded-xl shadow-lg"
> >
{filters.map((contact, i) => ( {filters.map((contact, i) => (
<button <button
@@ -367,13 +367,13 @@ export function EditorForm() {
insertMention(editor, contact); insertMention(editor, contact);
setTarget(null); setTarget(null);
}} }}
className="px-2 py-2 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-900" className="p-2 flex flex-col w-full rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-900"
> >
<User.Provider pubkey={contact.npub}> <User.Provider pubkey={contact.npub}>
<User.Root className="flex items-center gap-2.5"> <User.Root className="w-full flex items-center gap-2.5">
<User.Avatar className="size-10 rounded-lg object-cover shrink-0" /> <User.Avatar className="size-8 rounded-lg object-cover shrink-0" />
<div className="flex w-full flex-col items-start"> <div className="flex w-full flex-col items-start">
<User.Name className="max-w-[15rem] truncate font-semibold" /> <User.Name className="max-w-[8rem] truncate text-sm font-medium" />
</div> </div>
</User.Root> </User.Root>
</User.Provider> </User.Provider>