Project Header styling of Approved Icon and multi-line project titles

[goplayoutside3]

Package

app-project

Is your feature request related to a problem? Please describe.

In the project header, the approved icon currently displays to the right of a project title. This works well for very short project titles (3 words or less), but in the case of longer project titles, the title becomes multi-line with a large space between text and approved icon. I've attached screenshots below.

With the addition of translations and language dropdown to FEM, the approved icon also takes up valuable space in the header, and navigation links can be cut off.

I'll note that this issue is unique to FEM because in PFE project titles are never displayed as more than one line, but this constraint results in unreadable titles when viewed with a mobile browser. See related PFE issue here: 6168. PFE also displays the language dropdown above navigation links rather than inline with them.

Example FEM scenarios where navigation links are cut off:

Example multi-line project title scenario with large gap between text and approved icon:

Describe the solution you'd like

1. The approved icon could be re-styled to be part of the project's avatar in both FEM and PFE. Possible designs (desktop/mobile with and without border around Avatar):

Describe alternatives you've considered

2. We could tell FEM to display the navigation dropdown when a project title is longer than about 12 characters. This would not solve the spacing gap between title and approved icon for multi-line scenarios.

3. Also noting here that I tried various css solutions to remove the spacing gap between title text and approved icon, but the header element will not dynamically resize to its text content.

Additional context

The approved icon was added as a results of https://github.com/zooniverse/Panoptes-Front-End/issues/4304.

[seanmiller26]

I prefer the version with a stroke around only the checkmark circle. Also noting that the Design System notes the 'status-ok' green (#1ED359) should be used in situations like this, however I'm not opposed to it changing to the primary teal. See here (scroll down to the first green color): https://projects.invisionapp.com/dsm/zooniverse/zooniverse/nav/60253bd81bfefafa589ce469/folder/60253bd81bfefaf0149ce45c?mode=preview I'd love to hear thoughts on this, though.

[seanmiller26]

Didn't mean to close, reopening...

[goplayoutside3]

Because the approved icon has always had a teal checkmark, I think keeping teal here would lessen the surprise when project teams are used to seeing it in a different spot in the header. Teal also makes me think the Zooniverse team specifically approved this rather than a green "status is okay in a database somewhere".

It's very easy to change the color if we decide otherwise though!

[seanmiller26]

Disregard my previous comment. I must have seen a green checkmark in a concept mock-up.

[seanmiller26]

To unify this with the current breakpoint refactoring I'd like to clarify that the font size for project titles should be set to 30pt when displayed in the collapsed version.