Apply new graphic design

[garatortiz]

Closes #141

Note: Frontend tests are failing.

[fvictorio]

Things I noticed:

• The confirmed addresses are not differentiated from the unconfirmed.
• The home logo doesn't work (clicking it doesn't take you to the home page).
• I think we should have a back button in the addresses page too.

[fernandomg]

Small details I've found so far:

• If I press enter on the confirmation code input, page reloads with the query param ?confirmationCodePlain= added to the URL. If I click on the arrow button, everything works fine.
• button in confirm input is not aligned to the input itself
• back arrow icon not vertically centered
• in portrait mobile layout loading icon is not horizontally centered
• medium should be: https://medium.com/poa-network
• missing question marks in form labels
• for display with a width between 320px and 1300px, Proof of Physical Address legend in logo looks like a serif-like font

[garatortiz]

To make the question marks work, we need add this code. How can I add this code in the React view?

 $(".info").hover(
          function () {
            $(this).find('.hidden-info').fadeOut();
            $(this).find('.hidden-info').fadeIn();

          },
          function () {
            $(this).find('.hidden-info').fadeIn();
            $(this).find('.hidden-info').fadeOut();
          }
        )

[garatortiz]

@fvictorio @fernandomg it's ready to review

[coveralls]

Pull Request Test Coverage Report for Build 474

• 6 of 11 (54.55%) changed or added relevant lines in 6 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.7%) to 80.1%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
web-dapp/src/components/MyAddressesPage.js	1	2	50.0%
web-dapp/src/components/HelpPage.js	0	1	0.0%
web-dapp/src/components/App.js	2	5	40.0%
<!--	Total:	6	11	54.55%	-->

Totals
Change from base Build 470:	0.7%
Covered Lines:	974
Relevant Lines:	1189

---

💛 - Coveralls

[phahulin]

Few more things I noticed. Let me know if those are out of scope of this PR, and will go to a different PRs:

1. page icon (on chrome tab) is from the previous version (eye in triangle)
2. "How it works" button doesn't work (if I click on it - nothing happens)
3. when opening "My addresses" page, the image on the left side of the page scales up
4. postcards are still in the previous version of design
5. there is margin on top of each page. On some pages (/register, /confirm) this leads to emergence of vertical scroll bar, maybe remove them if possible
6. on "my addresses" page footer "2018 POA..." goes up to the middle of the page (depending on the amount of addresses in the list)
7. "register new address" page leads to /register route, which is not declared in web-dapp/app.js https://github.com/poanetwork/poa-popa/blob/master/web-dapp/app.js#L13-L15 https://github.com/poanetwork/poa-popa/blob/master/web-dapp/app.js#L22-L23 if you copy url and paste it in incognito mode you get "Cannot GET /register" 404 error

[garatortiz]

@phahulin done!

[phahulin]

Postcard templates are mixed up - back and front covers should be swaped