[design refresh, rev2] Redesign footer, index page and language selector

[eloquence]

Description

Update footer and index page to the second revision as specified for the SecureDrop 1.0.0 design refresh.

Resolves #4662
Resolves #4663

Status

Ready for review

Test plan

• Verify that the main page design works well in desktop and mobile view of Tor Browser
• Verify that the footer as specified appears on each page of the Source Interface
• Verify that there are no unintended side effects on any page of the Source Interface or the Journalist Interface

Why is the logo in the footer a bit different from the main logo?

We decided to use a monochromatic version of the logo in the footer to avoid too much repetition of the exact same image (favicon, potentially stock logo if not replaced, and footer). This monochromatic variant will be one of the approved variants post-logo refresh.

Screenshots

Desktop view

Mobile view

[eloquence]

(I'm basing this on the rev1 branch for now, which we'll hopefully merge into develop soon.)

[codecov-io]

Codecov Report

❗ No coverage uploaded for pull request base (logo-and-color-refresh-2019@cd30c12). Click here to learn what that means.
The diff coverage is n/a.

@@                      Coverage Diff                       @@
##             logo-and-color-refresh-2019    #4666   +/-   ##
==============================================================
  Coverage                               ?   82.67%           
==============================================================
  Files                                  ?       45           
  Lines                                  ?     3122           
  Branches                               ?      338           
==============================================================
  Hits                                   ?     2581           
  Misses                                 ?      454           
  Partials                               ?       87

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cd30c12...163113a. Read the comment docs.

[codecov-io]

Codecov Report

Merging #4666 into develop will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           develop    #4666   +/-   ##
========================================
  Coverage    82.67%   82.67%           
========================================
  Files           45       45           
  Lines         3122     3122           
  Branches       338      338           
========================================
  Hits          2581     2581           
  Misses         454      454           
  Partials        87       87

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0c0ed47...2018880. Read the comment docs.

[eloquence]

This is technically ready for review if anyone wants to poke, but should be applied against develop once #4634 is merged, so leaving in draft mode for now.

[eloquence]

Since nobody has reviewed yet and we're no longer in a huge rush, kicking this back into in development to combine with the index page rev2 (in reviewing that design, Nina suggested to alter some of the footer specs again; it's easiest to do that in the same PR).

[eloquence]

(Test failures are legit, functional tests make string checks that will need to be updated.)

[zenmonkeykstop]

• Main page design looks good on desktop and mobile Tor Browser (although the logo and language picker are displayed inconsistently (and awkwardly left-justified with a random HR) on subsequent pages).
• With the apparmor change in that last commit, the Source Interface renders each page with the footer in place
• The Journalist Interface displays correctly with no issues as a result of the SI change, and the footer isn't displayed on it.

As an aside, the footer language appears a bit stilted - "stewarded" isn't in common usage and it's more natural to refer to "the Freedom of the Press Foundation" rather than "Freedom of the Press Foundation" - the combination of the two gives the footer text a phishy vibe for me.

From a technical perspective, this is good to go. IMO the footer text could be reworded but that can happen separately.

[eloquence]

(and awkwardly left-justified with a random HR)

That random HR in mobile looks like a recent design regression, will fix.

The sizing of the language selector on subsequent pages should ideally be made consistent with the logo, but I view that as an enhancement that's OK to defer for now. (It's not entirely trivial given the different sizing specs used on index and subsequent pages.)