Closed bacitracin closed 1 week ago
The gun crime graph is a static PNG file named graphic-guncrimes.png
in the images
folder where color preferences cannot be manually applied. Should we create a component for this graph instead?
@zheyichn Is there a way to set the background color of the PNG? Or add one to the container that holds it? That could be a quick fix.
Your suggestion of switching it to a component would allow customizability for text zoom and WHCM system color changes, but I'm not sure if it's worth the effort.
Hi @bacitracin, may I be assigned this issue?
Since the text is within a PNG image, the first route doesn't work. I will set the backgroud of the image to be white to fix the issue.
One question - by doing this, I will need a few lines of CSS customization. I noticed that all CSS code is currently in one global.css file. Importing such a large stylesheet can slow down the rendering of the page (which is also reflected in lighthouse report). Would it be better to create a components-css
folder within components
folder to manage component-level styling?
@zheyichn Assigned! Thanks for looking into this. And yes, I think it's time to break out our CSS, good suggestion.
Describe the bug
Normal
High Contrast Mode
You can fix this either by fixing the contrast of the text against the background, or you can set the background of the image to always be white. If you choose to go the first route (ideal), check out this article on WHCM special keywords (
Canvas
for background,CanvasText
for labels, etc.) https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/Acceptance Criteria
Open the page in WHCM dark or simulate it using Devtools(see link below)
Additional context