Add Project Classify Header

[seanmiller26]

The reskinned classifier uses this header as part of the design. This will help signal to users that they are on a specific project's classify page.

The images are pulled from the project's uploaded Background Image.

I have included 3 examples to help show the gradient overlay. #979797 (Also the new classifier background color)

The idea is that the classifier will overlap the header.

I tried to illustrate that here:

All details can be found in the Figma file here, including tablet specifications.

[lcjohnso]

@seanmiller26

1. What is the fallback in the case of no background image?
2. While you show that a variety of background images are compatible, how confident are you that all project background images are suitable for this use? I'm relatively convinced & confident that this should work, but at the very least we should be sure to perform a comprehensive check of all current mobile projects during review.

[seanmiller26]

Great questions

What is the fallback in the case of no background image?

Brand color #005D69 with all the same same overlays.

...how confident are you that all project background images are suitable for this use?

I just audited the first 20 projects shown on the app and they look great. Happy to do more if we want to be comprehensive, but even the improper image sizes look nice (see Eyes on Eyes; portrait ratio image). Here are some more examples:

[lcjohnso]

Looks great! I have no concerns moving forward.