wip: ui

src/app/chats/components/chatForm.tsx

@@ -47,7 +47,7 @@ export function ChatForm({
   return (
     <div className="flex items-center gap-2">
       <MediaUploader setState={setValue} />
-      <div className="flex w-full items-center justify-between rounded-full bg-white/20 px-3">
+      <div className="flex w-full items-center justify-between rounded-full bg-zinc-300 px-3 dark:bg-zinc-700">
         <input
           value={value}
           onChange={(e) => setValue(e.target.value)}
@@ -57,12 +57,12 @@ export function ChatForm({
           autoCorrect="off"
           autoCapitalize="off"
           placeholder="Message"
-          className="h-10 flex-1 resize-none bg-transparent px-3 text-white placeholder:text-white/80 focus:outline-none"
+          className="h-10 flex-1 resize-none bg-transparent px-3 text-zinc-900 placeholder:text-zinc-500 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-300"
         />
         <button
           type="button"
           onClick={submit}
-          className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-white/80"
+          className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-zinc-500 dark:text-zinc-300"
         >
           <EnterIcon className="h-5 w-5" />
           Send

src/app/chats/components/chatListItem.tsx

@@ -44,10 +44,10 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
       preventScrollReset={true}
       className={({ isActive }) =>
         twMerge(
-          'flex items-center gap-2.5 px-3 py-1.5 hover:bg-white/10',
+          'flex items-center gap-2.5 px-3 py-1.5 hover:bg-zinc-200 dark:hover:bg-zinc-800',
           isActive
-            ? 'border-fuchsia-500 bg-white/5 text-white'
-            : 'border-transparent text-white/70'
+            ? 'bg-zinc-200 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100'
+            : 'text-zinc-500 dark:text-zinc-300'
         )
       }
     >
@@ -64,22 +64,20 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
           <img
             src={svgURI}
             alt={event.pubkey}
-            className="h-10 w-10 rounded-lg bg-white"
+            className="h-10 w-10 rounded-lg bg-black dark:bg-white"
           />
         </Avatar.Fallback>
       </Avatar.Root>
       <div className="flex w-full flex-col">
-        <div className="max-w-[10rem] truncate font-semibold text-white">
+        <div className="max-w-[10rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
           {user?.name ||
             user?.display_name ||
             user?.displayName ||
             displayNpub(event.pubkey, 16)}
         </div>
         <div className="flex w-full items-center justify-between">
-          <div className="max-w-[10rem] truncate text-sm text-white/70">
-            {decryptedContent}
-          </div>
-          <div className="text-sm text-white/70">{createdAt}</div>
+          <div className="max-w-[10rem] truncate text-sm">{decryptedContent}</div>
+          <div className="text-sm">{createdAt}</div>
         </div>
       </div>
     </NavLink>

src/app/chats/components/mediaUploader.tsx

@@ -29,7 +29,7 @@ export function MediaUploader({
           <button
             type="button"
             onClick={() => uploadMedia()}
-            className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-white backdrop-blur-xl hover:bg-white/20"
+            className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-zinc-300 text-zinc-500 hover:bg-zinc-400 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600"
           >
             {loading ? (
               <LoaderIcon className="h-4 w-4 animate-spin" />

src/app/chats/components/message.tsx

@@ -25,14 +25,16 @@ export function ChatMessage({
     <div
       className={twMerge(
         'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3',
-        self ? 'ml-auto rounded-l-xl bg-fuchsia-500' : 'rounded-r-xl bg-white/10'
+        self
+          ? 'ml-auto rounded-l-xl bg-interor-500'
+          : 'rounded-r-xl bg-zinc-200 dark:bg-zinc-800'
       )}
     >
       {!richContent ? (
-        <p>Decrypting...</p>
+        <p className="text-zinc-900 dark:text-zinc-100">Decrypting...</p>
       ) : (
         <div>
-          <p className="select-text whitespace-pre-line text-white">
+          <p className="select-text whitespace-pre-line text-zinc-900 dark:text-zinc-100">
             {richContent.parsed}
           </p>
           <div>