typey-type icon indicating copy to clipboard operation
typey-type copied to clipboard

Fix styling on raw steno keys in hints on finished lesson screen

Open didoesdigital opened this issue 4 years ago • 0 comments

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: image

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:

image https://didoesdigital.com/typey-type/lessons/fundamentals/one-syllable-words-with-compound-clusters/overview

image https://didoesdigital.com/typey-type/lessons/fundamentals/introduction/

image https://didoesdigital.com/typey-type/lessons

image 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.

  1. Remove classes in CSS.
  2. Remove classes in finished screen JSX.
  3. Take screenshots of all the places steno strokes are used and check they look good.

didoesdigital avatar Jan 08 '20 13:01 didoesdigital