wip: new onboarding process

src/app/auth/import/step-2.tsx

@@ -3,6 +3,7 @@ import { Resolver, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
 import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
+import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 
 import { useOnboarding } from '@stores/onboarding';
 import { useStronghold } from '@stores/stronghold';
@@ -99,13 +100,11 @@ export function ImportStep2Screen() {
                 )}
               </button>
             </div>
-            <div className="text-sm text-white/50">
-              <p>
-                Password is use to unlock app and secure your key store in local machine.
-                When you move to other clients, you just need to copy your private key as
-                nsec or hexstring
-              </p>
-            </div>
+            <p className="text-sm text-white/50">
+              Password is use to unlock app and secure your key store in local machine.
+              When you move to other clients, you just need to copy your private key as
+              nsec or hexstring
+            </p>
             <span className="text-sm text-red-400">
               {errors.password && <p>{errors.password.message}</p>}
             </span>
@@ -114,12 +113,20 @@ export function ImportStep2Screen() {
             <button
               type="submit"
               disabled={!isDirty || !isValid}
-              className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
             >
               {loading ? (
-                <LoaderIcon className="h-4 w-4 animate-spin text-white" />
+                <>
+                  <span className="w-5" />
+                  <span>Creating...</span>
+                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                </>
               ) : (
-                'Continue →'
+                <>
+                  <span className="w-5" />
+                  <span>Continue</span>
+                  <ArrowRightCircleIcon className="h-5 w-5" />
+                </>
               )}
             </button>
           </div>