Common-voice: [mobile] Stats dashboard UI updates

[georai]

https://www.dropbox.com/s/8wia34twsv739nu/Screenshot%202019-11-14%2016.50.26.png?dl=0

1.Wrong title placement
2.Text in button should be all caps
3.Missing progress bar

1. Wrong placement

@mbransn @rileyjshaw

[virgilt]

@georai @mbransn @phirework Can I work on this?

[rileyjshaw]

@virgilt absolutely! Please add a Pull Request when you're done, and I'll review it :)

[aryamanpuri]

Can I take this up?
Not sure about the progress bar.

[mbransn]

@virgilt let us know in the next 24hrs if you're still on this?

@aryamanpuri let's give them a chance to respond and we'll take it from there. 👍

[mbransn]

@aryamanpuri I'll reassign to you.

Please note the progress bar is not needed at this time.

[virgilt]

@mbransn let @aryamanpuri take it

[aryamanpuri]

Can I get a little detail here?
Do I have to make the changes only for the devices having a screen width less than 576px( --xs-down) as the issue is reproduced in mobile?
I don't think there is any change needed in the alignment of text in larger screens as there we have used flex-wrap.
Just to confirm, Do I have to change the text Clips You've Recorded/Validated as it is changed in the screenshots.

[mbransn]

@aryamanpuri yes, this issue is for mobile only view of dashboard/stats. Only adjust alignment on wider screen sizes if it is not consistent with the left-aligned design for mobile screens.

Clips You've Validated/Recorded should be updated to match the styling of the screenshot (Open Sans, black, 12px) but not the text wording; i.e. the words themselves should stay the same.

[aryamanpuri]

@mbransn I have figured out the required changes, but there are some text breaking after going less than 350px.
As the defined minimum width is of 350 px for xs device.
Should I open a pull request for that, or the requirement is more?