add qr code class with white background (#1012)

# What this PR does

- Adds white border around the QR code + small margin below

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;

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>

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"