From 185efe454fe14f05d9e0d89b69966e0d16d47345 Mon Sep 17 00:00:00 2001 From: LC mac Date: Mon, 9 Feb 2026 21:58:18 +0800 Subject: [PATCH] feat: mobile-first redesign and layout improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Major Changes ### Mobile-First Responsive Design - Converted entire app to mobile-first single-column layout - Constrained max-width to 448px (mobile phone width) - Black margins on desktop, centered content - Removed all multi-column grids (md:grid-cols-3) ### Header Reorganization (3-Row Layout) - Row 1: App logo + title + version - Row 2: Security badges + action buttons (Empty, Reset) - Row 3: Navigation tabs (Create, Backup, Restore, Blender) - Replaced text buttons with emoji icons (📋 clipboard, 🙈 privacy mask) - Consistent button sizing across all tabs ### Font Size Reductions - Reduced all button text sizes for mobile density - Main buttons: py-4 → py-3, added text-sm - Labels: text-xs → text-[10px] - Placeholders: consistent text-[10px] across all inputs - Input fields: text-sm → text-xs, p-4 → p-3 ### Create Tab Improvements - Changed "GENERATE NEW SEED" from button-style to banner - Left-aligned banner with gradient background - Equal-width button grid (12/24 Words, Backup/Seed Blender) - Used grid-cols-2 for consistent sizing ### Backup Tab Improvements - Simplified drag-drop area with 📎 emoji - Reduced padding and text sizes - Cleaner, shorter copy - PGP label font size: text-xs → text-[12px] ### SeedBlender Component - Reorganized mnemonic input cards: textarea on row 1, buttons on row 2 - QR button (left) and X button (right) alignment - Consistent placeholder text sizing (text-[10px]) - Shortened dice roll placeholder text ### HTTPS Development Server - Added @vitejs/plugin-basic-ssl for HTTPS in dev mode - Configured server to listen on 0.0.0.0:5173 - Fixed Web Crypto API issues on mobile (requires secure context) - Enables testing on iPhone via local network ## Technical Details - All changes maintain cyberpunk theme and color scheme - Improved mobile usability and visual consistency - No functionality changes, pure UI/UX improvements --- bun.lock | 3 + package.json | 1 + src/App.tsx | 931 ++++++++++++++++----------------- src/components/Header.tsx | 137 +++-- src/components/PgpKeyInput.tsx | 7 +- src/components/SeedBlender.tsx | 39 +- src/index.css | 18 + src/lib/seedblend.ts | 1 - vite.config.ts | 8 + 9 files changed, 605 insertions(+), 540 deletions(-) diff --git a/bun.lock b/bun.lock index f277329..b14a14c 100644 --- a/bun.lock +++ b/bun.lock @@ -27,6 +27,7 @@ "@types/qrcode-generator": "^1.0.6", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", + "@vitejs/plugin-basic-ssl": "^1.1.0", "@vitejs/plugin-react": "^4.3.4", "autoprefixer": "^10.4.20", "postcss": "^8.4.49", @@ -263,6 +264,8 @@ "@types/react-dom": ["@types/react-dom@18.3.7", "", { "peerDependencies": { "@types/react": "^18.0.0" } }, "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ=="], + "@vitejs/plugin-basic-ssl": ["@vitejs/plugin-basic-ssl@1.2.0", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" } }, "sha512-mkQnxTkcldAzIsomk1UuLfAu9n+kpQ3JbHcpCp7d2Oo6ITtji8pHS3QToOWjhPFvNQSnhlkAjmGbhv2QvwO/7Q=="], + "@vitejs/plugin-react": ["@vitejs/plugin-react@4.7.0", "", { "dependencies": { "@babel/core": "^7.28.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.27", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA=="], "ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="], diff --git a/package.json b/package.json index ab9de6e..7450983 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@vitejs/plugin-react": "^4.3.4", + "@vitejs/plugin-basic-ssl": "^1.1.0", "autoprefixer": "^10.4.20", "postcss": "^8.4.49", "tailwindcss": "^3.4.17", diff --git a/src/App.tsx b/src/App.tsx index fa1057b..a1e7c44 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -565,328 +565,326 @@ function App() { return ( -
- {/* Cyberpunk grid overlay */} -
+
+
+ {/* Cyberpunk grid overlay */} +
- {/* Content wrapper */} -
-
setShowSecurityModal(true)} - localItems={localItems} - sessionItems={sessionItems} - onOpenStorageModal={() => setShowStorageModal(true)} - events={clipboardEvents} - onOpenClipboardModal={() => setShowClipboardModal(true)} - activeTab={activeTab} - onRequestTabChange={handleRequestTabChange} - encryptedMnemonicCache={encryptedMnemonicCache} - handleLockAndClear={handleLockAndClear} - appVersion={__APP_VERSION__} - isLocked={isReadOnly} - onToggleLock={handleToggleLock} - onResetAll={handleResetAll} - /> -
-
-
- {/* Error Display */} - {error && ( -
- -
-

Error

-

{error}

-
-
- )} + {/* Content wrapper */} +
- {/* Info Banner */} - {recipientFpr && activeTab === 'backup' && ( -
- -
- Recipient Key: {recipientFpr} -
-
- )} - - {/* Main Content Grid */} -
-
-
-
-
-
- - Generate New Seed - -
- -

- Create a fresh BIP39 mnemonic for a new wallet -

-
- - {/* Word count selector */} -
- -
- - -
-
- - {/* Destination selector */} -
- -
- - - -
-
- - {/* Generate button */} - - - {/* Display generated seed */} - {generatedSeed && ( -
-
- - Generated Successfully - -
-
-

- {generatedSeed} -

-
-

- ✨ Switching to {seedDestination === 'backup' ? 'Backup' : 'Seed Blender'} tab... -

-
- )} +
setShowSecurityModal(true)} + localItems={localItems} + sessionItems={sessionItems} + onOpenStorageModal={() => setShowStorageModal(true)} + events={clipboardEvents} + onOpenClipboardModal={() => setShowClipboardModal(true)} + activeTab={activeTab} + onRequestTabChange={handleRequestTabChange} + encryptedMnemonicCache={encryptedMnemonicCache} + handleLockAndClear={handleLockAndClear} + appVersion={__APP_VERSION__} + isLocked={isReadOnly} + onToggleLock={handleToggleLock} + onResetAll={handleResetAll} + /> +
+
+
+ {/* Error Display */} + {error && ( +
+ +
+

Error

+

{error}

-
-
- -