polish

src/app/chats/components/list.tsx

@@ -34,12 +34,12 @@ export function ChatsList() {
     return (
       <div className="flex flex-col">
         <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
-          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
-          <div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
+          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
+          <div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
         </div>
         <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
-          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
-          <div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
+          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
+          <div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
         </div>
       </div>
     );
@@ -51,15 +51,15 @@ export function ChatsList() {
         <ChatsListSelfItem data={account} />
       ) : (
         <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
-          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
-          <div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
+          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
+          <div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
         </div>
       )}
       {chats.follows.map((item) => renderItem(item))}
       {isFetching && (
         <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
-          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
-          <div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
+          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
+          <div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
         </div>
       )}
       {chats.unknowns.length > 0 && <UnknownsModal data={chats.unknowns} />}

src/app/chats/components/self.tsx

@@ -14,9 +14,9 @@ export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) {
   if (status === 'loading') {
     return (
       <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
-        <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
+        <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
         <div>
-          <div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
+          <div className="h-2.5 w-full animate-pulse truncate rounded bg-white/10 text-base font-medium" />
         </div>
       </div>
     );

src/app/note/index.tsx

@@ -23,7 +23,7 @@ export function NoteScreen() {
       <div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-16">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="shadow-input rounded-md bg-zinc-900 px-3 py-3 shadow-black/20">
+            <div className="shadow-input rounded-md bg-white/10 px-3 py-3">
               <NoteSkeleton />
             </div>
           </div>

src/app/space/components/blocks/feed.tsx

@@ -156,7 +156,7 @@ export function FeedBlock({ params }: { params: Block }) {
         )}
         {isFetchingNextPage && (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
               <NoteSkeleton />
             </div>
           </div>

src/app/space/components/blocks/following.tsx

@@ -177,7 +177,7 @@ export function FollowingBlock() {
         )}
         {isFetchingNextPage && (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
               <NoteSkeleton />
             </div>
           </div>

src/app/space/components/blocks/image.tsx

@@ -10,7 +10,7 @@ export function ImageBlock({ params }: { params: Block }) {
   const { remove } = useBlock();
 
   return (
-    <div className="flex h-full w-[350px] shrink-0 flex-col justify-between border-r border-zinc-900">
+    <div className="flex h-full w-[400px] shrink-0 flex-col justify-between">
       <div className="relative h-full w-full flex-1 overflow-hidden p-3">
         <div className="absolute left-0 top-3 h-16 w-full px-3">
           <div className="flex h-16 items-center justify-between overflow-hidden rounded-t-xl px-5">
@@ -28,7 +28,7 @@ export function ImageBlock({ params }: { params: Block }) {
           src={params.content}
           fallback={DEFAULT_AVATAR}
           alt={params.title}
-          className="h-full w-full rounded-xl border-t border-zinc-800/50 object-cover"
+          className="h-full w-full rounded-xl object-cover"
         />
       </div>
     </div>

src/app/space/components/blocks/thread.tsx

@@ -27,7 +27,7 @@ export function ThreadBlock({ params }: { params: Block }) {
       <div className="h-full">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
               <NoteSkeleton />
             </div>
           </div>

src/app/space/components/blocks/user.tsx

@@ -51,7 +51,7 @@ export function UserBlock({ params }: { params: Block }) {
           <div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
             {status === 'loading' ? (
               <div className="px-3 py-1.5">
-                <div className="shadow-input rounded-md bg-zinc-900 px-3 py-3 shadow-black/20">
+                <div className="rounded-md bg-white/10 px-3 py-3">
                   <NoteSkeleton />
                 </div>
               </div>

src/app/space/components/modals/image.tsx

@@ -116,12 +116,7 @@ export function ImageModal() {
                 onSubmit={handleSubmit(onSubmit)}
                 className="mb-0 flex h-full w-full flex-col gap-3"
               >
-                <input
-                  type={'hidden'}
-                  {...register('content')}
-                  value={image}
-                  className="shadow-input relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-black/5 !outline-none placeholder:text-white/50 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
-                />
+                <input type={'hidden'} {...register('content')} value={image} />
                 <div className="flex flex-col gap-1">
                   <label
                     htmlFor="title"
@@ -145,7 +140,7 @@ export function ImageModal() {
                   >
                     Picture
                   </label>
-                  <div className="relative inline-flex h-56 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
+                  <div className="relative inline-flex h-56 w-full items-center justify-center overflow-hidden rounded-lg bg-white/10">
                     <Image
                       src={image}
                       fallback={DEFAULT_AVATAR}
@@ -156,7 +151,7 @@ export function ImageModal() {
                       <button
                         onClick={() => uploadImage()}
                         type="button"
-                        className="inline-flex h-6 items-center justify-center rounded bg-zinc-900 px-3 text-sm font-medium text-zinc-300 ring-1 ring-zinc-800 hover:bg-zinc-800"
+                        className="inline-flex h-6 items-center justify-center rounded bg-white/10 px-3 text-sm font-medium text-white hover:bg-fuchsia-500"
                       >
                         Upload
                       </button>

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>
   );