LG-7080: Show in-person enrollment barcode on white background with padding#6731
LG-7080: Show in-person enrollment barcode on white background with padding#6731
Conversation
aduth
changed the title
|
Unfortunately the message still came through with an illegible barcode on my phone, so I'm gonna flip this back to draft while I take another pass at it. |
Some additional resources:
My initial instinct is that we may be able to use the But these resources also have me wondering if #6732 could have an impact on the appearance, in case the revisions to use border-color could trigger auto-inverting coloring (a white barcode on black background would be just as effective a solution?). Edit: Unfortunately, the |
**Why**: So that it creates contrast to be legible on screens which apply default dark mode background color. changelog: Upcoming Features, In-person proofing, Improve legibility of barcodes on systems with dark mode theming
aduth
force-pushed
the
aduth-lg-7080-barcode-bg
branch
from
75b905a to
7a66a40
Compare
Also limit to barcode image itself, since text color will likely invert, and that's okay as long as it's not white text on white background _Maybe_ better luck with "background" property (vs. background-image), avoiding USWDS utility helpers, and using a separate element for the background
Some indication that Android Gmail may support this in dark mode https://webdesign.tutsplus.com/articles/fixing-problems-with-borders-in-dark-mode-email-design--cms-39410 (not viable as a complete solution, since ideally we'd not want to use the gray background except in contexts where it's required, i.e. dark mode)
Test to see how the white background is eliminated, maybe it will gracefully fall back to gray?
aduth
requested review from
a team,
NavaTim and
x341x
and removed request for
a team and
x341x
- Not used - Simplify diff See: https://github.com/18F/identity-idp/pull/6731/files#r946841761
To summarize the revisions: I made several attempts to try to force email clients to render with the white background (or to at least to invert the barcode lines to white on dark background) with limited success. In the end, the solution I landed on was to revert back to using an image like we did in the initial implementation in #6580. Per discussion at #6580 (comment) , this was changed to the HTML outputter in #6585 to try to improve compatibility with email content. The original issue with using an image was based on how we tried to render the image with data URIs, which are not supported by email clients. This is addressed here by attaching the image data to the email and referencing that image instead of using the data URI, while still using data URIs in the web view. |
I checked the ready to verify page and email, including printing, and verifying that the barcodes read as expected and found no regressions. |
4 participants
Why: So that it creates contrast to be legible on screens which apply default dark mode background color.
Preview: http://localhost:3000/rails/mailers/user_mailer/in_person_ready_to_verify
Review Notes:
Because the implementation impacts all barcode rendering, it would be a good idea to verify there are no regressions in other display (e.g. "You're ready to verify page"), particularly with previous issues (e.g. printing appearance).
Screenshot: