Style pass

[alexelash]

Overview

Styles all pages to match flat designs where relevant. I didn't touch the chart colors, but can if desired.

I also took care of some of the feedback from the client. Namely 030 (switched Answer/Question in lists), 035 (copy), 036 (copy), 039 (countries first), 040 (favicon and meta image).

~Connects #XXX~

Demo

Home

Question selector

Saved visualizations

Saved visualizations, empty

Modal styles

Charts page, default

Charts page (after this page has been saved)

404 page

Notes

• This isn't fully responsive yet. I got part of the way there, but will need to do another responsive pass.
• I put in the image that was supplied by the client. I imagine we might get a new one. I placed it in a /images/ folder that I created in /src/ - not sure if that was right!
• I added some text under each question that indicates the # of q's. It's hard-coded as "questions" and right now if you run a search that returns 1 item it looks awkward. I'm hoping that #73 will resolve this with the enhancement that opens all of the accordions by default.
• I would have liked to make the 404 page more consistent with the empty Saved viz page, but didn't have time to change the link to a button.

Testing Instructions

• git pull
• Visit each page of the app:
  • Home
    • Note that "Countries" is the default selected type of areas.
    • Confirm that text in Header matches the feedback in the feedback doc.
    • Open up FAQ and About. Note new styling.
    • Change browser width to see that image disappears on small screens (the rest is a bit broken but this is intentional)
  • Questions
    • Run a search that returns nothing and note that inside each question is the text that states there are no results. The checkbox should be disabled.
    • Clear your search. Open the accordions to see taht the # of questions text disappears when the accordion is open.
    • Proceed with questions from at least 2 sections.
  • Charts page
    • Each section is contained in an accordion. They are all open by default, try closing one.
    • When hovering on a chart, the download button should appear at the top right.
    • Save this selection of charts. Note the saved button is replaced by a "Saved" notice.
  • Saved Charts
    • Note your saved chart. You should always see the option to delete it, but if you hover you'll see the edit button. Click it.
    • Start editing the text. Note the new "Cancel" x button next to "Save". Click it. Your new title should not be saved.
    • Delete this chart.
    • Note the empty state.
  • Go to http://localhost:3333/chartssd.
    • Note the 404 page styles.

[alexelash]

@TaiWilkin Awesome, thanks for the review! And sounds good re: chart colors and the new image. I removed the cancel button, so this is ready for another look.