typey-type
typey-type copied to clipboard
Fix styling on raw steno keys in hints on finished lesson screen
Problem
The styling on individual raw steno keys in hints on finished lesson screen has a background color that does not match the background color for full steno strokes:
In this example, the outside edges around WAS
are a different color to the background behind the letters WAS
. They should be the same color.
Details
The steno-stroke
class is used in all of the following places:
https://didoesdigital.com/typey-type/lessons/fundamentals/introduction/
https://didoesdigital.com/typey-type/lessons
https://didoesdigital.com/typey-type/dictionaries
https://didoesdigital.com/typey-type/lookup
https://didoesdigital.com/typey-type/lessons/fundamentals/introduction/flashcards
Approach
We no longer need individual styling for individual raw steno keys anywhere so we can remove the classes for raw-steno-key raw-steno-key--subtle
on the finished screen or in CSS.
- Remove classes in CSS.
- Remove classes in finished screen JSX.
- Take screenshots of all the places steno strokes are used and check they look good.