wip: ui

src/app/chats/chat.tsx

@@ -71,23 +71,25 @@ export function ChatScreen() {
 
   return (
     <div className="h-full w-full p-3">
-      <div className="rounded-lg border-t border-white/5 bg-white/10 backdrop-blur-xl">
+      <div className="rounded-lg bg-zinc-100 backdrop-blur-xl dark:bg-zinc-900">
         <div className="flex h-full flex-col justify-between overflow-hidden">
-          <div className="flex h-16 shrink-0 items-center border-b border-white/10 px-3">
+          <div className="flex h-16 shrink-0 items-center border-b border-zinc-200 px-3 dark:border-zinc-800">
             <User pubkey={pubkey} variant="simple" />
           </div>
           <div className="h-full w-full flex-1 px-3 py-3">
             {status === 'loading' ? (
               <div className="flex h-full w-full items-center justify-center">
                 <div className="flex flex-col items-center gap-1.5">
-                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-                  <p className="text-sm font-medium text-white/50">Loading messages</p>
+                  <LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
+                  <p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
+                    Loading messages
+                  </p>
                 </div>
               </div>
             ) : data.length === 0 ? (
               <div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col gap-1 text-center">
                 <h3 className="mb-2 text-4xl">🙌</h3>
-                <p className="leading-none text-white/50">
+                <p className="leading-none text-zinc-500 dark:text-zinc-300">
                   You two didn&apos;t talk yet, let&apos;s send first message
                 </p>
               </div>
@@ -97,7 +99,7 @@ export function ChatScreen() {
               </VList>
             )}
           </div>
-          <div className="z-50 shrink-0 rounded-b-lg border-t border-white/5 bg-white/10 p-3 backdrop-blur-xl">
+          <div className="shrink-0 rounded-b-lg border-t border-zinc-300 bg-zinc-200 p-3 backdrop-blur-xl dark:border-zinc-700 dark:bg-zinc-800">
             <ChatForm
               receiverPubkey={pubkey}
               userPubkey={db.account.pubkey}

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>