mirror of
https://github.com/kccleoc/seedpgp-web.git
synced 2026-03-07 09:57:50 +08:00
feat: Implement UI polish and layout fixes
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
13
src/App.tsx
13
src/App.tsx
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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: {
|
||||||
|
|||||||
Reference in New Issue
Block a user