Release v1.1.4 - Improve ncryptsec export page UX

- Auto-focus password input when page loads
- Move QR code above password input form (displays after generation)
- Move explanation text below the form
- Replace ncryptsec text output with clickable QR code button
- Add hover/active effects and "Copy to clipboard" tooltip to QR code
- Remove redundant copy button and text display

Files modified:
- package.json (version bump)
- projects/chrome/public/manifest.json
- projects/chrome/src/app/components/edit-identity/ncryptsec/*
- projects/firefox/public/manifest.json
- projects/firefox/src/app/components/edit-identity/ncryptsec/*

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-28 10:04:07 +02:00
parent 2074c409f0
commit a2e47d8612
13 changed files with 117 additions and 153 deletions

View File

@@ -38,52 +38,33 @@
margin-bottom: var(--size);
}
.result-section {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--size);
margin-top: var(--size);
}
.qr-container {
background: white;
padding: var(--size);
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: var(--size);
}
.qr-button {
background: white;
padding: var(--size);
border-radius: 8px;
border: none;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
&:hover {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
&:active {
transform: scale(0.98);
}
}
.qr-code {
width: 250px;
height: 250px;
}
.ncryptsec-container {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--size-h);
.ncryptsec-output {
font-family: monospace;
font-size: 0.75rem;
word-break: break-all;
cursor: pointer;
&:hover {
background-color: var(--bs-gray-100);
}
}
button {
width: 100%;
}
}
.hint {
color: var(--text-muted);
font-size: 0.8rem;
text-align: center;
display: block;
}