wip: update color palette

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-zinc-300 px-3 dark:bg-zinc-700">
+      <div className="flex w-full items-center justify-between rounded-full bg-neutral-300 px-3 dark:bg-neutral-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-zinc-900 placeholder:text-zinc-500 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-300"
+          className="h-10 flex-1 resize-none bg-transparent px-3 text-neutral-900 placeholder:text-neutral-500 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-300"
         />
         <button
           type="button"
           onClick={submit}
-          className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-zinc-500 dark:text-zinc-300"
+          className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-neutral-500 dark:text-neutral-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-zinc-200 dark:hover:bg-zinc-800',
+          'flex items-center gap-2.5 px-3 py-1.5 hover:bg-neutral-200 dark:hover:bg-neutral-800',
           isActive
-            ? 'bg-zinc-200 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100'
-            : 'text-zinc-500 dark:text-zinc-300'
+            ? 'bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
+            : 'text-neutral-500 dark:text-neutral-300'
         )
       }
     >
@@ -69,7 +69,7 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
         </Avatar.Fallback>
       </Avatar.Root>
       <div className="flex w-full flex-col">
-        <div className="max-w-[10rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
+        <div className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
           {user?.name ||
             user?.display_name ||
             user?.displayName ||

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-zinc-300 text-zinc-500 hover:bg-zinc-400 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600"
+            className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-neutral-300 text-neutral-500 hover:bg-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600"
           >
             {loading ? (
               <LoaderIcon className="h-4 w-4 animate-spin" />

src/app/chats/components/message.tsx

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