feat: transform UI to dark cyberpunk theme

- Eliminate all white/light boxes and backgrounds
- Fix drag-drop zone with neon cyberpunk colors (#00f0ff, #ff006e, #16213e)
- Fix restored mnemonic display with matrix green (#39ff14)
- Fix security options panel with dark gradient
- Fix all remaining slate-700/slate-800 labels to cyberpunk neon
- Fix info banners and text colors
- Update badge components with cyberpunk color scheme
- Apply consistent dark theme across all components
This commit is contained in:
LC mac
2026-02-08 22:27:41 +08:00
parent 0ab99ce493
commit 7c4fc1460c
12 changed files with 649 additions and 515 deletions

View File

@@ -93,26 +93,26 @@ export const QrDisplay: React.FC<QrDisplayProps> = ({ value }) => {
if (!dataUrl) return null;
return (
<div className="space-y-4">
<div className="bg-white p-6 rounded-lg inline-block shadow-lg">
<div className="border-4 border-[#00f0ff] rounded-xl shadow-[0_0_40px_rgba(0,240,255,0.6)] p-4 bg-[#0a0a0f] space-y-4">
<div className="bg-[#16213e] p-6 rounded-lg inline-block shadow-[0_0_20px_rgba(0,240,255,0.3)] border-2 border-[#00f0ff]/30">
<img src={dataUrl} alt="QR Code" className="w-full h-auto" />
</div>
{debugInfo && (
<div className="text-xs text-slate-500 font-mono">
<div className="text-xs text-[#6ef3f7] font-mono">
{debugInfo}
</div>
)}
<button
onClick={handleDownload}
className="flex items-center gap-2 px-4 py-2 bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors"
className="flex items-center gap-2 px-4 py-2 bg-[#00f0ff] hover:bg-[#00f0ff]/80 text-[#0a0a0f] rounded-lg transition-all hover:shadow-[0_0_15px_rgba(0,240,255,0.5)]"
>
<Download size={16} />
Download QR Code
</button>
<p className="text-xs text-slate-500">
<p className="text-xs text-[#6ef3f7]">
Downloads as: SeedPGP_{new Date().toISOString().split('T')[0]}_HHMMSS.png
</p>
</div>