General UI issues

[andrenatal]

Excerpted from here:

• The font of the "Welcome" heading should be Zilla Slab and all other text Open Sans, to match the rest of first time setup
• The list items showing WiFi network names should be less spaced out (gaps of about 10px) to match other lists in the UI
• WiFi network names and input fields like the WiFi password field should be left aligned as per the mockup
• Border radius of menu items and buttons should be 0.5rem (5px). (Note the rest of the gateway UI uses 10px as a base font size on body and rem for sizes everywhere else to make it possible to scale for different pixel densities).
• The password entry UI should be vertically center aligned as per other similar UI, not just part way down the page.
• The Mozilla IoT wordmark should ideally be removed from the enter password screen because it can overlap the input field when a keyboard comes up on mobile
• The background-color of input fields should not match the background-color of buttons because that's confusing, it should be #c7d0d6 as per the mockup with #666666 for the placeholder text
• The :hover and :active style on input fields etc. with a CSS transition is cute but it's inconsistent with the rest of the first time setup so I suggest removing it
• The default tick box is very small to use on mobile, it would be better if the "Show password" tick box matched the ones in Settings, as per the mockups. Note this is implemented with a sprite (a bit of hack but necessary for touch interfaces)
• I like the addition of the message which tells the user to re-connect to their own WiFi network. Can we make that 1.6rem (16px), Open Sans, and horizontally and vertically center aligned to match other similar messages in the UI? I've added a mockup (slide 7) to show this, with a new message (note that we can't assume that setup is taking place via the built-in access point):
• Small nit: the /wifiSetup path of the setup URL is in camelCase which we're not using anywhere else. /wifi-setup might be better for consistency.
• Add wifi icon next to hotspot name in password page
• Add a proper message when user press skip

[andrenatal]

fixed by #34