[meta] Review button styling throughout GitLab

Resources

FE @alfredo1

This will be a meta issue for the review of buttons throughout the app. These issues will be focused on small actionable changes that allow us to easily improve the current experience. Let's discuss bigger changes on different issues.

Tasks:

• gitlab-foss#24144 (closed): Make sure all buttons turn dark on focus
• gitlab-foss#24145 (closed): Make hover/focus/active states more noticeable for buttons
• gitlab-foss#24146 (closed): Add blue border to buttons on focus
• gitlab-foss#24149 (closed): Better hover/focus states for navigation bar buttons
• gitlab-foss#24202 (closed): Add hover/focus/active states for top navigation buttons
• gitlab-foss#24150 (moved): Make hover/focus/active states consistent for dropdowns

Some points that we should consider when we perform a bigger redesign:

• Find a more pleasing way to convey hover state. I think the current approach makes the buttons look like a little dated.
• Find a better way to convey focus state. Our current approach is not very noticeable and could use a refresh.
• Consider removing the inner shadow for active state. Same as the first point, this state looks a little dated.

cc @awhildy @tauriedavis @dimitrieh @pedroms @hazelyang

Mentioned in issue gitlab-foss#21287 (moved)

Milestone changed to %8.14 in gitlab-foss

Added ~19492 label

Small note, I think you are doing a great job lately of analysing and revising these little details that make up a very important UI foundation of GitLab .

Mentioned in issue gitlab-foss#24202 (closed)

Hi @cperessini,

I added a collection of small findings regarding the top navigation buttons in gitlab-foss#24202 (closed). Maybe you want to add this to the meta issue.

@andreaskaemmerle Great observations, and thanks for making that issue! I'll add it to the list in this meta issue.

Marked the task gitlab-foss#24146 (closed): Add blue border to buttons on focus as completed

Marked the task gitlab-foss#24202 (closed): Add hover/focus/active states for top navigation buttons as completed

Reassigned to @cperessini

Marked the task gitlab-foss#24144 (closed): Make sure all buttons turn dark on focus as completed

Milestone changed to %8.15 in gitlab-foss

marked the task gitlab-foss#24145 (closed): Make hover/focus/active states more noticeable for buttons as completed

marked the task gitlab-foss#24149 (closed): Better hover/focus states for navigation bar buttons as completed

changed milestone to %8.16 in gitlab-foss

removed milestone

added ~1434245 label

added Deliverable in GitLab FOSS label

changed milestone to %9.4 in gitlab-foss

changed the description

@sarrahvesselov @timzallmann can we close this issue? as https://gitlab.com/gitlab-org/gitlab-ce/issues/24150 seems the only one left?

No @dimitrieh, I would prefer to leave it open until the last action item has been completed on it.

moved from gitlab-foss#24063 (moved)