wip: new onboarding

src/shared/avatarUploader.tsx

@@ -25,13 +25,14 @@ export function AvatarUploader({
     <button
       type="button"
       onClick={() => uploadAvatar()}
-      className="inline-flex h-full w-full items-center justify-center rounded-lg bg-black/50 hover:bg-black/60"
+      className="inline-flex items-center gap-1 rounded-lg border border-blue-200 bg-blue-100 px-1.5 py-1 text-sm font-medium text-blue-500 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-500 dark:hover:bg-blue-800"
     >
       {loading ? (
-        <LoaderIcon className="h-6 w-6 animate-spin text-white" />
+        <LoaderIcon className="h-4 w-4 animate-spin" />
       ) : (
-        <PlusIcon className="h-6 w-6 text-white" />
+        <PlusIcon className="h-4 w-4" />
       )}
+      Change avatar
     </button>
   );
 }

src/shared/bannerUploader.tsx

@@ -25,14 +25,16 @@ export function BannerUploader({
     <button
       type="button"
       onClick={() => uploadBanner()}
-      className="inline-flex h-full w-full flex-col items-center justify-center gap-1 bg-black/40 hover:bg-black/50"
+      className="inline-flex h-full w-full flex-col items-center justify-center"
     >
       {loading ? (
-        <LoaderIcon className="h-6 w-6 animate-spin text-white" />
+        <LoaderIcon className="h-6 w-6 animate-spin text-neutral-900 dark:text-neutral-100" />
       ) : (
-        <PlusIcon className="h-6 w-6 text-white" />
+        <PlusIcon className="h-6 w-6 text-neutral-900 dark:text-neutral-100" />
       )}
-      <p className="text-sm font-medium text-white/70">Add a banner image</p>
+      <p className="text-sm font-semibold text-neutral-800 dark:text-neutral-200">
+        Add cover
+      </p>
     </button>
   );
 }

src/shared/layouts/auth.tsx

@@ -8,7 +8,11 @@ export function AuthLayout() {
 
   return (
     <div className="h-screen w-screen bg-neutral-50 dark:bg-neutral-950">
-      {db.platform !== 'macos' ? <WindowTitlebar /> : null}
+      {db.platform !== 'macos' ? (
+        <WindowTitlebar />
+      ) : (
+        <div data-tauri-drag-region className="h-9" />
+      )}
       <div className="h-full w-full">
         <Outlet />
         <ScrollRestoration />

src/shared/navigation.tsx

@@ -3,14 +3,7 @@ import { twMerge } from 'tailwind-merge';
 
 import { ActiveAccount } from '@shared/accounts/active';
 import { ComposerModal } from '@shared/composer';
-import {
-  ChatsIcon,
-  CommunityIcon,
-  ExploreIcon,
-  HomeIcon,
-  NwcIcon,
-  RelayIcon,
-} from '@shared/icons';
+import { ChatsIcon, ExploreIcon, HomeIcon, NwcIcon, RelayIcon } from '@shared/icons';
 
 export function Navigation() {
   return (
@@ -58,27 +51,6 @@ export function Navigation() {
             </>
           )}
         </NavLink>
-        <NavLink
-          to="/communities"
-          preventScrollReset={true}
-          className="inline-flex flex-col items-center justify-center"
-        >
-          {({ isActive }) => (
-            <>
-              <div
-                className={twMerge(
-                  'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
-                  isActive
-                    ? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
-                    : 'text-black/50 dark:text-white/50'
-                )}
-              >
-                <CommunityIcon className="h-6 w-6" />
-              </div>
-              <div className="text-sm text-black dark:text-white">Groups</div>
-            </>
-          )}
-        </NavLink>
         <NavLink
           to="/relays"
           preventScrollReset={true}