wip: new onboarding

src/app/auth/welcome.tsx

@@ -1,38 +1,30 @@
 import { Link } from 'react-router-dom';
 
-import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
-
 export function WelcomeScreen() {
   return (
-    <div className="mx-auto flex h-screen w-full max-w-md flex-col justify-center">
-      <div className="flex flex-col gap-10 pt-16">
-        <div className="flex flex-col gap-1.5 text-center">
-          <h1 className="text-3xl font-semibold text-white">Welcome to Lume</h1>
-          <p className="mx-auto w-2/3 leading-tight text-white/50">
-            Let&apos;s get you up and connecting with all peoples around the world on
-            Nostr
-          </p>
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="mx-auto flex w-full max-w-xs flex-col gap-10">
+        <div className="text-center">
+          <img src="/icon.png" alt="Lume's logo" className="mx-auto mb-1 h-auto w-16" />
+          <h1 className="text-2xl">
+            Welcome to <span className="font-semibold">Lume</span>
+          </h1>
         </div>
-        <div className="inline-flex w-full flex-col items-center gap-3 px-4 pb-10">
-          <Link
-            to="/auth/import"
-            className="inline-flex h-12 w-3/4 items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-blue-500 px-4 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none"
-          >
-            <span className="w-5" />
-            <span>Login with private key</span>
-            <ArrowRightCircleIcon className="h-5 w-5" />
-          </Link>
+        <div className="flex flex-col gap-2 px-8">
           <Link
             to="/auth/create"
-            className="inline-flex h-12 w-3/4 items-center justify-center gap-2 rounded-lg border-t border-white/10 bg-white/20 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/30 focus:outline-none"
+            className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
           >
-            Create new key
+            Create new Nostr account
+          </Link>
+          <Link
+            to="/auth/import"
+            className="inline-flex h-10 w-full items-center justify-center rounded-lg font-medium text-neutral-900 hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-900"
+          >
+            Log in
           </Link>
         </div>
       </div>
-      <div className="absolute bottom-6 left-1/2 -translate-x-1/2 transform">
-        <img src="/lume.png" alt="lume" className="mx-auto h-auto w-1/4" />
-      </div>
     </div>
   );
 }

src/app/chats/index.tsx

@@ -33,7 +33,7 @@ export function ChatsScreen() {
 
   return (
     <div className="grid h-full w-full grid-cols-3">
-      <div className="col-span-1 h-full overflow-y-auto border-r border-white/5 scrollbar-none">
+      <div className="col-span-1 h-full overflow-y-auto border-r border-neutral-200 scrollbar-none dark:border-neutral-800">
         <div
           data-tauri-drag-region
           className="flex h-11 w-full shrink-0 items-center border-b border-white/5 px-3"