style: UI rework validation tab

[ayushgml]

This PR addresses the issue of UI rework of Validation tab(3443) for 2.2 (current sprint).

• UI-rework of the validation tab in project settings #3443

Changes

• The ValidationCard column has been set on a width of 50% with left and right margins as 25% each.
• The subsection title was removed
• Regular text block has been added instead with a "Checkout errors" button
• The route to Validation tab has been added with the same animation

How to test it

• You can test it by viewing the electron app locally by running npm run electron:dev

Screenshots

Screen Recording

• You can view the screen recording here: https://drive.google.com/file/d/1kdJY2qjZW6N__xo-DrM1bAJztDC74gq3/view?usp=sharing

Checklist

• [ V ] tested locally
• added new dependencies
• updated the docs
• added a test

[topliceanurazvan]

The code looks good. One thing I've noticed is that the New tools coming up soon is till taking the full width of the container. You can find it under ValidationCardUpNext.

Also, it would be nice to still have the cards as full width under 1150px. You can add a laptopS constant in device.ts and use the media for having the cards as full width below that specified resolution. Let us know if you have further questions.

[ayushgml]

Hey @topliceanurazvan! Okay I will make these changes and then get back.

[ayushgml]

I have 1 doubt. There is no device.ts file that is showing in the codebase. Should i make one? If yes then in what is the location?
If not then I have added the media query for cards as max-width: 1150px.

[topliceanurazvan]

It is a file name, you can search for it inside vs code by pressing ctrl/cmd + p. This should be the content of it:

[ayushgml]

Thank you @topliceanurazvan for clearing the doubt!

[ayushgml]

Hey @topliceanurazvan I made the changes as you suggested. If anything else please let me know.

[topliceanurazvan]

Great work! 🙌🏻

[ayushgml]

Thank you @topliceanurazvan! This was my first contribution in Monokle. I am looking forward to contribute more.