From 127b479f4feea554d98338c5c9727a130881a781 Mon Sep 17 00:00:00 2001
From: LC mac <leochan@hkjin.com>
Date: Sun, 15 Feb 2026 23:50:54 +0800
Subject: [PATCH] restyle the butoon to match theme style

---
 src/App.tsx                    | 22 ++++++++++++++--------
 src/components/SeedBlender.tsx | 22 ++++++++++++++++------
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4daecf0..f07d257 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -875,17 +875,19 @@ function App() {
                                 Send Generated Seed To
                               </label>
                               <div className="grid grid-cols-2 gap-3 max-w-sm mx-auto">
-                                <label className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${seedDestination === 'backup' ? 'bg-[#1a1a2e] border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]' : 'bg-[#16213e] border-[#00f0ff]/30 hover:border-[#00f0ff]/50'}`}>
+                                <label className={`p-3 md:p-4 rounded-lg border-2 cursor-pointer transition-all ${seedDestination === 'backup' ? 'bg-[#1a1a2e] border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]' : 'bg-[#16213e] border-[#00f0ff]/30 hover:border-[#00f0ff]/50'}`}>
                                   <input type="radio" name="destination" value="backup" checked={seedDestination === 'backup'} onChange={(e) => setSeedDestination(e.target.value as 'backup' | 'seedblender')} className="hidden" />
-                                  <div className="text-center space-y-1">
-                                    <div className={`text-sm font-bold ${seedDestination === 'backup' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`}>📦 Backup</div>
+                                  <div className="flex flex-col items-center justify-center gap-1 md:gap-2">
+                                    <Lock className={`w-5 h-5 md:w-6 md:h-6 transition-colors ${seedDestination === 'backup' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`} />
+                                    <div className={`text-xs md:text-sm font-bold ${seedDestination === 'backup' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`}>Backup</div>
                                     <p className="text-[10px] text-[#6ef3f7]">Encrypt immediately</p>
                                   </div>
                                 </label>
-                                <label className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${seedDestination === 'seedblender' ? 'bg-[#1a1a2e] border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]' : 'bg-[#16213e] border-[#00f0ff]/30 hover:border-[#00f0ff]/50'}`}>
+                                <label className={`p-3 md:p-4 rounded-lg border-2 cursor-pointer transition-all ${seedDestination === 'seedblender' ? 'bg-[#1a1a2e] border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]' : 'bg-[#16213e] border-[#00f0ff]/30 hover:border-[#00f0ff]/50'}`}>
                                   <input type="radio" name="destination" value="seedblender" checked={seedDestination === 'seedblender'} onChange={(e) => setSeedDestination(e.target.value as 'backup' | 'seedblender')} className="hidden" />
-                                  <div className="text-center space-y-1">
-                                    <div className={`text-sm font-bold ${seedDestination === 'seedblender' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`}>🎨 Seed Blender</div>
+                                  <div className="flex flex-col items-center justify-center gap-1 md:gap-2">
+                                    <Dices className={`w-5 h-5 md:w-6 md:h-6 transition-colors ${seedDestination === 'seedblender' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`} />
+                                    <div className={`text-xs md:text-sm font-bold ${seedDestination === 'seedblender' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`}>Seed Blender</div>
                                     <p className="text-[10px] text-[#6ef3f7]">Use for XOR blending</p>
                                   </div>
                                 </label>
@@ -893,8 +895,12 @@ function App() {
                             </div>
 
                             {/* Send Button */}
-                            <button onClick={handleSendToDestination} className="w-full py-3 bg-gradient-to-r from-[#ff006e] to-[#ff4d8f] text-white text-sm rounded-xl font-bold uppercase hover:shadow-[0_0_30px_rgba(255,0,110,0.8)] transition-all">
-                              Send to {seedDestination === 'backup' ? 'Backup' : 'Seed Blender'}
+                            <button
+                              onClick={handleSendToDestination}
+                              className="w-full py-2.5 bg-[#1a1a2e] border-2 border-[#ff006e] text-[#00f0ff] text-xs md:text-sm rounded-lg font-bold uppercase tracking-wide hover:shadow-[0_0_25px_rgba(255,0,110,0.7)] active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-[0_0_15px_rgba(255,0,110,0.5)]"
+                              style={{ textShadow: '0 0 8px rgba(0,240,255,0.7)' }}
+                            >
+                              Continue to {seedDestination === 'backup' ? 'Backup' : 'Seed Blender'}
                             </button>
 
                             <button onClick={() => { setGeneratedSeed(''); setEntropySource(null); setEntropyStats(null); }} className="w-full py-2 bg-[#16213e] border-2 border-[#00f0ff] text-[#00f0ff] rounded-lg text-sm font-bold hover:bg-[#00f0ff]/20 transition-all">
diff --git a/src/components/SeedBlender.tsx b/src/components/SeedBlender.tsx
index debf5d4..dd4511f 100644
--- a/src/components/SeedBlender.tsx
+++ b/src/components/SeedBlender.tsx
@@ -374,7 +374,12 @@ export function SeedBlender({ onDirtyStateChange, setMnemonicForBackup, requestT
                 <div className="p-3 md:p-6 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/30">
                     <h3 className="font-semibold text-base md:text-lg mb-2 md:mb-4 text-[#00f0ff]" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Step 3: Input Dice Rolls</h3>
                     <div className="space-y-3 md:space-y-4">
-                        <textarea value={diceRolls} onChange={(e) => setDiceRolls(e.target.value.replace(/[^1-6]/g, ''))} placeholder="99+ dice rolls (e.g., 16345...)" className="w-full h-24 md:h-32 p-2 md:p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-xs placeholder:text-[10px] placeholder:text-[#6ef3f7]" />
+                        <textarea
+                            value={diceRolls}
+                            onChange={(e) => setDiceRolls(e.target.value.replace(/[^1-6]/g, ''))}
+                            placeholder="99+ dice rolls (e.g., 16345...)"
+                            className="w-full h-24 md:h-32 p-2 md:p-3 bg-[#0a0a0f] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-xs text-[#00f0ff] placeholder:text-[10px] placeholder:text-[#6ef3f7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all"
+                        />
                         {dicePatternWarning && (<div className="p-3 bg-[#ff006e]/10 border-2 border-[#ff006e]/30 text-[#ff006e] rounded-lg text-sm flex gap-3"><AlertTriangle /><p><span className="font-bold">Warning:</span> {dicePatternWarning}</p></div>)}
                         {diceStats && diceStats.length > 0 && (<div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4 text-center"><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Rolls</p><p className="text-base md:text-lg font-bold text-[#00f0ff]">{diceStats.length}</p></div><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Entropy (bits)</p><p className="text-base md:text-lg font-bold text-[#00f0ff]">{diceStats.estimatedEntropyBits.toFixed(1)}</p></div><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Mean</p><p className="text-base md:text-lg font-bold text-[#00f0ff]">{diceStats.mean.toFixed(2)}</p></div><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Chi-Square</p><p className={`text-base md:text-lg font-bold ${diceStats.chiSquare > 11.07 ? 'text-[#ff006e]' : 'text-[#00f0ff]'}`}>{diceStats.chiSquare.toFixed(2)}</p></div></div>)}
                         {diceOnlyMnemonic && (<div className="space-y-1 pt-2"><label className="text-xs font-semibold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Dice-Only Preview Mnemonic</label><p data-sensitive="Dice-Only Preview Mnemonic" className="p-2 md:p-3 bg-[#1a1a2e] rounded-md font-mono text-xs md:text-sm text-[#00f0ff] break-words border-2 border-[#00f0ff]/30">{diceOnlyMnemonic}</p></div>)}
@@ -415,16 +420,21 @@ export function SeedBlender({ onDirtyStateChange, setMnemonicForBackup, requestT
                                 <p className="text-[9px] text-[#6ef3f7] mt-2 text-center">Click the words to select all, or use Copy.</p>
                             </div>
                             <div className="mt-4 p-3 bg-[#ff006e]/10 text-[#ff006e] rounded-lg text-xs flex gap-2 border-2 border-[#ff006e]/30"><AlertTriangle size={16} className="shrink-0 mt-0.5" /><span><strong>Security Warning:</strong> Write this down immediately. Do not save it digitally.</span></div>
-                            <div className="grid grid-cols-2 gap-3 mt-4">
-                                <button onClick={() => setShowFinalQR(true)} className="w-full py-2.5 bg-[#1a1a2e] text-[#00f0ff] rounded-lg font-semibold flex items-center justify-center gap-2 border-2 border-[#00f0ff]/50 hover:bg-[#16213e] hover:shadow-[0_0_15px_rgba(0,240,255,0.3)]"><QrCode size={16} /> Export as QR</button>
+                                                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4">
                                 <button
+                                    onClick={() => setShowFinalQR(true)}
+                                    className="w-full py-2.5 bg-[#16213e] border-2 border-[#00f0ff] text-[#00f0ff] text-xs md:text-sm rounded-lg font-bold uppercase tracking-wide flex items-center justify-center gap-2 hover:bg-[#00f0ff]/20 active:scale-95 transition-all"
+                                    style={{ textShadow: '0 0 8px rgba(0,240,255,0.7)' }}
+                                >
+                                    <QrCode size={16} /> Export as QR
+                                </button>                                <button
                                     onClick={handleTransfer}
-                                    className="w-full py-2.5 bg-gradient-to-r from-[#ff006e] to-[#ff4d8f] text-white rounded-lg font-bold uppercase tracking-wider flex items-center justify-center gap-2 hover:shadow-[0_0_30px_rgba(255,0,110,0.8)] active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-[#ff006e]"
-                                    style={{ textShadow: '0 0 10px rgba(255,255,255,0.8)' }}
+                                    className="w-full py-2.5 bg-[#1a1a2e] border-2 border-[#ff006e] text-[#00f0ff] text-xs md:text-sm rounded-lg font-bold uppercase tracking-wide flex items-center justify-center gap-2 hover:shadow-[0_0_25px_rgba(255,0,110,0.7)] active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-[0_0_15px_rgba(255,0,110,0.5)]"
+                                    style={{ textShadow: '0 0 8px rgba(0,240,255,0.7)' }}
                                     disabled={!finalMnemonic}
                                 >
                                     <ArrowRight size={20} />
-                                    Send to Backup Tab
+                                    Send to Backup 
                                 </button>
                             </div>
                         </div>