Update documentation design with cypress design system (#5572)

* add tailwindcss

* install cypress design css

* remove unwanted changes

* eject sidebar to start swindling

* use the docmenu

* make menu work fine

* simplify css and finish menu

* navbar v1

* swizzle the navbar

* menu better

* NavBar & titles

* almost done

* some changes updates

* setup dark mode switch

* make dark mode switch work

* consolidate announcement bar

* fix svg warning

* remove unused import

* repair build

* update react-docmenu

* Add contents on top of side menu

* some updates to dark mode

* finish the job about announcement bar

* remove negative margin in toc

* fix gray background in dark mode

* fix: navbar

* css fixes

* two css fixes

* update react docmenu once more

* two fixes on the layout of lists and edit button (CSS)

* fix search bar

* remove scrollbar gutter

* adjustments in design

* better ssr?

* adjustments on toc

* fix ssr bug (turns out immutability is a pain)

* update menu and navbar dark border

* fix plugins page

* remove alert shadow

* fix: index plugins list

* fix plugins page

* some simplification

* adjust FAQ a little

* fix border or search box

* add white background to search button

* remove off-white background

* fix borders

* base font as 16px

* fix search mode

* fix: update prettier

* fix: link color has to be blue

* bring more space to paragraphs

* fix: add margin around code

* fix: margin-bottom of code

* fix some spacing

* add "new" label to menu

* smaller margin bottom on h2

* fix backdrop when navbar is in mobile mode

* implement mobile docmenu

* update dependencies

* lots of fixes and some string typing

* remove shadow in mobile menu

* last set a fixes

* use js because types are unnecessary

* fix broken links

* remove hover background

* add chevron to primary menu

* admonition scss heading fixes

* fix bold section headers

* add space between img & caption

* fix render issues

* fix branch review

* fix spacing of tags

* fix content placement in large screens

* fix spacing of admonition

* restore first level list marker

* fix: some css

---------

Co-authored-by: Paul Jaffre <[email protected]>

Author: Barthélémy Ledoux

docs/api/actions/scrollintoview.mdx

@@ -131,4 +131,4 @@ console outputs the following:
 
 ## See also
 
-- [`cy.scrollTo()`](/api/commands/scrollto)
+- [`cy.scrollTo()`](/api/commands/scrollTo)

docs/api/actions/scrollto.mdx

@@ -224,4 +224,4 @@ following:
 
 ## See also
 
-- [`.scrollIntoView()`](/api/commands/scrollintoview)
+- [`.scrollIntoView()`](/api/commands/scrollIntoView)

docs/api/commands/intercept.mdx

@@ -56,7 +56,7 @@ argument
 
 ### Usage
 
-<Icon name="check-circle" color="green" /> ****Correct Usage**
+<Icon name="check-circle" color="green" /> **Correct Usage**
 
 ```js
 // spying

docs/api/cypress-api/custom-commands.mdx

@@ -405,7 +405,7 @@ with an existing subject or without one.
 Examples of dual commands:
 
 - [`cy.screenshot()`](/api/commands/screenshot)
-- [`cy.scrollTo()`](/api/commands/scrollto)
+- [`cy.scrollTo()`](/api/commands/scrollTo)
 - [`cy.wait()`](/api/commands/wait)
 
 #### Custom Dual Command
@@ -616,13 +616,13 @@ Cypress.Commands.add(
 )
 ```
 
-<Icon name="check-circle" color="green" /> Valid Usage**
+<Icon name="check-circle" color="green" /> **Valid Usage**
 
 ```javascript
 cy.get('button').click() // has subject, and is `element`
 ```
 
-<Icon name="exclamation-triangle" color="red" /> Invalid Usage**
+<Icon name="exclamation-triangle" color="red" /> **Invalid Usage**
 
 ```javascript
 cy.click() // no subject, will error
@@ -649,15 +649,15 @@ Cypress.Commands.add(
 )
 ```
 
-<Icon name="check-circle" color="green" /> Valid Usage**
+<Icon name="check-circle" color="green" /> **Valid Usage**
 
 ```javascript
 cy.get('button').trigger() // has subject, and is `element`
 cy.document().trigger() // has subject, and is `document`
 cy.window().trigger() // has subject, and is `window`
 ```
 
-<Icon name="exclamation-triangle" color="red" /> Invalid Usage**
+<Icon name="exclamation-triangle" color="red" /> **Invalid Usage**
 
 ```javascript
 cy.trigger() // no subject, will error
@@ -693,15 +693,15 @@ Cypress.Commands.add(
 )
 ```
 
-<Icon name="check-circle" color="green" /> Valid Usage**
+<Icon name="check-circle" color="green" /> **Valid Usage**
 
 ```javascript
 cy.scrollTo() // no subject, but valid because it's optional
 cy.get('#main').scrollTo() // has subject, and is `element`
 cy.visit().scrollTo() // has subject, and since visit yields `window` it's ok
 ```
 
-<Icon name="exclamation-triangle" color="red" /> Invalid Usage**
+<Icon name="exclamation-triangle" color="red" /> **Invalid Usage**
 
 ```javascript
 cy.document().scrollTo() // has subject, but it's a `document`, will error

docs/api/table-of-contents.mdx

@@ -93,8 +93,8 @@ Learn more about action commands in our
 | [`.click()`](/api/commands/click)                   | Click a DOM element.                                                                     |
 | [`.dblclick()`](/api/commands/dblclick)             | Double-click a DOM element.                                                              |
 | [`.rightclick()`](/api/commands/rightclick)         | Right click a DOM element.                                                               |
-| [`.scrollIntoView()`](/api/commands/scrollintoview) | Scroll an element into view.                                                             |
-| [`.scrollTo()`](/api/commands/scrollto)             | Scroll to a specific position.                                                           |
+| [`.scrollIntoView()`](/api/commands/scrollIntoView) | Scroll an element into view.                                                             |
+| [`.scrollTo()`](/api/commands/scrollTo)             | Scroll to a specific position.                                                           |
 | [`.select()`](/api/commands/select)                 | Select an `<option>` within a `<select>`.                                                |
 | [`.selectFile()`](/api/commands/selectfile)         | Selects a file in an HTML5 input element, or simulates dragging a file into the browser. |
 | [`.trigger()`](/api/commands/trigger)               | Trigger an event on a DOM element.                                                       |

docs/guides/cloud/branch-review.mdx

@@ -1,7 +1,7 @@
 ---
 title: Branch Review
 sidebar_position: 50
-sidebar_class_name: new_label
+sidebar_custom_props: { 'new_label': true }
 ---
 
 :::info
@@ -129,15 +129,15 @@ Recording exactly one run for every commit as the best/only way to ensure comple
 2. Get a glance of changes in your branch across key statuses
 3. See what has changed in a specific status, for example:
    - <img
-       className="br-ui"
+       className="br-ui inline-block"
        src="/img/guides/cloud/branch-review/test-status-up.png"
      /> total number introduced in your branch
    - <img
-       className="br-ui"
+       className="br-ui inline-block"
        src="/img/guides/cloud/branch-review/test-status-down.png"
      /> total number decreased or resolved in your branch
    - <img
-       className="br-ui"
+       className="br-ui inline-block"
        src="/img/guides/cloud/branch-review/test-status-total.png"
      /> total count, for example, _3 new and 1 existing_
 4. The test state (failed, flaky, pending) is also indicated at the spec level

docs/guides/cloud/test-replay.mdx

@@ -1,7 +1,7 @@
 ---
 title: Test Replay
 sidebar_position: 40
-sidebar_class_name: new_label
+sidebar_custom_props: { 'new_label': true }
 ---
 
 :::info

docs/guides/component-testing/getting-started.mdx

@@ -21,7 +21,7 @@ To begin we need to install Cypress in your project if you have not already done
 npm install cypress -D
 ```
 
-### Open Cypress:
+### Open Cypress
 
 Once Cypress has been installed you can launch Cypress using the following command:
 

docs/guides/core-concepts/introduction-to-cypress.mdx

@@ -570,7 +570,7 @@ Remembering that Cypress commands run asynchronously is important if you are
 attempting to mix Cypress commands with synchronous code. Synchronous code will
 execute immediately - not waiting for the Cypress commands above it to execute.
 
-<Icon name="exclamation-triangle" color="red" /> Incorrect usage**
+<Icon name="exclamation-triangle" color="red" /> **Incorrect usage**
 
 In the example below, the `el` evaluates immediately, before the `cy.visit()`
 has executed, so will always evaluate to an empty array.
@@ -604,7 +604,7 @@ it('does not work as we expect', () => {
 // Cypress will begin running them in order!
 ```
 
-<Icon name="check-circle" color="green" /> Correct usage**
+<Icon name="check-circle" color="green" /> **Correct usage**
 
 Below is one way the code above could be rewritten in order to ensure the
 commands run as expected.
@@ -633,7 +633,7 @@ it('does not work as we expect', () => {
 // Cypress will begin running them in order!
 ```
 
-<Icon name="exclamation-triangle" color="red" /> Incorrect usage**
+<Icon name="exclamation-triangle" color="red" /> **Incorrect usage**
 
 In the example below, the check on the `username` value gets evaluated
 immediately, before the `cy.visit()` has executed, so will always evaluate to
@@ -669,7 +669,7 @@ it('test', () => {
 // Cypress will begin running them in order!
 ```
 
-<Icon name="check-circle" color="green" /> Correct usage**
+<Icon name="check-circle" color="green" /> **Correct usage**
 
 Below is one way the code above could be rewritten in order to ensure the
 commands run as expected.
@@ -745,7 +745,7 @@ displayed the test reloads the page and checks again.
 **Note:** you can find this application and the correct test in our
 [Recipes](https://github.com/cypress-io/cypress-example-recipes#testing-the-dom).
 
-<Icon name="exclamation-triangle" color="red" /> Incorrect test**
+<Icon name="exclamation-triangle" color="red" /> **Incorrect test**
 
 The test written below WILL NOT work and most likely will crash your browser.
 
@@ -777,7 +777,7 @@ without executing any! The chain of commands keeps growing, but never executes -
 since the test function never finishes running. The `while` loop never allows
 Cypress to start executing even the very first `cy.get(...)` command.
 
-<Icon name="check-circle" color="green" /> Correct test**
+<Icon name="check-circle" color="green" /> **Correct test**
 
 We need to give the test a chance to run a few commands before deciding if it
 needs to continue. Thus the correct test would use recursion.

docs/guides/overview/why-cypress.mdx

@@ -16,9 +16,9 @@ sidebar_position: 10
 
 ## In a nutshell
 
-Cypress is a next generation front end testing tool built for the modern web. We
-address the key pain points developers and QA engineers face when testing modern
-applications.
+Cypress is a next generation front end testing tool built for the modern web.
+We address the key pain points developers and QA engineers
+face when testing modern applications.
 
 We make it possible to: