Further improvements to Project overview UI

This is the implementation issue for related ~"product discovery" in https://gitlab.com/gitlab-org/gitlab-ce/issues/47759 and an iteration of https://gitlab.com/gitlab-org/gitlab-ce/issues/44704.

Problem to solve

With 11.3, we introduced a design update to our Project overview page. There has been additional feedback during exploration we addressed in the second discovery iteration.

• De-stress the top info overload section, add more whitespace
• Look into specced out projects, but also barebone projects that only have a name
• Enhance contrast to better differentiate between frequently used actions and less important actions
• Review new repository languages bar as additional UI element
• Project ID field should be less intrusive
• Remove remaining full-width horizontal border lines
• Can we utilize more color?
• Move meta information in title row to its own row?

With this implementation issue, we adress this input and further improve this page.

Solution

Spec previews

From https://gitlab.com/gitlab-org/gitlab-ce/issues/47759.
After around 5 iterations and lots of received feedback I managed to clean up the UI. I achieved that by only removing certain (duplicated) elements but mostly by moving things around and grouping them.

Desktop

Fully specced out	With clone dropdown	Barebones

Changes:

• moved star, fork and new clone button (copy SSH/HTTPS URLs) to top right, made them smaller
• avatar is now larger (64px)
• 'Request access' is now a link instead of a button
• overview comes before the description + changed styling and added icons
• description font-size is now 16px (large-paragraph)
• quick links to files are moved downwards below the commit/pipeline info
• margins changed to group content into 4 groups to clean up the interface
• visibility info reduced to icon-only and moved to the right of the title

Tablet

Fully specced out	Barebones

Mobile

Fully specced out	Badges expanded	Barebones