Design new StepTimeView (Frontend)

[git-voo]

Description:

The new step time view should look like the image below.

Developer Notes:

• The green dot is the participant's step time when in the target zone.
• The red x is the participant's step time when outside the target zone.
• The lightly shaded grey area is the target zone
• These parameters are the same for both force plates (left and right)
• The dashed horizontal line is the baseline step time. this will be calculated from the first 30 seconds of walking data and will not change afterward.
• The top of the baseline indicates a larger percentage of step time from the baseline.
• The vertical line on the far left is just a bar that shows range of step time either as percentage (0-100), or 0 to 1
• Note that the movement of elements on this interface will be vertical. the green dot and/or red x will move up or down withing the target zones, and the target zones will move up or down across the baseline steptime

Acceptance Criteria:

• The designed interface closely matches the depiction in the above image

• All the elements move in the expected fashion

• Target zones are lightly shaded such that step time icons are seen while within them

• The shape and color of the step time changes in relation to within or outside the target zone (use mock data as much as you need to)

  • step time is a green dot when within the target zone
  • step time is a red x when outside the target zone

• The horizontal baseline steptime and vertical range bar remain in fixed positions