wip: dark mode - light mode

src/shared/notes/child.tsx

@@ -81,7 +81,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
       <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.6rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
       <div className="mb-6 flex flex-col">
         <User pubkey={data.pubkey} time={data.created_at} />
-        <div className="-mt-5 flex items-start gap-3">
+        <div className="-mt-4 flex items-start gap-3">
           <div className="w-10 shrink-0" />
           <div className="relative z-20 flex-1">
             {renderKind(data)}

src/shared/notes/kinds/repost.tsx

@@ -65,13 +65,13 @@ export function Repost({
         <div
           className={twMerge(
             'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
-            !lighter ? 'bg-white/10 backdrop-blur-xl' : ''
+            !lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
           )}
         >
           <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
           <div className="relative flex flex-col">
             <User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
-            <div className="-mt-5 flex items-start gap-3">
+            <div className="-mt-4 flex items-start gap-3">
               <div className="w-10 shrink-0" />
               <div className="relative z-20 flex-1">
                 {renderKind(embedEvent)}
@@ -104,7 +104,7 @@ export function Repost({
         <div
           className={twMerge(
             'relative overflow-hidden rounded-xl px-3 py-3',
-            !lighter ? 'bg-white/10 backdrop-blur-xl' : ''
+            !lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
           )}
         >
           <div className="relative flex flex-col">
@@ -116,7 +116,7 @@ export function Repost({
                 Lume <span className="text-green-500">(System)</span>
               </h5>
             </div>
-            <div className="-mt-6 flex items-start gap-3">
+            <div className="-mt-4 flex items-start gap-3">
               <div className="w-11 shrink-0" />
               <div>
                 <div className="relative z-20 mt-1 flex-1 select-text">
@@ -142,13 +142,13 @@ export function Repost({
       <div
         className={twMerge(
           'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
-          !lighter ? 'bg-white/10 backdrop-blur-xl' : ''
+          !lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
         )}
       >
         <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
         <div className="relative flex flex-col">
           <User pubkey={data.pubkey} time={data.created_at} />
-          <div className="-mt-5 flex items-start gap-3">
+          <div className="-mt-4 flex items-start gap-3">
             <div className="w-10 shrink-0" />
             <div className="relative z-20 flex-1">
               {renderKind(data)}

src/shared/notes/kinds/text.tsx

@@ -36,14 +36,14 @@ export function TextNote(props: { content?: string }) {
   return (
     <div>
       <ReactMarkdown
-        className="markdown"
+        className="prose prose-zinc max-w-none select-text dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-interor-500 hover:prose-a:text-interor-600 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-interor-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2"
         remarkPlugins={[remarkGfm]}
         components={{
           a: ({ href }) => {
             const cleanURL = new URL(href);
             cleanURL.search = '';
             return (
-              <Link to={href} target="_blank" className="line-clamp-1">
+              <Link to={href} target="_blank" className="line-clamp-1 w-full break-all">
                 {cleanURL.hostname + cleanURL.pathname}
               </Link>
             );

src/shared/notes/mentions/hashtag.tsx

@@ -24,7 +24,7 @@ export function Hashtag({ tag }: { tag: string }) {
           content: tag.replace('#', ''),
         })
       }
-      className="break-all text-fuchsia-400 hover:text-fuchsia-500"
+      className="break-all text-interor-500 hover:text-interor-600"
     >
       {tag}
     </span>

src/shared/notes/mentions/user.tsx

@@ -30,7 +30,7 @@ export const MentionUser = memo(function MentionUser({ pubkey }: { pubkey: strin
           content: pubkey,
         })
       }
-      className="break-words text-fuchsia-400 hover:text-fuchsia-500"
+      className="break-words text-interor-500 hover:text-interor-600"
     >
       {'@' +
         (user?.name ||

src/shared/notes/preview/image.tsx

@@ -17,7 +17,7 @@ export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: bo
           <div key={url} className="group relative min-w-0 shrink-0 grow-0 basis-full">
             <img
               src={url}
-              alt={url}
+              alt="image"
               className={`${
                 truncate ? 'h-auto max-h-[300px]' : 'h-auto'
               } w-full rounded-lg border border-white/10 object-cover`}

src/shared/notes/preview/video.tsx

@@ -21,7 +21,7 @@ export function VideoPreview({ urls }: { urls: string[] }) {
           <MediaProvider>
             <Poster
               className="vds-poster"
-              src="https://thumbnail.video/api/get?url=${url}&seconds=1"
+              src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
               alt={url}
             />
           </MediaProvider>

src/shared/notes/wrapper.tsx

@@ -24,14 +24,14 @@ export function NoteWrapper({
       <div
         className={twMerge(
           'relative overflow-hidden rounded-xl px-3 py-4',
-          !lighter ? 'bg-white/10 backdrop-blur-xl' : 'bg-transparent'
+          !lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
         )}
       >
         <div className="relative">{root && <ChildNote id={root} />}</div>
         <div className="relative">{reply && <ChildNote id={reply} root={root} />}</div>
         <div className="relative flex flex-col">
           <User pubkey={event.pubkey} time={event.created_at} />
-          <div className="-mt-5 flex items-start gap-3">
+          <div className="-mt-4 flex items-start gap-3">
             <div className="w-10 shrink-0" />
             <div className="relative z-20 flex-1">
               {cloneElement(