From 7b1f18675331176239a72e50d447ef9231ee211e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Michaud?= <clement.michaud34@gmail.com>
Date: Mon, 14 Jun 2021 04:38:39 +0200
Subject: [PATCH] fix(web): add white padding around qrcode image (#2081)

* fix(web): add white padding around qrcode image

Some qrcode readers are struggling to decode the qrcode because there is no clear border between the qrcode image and the page background in dark mode. This fix add a white padding so that the border is now obvious.

Fixes #1777.
---
 .../views/DeviceRegistration/RegisterOneTimePassword.tsx   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx b/web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx
index 99a029d0..04101107 100644
--- a/web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx
+++ b/web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx
@@ -20,7 +20,6 @@ const RegisterOneTimePassword = function () {
     const style = useStyles();
     const history = useHistory();
     const location = useLocation();
-
     // The secret retrieved from the API is all is ok.
     const [secretURL, setSecretURL] = useState("empty");
     const [secretBase32, setSecretBase32] = useState(undefined as string | undefined);
@@ -86,9 +85,9 @@ const RegisterOneTimePassword = function () {
                         appleStoreLink={GoogleAuthenticator.appleStore}
                     />
                 </div>
-                <div className={style.qrcodeContainer}>
+                <div className={classnames(qrcodeFuzzyStyle, style.qrcodeContainer)}>
                     <Link href={secretURL}>
-                        <QRCode value={secretURL} className={classnames(qrcodeFuzzyStyle, style.qrcode)} size={256} />
+                        <QRCode value={secretURL} className={style.qrcode} size={256} />
                         {!hasErrored && isLoading ? <CircularProgress className={style.loader} size={128} /> : null}
                         {hasErrored ? <FontAwesomeIcon className={style.failureIcon} icon={faTimesCircle} /> : null}
                     </Link>
@@ -132,6 +131,8 @@ const useStyles = makeStyles((theme) => ({
     qrcode: {
         marginTop: theme.spacing(2),
         marginBottom: theme.spacing(2),
+        padding: theme.spacing(),
+        backgroundColor: "white",
     },
     fuzzy: {
         filter: "blur(10px)",