From 5595480d3a0be004be12193c1625491257668fa1 Mon Sep 17 00:00:00 2001
From: Rares Mardare <40542072+teodosii@users.noreply.github.com>
Date: Mon, 19 Dec 2022 13:15:32 +0200
Subject: [PATCH] add qr code class with white background (#1012)

# What this PR does

- Adds white border around the QR code + small margin below
---
 .../MobileAppVerification/MobileAppVerification.module.scss  | 5 +++++
 .../MobileAppVerification/MobileAppVerification.tsx          | 2 +-
 .../__snapshots__/MobileAppVerification.test.tsx.snap        | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/grafana-plugin/src/containers/MobileAppVerification/MobileAppVerification.module.scss b/grafana-plugin/src/containers/MobileAppVerification/MobileAppVerification.module.scss
index cd4af8f4..94dbd47f 100644
--- a/grafana-plugin/src/containers/MobileAppVerification/MobileAppVerification.module.scss
+++ b/grafana-plugin/src/containers/MobileAppVerification/MobileAppVerification.module.scss
@@ -39,6 +39,11 @@
   opacity: 0.2;
 }
 
+.qr-code {
+  background-color: #fff;
+  margin-bottom: 12px;
+}
+
 .qr-loader {
   position: absolute;
   z-index: 10;
diff --git a/grafana-plugin/src/containers/MobileAppVerification/MobileAppVerification.tsx b/grafana-plugin/src/containers/MobileAppVerification/MobileAppVerification.tsx
index ed634a9f..ed8baee3 100644
--- a/grafana-plugin/src/containers/MobileAppVerification/MobileAppVerification.tsx
+++ b/grafana-plugin/src/containers/MobileAppVerification/MobileAppVerification.tsx
@@ -133,7 +133,7 @@ const MobileAppVerification = observer(({ userPk }: Props) => {
         </Text>
         <Text type="primary">Open Grafana IRM mobile application and scan this code to sync it with your account.</Text>
         <div className={cx('u-width-100', 'u-flex', 'u-flex-center', 'u-position-relative')}>
-          <QRCode className={cx({ blurry: isQRBlurry })} value={QRCodeValue} />
+          <QRCode className={cx({ 'qr-code': true, blurry: isQRBlurry })} value={QRCodeValue} />
           {isQRBlurry && <QRLoading />}
         </div>
       </VerticalGroup>
diff --git a/grafana-plugin/src/containers/MobileAppVerification/__snapshots__/MobileAppVerification.test.tsx.snap b/grafana-plugin/src/containers/MobileAppVerification/__snapshots__/MobileAppVerification.test.tsx.snap
index e471869c..ac791478 100644
--- a/grafana-plugin/src/containers/MobileAppVerification/__snapshots__/MobileAppVerification.test.tsx.snap
+++ b/grafana-plugin/src/containers/MobileAppVerification/__snapshots__/MobileAppVerification.test.tsx.snap
@@ -109,7 +109,7 @@ exports[`MobileAppVerification if we disconnect the app, it disconnects and fetc
             class="u-width-100 u-flex u-flex-center u-position-relative"
           >
             <div
-              class="root root_bordered"
+              class="root qr-code root_bordered"
             >
               <svg
                 height="256"