feat: Implement UI polish and layout fixes

This commit is contained in:
LC mac
2026-01-30 19:09:45 +08:00
parent 32dff01132
commit 7564ddc7c9
4 changed files with 22 additions and 9 deletions

View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SeedPGP v1.4.2</title> <title>SeedPGP v__APP_VERSION__</title>
</head> </head>
<body> <body>

View File

@@ -333,6 +333,7 @@ function App() {
setActiveTab={setActiveTab} setActiveTab={setActiveTab}
encryptedMnemonicCache={encryptedMnemonicCache} encryptedMnemonicCache={encryptedMnemonicCache}
handleLockAndClear={handleLockAndClear} handleLockAndClear={handleLockAndClear}
appVersion={__APP_VERSION__}
/> />
<main className="max-w-7xl mx-auto px-6 py-4"> <main className="max-w-7xl mx-auto px-6 py-4">
<div className="p-6 md:p-8 space-y-6"> <div className="p-6 md:p-8 space-y-6">
@@ -358,7 +359,7 @@ function App() {
)} )}
{/* Main Content Grid */} {/* Main Content Grid */}
<div className="grid gap-6 md:grid-cols-3"> <div className="grid gap-6 md:grid-cols-3 md:items-start">
<div className="md:col-span-2 space-y-6"> <div className="md:col-span-2 space-y-6">
{activeTab === 'backup' ? ( {activeTab === 'backup' ? (
<> <>
@@ -441,11 +442,13 @@ function App() {
</div> </div>
{/* Security Panel */} {/* Security Panel */}
<div className="space-y-6"> <div className="space-y-2"> {/* Added space-y-2 wrapper */}
<label className="text-sm font-semibold text-slate-700 flex items-center gap-2">
<Lock size={14} /> SECURITY OPTIONS
</label>
<div className="p-5 bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl border-2 border-slate-200 shadow-inner space-y-4"> <div className="p-5 bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl border-2 border-slate-200 shadow-inner space-y-4">
<h3 className="text-sm font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2"> {/* Removed h3 */}
<Lock size={14} /> Security Options
</h3>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Message Password</label> <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Message Password</label>

View File

@@ -28,6 +28,7 @@ interface HeaderProps {
setActiveTab: (tab: 'backup' | 'restore') => void; setActiveTab: (tab: 'backup' | 'restore') => void;
encryptedMnemonicCache: any; encryptedMnemonicCache: any;
handleLockAndClear: () => void; handleLockAndClear: () => void;
appVersion: string;
} }
const Header: React.FC<HeaderProps> = ({ const Header: React.FC<HeaderProps> = ({
@@ -40,7 +41,8 @@ const Header: React.FC<HeaderProps> = ({
activeTab, activeTab,
setActiveTab, setActiveTab,
encryptedMnemonicCache, encryptedMnemonicCache,
handleLockAndClear handleLockAndClear,
appVersion
}) => { }) => {
return ( return (
<header className="sticky top-0 z-50 bg-slate-900 border-b border-slate-800 backdrop-blur-sm"> <header className="sticky top-0 z-50 bg-slate-900 border-b border-slate-800 backdrop-blur-sm">
@@ -53,7 +55,7 @@ const Header: React.FC<HeaderProps> = ({
</div> </div>
<div> <div>
<h1 className="text-lg font-semibold text-white"> <h1 className="text-lg font-semibold text-white">
SeedPGP <span className="text-blue-400">v1.4.2</span> SeedPGP <span className="text-blue-400">v{appVersion}</span>
</h1> </h1>
<p className="text-xs text-slate-400">OpenPGP-secured BIP39 backup</p> <p className="text-xs text-slate-400">OpenPGP-secured BIP39 backup</p>
</div> </div>

View File

@@ -11,7 +11,15 @@ const appVersion = packageJson.version
const gitHash = execSync('git rev-parse --short HEAD').toString().trim() const gitHash = execSync('git rev-parse --short HEAD').toString().trim()
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [
react(),
{
name: 'html-transform',
transformIndexHtml(html) {
return html.replace(/__APP_VERSION__/g, appVersion);
}
}
],
base: '/', // Always use root, since we're Cloudflare Pages only base: '/', // Always use root, since we're Cloudflare Pages only
publicDir: 'public', // ← Explicitly set (should be default) publicDir: 'public', // ← Explicitly set (should be default)
build: { build: {