Colors for different builds

[pbanaszkiewicz]

This fixes #2322.

There will be 2 banners available: local and testing.

Local looks like this:

Testing looks like this:

Every site will have this banner. It will stay on top, but will hide beneath the navigation bar:

[elichad]

Could we also have a smaller indicator in the nav bar so that there's always something visible even when scrolled down? Example below. (We could just keep the full banner visible, but it's quite noisy and takes up space)

Top of page:

Scrolled down:

[maneesha]

An indication that you are on a test or local build should always be visible. I'm ok with having the bar always be visible but if others feel it takes up too much space, I also like Eli's suggestions of changing the menu colors. We can also consider a different body background color for local and test builds. Anything that would indicate to the user that they are in a different space.

[pbanaszkiewicz]

@elichad @maneesha I think we could make it sticky to the bottom of the page and it would not hide. What do you think?

[pbanaszkiewicz]

I was following this design from Django docs for development version: https://docs.djangoproject.com/en/dev/

[elichad]

I'd favour sticky at the top so it's harder to miss. It doesn't take up too much space and I'll get used to it!

[pbanaszkiewicz]

Changes:

1. banner stays on top and is never covered by the navigation menu
2. banner background no longer contains diagonal stripes
3. sharper color contrast between font color and background color for increased readability

[pbanaszkiewicz]

@maneesha @elichad how do you like this version?

[pbanaszkiewicz]

I didn't want to change navigation bar or page background colors because it would impact readability or require a lot of further work to improve CSS of elements displayed in the navigation bar or on the page.

[elichad]

I'm happy with this version.

[maneesha]

Looks good to me!