updated minor styles

src/assets/icons/Reply.tsx

@@ -1,4 +1,4 @@
-export default function ReplyIcon() {
+export default function ReplyIcon({ className }: { className: string }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -6,8 +6,7 @@ export default function ReplyIcon() {
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="h-5 w-5"
-    >
+      className={className}>
       <path
         strokeLinecap="round"
         strokeLinejoin="round"

src/components/accountBar/index.tsx

@@ -123,7 +123,7 @@ export default function AccountBar() {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95">
                 <Dialog.Panel className="relative w-full max-w-2xl transform overflow-hidden rounded-lg text-zinc-100 shadow-modal transition-all">
-                  <div className="absolute top-0 left-0 h-full w-full bg-black bg-opacity-10 backdrop-blur-md"></div>
+                  <div className="absolute top-0 left-0 h-full w-full bg-black bg-opacity-20 backdrop-blur-lg"></div>
                   <div className="absolute bottom-0 left-0 h-24 w-full border-t border-white/10 bg-zinc-900"></div>
                   <div className="relative z-10 px-4 pt-4 pb-2">
                     <MDEditor

src/components/note/atoms/reaction.tsx

@@ -70,11 +70,11 @@ export default function Reaction({
     <button
       onClick={(e) => handleReaction(e)}
       className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
-      <div className="rounded-lg p-1 group-hover:bg-zinc-800">
+      <div className="rounded-lg p-1 group-hover:bg-zinc-600">
         {isReact ? (
           <LikeSolidIcon className="h-5 w-5 text-red-500" />
         ) : (
-          <LikeIcon className="h-5 w-5" />
+          <LikeIcon className="h-5 w-5 group-hover:text-red-400" />
         )}
       </div>
       <span>{reaction}</span>

src/components/note/atoms/reply.tsx

@@ -14,8 +14,8 @@ export default function Reply({ eventID }: { eventID: string }) {
 
   return (
     <button className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
-      <div className="rounded-lg p-1 group-hover:bg-zinc-800">
-        <ReplyIcon />
+      <div className="rounded-lg p-1 group-hover:bg-zinc-600">
+        <ReplyIcon className="h-5 w-5 group-hover:text-orange-400" />
       </div>
       <span>{events.length || 0}</span>
     </button>

src/components/note/placeholder.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 
 export const Placeholder = memo(function Placeholder() {
   return (
-    <div className="relative z-10 flex h-min animate-pulse select-text flex-col py-6 px-6">
+    <div className="relative z-10 flex h-min animate-pulse select-text flex-col py-4 px-6">
       <div className="flex items-start gap-4">
         <div className="relative h-11 w-11 shrink overflow-hidden rounded-full bg-zinc-700" />
         <div className="flex w-full flex-1 items-start justify-between">
@@ -17,7 +17,7 @@ export const Placeholder = memo(function Placeholder() {
         </div>
       </div>
       <div className="-mt-4 pl-[60px]">
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-6">
           <div className="h-16 w-full rounded bg-zinc-700" />
           <div className="flex items-center gap-8">
             <div className="h-4 w-12 rounded bg-zinc-700" />

src/components/note/single.tsx

@@ -17,14 +17,20 @@ const DynamicContent = dynamic(() => import('@components/note/content'), {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const Single = memo(function Single({ event }: { event: any }) {
+  const openThread = () => {
+    console.log('ok');
+  };
+
   return (
-    <div className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-6 px-6">
+    <div
+      onClick={() => openThread()}
+      className="flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-4 px-6 hover:bg-zinc-800">
       <div className="flex flex-col">
         <User pubkey={event.pubkey} time={event.created_at} />
         <div className="-mt-4 pl-[60px]">
-          <div className="flex flex-col gap-2">
+          <div className="flex flex-col gap-6">
             <DynamicContent data={event.content} />
-            <div className="-ml-1 flex items-center gap-8">
+            <div className="relative z-10 -ml-1 flex items-center gap-8">
               <Reply eventID={event.id} />
               <Reaction eventID={event.id} eventPubkey={event.pubkey} />
             </div>

src/pages/feed/[id].tsx

@@ -1,47 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import BaseLayout from '@layouts/baseLayout';
-import UserLayout from '@layouts/userLayout';
-
-import { useRouter } from 'next/router';
-import { useNostrEvents } from 'nostr-react';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
-
-export default function Page() {
-  const router = useRouter();
-  const { id }: any = router.query;
-
-  const { events } = useNostrEvents({
-    filter: {
-      '#e': [id],
-      since: 0,
-      kinds: [1],
-      limit: 20,
-    },
-  });
-
-  return (
-    <>
-      {events.map((event) => (
-        <p key={event.id}>
-          {event.pubkey} posted: {event.content}
-        </p>
-      ))}
-    </>
-  );
-}
-
-Page.getLayout = function getLayout(
-  page:
-    | string
-    | number
-    | boolean
-    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
-    | ReactFragment
-    | ReactPortal
-) {
-  return (
-    <BaseLayout>
-      <UserLayout>{page}</UserLayout>
-    </BaseLayout>
-  );
-};