MFA QR code fails on some apps due to lack of border on dark mode

Problem Statement

Some MFA authenticator apps (e.g. Authy) have trouble recognising the QR code in dark mode. This is because it appears to expect a border around the QR code to be shown.

Who will benefit?

Users using certain authentication apps will be able to successfully setup MFA without having to manually enter the key

Benefits and risks

What benefits does this bring?
    - increased support of TOTP apps
    - easier end user experience

What risks might this introduce?
    - unknown

Proposed solution

Adding a white box shadow to the image element on the MFA page would make it easier for the QR code to be read. (i.e. box-shadow: 0 0 0 4px #fff )

Examples

image.pngimage.png

The image on the left was unable to be read by some authentication apps white the one on the right with the border was able to be read successfully.

Priority/Severity

  • High (This will bring a huge increase in performance/productivity/usability)
  • Medium (This will bring a good increase in performance/productivity/usability)
  • Low (anything else e.g., trivial, minor improvements)