wip: cross platform ui

src/shared/notes/replies/form.tsx

@@ -24,7 +24,7 @@ export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
   };
 
   return (
-    <div className="mt-3 flex flex-col rounded-xl bg-white/10">
+    <div className="mt-3 flex flex-col rounded-xl bg-white/10 backdrop-blur-xl">
       <div className="relative w-full flex-1 overflow-hidden">
         <textarea
           value={value}

src/shared/notes/replies/list.tsx

@@ -40,7 +40,7 @@ export function RepliesList({ id }: { id: string }) {
     return (
       <div className="mt-5 pb-10">
         <div className="flex flex-col">
-          <div className="rounded-xl bg-white/10 px-3 py-3">
+          <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
             <NoteSkeleton />
           </div>
         </div>
@@ -55,7 +55,7 @@ export function RepliesList({ id }: { id: string }) {
       </h5>
       <div className="flex flex-col gap-3">
         {data?.length === 0 ? (
-          <div className="mt-2 flex w-full items-center justify-center rounded-xl bg-white/10">
+          <div className="mt-2 flex w-full items-center justify-center rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="flex flex-col items-center justify-center gap-2 py-6">
               <h3 className="text-3xl">👋</h3>
               <p className="leading-none text-white/50">Share your thought on it...</p>