polish

src/shared/composer/modal.tsx

@@ -1,7 +1,6 @@
 import * as Dialog from '@radix-ui/react-dialog';
 import { useHotkeys } from 'react-hotkeys-hook';
 
-import { Button } from '@shared/button';
 import { Composer, ComposerUser } from '@shared/composer';
 import {
   CancelIcon,
@@ -28,10 +27,13 @@ export function ComposerModal() {
   return (
     <Dialog.Root open={open}>
       <Dialog.Trigger asChild>
-        <Button preset="small">
+        <button
+          type="button"
+          className="inline-flex h-9 w-min items-center justify-center gap-1 rounded-md bg-white/10 px-4 text-sm font-medium text-white hover:bg-fuchsia-500 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
+        >
           <ComposeIcon className="h-4 w-4" />
           Postr
-        </Button>
+        </button>
       </Dialog.Trigger>
       <Dialog.Portal className="relative z-10">
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />

src/shared/notes/preview/link.tsx

@@ -10,11 +10,11 @@ export function LinkPreview({ urls }: { urls: string[] }) {
     <div className="mb-2 mt-3 max-w-[420px] overflow-hidden rounded-lg bg-white/10">
       {status === 'loading' ? (
         <div className="flex flex-col">
-          <div className="h-44 w-full animate-pulse bg-zinc-700" />
+          <div className="h-44 w-full animate-pulse bg-white/10" />
           <div className="flex flex-col gap-2 px-3 py-3">
-            <div className="h-3 w-2/3 animate-pulse rounded bg-zinc-700" />
-            <div className="h-3 w-3/4 animate-pulse rounded bg-zinc-700" />
-            <span className="mt-2.5 text-sm leading-none text-zinc-500">
+            <div className="h-3 w-2/3 animate-pulse rounded bg-white/10" />
+            <div className="h-3 w-3/4 animate-pulse rounded bg-white/10" />
+            <span className="mt-2.5 text-sm leading-none text-white/50">
               {domain.hostname}
             </span>
           </div>

src/shared/notification/modal.tsx

@@ -60,19 +60,14 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
           <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
-            <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
+            <div className="h-min w-full shrink-0 rounded-t-xl border-b border-white/10 bg-white/5 px-5 py-5">
               <div className="flex flex-col gap-1">
                 <div className="flex items-center justify-between">
                   <Dialog.Title className="text-lg font-semibold leading-none text-white">
                     Notification
                   </Dialog.Title>
-                  <Dialog.Close asChild>
-                    <button
-                      type="button"
-                      className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
-                    >
-                      <CancelIcon className="h-5 w-5 text-zinc-300" />
-                    </button>
+                  <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
+                    <CancelIcon className="h-4 w-4 text-white/50" />
                   </Dialog.Close>
                 </div>
                 <Dialog.Description className="text-sm leading-tight text-white/50">
@@ -80,7 +75,7 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
                 </Dialog.Description>
               </div>
             </div>
-            <div className="scrollbar-hide flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-5">
+            <div className="scrollbar-hide flex h-[500px] flex-col divide-y divide-white/10 overflow-y-auto overflow-x-hidden">
               {status === 'loading' ? (
                 <div className="inline-flex items-center justify-center px-4 py-3">
                   <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />

src/shared/notification/types/mention.tsx

@@ -13,20 +13,16 @@ export function NotiMention({ event }: { event: NDKEvent }) {
   const content = useMemo(() => parser(event), [event]);
 
   return (
-    <div className="flex h-min flex-col px-5 py-2">
+    <div className="flex h-min flex-col px-3 py-3">
       <div className="flex items-start justify-between">
         <div className="flex items-start gap-1">
           <NotiUser pubkey={event.pubkey} />
           <p className="leading-none text-white/50">reply your post</p>
         </div>
-        <div>
-          <span className="leading-none text-zinc-500">{createdAt}</span>
-        </div>
+        <span className="leading-none text-white/50">{createdAt}</span>
       </div>
-      <div className="-mt-4 pl-[35px]">
-        <div>
-          <NoteContent content={content} />
-        </div>
+      <div className="-mt-3 pl-[44px]">
+        <NoteContent content={content} />
         {replyTo && <MentionNote id={replyTo} />}
       </div>
     </div>

src/shared/notification/types/reaction.tsx

@@ -10,17 +10,17 @@ export function NotiReaction({ event }: { event: NDKEvent }) {
   const createdAt = formatCreatedAt(event.created_at);
 
   return (
-    <div className="flex h-min flex-col px-5 py-2">
+    <div className="flex h-min flex-col px-3 py-3">
       <div className="flex items-start justify-between">
         <div className="flex items-start gap-1">
           <NotiUser pubkey={event.pubkey} />
           <p className="leading-none text-white/50">reacted {event.content}</p>
         </div>
         <div>
-          <span className="leading-none text-zinc-500">{createdAt}</span>
+          <span className="leading-none text-white/50">{createdAt}</span>
         </div>
       </div>
-      <div className="-mt-4 pl-[35px]">{root && <MentionNote id={root} />}</div>
+      <div className="-mt-5 pl-[44px]">{root && <MentionNote id={root} />}</div>
     </div>
   );
 }

src/shared/notification/types/repost.tsx

@@ -10,7 +10,7 @@ export function NotiRepost({ event }: { event: NDKEvent }) {
   const createdAt = formatCreatedAt(event.created_at);
 
   return (
-    <div className="flex h-min flex-col px-5 py-2">
+    <div className="flex h-min flex-col px-3 py-3">
       <div className="flex items-start justify-between">
         <div className="flex items-start gap-1">
           <NotiUser pubkey={event.pubkey} />
@@ -20,7 +20,7 @@ export function NotiRepost({ event }: { event: NDKEvent }) {
           <span className="leading-none text-zinc-500">{createdAt}</span>
         </div>
       </div>
-      <div className="-mt-4 pl-[35px]">{root && <MentionNote id={root} />}</div>
+      <div className="-mt-5 pl-[44px]">{root && <MentionNote id={root} />}</div>
     </div>
   );
 }

src/shared/notification/user.tsx

@@ -20,17 +20,15 @@ export function NotiUser({ pubkey }: { pubkey: string }) {
   }
 
   return (
-    <div className="flex shrink-0 items-start justify-start gap-2">
-      <div className="w-88 relative h-8 shrink-0 rounded-md">
-        <Image
-          src={user?.picture || user?.image}
-          fallback={DEFAULT_AVATAR}
-          alt={pubkey}
-          className="w-88 h-8 rounded-md object-cover"
-        />
-      </div>
-      <span className="max-w-[10rem] flex-1 truncate leading-none text-zinc-200">
-        {user?.nip05 || user?.name || user?.displayName || displayNpub(pubkey, 16)}
+    <div className="flex shrink-0 items-start justify-start gap-3">
+      <Image
+        src={user?.picture || user?.image}
+        fallback={DEFAULT_AVATAR}
+        alt={pubkey}
+        className="h-10 w-10 shrink-0 rounded-md object-cover"
+      />
+      <span className="max-w-[10rem] flex-1 truncate font-medium leading-none text-white">
+        {user?.nip05 || user?.name || user?.display_name || displayNpub(pubkey, 16)}
       </span>
     </div>
   );