update nip-05 and user profile component styles

src/shared/nip05.tsx

@@ -22,7 +22,7 @@ export const NIP05 = memo(function NIP05({
 }) {
   const { status, data } = useQuery({
     queryKey: ['nip05', nip05],
-    queryFn: async () => {
+    queryFn: async ({ signal }: { signal: AbortSignal }) => {
       try {
         const localPath = nip05.split('@')[0];
         const service = nip05.split('@')[1];
@@ -33,11 +33,13 @@ export const NIP05 = memo(function NIP05({
           headers: {
             'Content-Type': 'application/json; charset=utf-8',
           },
+          signal,
         });
 
         if (!res.ok) throw new Error(`Failed to fetch NIP-05 service: ${nip05}`);
 
         const data: NIP05 = await res.json();
+
         if (data.names) {
           if (data.names[localPath] !== pubkey) return false;
           return true;
@@ -58,15 +60,19 @@ export const NIP05 = memo(function NIP05({
   }
 
   return (
-    <div className={twMerge('inline-flex items-center gap-1', className)}>
-      <p className="text-sm">{nip05}</p>
-      <div className="shrink-0">
-        {data === true ? (
-          <VerifiedIcon className="h-3 w-3 text-green-500" />
-        ) : (
-          <UnverifiedIcon className="h-3 w-3 text-red-500" />
-        )}
-      </div>
+    <div className="inline-flex items-center gap-1">
+      <p className={twMerge('text-sm font-medium', className)}>{nip05}</p>
+      {data === true ? (
+        <div className="inline-flex h-5 w-max shrink-0 items-center justify-center gap-1 rounded-full bg-teal-500 pl-0.5 pr-1.5 text-xs font-medium text-white">
+          <VerifiedIcon className="h-4 w-4" />
+          Verified
+        </div>
+      ) : (
+        <div className="inline-flex h-5 w-max shrink-0 items-center justify-center gap-1.5 rounded-full bg-red-500 pl-0.5 pr-1.5 text-xs font-medium text-white">
+          <UnverifiedIcon className="h-4 w-4" />
+          Unverified
+        </div>
+      )}
     </div>
   );
 });