From 34d80ae6630cb9842c15ec8ce8d322dea8b7a2c7 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Tue, 28 Mar 2023 20:04:14 +0700
Subject: [PATCH] updated onboarding page

---
 src-tauri/tauri.conf.json              |  4 ++--
 src/pages/onboarding/create/index.tsx  | 15 +++++++++++++--
 src/pages/onboarding/create/step-2.tsx |  2 +-
 src/pages/onboarding/index.tsx         |  2 +-
 src/pages/onboarding/login/index.tsx   | 23 +++++++++++++++++------
 5 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index c21b95dc..843d8b84 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -89,8 +89,8 @@
         "resizable": true,
         "width": 1100,
         "height": 800,
-        "minWidth": 900,
-        "minHeight": 600
+        "minWidth": 1000,
+        "minHeight": 700
       }
     ]
   }
diff --git a/src/pages/onboarding/create/index.tsx b/src/pages/onboarding/create/index.tsx
index 8fd448e7..e6703ea9 100644
--- a/src/pages/onboarding/create/index.tsx
+++ b/src/pages/onboarding/create/index.tsx
@@ -6,7 +6,7 @@ import { relaysAtom } from '@stores/relays';
 
 import { createAccount } from '@utils/storage';
 
-import { EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
+import { ArrowLeftIcon, EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
 import { useAtomValue } from 'jotai';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
@@ -33,6 +33,10 @@ export default function Page() {
   const npub = nip19.npubEncode(pubKey);
   const nsec = nip19.nsecEncode(privKey);
 
+  const goBack = () => {
+    router.back();
+  };
+
   // auto-generated profile metadata
   const metadata = useMemo(
     () => ({
@@ -94,12 +98,19 @@ export default function Page() {
 
   return (
     <div className="grid h-full w-full grid-rows-5">
-      <div className="row-span-1 flex items-center justify-center">
+      <div className="row-span-1 mx-auto flex w-full max-w-md items-center justify-between">
+        <button
+          onClick={() => goBack()}
+          className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
+        >
+          <ArrowLeftIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
+        </button>
         <div>
           <h1 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium text-transparent">
             Create new account
           </h1>
         </div>
+        <div></div>
       </div>
       <div className="row-span-4">
         <div className="mx-auto w-full max-w-md">
diff --git a/src/pages/onboarding/create/step-2.tsx b/src/pages/onboarding/create/step-2.tsx
index 68ad0a88..b08090bd 100644
--- a/src/pages/onboarding/create/step-2.tsx
+++ b/src/pages/onboarding/create/step-2.tsx
@@ -142,7 +142,7 @@ export default function Page() {
           </h3>
         </div>
       </div>
-      <div className="scrollbar-hide row-span-4 h-full w-full overflow-y-auto">
+      <div className="row-span-4 h-full w-full overflow-y-auto">
         <div className="grid grid-cols-4 gap-4 px-8 py-4">
           {list.map((item: { pubkey: string }, index: Key) => (
             <button
diff --git a/src/pages/onboarding/index.tsx b/src/pages/onboarding/index.tsx
index 1e797b4b..4843985d 100644
--- a/src/pages/onboarding/index.tsx
+++ b/src/pages/onboarding/index.tsx
@@ -105,7 +105,7 @@ export default function Page() {
           <div className="pointer-events-none absolute inset-0 bg-fade" />
         </div>
       </div>
-      <div className="row-span-2 flex w-full flex-col items-center gap-8 overflow-hidden pt-10">
+      <div className="row-span-2 flex w-full flex-col items-center gap-4 overflow-hidden pt-6 min-[1050px]:gap-8 min-[1050px]:pt-10">
         <h1 className="animate-moveBg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-5xl font-bold leading-none text-transparent">
           Let&apos;s start!
         </h1>
diff --git a/src/pages/onboarding/login/index.tsx b/src/pages/onboarding/login/index.tsx
index 4bd16e78..42fe4b91 100644
--- a/src/pages/onboarding/login/index.tsx
+++ b/src/pages/onboarding/login/index.tsx
@@ -1,6 +1,6 @@
 import BaseLayout from '@layouts/base';
 
-import { LightningBoltIcon } from '@radix-ui/react-icons';
+import { ArrowLeftIcon, LightningBoltIcon } from '@radix-ui/react-icons';
 import { useRouter } from 'next/router';
 import { nip19 } from 'nostr-tools';
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
@@ -33,6 +33,10 @@ export default function Page() {
     formState: { errors, isDirty, isValid, isSubmitting },
   } = useForm<FormValues>({ resolver });
 
+  const goBack = () => {
+    router.back();
+  };
+
   const onSubmit = async (data: any) => {
     let privkey = data['key'];
 
@@ -54,15 +58,22 @@ export default function Page() {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="grid h-full w-full grid-rows-5">
-      <div className="row-span-1 flex items-center justify-center">
+    <div className="grid h-full w-full grid-rows-5">
+      <div className="row-span-1 mx-auto flex w-full max-w-md items-center justify-between">
+        <button
+          onClick={() => goBack()}
+          className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
+        >
+          <ArrowLeftIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
+        </button>
         <div>
           <h1 className="bg-gradient-to-br from-zinc-200 via-white to-zinc-300 bg-clip-text text-3xl font-semibold text-transparent">
             Login with Private Key
           </h1>
         </div>
+        <div></div>
       </div>
-      <div className="row-span-4">
+      <form onSubmit={handleSubmit(onSubmit)} className="row-span-4">
         <div className="mx-auto w-full max-w-md">
           <div className="flex flex-col gap-4">
             <div>
@@ -119,8 +130,8 @@ export default function Page() {
             )}
           </div>
         </div>
-      </div>
-    </form>
+      </form>
+    </div>
   );
 }