ThreeSixtyGiving / dataquality

Other
1 stars 1 forks source link

Reduce text size in DQT feedback making results difficult to read #28

Closed KDuerden closed 2 years ago

KDuerden commented 2 years ago

Using Chrome, Firefox and MS Edge, the font size for DQT feedback is now very small.

https://dataquality.threesixtygiving.org/results/d0643d21-c595-441a-b424-d9ada31c30da

image

mariongalley commented 2 years ago

+1 it's illegibly small for me

michaelwood commented 2 years ago

Hm this is coming from the design system style, by default a table has a font size of 0.9rem (which is a weirdly tiny size) https://github.com/ThreeSixtyGiving/360-ds/blob/master/src/components/03-components/table/table.scss#L6 . We had to add the design system in order to use the cookie consent component.

Options are: 1) Hack in an override for the font size into cove (~hour) 2) Spend time/budget integrating the design system into cove (~days) 3) Remove cookie consent and analytics (~hour) 4) Attempt to do a partial integration of the design system just for those tables (~3 hours)

michaelwood commented 2 years ago

Hm this is coming from the design system style, by default a table has a font size of 0.9rem (which is a weirdly tiny size)

(Weirdly tiny actually is just because of the two different fonts, the one loaded via bootstrap-360 and the one via 360-ds)

KDuerden commented 2 years ago

Thanks Michael

We're considering between option 1 or 4. Is there future-proofing that will come from investing a bit more time in option 4 or will it be too localised to the tables to benefit other parts of the DQT?

I think long term we need to look at progressing with option 2 but it's not a priority for now

michaelwood commented 2 years ago

We're considering between option 1 or 4. Is there future-proofing that will come from investing a bit more time in option 4 or will it be too localised to the tables to benefit other parts of the DQT?

Option 4, would be future proof if you don't envisage fundamentally changing the layout and designed UX of the DQT (i.e. you're only going to change how it looks) when option 2 happens.

michaelwood commented 2 years ago

Thought of another probably better option which would be to remove the font styling from the boostrap-360 theme and allow the 360-ds to take over that styling using the new fonts. (~hours)

mariongalley commented 2 years ago

Thought of another probably better option which would be to remove the font styling from the boostrap-360 theme and allow the 360-ds to take over that styling using the new fonts. (~hours)

If that's the better option then I think go for it

michaelwood commented 2 years ago

Screenshot from 2022-04-13 16-08-34

I also changed the colour for links from the old 360 orange to the new 360-ds dark-teal as I noticed the link text on the cookie consent box also isn't very readable (good for new accessibility standards currently anyway).

KDuerden commented 2 years ago

@michaelwood just realising that the orange link styling did make links obvious whereas the dark teal look grey and are that distinct from the rest of the text. Link styling now needs underline to make it stand out, unless we pick another more distinctive colour (that doesn't clash with the cookie notice).