Buriburizaemon/nodewarden
1
0
Fork 0
mirror of https://github.com/shuaiplus/nodewarden.git synced 2026-06-20 13:00:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: enhance QR code visibility with background and border adjustments

Browse Source
This commit is contained in:
shuaiplus
2026-04-01 23:05:44 +08:00
parent be82c953d6
commit f4adeb8ec9
2 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/components/SettingsPage.tsx
+2 -1
View File
@@ -73,7 +73,8 @@ export default function SettingsPage(props: SettingsPageProps) {
const qr = qrcode(0, 'M'); const qr = qrcode(0, 'M');
qr.addData(buildOtpUri(props.profile.email, secret)); qr.addData(buildOtpUri(props.profile.email, secret));
qr.make(); qr.make();
const svg = qr.createSvgTag({ scalable: true, margin: 0 }); // Keep a visible quiet zone so authenticator apps can scan reliably in both themes.
const svg = qr.createSvgTag({ scalable: true, margin: 4 });
return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`; return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
}, [props.profile.email, secret]); }, [props.profile.email, secret]);
webapp/src/styles.css
+7 -1
View File
@@ -2674,6 +2674,8 @@ input[type='file'].input::file-selector-button:hover {
.totp-qr img { .totp-qr img {
width: 180px; width: 180px;
height: 180px; height: 180px;
background: #fff;
border-radius: 8px;
} }
.section-head { .section-head {
@@ -4773,7 +4775,6 @@ input[type='file'].input::file-selector-button:hover {
:root[data-theme='dark'] .backup-browser-list, :root[data-theme='dark'] .backup-browser-list,
:root[data-theme='dark'] .backup-schedule-current, :root[data-theme='dark'] .backup-schedule-current,
:root[data-theme='dark'] .backup-status-card, :root[data-theme='dark'] .backup-status-card,
:root[data-theme='dark'] .totp-qr,
:root[data-theme='dark'] .create-menu, :root[data-theme='dark'] .create-menu,
:root[data-theme='dark'] .create-menu-item, :root[data-theme='dark'] .create-menu-item,
:root[data-theme='dark'] .sort-menu, :root[data-theme='dark'] .sort-menu,
@@ -4931,6 +4932,11 @@ input[type='file'].input::file-selector-button:hover {
color: #9be2bd; color: #9be2bd;
} }
:root[data-theme='dark'] .totp-qr {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.12);
}
:root[data-theme='dark'] .totp-qr svg, :root[data-theme='dark'] .totp-qr svg,
:root[data-theme='dark'] .totp-qr img { :root[data-theme='dark'] .totp-qr img {
background: #ffffff; background: #ffffff;