redesign daily page

src/app/note/components/base.tsx

@@ -19,18 +19,17 @@ export default function NoteBase({ event }: { event: any }) {
   };
 
   return (
-    <div
-      onClick={(e) => openNote(e)}
-      className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20"
-    >
-      {event.parent_id && event.parent_id !== event.event_id && (
-        <NoteParent key={event.parent_id} id={event.parent_id} />
-      )}
-      <div className="relative z-10 flex flex-col">
-        <NoteDefaultUser pubkey={event.pubkey} time={event.created_at} />
-        <div className="mt-1 pl-[52px]">
-          <NoteContent content={content} />
-          <NoteMetadata id={event.event_id} eventPubkey={event.pubkey} />
+    <div onClick={(e) => openNote(e)} className="h-min w-full select-text px-3 py-1.5">
+      <div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-5 shadow-input shadow-black/20">
+        {event.parent_id && event.parent_id !== event.event_id && (
+          <NoteParent key={event.parent_id} id={event.parent_id} />
+        )}
+        <div className="flex flex-col">
+          <NoteDefaultUser pubkey={event.pubkey} time={event.created_at} />
+          <div className="mt-1 pl-[52px]">
+            <NoteContent content={content} />
+            <NoteMetadata id={event.event_id} eventPubkey={event.pubkey} />
+          </div>
         </div>
       </div>
     </div>

src/app/note/components/metadata.tsx

@@ -51,7 +51,7 @@ export default function NoteMetadata({ id, eventPubkey }: { id: string; eventPub
   });
 
   return (
-    <div className="mt-5 flex items-center gap-16">
+    <div className="mt-5 flex items-center gap-16 border-t border-zinc-800 pt-5">
       <NoteReply id={id} replies={replies} />
       <NoteLike id={id} pubkey={eventPubkey} likes={likes} />
       <NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />

src/app/note/components/metadata/like.tsx

@@ -44,7 +44,7 @@ export default function NoteLike({ id, pubkey, likes }: { id: string; pubkey: st
 
   return (
     <button type="button" onClick={(e) => submitEvent(e)} className="group inline-flex w-min items-center gap-1.5">
-      <LikeIcon width={20} height={20} className="text-zinc-400 group-hover:text-rose-400" />
+      <LikeIcon width={16} height={16} className="text-zinc-400 group-hover:text-rose-400" />
       <span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">{count}</span>
     </button>
   );

src/app/note/components/metadata/reply.tsx

@@ -56,7 +56,7 @@ export default function NoteReply({ id, replies }: { id: string; replies: number
   return (
     <>
       <button type="button" onClick={() => openModal()} className="group inline-flex w-min items-center gap-1.5">
-        <ReplyIcon width={20} height={20} className="text-zinc-400 group-hover:text-green-400" />
+        <ReplyIcon width={16} height={16} className="text-zinc-400 group-hover:text-green-400" />
         <span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">{count}</span>
       </button>
       <Transition appear show={isOpen} as={Fragment}>

src/app/note/components/metadata/repost.tsx

@@ -44,7 +44,7 @@ export default function NoteRepost({ id, pubkey, reposts }: { id: string; pubkey
 
   return (
     <button type="button" onClick={(e) => submitEvent(e)} className="group inline-flex w-min items-center gap-1.5">
-      <RepostIcon width={20} height={20} className="text-zinc-400 group-hover:text-blue-400" />
+      <RepostIcon width={16} height={16} className="text-zinc-400 group-hover:text-blue-400" />
       <span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">{count}</span>
     </button>
   );

src/app/note/components/parent.tsx

@@ -38,21 +38,18 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
   const content = !error && data ? noteParser(data) : null;
 
   return (
-    <div className="relative pb-5">
-      <div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
-      <div className="relative z-10 flex flex-col">
-        {data ? (
-          <>
-            <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
-            <div className="mt-1 pl-[52px]">
-              <NoteContent content={content} />
-              <NoteMetadata id={data.id} eventPubkey={data.pubkey} />
-            </div>
-          </>
-        ) : (
-          <Skeleton baseColor="#27272a" containerClassName="flex-1" />
-        )}
-      </div>
+    <div className="flex flex-col pb-5">
+      {data ? (
+        <>
+          <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
+          <div className="mt-1 pl-[52px]">
+            <NoteContent content={content} />
+            <NoteMetadata id={data.id} eventPubkey={data.pubkey} />
+          </div>
+        </>
+      ) : (
+        <Skeleton baseColor="#27272a" containerClassName="flex-1" />
+      )}
     </div>
   );
 });

src/app/note/components/preview/image.tsx

@@ -3,7 +3,7 @@ import { Image } from '@lume/shared/image';
 export default function ImagePreview({ urls }: { urls: string[] }) {
   return (
     <div className="mt-3 grid h-full w-full grid-cols-3">
-      <div className="col-span-2">
+      <div className="col-span-3">
         <Image
           src={urls[0]}
           alt="image"

src/app/note/components/quote.tsx

@@ -47,22 +47,17 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
   };
 
   return (
-    <div
-      onClick={(e) => openNote(e)}
-      className="relative mb-2 mt-3 rounded-lg border border-zinc-700 bg-zinc-800 p-2 py-3"
-    >
-      <div className="relative z-10 flex flex-col">
-        {data ? (
-          <>
-            <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
-            <div className="mt-1 pl-[52px]">
-              <NoteContent content={content} />
-            </div>
-          </>
-        ) : (
-          <Skeleton baseColor="#27272a" containerClassName="flex-1" />
-        )}
-      </div>
+    <div onClick={(e) => openNote(e)} className="mb-2 mt-3 flex flex-col rounded-lg border border-zinc-800 p-2 py-3">
+      {data ? (
+        <>
+          <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
+          <div className="mt-1 pl-[52px]">
+            <NoteContent content={content} />
+          </div>
+        </>
+      ) : (
+        <Skeleton baseColor="#27272a" containerClassName="flex-1" />
+      )}
     </div>
   );
 });

src/app/note/components/quoteRepost.tsx

@@ -8,12 +8,13 @@ export const NoteQuoteRepost = memo(function NoteQuoteRepost({ event }: { event:
   const rootID = getQuoteID(event.tags);
 
   return (
-    <div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20">
-      <div className="relative z-10 flex flex-col pb-5">
-        <div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
-        <NoteRepostUser pubkey={event.pubkey} time={event.created_at} />
+    <div className="h-min w-full select-text px-3 py-1.5">
+      <div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-5 shadow-input shadow-black/20">
+        <div className="pb-5">
+          <NoteRepostUser pubkey={event.pubkey} time={event.created_at} />
+        </div>
+        <RootNote id={rootID} fallback={event.content} />
       </div>
-      <RootNote id={rootID} fallback={event.content} />
     </div>
   );
 });

src/app/note/components/rootNote.tsx

@@ -61,7 +61,7 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f
     const contentFallback = noteParser(parseFallback);
 
     return (
-      <div onClick={(e) => openNote(e)} className="relative z-10 flex flex-col">
+      <div onClick={(e) => openNote(e)} className="flex flex-col">
         <NoteDefaultUser pubkey={parseFallback.pubkey} time={parseFallback.created_at} />
         <div className="mt-1 pl-[52px]">
           <NoteContent content={contentFallback} />
@@ -72,7 +72,7 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f
   }
 
   return (
-    <div onClick={(e) => openNote(e)} className="relative z-10 flex flex-col">
+    <div onClick={(e) => openNote(e)} className="flex flex-col">
       {data ? (
         <>
           <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />