From 3cc3b623cc4e1e41e882f498f0d5e60c5e7eca50 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Wed, 9 Sep 2026 11:30:06 +0700
Subject: [PATCH] Redesign signup "done" step to lead with recovery (1.3.15)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reworked the final signup step so saving your login key is the hero,
not an afterthought:
- Celebration shrunk to a compact bar ("You're in! One quick thing…")
  so it no longer steals focus from the safety step.
- "Save your login key" card is now the centerpiece with a loud amber
  primary CTA (Reveal & save), a skater-native framing ("keys to your
  board", "only way back in — no email, no password reset").
- Download button flips to a green "Saved ✓" state for clear feedback.
- "Skate now" is intentionally quieter and honest: reads "Skip for now,
  skate" with a reassuring note until the key is saved, then becomes a
  confident lime "Let's skate" once done. Never blocks the user.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/components/auth/SignupDialog.tsx | 122 ++++++++++++++++-----------
 1 file changed, 73 insertions(+), 49 deletions(-)

diff --git a/src/components/auth/SignupDialog.tsx b/src/components/auth/SignupDialog.tsx
index d8b2d2f..889dacb 100644
--- a/src/components/auth/SignupDialog.tsx
+++ b/src/components/auth/SignupDialog.tsx
@@ -512,51 +512,48 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
             </div>
           )}
 
-          {/* Done Step - Account created, gentle optional backup */}
+          {/* Done Step — recovery FIRST. Saving your key is the hero action;
+              skating is one tap away but never competes with the safety step. */}
           {step === 'done' && (
-            <div className='py-4 space-y-4'>
-              <Card className='bg-gradient-to-br from-[#ccff00]/10 to-[#00ff00]/10 border-2 border-[#ccff00]/50'>
-                <CardContent className='p-6 text-center space-y-3'>
-                  <div className='text-5xl mb-2'>🛹</div>
-                  <h3 className='text-xl font-black uppercase text-[#ccff00]'>
-                    You're all set!
-                  </h3>
-                  <p className='text-gray-300 text-sm'>
-                    Your account is ready. Go find some spots.
-                  </p>
-                  <CheckCircle className='h-10 w-10 mx-auto text-[#00ff00]' />
-                </CardContent>
-              </Card>
+            <div className='py-2 space-y-4'>
+              {/* Compact celebration — acknowledges success without stealing the
+                  spotlight from the one thing that actually matters right now. */}
+              <div className='flex items-center gap-3 rounded-xl bg-[#00ff00]/10 border border-[#00ff00]/30 px-4 py-3'>
+                <CheckCircle className='h-6 w-6 shrink-0 text-[#00ff00]' />
+                <div>
+                  <p className='font-black uppercase text-[#ccff00] leading-tight'>You're in! 🛹</p>
+                  <p className='text-xs text-gray-400'>One quick thing before you drop in…</p>
+                </div>
+              </div>
 
-              {/* Optional backup — no pressure, no jargon */}
-              <Card className='bg-amber-950/20 border-2 border-amber-500/30'>
+              {/* THE KEY — framed like a skate metaphor: this is your session pass.
+                  Lose it, no bail-out. Saving it is the primary, loud action. */}
+              <Card className='bg-gradient-to-br from-amber-950/40 to-black border-2 border-amber-500/50 shadow-[0_0_28px_rgba(245,158,11,0.18)]'>
                 <CardContent className='p-5 space-y-3'>
-                  <div className='flex items-center gap-3'>
-                    <div className='p-2 rounded-lg bg-amber-500/20'>
-                      <Shield className='h-5 w-5 text-amber-400' />
+                  <div className='flex items-start gap-3'>
+                    <div className='mt-0.5 p-2 rounded-xl bg-amber-500/20 ring-1 ring-amber-500/40'>
+                      <Key className='h-5 w-5 text-amber-400' />
                     </div>
-                    <div>
-                      <h4 className='font-bold text-amber-400'>Save a backup (optional)</h4>
-                      <p className='text-xs text-gray-400'>So you never lose access to your account</p>
+                    <div className='flex-1'>
+                      <h4 className='font-black uppercase text-amber-300 leading-tight'>Save your login key</h4>
+                      <p className='text-xs text-amber-100/80 leading-snug mt-1'>
+                        This is the <span className='font-bold text-amber-200'>only</span> way back into your account —
+                        no email, no password reset. Save it now and you can log in on any device, anywhere you skate.
+                      </p>
                     </div>
                   </div>
-                  <p className='text-sm text-gray-300'>
-                    Your account lives on your device. Save a recovery code somewhere safe and
-                    you'll be able to log back in on any device. You can also do this later from Settings.
-                  </p>
 
                   {!showNsec ? (
                     <Button
-                      variant='outline'
-                      className='w-full border-amber-500/50 text-amber-400 hover:bg-amber-500/10'
+                      className='w-full rounded-full py-3 font-black uppercase bg-amber-500 text-black hover:bg-amber-400'
                       onClick={() => setShowNsec(true)}
                     >
-                      <Key className='h-4 w-4 mr-2' />
-                      Show my recovery code
+                      <Shield className='h-4 w-4 mr-2' />
+                      Reveal &amp; save my key
                     </Button>
                   ) : (
                     <div className='space-y-2'>
-                      <div className='p-2 bg-black rounded border border-amber-500/20 font-mono text-xs break-all text-white'>
+                      <div className='p-3 bg-black rounded-lg border border-amber-500/30 font-mono text-xs break-all text-white'>
                         {nsec}
                       </div>
                       <div className='grid grid-cols-2 gap-2'>
@@ -570,36 +567,63 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
                             toast({ title: 'Copied!', description: 'Recovery code copied. Keep it somewhere safe.' });
                           }}
                         >
+                          <Key className='h-3.5 w-3.5 mr-1.5' />
                           Copy
                         </Button>
                         <Button
-                          variant='outline'
                           size='sm'
-                          className='border-amber-500/40 text-amber-300 hover:bg-amber-500/10'
+                          className={cn(
+                            'font-bold',
+                            keySecured === 'downloaded'
+                              ? 'bg-[#00ff00]/20 text-[#00ff00] border border-[#00ff00]/40 hover:bg-[#00ff00]/25'
+                              : 'bg-amber-500 text-black hover:bg-amber-400'
+                          )}
                           onClick={downloadKey}
                         >
-                          <Download className='h-3.5 w-3.5 mr-1.5' />
-                          {keySecured === 'downloaded' ? 'Saved ✓' : 'Download'}
+                          {keySecured === 'downloaded' ? (
+                            <><CheckCircle className='h-3.5 w-3.5 mr-1.5' /> Saved</>
+                          ) : (
+                            <><Download className='h-3.5 w-3.5 mr-1.5' /> Download</>
+                          )}
                         </Button>
                       </div>
-                      <p className='text-xs text-amber-300/80'>⚠️ Anyone with this code can access your account. Never share it.</p>
+                      <p className='flex items-start gap-1.5 text-[11px] text-amber-300/80 leading-snug'>
+                        <Shield className='h-3.5 w-3.5 shrink-0 mt-px' />
+                        Treat it like the keys to your board — anyone with this code controls your account. Never share it.
+                      </p>
                     </div>
                   )}
-
-                  <Button
-                    className='w-full rounded-full py-3 font-bold uppercase bg-[#ccff00] text-black hover:bg-[#ccff00]/90'
-                    onClick={handleFinishComplete}
-                  >
-                    <LogIn className='h-4 w-4 mr-2' />
-                    Start Skating
-                  </Button>
-                  <Link to='/signers' onClick={handleFinishComplete} className='block'>
-                    <button className='w-full text-xs text-gray-500 hover:text-gray-400 py-1'>
-                      Advanced: use a signer app instead
-                    </button>
-                  </Link>
                 </CardContent>
               </Card>
+
+              {/* Skate now — clearly available, intentionally quieter than "save".
+                  Copy adapts: once saved, it's a confident go; if not, it's an
+                  honest "you can do this later" so we never trap the user. */}
+              <div className='space-y-2'>
+                <Button
+                  variant={keySecured === 'downloaded' ? 'default' : 'outline'}
+                  className={cn(
+                    'w-full rounded-full py-3 font-black uppercase',
+                    keySecured === 'downloaded'
+                      ? 'bg-[#ccff00] text-black hover:bg-[#ccff00]/90'
+                      : 'border-white/20 text-white hover:bg-white/5'
+                  )}
+                  onClick={handleFinishComplete}
+                >
+                  <LogIn className='h-4 w-4 mr-2' />
+                  {keySecured === 'downloaded' ? "Let's skate" : 'Skip for now, skate'}
+                </Button>
+                {keySecured !== 'downloaded' && (
+                  <p className='text-center text-[11px] text-gray-500'>
+                    No stress — we'll remind you, and you can save it anytime from Settings.
+                  </p>
+                )}
+                <Link to='/signers' onClick={handleFinishComplete} className='block'>
+                  <button className='w-full text-xs text-gray-500 hover:text-gray-400 py-1'>
+                    Advanced: use a signer app instead
+                  </button>
+                </Link>
+              </div>
             </div>
           )}
         </div>