wip: convert more components to new ui

src/shared/notes/replies/form.tsx

@@ -26,17 +26,17 @@ export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
   };
 
   return (
-    <div className="flex flex-col rounded-xl border-t border-zinc-800/50 bg-zinc-900">
+    <div className="mt-3 flex flex-col rounded-xl bg-white/10">
       <div className="relative w-full flex-1 overflow-hidden">
         <textarea
           value={value}
           onChange={(e) => setValue(e.target.value)}
           placeholder="Reply to this thread..."
-          className=" relative h-24 w-full resize-none rounded-md bg-transparent px-3 py-3 text-base !outline-none placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500"
+          className=" relative h-24 w-full resize-none rounded-md bg-transparent px-3 py-3 text-base text-white !outline-none placeholder:text-white/50"
           spellCheck={false}
         />
       </div>
-      <div className="w-full border-t border-zinc-800 px-3 py-3">
+      <div className="w-full border-t border-white/10 px-3 py-3">
         {status === 'loading' ? (
           <div>
             <p>Loading...</p>
@@ -53,8 +53,8 @@ export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
                 />
               </div>
               <div>
-                <p className="mb-1 text-sm leading-none text-zinc-400">Reply as</p>
-                <p className="text-sm font-medium leading-none text-zinc-100">
+                <p className="mb-1 text-sm leading-none text-white/50">Reply as</p>
+                <p className="text-sm font-medium leading-none text-white">
                   {user?.nip05 || user?.name || displayNpub(pubkey, 16)}
                 </p>
               </div>

src/shared/notes/replies/item.tsx

@@ -11,7 +11,7 @@ export function Reply({ event, root }: { event: LumeEvent; root?: string }) {
 
   return (
     <div className="h-min w-full py-1.5">
-      <div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
+      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
         <div className="relative flex flex-col">
           <User pubkey={event.pubkey} time={event.created_at} />
           <div className="relative z-20 -mt-6 flex items-start gap-3">

src/shared/notes/replies/list.tsx

@@ -54,14 +54,12 @@ export function RepliesList({ id }: { id: string }) {
   return (
     <div className="mt-3">
       <div className="mb-2">
-        <h5 className="text-lg font-semibold text-zinc-300">
-          {data?.length || 0} replies
-        </h5>
+        <h5 className="text-lg font-semibold text-white">{data?.length || 0} replies</h5>
       </div>
       <div className="flex flex-col">
         {data?.length === 0 ? (
           <div className="px=3">
-            <div className="flex w-full items-center justify-center rounded-xl bg-zinc-900">
+            <div className="flex w-full items-center justify-center rounded-xl bg-white/10">
               <div className="flex flex-col items-center justify-center gap-2 py-6">
                 <h3 className="text-3xl">👋</h3>
                 <p className="leading-none text-zinc-400">Share your thought on it...</p>