Responsive Redesign // UI-Design Edits

[jess-cook03]

@kkellydesign

• spacing, increase across all breakpoints, especially in header areas.

• This 'Need more help' component. For now follow latest design as discussed -- ink-09 with metropolis -- instead of what is captured here below.
  

• 'See All Products' link in the navigation, style like blue text link
  

• Gravatar ?? lets try and round those corners and if you can figure out how to make the FxA avatar work instead then lets go with that (shown below)
  
  ![Img_avatar](https://user-images.githubusercontent.com/54991698/73578417-96b77f00-444d-11ea-887e-5def699b705a.png

• Same with this on the profile editing, change this to upload/browse select your img or pencil icon on hover to edit photo ? Gravatar is weird hah.
  

• Layouts with sidebar: sidebar sits on the right side, content sits to the left (needs to be switched in some pages ie. profile settings)
  

• Make the checkboxes bigger - matching the UI specificed in system on Zeplin component library/protocol.
  

[kkellydesign]

@jess-cook03 This will be ready for another design pass when this is in:
mozilla/kitsune#4170

form macros have been added to allow custom checkboxes anywhere, and maintain consistency. Whenever possible, use this new pattern for forms instead of {{ form.as_ul }}

[jess-cook03]

@kkellydesign marked for review considering a few elements here overlap with edits needed in other tickets -- ie Forum / thread pages #67 and need more help component edits #179

[kkellydesign]

@jess-cook03 If there is nothing left that is actionable in this ticket, I think it's good to be closed, even if there are related tickets open elsewhere. At this point, I think smaller single-topic tickets are best. Moving back to QA for confirmation.

[jess-cook03]

Confirmed this is done