fix: clean up some unexpected behavior and designs

[elevatebart]

While checking if we could safely remove the safelist, I found a few odd designs.

Two color class bugs

In a few places around the app, we have multiple utility classes triggering the color of the text or the background.

Since CSS classes don't take order into account, one cannot have the following code expect a deterministic rendering:

<button class="text-gray-600 text-indigo-600">
  Am I blue or gray?
</button>

It will depend on the position of both classes in the CSS file.

This use case is obvious. But when dynamic stuff is involved, it can be tricky. Look at the following vue use case.

<template>
  <button class="text-indigo-600" :class="{ 'text-gray-600': disabled }">
    Am I blue or gray?
  </button>
</template>

If the CSS class text-gray-600 is defined before text-indigo-600 in the CSS file, this button will never be gray when disabled. More deceptively, when building, the order might not be exactly the same and something that works in dev might not work in production.

Retry is not in the designs

Everywhere there is an error in Figma I only see Try again not retry.

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[cypress]

---

Test summary

37553 • 0 • 454 • 0 • 3

---

Run details

Project	cypress
Status	Passed
Commit	38c10ae
Started	Jun 21, 2022 2:27 PM
Ended	Jun 21, 2022 2:43 PM
Duration	16:40 💡
OS	Linux Debian - 10.11
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	commands/actions/click.cy.js		1
1	... > scroll-behavior > can scroll to and click elements in html with scroll-behavior: smooth
	cypress/proxy-logging.cy.ts		1
1	Proxy Logging > request logging > xhr log has response body/status code when xhr response is logged second
	next.cy.ts		1
1	Working with next-11 > should live-reload on src changes

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[tbiethman]

Changes look good, the Percy snapshots we have show diffs I'd expect from these changes (and the existing flake). I appreciate the thorough PR description too, I'll have to keep an eye out for these scenarios going forward.

We can point this PR to develop now 🚀

[marktnoonan]

These look like good changes, gonna rerun CI for Percy.

[elevatebart]

@marktnoonan when you have a minute I would love your eyes on this one.

[cypress-bot]

Released in 10.2.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.2.0, please open a new issue.