saulteafarmer/mkstack
1
0
Fork 0
mirror of https://gitlab.com/soapbox-pub/mkstack.git synced 2025-08-27 13:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make wording and icons generic

Browse Source
This commit is contained in:
Chad Curtis 2025-07-08 14:19:17 +00:00
parent baaf7e6ab4
commit e226ec42a5
2 changed files with 123 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/auth/LoginDialog.tsx
View File

@ -2,7 +2,7 @@
// It is important that all functionality in this file is preserved, and should only be modified if explicitly requested. // It is important that all functionality in this file is preserved, and should only be modified if explicitly requested.
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { Shield, Upload, AlertTriangle, Sparkles, Crown, Gem, Star, KeyRound, Lock } from 'lucide-react'; import { Shield, Upload, AlertTriangle, Sparkles, UserPlus, KeyRound, Lock } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
@ -170,47 +170,33 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ isOpen, onClose, onLogin, onS
> >
<DialogHeader className={cn('px-6 pt-6 pb-1 relative')}> <DialogHeader className={cn('px-6 pt-6 pb-1 relative')}>
<DialogTitle className={cn('font-semibold text-center')}> <DialogTitle className={cn('font-semibold text-center')}>
Welcome, Traveler! Welcome!
</DialogTitle> </DialogTitle>
<DialogDescription className="text-center"> <DialogDescription className="text-center">
Start your quest, or login to return to your adventure Sign up or log in to continue
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className='px-6 pt-2 pb-4 space-y-4 overflow-y-auto flex-1'> <div className='px-6 pt-2 pb-4 space-y-4 overflow-y-auto flex-1'>
{/* Prominent Sign Up Section */} {/* Prominent Sign Up Section */}
<div className='relative p-4 rounded-2xl bg-gradient-to-br from-green-50 to-emerald-100 dark:from-green-950/50 dark:to-emerald-950/50 adventure:from-amber-50 adventure:to-orange-100 adventure:dark:from-amber-950/50 adventure:dark:to-orange-950/50 border border-green-200 dark:border-green-800 adventure:border-amber-200 adventure:dark:border-amber-800 overflow-hidden'> <div className='relative p-4 rounded-2xl bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/50 dark:to-indigo-950/50 border border-blue-200 dark:border-blue-800 overflow-hidden'>
{/* Magical sparkles */}
<div className='absolute inset-0 pointer-events-none'>
<Sparkles className='absolute top-2 right-3 w-3 h-3 text-yellow-400 animate-pulse' style={{animationDelay: '0s'}} />
<Star className='absolute top-4 left-4 w-2 h-2 text-yellow-500 animate-pulse' style={{animationDelay: '0.5s'}} />
<Gem className='absolute bottom-3 right-4 w-2 h-2 text-yellow-400 animate-pulse' style={{animationDelay: '1s'}} />
</div>
<div className='relative z-10 text-center space-y-3'> <div className='relative z-10 text-center space-y-3'>
<div className='flex justify-center items-center gap-2 mb-2'> <div className='flex justify-center items-center gap-2 mb-2'>
<Crown className='w-5 h-5 text-green-600 adventure:text-amber-700' /> <UserPlus className='w-5 h-5 text-blue-600' />
<span className='font-semibold text-green-800 dark:text-green-200 adventure:text-amber-800 adventure:dark:text-amber-200'> <span className='font-semibold text-blue-800 dark:text-blue-200'>
<span className='adventure:hidden'>New to Geocaching?</span> New to Nostr?
<span className='hidden adventure:inline'>New to the Quest?</span>
</span> </span>
</div> </div>
<p className='text-sm text-green-700 dark:text-green-300 adventure:text-amber-700 adventure:dark:text-amber-300 mb-3'> <p className='text-sm text-blue-700 dark:text-blue-300 mb-3'>
<span className='adventure:hidden'> Create a new account to join the network.
Join the guild of adventurers discovering hidden geocaches worldwide!
</span>
<span className='hidden adventure:inline'>
Join the ancient guild of geocache seekers on legendary quests!
</span>
</p> </p>
<Button <Button
onClick={handleSignupClick} onClick={handleSignupClick}
className='w-full rounded-full py-3 text-base font-semibold bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 adventure:from-amber-700 adventure:to-orange-700 adventure:hover:from-amber-800 adventure:hover:to-orange-800 transform transition-all duration-200 hover:scale-105 shadow-lg border-0' className='w-full rounded-full py-3 text-base font-semibold bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 transform transition-all duration-200 hover:scale-105 shadow-lg border-0'
> >
<Sparkles className='w-4 h-4 mr-2' /> <Sparkles className='w-4 h-4 mr-2' />
<span className='adventure:hidden'>Start Your Adventure!</span> <span>Create Account</span>
<span className='hidden adventure:inline'>Begin Your Quest!</span>
</Button> </Button>
</div> </div>
</div> </div>
@ -222,7 +208,7 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ isOpen, onClose, onLogin, onS
</div> </div>
<div className='relative flex justify-center text-sm'> <div className='relative flex justify-center text-sm'>
<span className='px-3 bg-background text-muted-foreground'> <span className='px-3 bg-background text-muted-foreground'>
<span>Or return to your adventure</span> <span>Or log in</span>
</span> </span>
</div> </div>
</div> </div>

220
src/components/auth/SignupDialog.tsx
View File

@ -2,7 +2,7 @@
// It is important that all functionality in this file is preserved, and should only be modified if explicitly requested. // It is important that all functionality in this file is preserved, and should only be modified if explicitly requested.
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Download, Key, Compass, Scroll, Shield, Crown, Sparkles, MapPin, Gem, Map, Star, Zap, Lock, CheckCircle, Copy, Upload } from 'lucide-react'; import { Download, Key, UserPlus, FileText, Shield, User, Sparkles, LogIn, Lock, CheckCircle, Copy, Upload, Globe, FileSignature, Wand2 } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea'; import { Textarea } from '@/components/ui/textarea';
@ -46,7 +46,7 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
setIsLoading(true); setIsLoading(true);
setShowSparkles(true); setShowSparkles(true);
// Add a dramatic pause for the treasure generation effect // Add a dramatic pause for the key generation effect
setTimeout(() => { setTimeout(() => {
try { try {
// Generate a new secret key // Generate a new secret key
@ -57,8 +57,8 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
setStep('download'); setStep('download');
toast({ toast({
title: 'Your Treasure Key is Ready!', title: 'Your Secret Key is Ready!',
description: 'A magical key has been forged just for you.', description: 'A new secret key has been generated for you.',
}); });
} catch { } catch {
toast({ toast({
@ -80,7 +80,7 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
const url = globalThis.URL.createObjectURL(blob); const url = globalThis.URL.createObjectURL(blob);
// Sanitize filename // Sanitize filename
const filename = sanitizeFilename('treasure-key.txt'); const filename = sanitizeFilename('secret-key.txt');
// Create a temporary link element and trigger download // Create a temporary link element and trigger download
const a = document.createElement('a'); const a = document.createElement('a');
@ -98,8 +98,8 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
setKeySecured('downloaded'); setKeySecured('downloaded');
toast({ toast({
title: 'Treasure Key Secured!', title: 'Secret Key Saved!',
description: 'Your key has been safely stored in your vault. Guard it well!', description: 'Your key has been safely stored. Keep it safe!',
}); });
} catch { } catch {
toast({ toast({
@ -114,8 +114,8 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
navigator.clipboard.writeText(nsec); navigator.clipboard.writeText(nsec);
setKeySecured('copied'); setKeySecured('copied');
toast({ toast({
title: 'Copied to your spellbook!', title: 'Copied to clipboard!',
description: 'Key safely transcribed to clipboard', description: 'Key copied to clipboard.',
}); });
}; };
@ -181,7 +181,7 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
const finishSignup = async (skipProfile = false) => { const finishSignup = async (skipProfile = false) => {
// Mark signup completion time for fallback welcome modal // Mark signup completion time for fallback welcome modal
localStorage.setItem('treasures_last_signup', Date.now().toString()); localStorage.setItem('signup_completed', Date.now().toString());
try { try {
// Publish profile if user provided information // Publish profile if user provided information
@ -198,7 +198,7 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
toast({ toast({
title: 'Profile Created!', title: 'Profile Created!',
description: 'Your adventurer profile has been set up.', description: 'Your profile has been set up.',
}); });
} }
@ -215,8 +215,8 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
setTimeout(() => { setTimeout(() => {
onClose(); onClose();
toast({ toast({
title: 'Welcome to the Adventure!', title: 'Welcome!',
description: 'Your quest begins now!', description: 'Your account is ready.',
}); });
}, 3000); }, 3000);
} }
@ -240,8 +240,8 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
setTimeout(() => { setTimeout(() => {
onClose(); onClose();
toast({ toast({
title: 'Welcome to the Adventure!', title: 'Welcome!',
description: 'Your quest begins now!', description: 'Your account is ready.',
}); });
}, 3000); }, 3000);
} }
@ -251,42 +251,42 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
const getTitle = () => { const getTitle = () => {
if (step === 'welcome') return ( if (step === 'welcome') return (
<span className="flex items-center justify-center gap-2"> <span className="flex items-center justify-center gap-2">
<Map className="w-5 h-5 text-green-600 adventure:text-amber-700" /> <UserPlus className="w-5 h-5 text-primary" />
Begin Your Quest Create Your Account
</span> </span>
); );
if (step === 'generate') return ( if (step === 'generate') return (
<span className="flex items-center justify-center gap-2"> <span className="flex items-center justify-center gap-2">
<Sparkles className="w-5 h-5 text-purple-600 adventure:text-amber-700" /> <Wand2 className="w-5 h-5 text-primary" />
Forging Your Key Generating Your Key
</span> </span>
); );
if (step === 'download') return ( if (step === 'download') return (
<span className="flex items-center justify-center gap-2"> <span className="flex items-center justify-center gap-2">
<Lock className="w-5 h-5 text-green-600 adventure:text-amber-700" /> <Lock className="w-5 h-5 text-primary" />
Secure Your Treasure Key Secure Your Secret Key
</span> </span>
); );
if (step === 'profile') return ( if (step === 'profile') return (
<span className="flex items-center justify-center gap-2"> <span className="flex items-center justify-center gap-2">
<Crown className="w-5 h-5 text-green-600 adventure:text-amber-700" /> <FileSignature className="w-5 h-5 text-primary" />
Create Your Profile Create Your Profile
</span> </span>
); );
return ( return (
<span className="flex items-center justify-center gap-2"> <span className="flex items-center justify-center gap-2">
<Crown className="w-5 h-5 text-green-600 adventure:text-amber-700" /> <User className="w-5 h-5 text-primary" />
Welcome, Adventurer! Welcome!
</span> </span>
); );
}; };
const getDescription = () => { const getDescription = () => {
if (step === 'welcome') return 'Ready to discover hidden geocaches around the world?'; if (step === 'welcome') return 'Ready to join the Nostr network?';
if (step === 'generate') return 'Creating your magical key to unlock Treasures'; if (step === 'generate') return 'Creating your secret key to access Nostr.';
if (step === 'download') return 'This key is your passport to adventure - keep it safe!'; if (step === 'download') return 'This key is your password - keep it safe!';
if (step === 'profile') return 'Tell other adventurers about yourself'; if (step === 'profile') return 'Tell others about yourself.';
return 'Your adventure begins now!'; return 'Your account is ready!';
}; };
// Reset state when dialog opens // Reset state when dialog opens
@ -329,48 +329,48 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
{step === 'welcome' && ( {step === 'welcome' && (
<div className='text-center space-y-4'> <div className='text-center space-y-4'>
{/* Hero illustration */} {/* Hero illustration */}
<div className='relative p-6 rounded-2xl bg-gradient-to-br from-green-50 to-emerald-100 dark:from-green-950/50 dark:to-emerald-950/50 adventure:from-amber-50 adventure:to-orange-100 adventure:dark:from-amber-950/50 adventure:dark:to-orange-950/50'> <div className='relative p-6 rounded-2xl bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/50 dark:to-indigo-950/50'>
<div className='flex justify-center items-center space-x-4 mb-3'> <div className='flex justify-center items-center space-x-4 mb-3'>
<div className='relative'> <div className='relative'>
<MapPin className='w-12 h-12 text-green-600 adventure:text-amber-700 animate-bounce' /> <UserPlus className='w-12 h-12 text-blue-600' />
<Sparkles className='w-4 h-4 text-yellow-500 absolute -top-1 -right-1 animate-pulse' /> <Sparkles className='w-4 h-4 text-yellow-500 absolute -top-1 -right-1 animate-pulse' />
</div> </div>
<Compass className='w-16 h-16 text-green-700 adventure:text-amber-800 animate-spin-slow' /> <Globe className='w-16 h-16 text-blue-700 animate-spin-slow' />
<div className='relative'> <div className='relative'>
<Gem className='w-12 h-12 text-green-600 adventure:text-amber-700 animate-bounce' style={{animationDelay: '0.5s'}} /> <FileText className='w-12 h-12 text-blue-600' />
<Star className='w-4 h-4 text-yellow-500 absolute -top-1 -left-1 animate-pulse' style={{animationDelay: '0.3s'}} /> <Sparkles className='w-4 h-4 text-yellow-500 absolute -top-1 -left-1 animate-pulse' style={{animationDelay: '0.3s'}} />
</div> </div>
</div> </div>
{/* Adventure benefits */} {/* Benefits */}
<div className='grid grid-cols-1 gap-2 text-sm'> <div className='grid grid-cols-1 gap-2 text-sm'>
<div className='flex items-center justify-center gap-2 text-green-700 dark:text-green-300 adventure:text-amber-800 adventure:dark:text-amber-200'> <div className='flex items-center justify-center gap-2 text-blue-700 dark:text-blue-300'>
<Shield className='w-4 h-4' /> <Shield className='w-4 h-4' />
Embark on legendary quests worldwide Decentralized and censorship-resistant
</div> </div>
<div className='flex items-center justify-center gap-2 text-green-700 dark:text-green-300 adventure:text-amber-800 adventure:dark:text-amber-200'> <div className='flex items-center justify-center gap-2 text-blue-700 dark:text-blue-300'>
<Crown className='w-4 h-4' /> <User className='w-4 h-4' />
Hide your own geocaches You are in control of your data
</div> </div>
<div className='flex items-center justify-center gap-2 text-green-700 dark:text-green-300 adventure:text-amber-800 adventure:dark:text-amber-200'> <div className='flex items-center justify-center gap-2 text-blue-700 dark:text-blue-300'>
<Map className='w-4 h-4' /> <Globe className='w-4 h-4' />
Unite with fellow adventurers Join a global network
</div> </div>
</div> </div>
</div> </div>
<div className='space-y-3'> <div className='space-y-3'>
<p className='text-muted-foreground px-5'> <p className='text-muted-foreground px-5'>
Join adventurers exploring the world through geocaching. Join the Nostr network and take control of your social media experience.
Your quest begins with forging your very own treasure key. Your journey begins by generating a secret key.
</p> </p>
<Button <Button
className='w-full rounded-full py-6 text-lg font-semibold bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 adventure:from-amber-700 adventure:to-orange-700 adventure:hover:from-amber-800 adventure:hover:to-orange-800 transform transition-all duration-200 hover:scale-105 shadow-lg' className='w-full rounded-full py-6 text-lg font-semibold bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 transform transition-all duration-200 hover:scale-105 shadow-lg'
onClick={() => setStep('generate')} onClick={() => setStep('generate')}
> >
<Zap className='w-5 h-5 mr-2' /> <LogIn className='w-5 h-5 mr-2' />
Begin My Quest! Get Started
</Button> </Button>
<p className='text-xs text-muted-foreground'> <p className='text-xs text-muted-foreground'>
@ -383,7 +383,7 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
{/* Generate Step - Enhanced with animations */} {/* Generate Step - Enhanced with animations */}
{step === 'generate' && ( {step === 'generate' && (
<div className='text-center space-y-4'> <div className='text-center space-y-4'>
<div className='relative p-6 rounded-2xl bg-gradient-to-br from-blue-50 to-purple-100 dark:from-blue-950/50 dark:to-purple-950/50 adventure:from-amber-50 adventure:to-yellow-100 adventure:dark:from-amber-950/50 adventure:dark:to-yellow-950/50 overflow-hidden'> <div className='relative p-6 rounded-2xl bg-gradient-to-br from-blue-50 to-purple-100 dark:from-blue-950/50 dark:to-purple-950/50 overflow-hidden'>
{/* Animated background elements */} {/* Animated background elements */}
{showSparkles && ( {showSparkles && (
<div className='absolute inset-0'> <div className='absolute inset-0'>
@ -413,10 +413,10 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
<div className='space-y-2'> <div className='space-y-2'>
<p className='text-lg font-semibold text-primary flex items-center justify-center gap-2'> <p className='text-lg font-semibold text-primary flex items-center justify-center gap-2'>
<Sparkles className='w-5 h-5' /> <Sparkles className='w-5 h-5' />
Forging your magical key... Generating your secret key...
</p> </p>
<p className='text-sm text-muted-foreground'> <p className='text-sm text-muted-foreground'>
Weaving cryptographic spells Creating your secure key
</p> </p>
</div> </div>
</div> </div>
@ -425,13 +425,13 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
<Key className='w-20 h-20 text-primary mx-auto' /> <Key className='w-20 h-20 text-primary mx-auto' />
<div className='space-y-2'> <div className='space-y-2'>
<p className='text-lg font-semibold'> <p className='text-lg font-semibold'>
Ready to forge your treasure key? Ready to generate your secret key?
</p> </p>
<p className='text-sm text-muted-foreground px-5'> <p className='text-sm text-muted-foreground px-5'>
This magical key will be your passport to the world of Treasures. This key will be your password to access applications within the Nostr network.
</p> </p>
<p className='text-sm text-muted-foreground px-5'> <p className='text-sm text-muted-foreground px-5'>
It's completely unique and secure - keep it secret, keep it safe! It's completely unique and secure:<br></br>keep it secret, keep it safe!
</p> </p>
</div> </div>
</div> </div>
@ -441,12 +441,12 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
{!isLoading && ( {!isLoading && (
<Button <Button
className='w-full rounded-full py-6 text-lg font-semibold bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 adventure:from-amber-700 adventure:to-yellow-700 adventure:hover:from-amber-800 adventure:hover:to-yellow-800 transform transition-all duration-200 hover:scale-105 shadow-lg' className='w-full rounded-full py-6 text-lg font-semibold bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 transform transition-all duration-200 hover:scale-105 shadow-lg'
onClick={generateKey} onClick={generateKey}
disabled={isLoading} disabled={isLoading}
> >
<Sparkles className='w-5 h-5 mr-2' /> <Sparkles className='w-5 h-5 mr-2' />
Forge My Treasure Key! Generate My Secret Key
</Button> </Button>
)} )}
</div> </div>
@ -455,22 +455,22 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
{/* Download Step - Whimsical and magical */} {/* Download Step - Whimsical and magical */}
{step === 'download' && ( {step === 'download' && (
<div className='text-center space-y-4'> <div className='text-center space-y-4'>
{/* Magical treasure chest reveal */} {/* Key reveal */}
<div className='relative p-6 rounded-2xl bg-gradient-to-br from-green-50 to-emerald-100 dark:from-green-950/50 dark:to-emerald-950/50 adventure:from-amber-50 adventure:to-orange-100 adventure:dark:from-amber-950/50 adventure:dark:to-orange-950/50 overflow-hidden'> <div className='relative p-6 rounded-2xl bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/50 dark:to-indigo-950/50 overflow-hidden'>
{/* Magical sparkles floating around */} {/* Sparkles */}
<div className='absolute inset-0 pointer-events-none'> <div className='absolute inset-0 pointer-events-none'>
<Sparkles className='absolute top-3 left-4 w-3 h-3 text-yellow-400 animate-pulse' style={{animationDelay: '0s'}} /> <Sparkles className='absolute top-3 left-4 w-3 h-3 text-yellow-400 animate-pulse' style={{animationDelay: '0s'}} />
<Star className='absolute top-6 right-6 w-3 h-3 text-yellow-500 animate-pulse' style={{animationDelay: '0.5s'}} /> <Sparkles className='absolute top-6 right-6 w-3 h-3 text-yellow-500 animate-pulse' style={{animationDelay: '0.5s'}} />
<Sparkles className='absolute bottom-4 left-6 w-3 h-3 text-yellow-400 animate-pulse' style={{animationDelay: '1s'}} /> <Sparkles className='absolute bottom-4 left-6 w-3 h-3 text-yellow-400 animate-pulse' style={{animationDelay: '1s'}} />
<Star className='absolute bottom-3 right-4 w-3 h-3 text-yellow-500 animate-pulse' style={{animationDelay: '1.5s'}} /> <Sparkles className='absolute bottom-3 right-4 w-3 h-3 text-yellow-500 animate-pulse' style={{animationDelay: '1.5s'}} />
</div> </div>
<div className='relative z-10 flex justify-center items-center mb-3'> <div className='relative z-10 flex justify-center items-center mb-3'>
<div className='relative'> <div className='relative'>
<div className='w-16 h-16 bg-gradient-to-br from-yellow-200 to-amber-300 adventure:from-amber-200 adventure:to-orange-300 rounded-full flex items-center justify-center shadow-lg animate-pulse'> <div className='w-16 h-16 bg-gradient-to-br from-blue-200 to-indigo-300 rounded-full flex items-center justify-center shadow-lg animate-pulse'>
<Key className='w-8 h-8 text-amber-800 adventure:text-orange-900' /> <Key className='w-8 h-8 text-indigo-800' />
</div> </div>
<div className='absolute -top-1 -right-1 w-5 h-5 bg-green-500 adventure:bg-emerald-600 rounded-full flex items-center justify-center animate-bounce'> <div className='absolute -top-1 -right-1 w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center animate-bounce'>
<Sparkles className='w-3 h-3 text-white' /> <Sparkles className='w-3 h-3 text-white' />
</div> </div>
</div> </div>
@ -478,40 +478,40 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
<div className='relative z-10 space-y-2'> <div className='relative z-10 space-y-2'>
<p className='text-base font-semibold'> <p className='text-base font-semibold'>
Behold! Your magical treasure key! Your secret key has been generated!
</p> </p>
{/* Whimsical warning with scroll design */} {/* Warning */}
<div className='relative mx-auto max-w-sm'> <div className='relative mx-auto max-w-sm'>
<div className='p-3 bg-gradient-to-r from-amber-100 via-yellow-50 to-amber-100 dark:from-amber-950/40 dark:via-yellow-950/20 dark:to-amber-950/40 adventure:from-orange-100 adventure:via-amber-50 adventure:to-orange-100 adventure:dark:from-orange-950/40 adventure:dark:via-amber-950/20 adventure:dark:to-orange-950/40 rounded-lg border-2 border-amber-300 dark:border-amber-700 adventure:border-orange-400 adventure:dark:border-orange-600 shadow-md'> <div className='p-3 bg-gradient-to-r from-amber-100 via-yellow-50 to-amber-100 dark:from-amber-950/40 dark:via-yellow-950/20 dark:to-amber-950/40 rounded-lg border-2 border-amber-300 dark:border-amber-700 shadow-md'>
<div className='flex items-center gap-2 mb-1'> <div className='flex items-center gap-2 mb-1'>
<Scroll className='w-3 h-3 text-amber-700 adventure:text-orange-800' /> <FileText className='w-3 h-3 text-amber-700' />
<span className='text-xs font-bold text-amber-800 dark:text-amber-200 adventure:text-orange-900 adventure:dark:text-orange-200'> <span className='text-xs font-bold text-amber-800 dark:text-amber-200'>
Ancient Warning Important Warning
</span> </span>
</div> </div>
<p className='text-xs text-amber-700 dark:text-amber-300 adventure:text-orange-800 adventure:dark:text-orange-300 italic'> <p className='text-xs text-red-700 dark:text-amber-300 italic'>
"Guard this key with your life, for once lost to the digital winds, it shall never return..." This key is your primary and only means of accessing your account. Store it safely and securely.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* Enchanted key vault */} {/* Key vault */}
<div className='relative p-3 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 adventure:from-amber-100 adventure:to-yellow-200 adventure:dark:from-amber-900 adventure:to-yellow-900 rounded-xl border-2 border-dashed border-amber-400 dark:border-amber-600 adventure:border-orange-500 adventure:dark:border-orange-400 shadow-inner'> <div className='relative p-3 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border-2 border-dashed border-blue-400 dark:border-blue-600 shadow-inner'>
<div className='flex items-center gap-2 mb-2'> <div className='flex items-center gap-2 mb-2'>
<Lock className='w-4 h-4 text-amber-600 adventure:text-orange-700' /> <Lock className='w-4 h-4 text-blue-600' />
<span className='text-sm font-medium text-amber-800 dark:text-amber-200 adventure:text-orange-800 adventure:dark:text-orange-200'> <span className='text-sm font-medium text-blue-800 dark:text-blue-200'>
Your Treasure Key Your Secret Key
</span> </span>
</div> </div>
<div className='p-2 bg-background/90 rounded-lg border border-amber-300 dark:border-amber-700 adventure:border-orange-400 adventure:dark:border-orange-600'> <div className='p-2 bg-background/90 rounded-lg border border-blue-300 dark:border-blue-700'>
<code className='text-xs break-all font-mono text-amber-900 dark:text-amber-100 adventure:text-orange-900 adventure:dark:text-orange-100'>{nsec}</code> <code className='text-xs break-all font-mono text-blue-900 dark:text-blue-100'>{nsec}</code>
</div> </div>
</div> </div>
{/* Security options - clearly presented as choices */} {/* Security options */}
<div className='space-y-3'> <div className='space-y-3'>
<div className='text-center'> <div className='text-center'>
<p className='text-sm font-medium text-muted-foreground mb-2'> <p className='text-sm font-medium text-muted-foreground mb-2'>
@ -523,7 +523,7 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
{/* Copy Option */} {/* Copy Option */}
<Card className={`cursor-pointer transition-all duration-200 ${ <Card className={`cursor-pointer transition-all duration-200 ${
keySecured === 'copied' keySecured === 'copied'
? 'ring-2 ring-green-500 adventure:ring-amber-500 bg-green-50 dark:bg-green-950/20 adventure:bg-amber-50 adventure:dark:bg-amber-950/20' ? 'ring-2 ring-green-500 bg-green-50 dark:bg-green-950/20'
: 'hover:bg-muted/50 dark:bg-muted' : 'hover:bg-muted/50 dark:bg-muted'
}`}> }`}>
<CardContent className='p-3'> <CardContent className='p-3'>
@ -535,11 +535,11 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
<div className='flex items-center gap-3 w-full'> <div className='flex items-center gap-3 w-full'>
<div className={`p-1.5 rounded-lg ${ <div className={`p-1.5 rounded-lg ${
keySecured === 'copied' keySecured === 'copied'
? 'bg-green-100 dark:bg-green-900 adventure:bg-amber-100 adventure:dark:bg-amber-900' ? 'bg-green-100 dark:bg-green-900'
: 'bg-muted' : 'bg-muted'
}`}> }`}>
{keySecured === 'copied' ? ( {keySecured === 'copied' ? (
<CheckCircle className='w-4 h-4 text-green-600 adventure:text-amber-600' /> <CheckCircle className='w-4 h-4 text-green-600' />
) : ( ) : (
<Copy className='w-4 h-4 text-muted-foreground' /> <Copy className='w-4 h-4 text-muted-foreground' />
)} )}
@ -553,7 +553,7 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
</div> </div>
</div> </div>
{keySecured === 'copied' && ( {keySecured === 'copied' && (
<div className='text-xs font-medium text-green-600 adventure:text-amber-600'> <div className='text-xs font-medium text-green-600'>
✓ Copied ✓ Copied
</div> </div>
)} )}
@ -565,7 +565,7 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
{/* Download Option */} {/* Download Option */}
<Card className={`cursor-pointer transition-all duration-200 ${ <Card className={`cursor-pointer transition-all duration-200 ${
keySecured === 'downloaded' keySecured === 'downloaded'
? 'ring-2 ring-green-500 adventure:ring-amber-500 bg-green-50 dark:bg-green-950/20 adventure:bg-amber-50 adventure:dark:bg-amber-950/20' ? 'ring-2 ring-green-500 bg-green-50 dark:bg-green-950/20'
: 'hover:bg-muted/50 dark:bg-muted' : 'hover:bg-muted/50 dark:bg-muted'
}`}> }`}>
<CardContent className='p-3'> <CardContent className='p-3'>
@ -577,11 +577,11 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
<div className='flex items-center gap-3 w-full'> <div className='flex items-center gap-3 w-full'>
<div className={`p-1.5 rounded-lg ${ <div className={`p-1.5 rounded-lg ${
keySecured === 'downloaded' keySecured === 'downloaded'
? 'bg-green-100 dark:bg-green-900 adventure:bg-amber-100 adventure:dark:bg-amber-900' ? 'bg-green-100 dark:bg-green-900'
: 'bg-muted' : 'bg-muted'
}`}> }`}>
{keySecured === 'downloaded' ? ( {keySecured === 'downloaded' ? (
<CheckCircle className='w-4 h-4 text-green-600 adventure:text-amber-600' /> <CheckCircle className='w-4 h-4 text-green-600' />
) : ( ) : (
<Download className='w-4 h-4 text-muted-foreground' /> <Download className='w-4 h-4 text-muted-foreground' />
)} )}
@ -591,11 +591,11 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
Download as File Download as File
</div> </div>
<div className='text-xs text-muted-foreground'> <div className='text-xs text-muted-foreground'>
Save as treasure-key.txt file Save as secret-key.txt file
</div> </div>
</div> </div>
{keySecured === 'downloaded' && ( {keySecured === 'downloaded' && (
<div className='text-xs font-medium text-green-600 adventure:text-amber-600'> <div className='text-xs font-medium text-green-600'>
✓ Downloaded ✓ Downloaded
</div> </div>
)} )}
@ -605,17 +605,17 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
</Card> </Card>
</div> </div>
{/* Continue button - blocked until key is secured */} {/* Continue button */}
<Button <Button
className={`w-full rounded-full py-4 text-base font-semibold transform transition-all duration-200 shadow-lg ${ className={`w-full rounded-full py-4 text-base font-semibold transform transition-all duration-200 shadow-lg ${
keySecured !== 'none' keySecured !== 'none'
? 'bg-gradient-to-r from-emerald-600 to-green-600 hover:from-emerald-700 hover:to-green-700 adventure:from-amber-700 adventure:to-orange-700 adventure:hover:from-amber-800 adventure:hover:to-orange-800 hover:scale-105' ? 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 hover:scale-105'
: 'bg-muted text-muted-foreground cursor-not-allowed' : 'bg-muted text-muted-foreground cursor-not-allowed'
}`} }`}
onClick={finishKeySetup} onClick={finishKeySetup}
disabled={keySecured === 'none'} disabled={keySecured === 'none'}
> >
<Compass className='w-4 h-4 mr-2 flex-shrink-0' /> <LogIn className='w-4 h-4 mr-2 flex-shrink-0' />
<span className="text-center leading-tight"> <span className="text-center leading-tight">
{keySecured === 'none' ? ( {keySecured === 'none' ? (
<> <>
@ -623,8 +623,8 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
</> </>
) : ( ) : (
<> <>
<span className="hidden sm:inline">My Key is Safe - Let the Quest Begin!</span> <span className="hidden sm:inline">My Key is Safe - Continue</span>
<span className="sm:hidden">Key Secured - Begin Quest!</span> <span className="sm:hidden">Key Secured - Continue</span>
</> </>
)} )}
</span> </span>
@ -637,20 +637,20 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
{step === 'profile' && ( {step === 'profile' && (
<div className='text-center space-y-4'> <div className='text-center space-y-4'>
{/* Profile setup illustration */} {/* Profile setup illustration */}
<div className='relative p-6 rounded-2xl bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/50 dark:to-indigo-950/50 adventure:from-amber-50 adventure:to-yellow-100 adventure:dark:from-amber-950/50 adventure:dark:to-yellow-950/50 overflow-hidden'> <div className='relative p-6 rounded-2xl bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/50 dark:to-indigo-950/50 overflow-hidden'>
{/* Magical sparkles */} {/* Sparkles */}
<div className='absolute inset-0 pointer-events-none'> <div className='absolute inset-0 pointer-events-none'>
<Sparkles className='absolute top-3 left-4 w-3 h-3 text-yellow-400 animate-pulse' style={{animationDelay: '0s'}} /> <Sparkles className='absolute top-3 left-4 w-3 h-3 text-yellow-400 animate-pulse' style={{animationDelay: '0s'}} />
<Star className='absolute top-6 right-6 w-3 h-3 text-yellow-500 animate-pulse' style={{animationDelay: '0.5s'}} /> <Sparkles className='absolute top-6 right-6 w-3 h-3 text-yellow-500 animate-pulse' style={{animationDelay: '0.5s'}} />
<Crown className='absolute bottom-4 left-6 w-3 h-3 text-yellow-400 animate-pulse' style={{animationDelay: '1s'}} /> <Sparkles className='absolute bottom-4 left-6 w-3 h-3 text-yellow-400 animate-pulse' style={{animationDelay: '1s'}} />
</div> </div>
<div className='relative z-10 flex justify-center items-center mb-3'> <div className='relative z-10 flex justify-center items-center mb-3'>
<div className='relative'> <div className='relative'>
<div className='w-16 h-16 bg-gradient-to-br from-blue-200 to-indigo-300 adventure:from-amber-200 adventure:to-yellow-300 rounded-full flex items-center justify-center shadow-lg'> <div className='w-16 h-16 bg-gradient-to-br from-blue-200 to-indigo-300 rounded-full flex items-center justify-center shadow-lg'>
<Crown className='w-8 h-8 text-blue-800 adventure:text-amber-800' /> <User className='w-8 h-8 text-blue-800' />
</div> </div>
<div className='absolute -top-1 -right-1 w-5 h-5 bg-blue-500 adventure:bg-amber-500 rounded-full flex items-center justify-center animate-bounce'> <div className='absolute -top-1 -right-1 w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center animate-bounce'>
<Sparkles className='w-3 h-3 text-white' /> <Sparkles className='w-3 h-3 text-white' />
</div> </div>
</div> </div>
@ -662,18 +662,18 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
</p> </p>
<p className='text-sm text-muted-foreground'> <p className='text-sm text-muted-foreground'>
Your legend starts here Your profile is your identity on Nostr.
</p> </p>
</div> </div>
</div> </div>
{/* Publishing status indicator */} {/* Publishing status indicator */}
{isPublishing && ( {isPublishing && (
<div className='relative p-4 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 adventure:from-amber-50 adventure:to-yellow-50 adventure:dark:from-amber-950/30 adventure:dark:to-yellow-950/30 border border-blue-200 dark:border-blue-800 adventure:border-amber-200 adventure:dark:border-amber-800'> <div className='relative p-4 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border border-blue-200 dark:border-blue-800'>
<div className='flex items-center justify-center gap-3'> <div className='flex items-center justify-center gap-3'>
<div className='w-5 h-5 border-2 border-blue-600 adventure:border-amber-600 border-t-transparent rounded-full animate-spin' /> <div className='w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin' />
<span className='text-sm font-medium text-blue-700 dark:text-blue-300 adventure:text-amber-700 adventure:dark:text-amber-300'> <span className='text-sm font-medium text-blue-700 dark:text-blue-300'>
Publishing your profile to the realm... Publishing your profile...
</span> </span>
</div> </div>
</div> </div>
@ -752,7 +752,7 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
{/* Action buttons */} {/* Action buttons */}
<div className='space-y-3'> <div className='space-y-3'>
<Button <Button
className='w-full rounded-full py-4 text-base font-semibold bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 adventure:from-amber-700 adventure:to-yellow-700 adventure:hover:from-amber-800 adventure:hover:to-yellow-800 transform transition-all duration-200 hover:scale-105 shadow-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none' className='w-full rounded-full py-4 text-base font-semibold bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 transform transition-all duration-200 hover:scale-105 shadow-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none'
onClick={() => finishSignup(false)} onClick={() => finishSignup(false)}
disabled={isPublishing || isUploading} disabled={isPublishing || isUploading}
> >
@ -763,8 +763,8 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
</> </>
) : ( ) : (
<> <>
<Crown className='w-4 h-4 mr-2' /> <User className='w-4 h-4 mr-2' />
Create Profile & Begin Quest! Create Profile & Finish
</> </>
)} )}
</Button> </Button>
@ -781,7 +781,7 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
Setting up account... Setting up account...
</> </>
) : ( ) : (
'Skip for now - Begin Quest!' 'Skip for now'
)} )}
</Button> </Button>
</div> </div>