[1.x] Update two-factor-authentication-form.blade.php #414
Conversation
I had an issue where I couldn't scan the barcode when setting up 2FA. Determined the issue was using darkmode tailwind css styling. The Google authenticator app and VIP Access Authenticator don't pick up the barcode if it has a dark background right up against it. Add a p-4 white background resolved the issue on both apps. Propose adding this white border out of the box to prevent this issue if the user chooses a dark color adjacent to the barcode.
|
Can you also add similar styles to Inertia stack? |
Good catch, I didn't think about the inertia side of things. Thanks. |
driesvints
changed the title
|
Can you show a screenshot of what it looks like with your code changes? The width looks good in responsive as well? |
see screenshots below. It looks good in mobile, tablet, desktop. desktop |
|
Does it make the QR code look oddly shifted left in non-dark mode? Should we add this padding background only with the |
|
y, the QR code wouldn't quite line up with the text. I'm using dark: modifiers for my dark mode so we could make these only for dark: If someone would change their background to a dark background directly without using the dark modifier then they would run in to the issue of the QR code not working. Here are some screenshots of how it looks in light mode.
|
|
If they were to change their background they could just modify the code directly. I'm not sure Jetstream should be made to account for every possible case. The code is your code after you install Jetstream. It is no longer Jetstream's code. You should feel free to modify it as much as you want or need for your application. |
|
Here's another option. Centering the QRcode would make it work either way. |
|
Can we just add the dark: modifiers here and on the Inertia PR? |
done and done, this works, tested in light and dark mode, that lines the QR code up with the text in light mode. |
I had an issue where I couldn't scan the barcode when setting up 2FA. Determined the issue was using darkmode tailwind css styling. The Google authenticator app and VIP Access Authenticator don't pick up the barcode if it has a dark background right up against it. Add a p-4 white background resolved the issue on both apps. Propose adding this white border out of the box to prevent this issue if the user chooses a dark color adjacent to the barcode.