updated

src/app.tsx

@@ -38,7 +38,6 @@ const router = createBrowserRouter([
   {
     path: '/',
     element: (
-      // @ts-expect-error, todo
       <Protected>
         <Root />
       </Protected>
@@ -79,7 +78,6 @@ const router = createBrowserRouter([
   {
     path: '/app',
     element: (
-      // @ts-expect-error, todo
       <Protected>
         <AppLayout />
       </Protected>
@@ -96,7 +94,6 @@ const router = createBrowserRouter([
   {
     path: '/settings',
     element: (
-      // @ts-expect-error, todo
       <Protected>
         <SettingsLayout />
       </Protected>

src/app/auth/welcome.tsx

@@ -4,23 +4,12 @@ import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 
 export function WelcomeScreen() {
   return (
-    <div className="grid h-full w-full grid-cols-12 gap-4 px-4 py-4">
-      <div className="col-span-5 flex flex-col rounded-xl border-t border-zinc-800/50 bg-zinc-900">
-        <div className="flex h-full w-full flex-col justify-center gap-2 px-4 py-4">
-          <h1 className="text-4xl font-bold leading-none text-transparent text-zinc-700">
-            Preserve your <span className="text-fuchsia-300">freedom</span>
-          </h1>
-          <h2 className="text-4xl font-bold leading-none text-transparent text-zinc-700">
-            Protect your <span className="text-red-300">future</span>
-          </h2>
-          <h3 className="text-4xl font-bold leading-none text-transparent text-zinc-700">
-            Stack <span className="text-orange-300">bitcoin</span>
-          </h3>
-          <h3 className="text-4xl font-bold leading-none text-transparent text-zinc-700">
-            Use <span className="text-purple-300">nostr</span>
-          </h3>
-        </div>
-        <div className="mt-auto flex w-full flex-col gap-2 px-4 py-4">
+    <div className="flex h-screen w-full flex-col justify-between">
+      <div className="flex flex-1 items-center justify-center">
+        <h1 className="text-5xl font-semibold">Have fun together!</h1>
+      </div>
+      <div className="flex flex-1 items-end justify-center">
+        <div className="inline-flex w-full flex-col gap-3 px-10 pb-10">
           <Link
             to="/auth/import"
             className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium text-zinc-100 hover:bg-fuchsia-600"
@@ -37,18 +26,6 @@ export function WelcomeScreen() {
           </Link>
         </div>
       </div>
-      <div
-        className="col-span-5 rounded-xl bg-zinc-900 bg-cover bg-center"
-        style={{
-          backgroundImage: `url("https://void.cat/d/Ps1b36vu5pdkEA2w75usuB")`,
-        }}
-      />
-      <div
-        className="col-span-2 rounded-xl bg-zinc-900 bg-cover bg-center"
-        style={{
-          backgroundImage: `url("https://void.cat/d/5FdJcBP5ZXKAjYqV8hpcp3")`,
-        }}
-      />
     </div>
   );
 }

src/shared/authLayout.tsx

@@ -1,65 +1,11 @@
-import { platform } from '@tauri-apps/plugin-os';
-import { Outlet, useNavigate } from 'react-router-dom';
-
-import { ArrowLeftIcon, ArrowRightIcon } from '@shared/icons';
-
-const platformName = await platform();
+import { Outlet } from 'react-router-dom'
 
 export function AuthLayout() {
-  const navigate = useNavigate();
-
-  const goBack = () => {
-    navigate(-1);
-  };
-
-  const goForward = () => {
-    navigate(1);
-  };
-
   return (
-    <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
-      <div className="flex h-screen w-full flex-col">
-        <div
-          data-tauri-drag-region
-          className="relative h-11 shrink-0 border border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
-        >
-          <div
-            data-tauri-drag-region
-            className="flex h-full w-full flex-1 items-center px-2"
-          >
-            <div
-              className={`flex h-full items-center gap-2 ${
-                platformName === 'macos' ? 'pl-[68px]' : ''
-              }`}
-            >
-              <button
-                type="button"
-                onClick={() => goBack()}
-                className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
-              >
-                <ArrowLeftIcon
-                  width={16}
-                  height={16}
-                  className="text-zinc-500 group-hover:text-zinc-300"
-                />
-              </button>
-              <button
-                type="button"
-                onClick={() => goForward()}
-                className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
-              >
-                <ArrowRightIcon
-                  width={16}
-                  height={16}
-                  className="text-zinc-500 group-hover:text-zinc-300"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-        <div className="relative flex min-h-0 w-full flex-1">
-          <Outlet />
-        </div>
+    <div className="relative h-screen w-screen">
+      <div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
+      <div className="relative flex min-h-0 w-full flex-1">
+        <Outlet />
       </div>
     </div>
   );