misc: Reporter redesign

[mabela416]

• Closes Update reporter UI to remove nesting + show full describes #31677

Additional details

Steps to test

Go through different states of the app and make sure the styles match the figma

How has the user experience changed?

PR Tasks

• Have tests been added/updated?
• Has a PR for user-facing changes been opened in cypress-documentation?
• Have API changes been updated in the type definitions?

[jennifer-shehane]

@mabela416 So many changes, thanks for seeing this work through! I have some comments on a few things initially.

On hover of commands, there is a slight rounded corner on all of the right corners, when there shouldn't be for corners that are not first/last.

Is it possible to have this bottom left corner look more rounded when the test is open?

Is this the right hover state for tests? I assumed it would be this lighter focus style.

This juxtaposition of the failure block with the test logs looks strange to me.

When you hover over a describe, the icon changes to an arrow, but when you click the describe - that arrow icon doesn't rotate to show the described as closed.

Also, the icon stays that way after click/focus and does not go back to the old icon when I hover away from the describe. Seems odd.

The 'Open in IDE' button when hovering over a Before Each doesn't seem centered.

The jump that the test does from the 1px border to the 2px border doesn't feel fluid.

Screen.Recording.2025-06-23.at.12.00.38.PM.mov

We need some margin-bottom on the tests list - when you scroll all the way down it sits there so close to the bottom edge like it's not the end.

I don't think the New Test button should overlap the text of the Describe, it's a bit weird copying the text or seeing it if I want in this case.

The attempt styling needs to be accounted for - the lines connecting them look strange here.

This describe icon feels strange flashing back and forth between pending/queued? Maybe it's not too weird, I don't know.

Screen.Recording.2025-06-23.at.12.10.12.PM.mov

This blue line that shows on the commandTimeout - when it burns down should have that highlighted gray color, not the dark black color.

Screen.Recording.2025-06-23.at.12.12.59.PM.mov

[mabela416]

@mabela416 So many changes, thanks for seeing this work through! I have some comments on a few things initially.

Is this the right hover state for tests? I assumed it would be this lighter focus style.

Yeah this is the figma for the test hover state https://www.figma.com/design/XYBgOykHfLCi1yT4Va7GLO/Studio-Test-generation?node-id=3607-170837&t=33uO9ue4ojx1TNL4-4

The lighter focus style is only for when the user focuses the test by tabbing

[mabela416]

@mabela416 So many changes, thanks for seeing this work through! I have some comments on a few things initially.

I don't think the New Test button should overlap the text of the Describe, it's a bit weird copying the text or seeing it if I want in this case.

This is part of the design here