From b11e2a4291965b8c7ebe2aa02bfd937885a8412a Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Sat, 27 Jan 2024 11:16:17 +0700
Subject: [PATCH] fix: update mention popup style

---
 packages/ark/src/components/user/avatar.tsx |  7 +++++--
 packages/ui/src/editor/form.tsx             | 10 +++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/ark/src/components/user/avatar.tsx b/packages/ark/src/components/user/avatar.tsx
index 60b01a19..22d14057 100644
--- a/packages/ark/src/components/user/avatar.tsx
+++ b/packages/ark/src/components/user/avatar.tsx
@@ -39,7 +39,10 @@ export function UserAvatar({ className }: { className?: string }) {
 					alt={user.pubkey}
 					loading="eager"
 					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
@@ -47,7 +50,7 @@ export function UserAvatar({ className }: { className?: string }) {
 					alt={user.pubkey}
 					loading="eager"
 					decoding="async"
-					className={className}
+					className={cn("ring-1 ring-black/5 dark:ring-white/5", className)}
 				/>
 			)}
 			<Avatar.Fallback delayMs={120}>
diff --git a/packages/ui/src/editor/form.tsx b/packages/ui/src/editor/form.tsx
index 91c4d272..85e29d5a 100644
--- a/packages/ui/src/editor/form.tsx
+++ b/packages/ui/src/editor/form.tsx
@@ -356,7 +356,7 @@ export function EditorForm() {
 						<Portal>
 							<div
 								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) => (
 									<button
@@ -367,13 +367,13 @@ export function EditorForm() {
 											insertMention(editor, contact);
 											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.Root className="flex items-center gap-2.5">
-												<User.Avatar className="size-10 rounded-lg object-cover shrink-0" />
+											<User.Root className="w-full flex items-center gap-2.5">
+												<User.Avatar className="size-8 rounded-lg object-cover shrink-0" />
 												<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>
 											</User.Root>
 										</User.Provider>