Redesign of MR header sections

(CE Port gitlab-ce!23465)

What does this MR do?

The design for #1979 (closed) suggests:

• Moving the approval section of the MR widget.
• Changing the icon of the approval section.
• Adding the "workflow" line connecting the approval section to the previous section.

This MR implements this redesign, simplifies some of the existing CSS, while keeping the existing approval behavior.

Screenshots

Before	After

What will be handled in the next MR?

Replace old approval behavior with #1979 (closed).

What are the relevant issue numbers?

• Part of #1979 (closed)
• Part of #8350 (closed)

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• Tests added for this feature/bug
• Conforms to the code review guidelines
• Conforms to the merge request performance guidelines
• Conforms to the style guides
• Conforms to the database guides
• Link to e2e tests MR added if this MR has Requires e2e tests label. See the Test Planning Process.
• EE specific content should be in the top level /ee folder
• For a paid feature, have we considered GitLab.com plans, how it works for groups, and is there a design for promoting it to users who aren't on the correct plan?