De-emphasize test results status icons in MR widget

This is an actionable insight from the UX Department: MRs experience async critique research (insight1) (insight2).

What

Part 1

In the merge request widget for code tests, there's too much emphasis on status icons. Here are some quotes from our research:

1. “The green color makes it difficult for me to focus on the text. My eye keeps bouncing back to the green icon instead of reading the text more closely.”
2. “Can everything successful be grouped under one icon in some way?”

Part 2

In the merge request widget for code tests, there's no visual difference between the widget's header and its expanded content.

Why

With too much emphasis on the status icons, especially due to duplicated icons, it's difficult for users to focus on the text and differences between each test result.

How

Part 1

See how it's possible to de-emphasize the test results icons. One option is to group results by status, instead of duplicating the status icons for each result.

Part 2

Visually differentiate the MR widget header from the expanded content.

Figma Design Note that these are the same designs uploaded to #283894 (closed)

• The child test results should indent using a left padding of 32px.
• The child results item container should have its height reduced to 10px 8px.
• The status icon in the child container should have its dimensions reduced to 16px.
• If a child container displays a warning state, the background color should be $gray-50 - the same as the scrollable container.