Update how to guides with new UI

docs/user-documentation/moderne-platform/how-to-guides/find-pii.md

@@ -30,21 +30,14 @@ Let's walk through how to find and use this recipe so you can be more confident
 
 * After you've come up with the list of field names to search for, you can select whether or not you want the recipe to perform a transitive search. Setting this field to `true` (**recommended**) will recursively check through objects for sensitive data. For instance, if this field is `true` and an `Owner` object has a `getPet` method that returns a `Pet` object that contains PII or secrets (for example, `birthDate` from the options we chose), then the recipe would flag any methods that return an `Owner` because it could then return a `Pet`. If this field is set to `false`, then the recipe would only check the `Owner` class and any objects the `Owner` class extends (such as a `Person` class).
 
-* Once you've configured the recipe as you want, press the `Dry run` button and Moderne will begin searching for sensitive APIs. You'll be redirected to a page that looks like this:
+* Once you've configured the recipe as you want, press the `Dry run` button and Moderne will begin searching for sensitive APIs. You'll be redirected to a page that looks like this. On the right side of the page, you'll see what APIs returned sensitive information.
 
 <figure>
   ![](./assets/find-sensitive-results.png)
   <figcaption>_Recipe results_</figcaption>
 </figure>
 
-* You can click on any of the repositories to see what APIs return sensitive information:
-
-<figure>
-  ![](./assets/sensitive-pet-results.png)
-  <figcaption>_Example sensitive data_</figcaption>
-</figure>
-
-* Clicking on the text that is underlined will provide you with context about what sensitive data is exposed:
+* Clicking on the text that is highlighted will provide you with context about what sensitive data is exposed:
 
 <figure>
   ![](./assets/sensitive-pet-example.png)

docs/user-documentation/moderne-platform/how-to-guides/how-to-find-method-invocations-based-on-a-pattern.md

@@ -13,11 +13,6 @@ Searching for methods across a code base can not only help you learn more about
 
 In this guide, we'll give you some background on each of these recipes and then walk through the different ways you might use them.
 
-<figure>
-  ![](./assets/AIDoc.gif)
-  <figcaption></figcaption>
-</figure>
-
 ## Recipes that search for methods
 
 The Moderne marketplace has two key recipes that can help you find method invocations throughout your codebases:
@@ -76,13 +71,13 @@ The AI search is aware of the arguments inside the method invocation. If you are
 After running each of these recipes, you may want to view the results in a different way or learn more about why certain results were or were not included. To assist with this goal, Moderne offers a few data tables and visualizations you can run with the recipe results. Let's take a look at a few of them. You can find these by clicking on the `Visualization` or `Data tables` tab at the top of the recipe results page:
 
 <figure>
-  ![](./assets/ai-recipe-results.png)
+  ![](./assets/ai-tabs.png)
   <figcaption></figcaption>
 </figure>
 
 ### Find uses of method in code
 
-The find uses of method in code visualization creates a table of all the methods that match the method pattern you specified. It will give you the exact file location where a method was found and a snippet of the source code that matched. You can search for specific files or results – or you can download it as a CSV to run your own analytics against the results.
+The `find uses of method in code` visualization creates a table of all the methods that match the method pattern you specified. It will give you the exact file location where a method was found and a snippet of the source code that matched. You can search for specific files or results – or you can download it as a CSV to run your own analytics against the results.
 
 <figure>
   ![](./assets/ai-vis.png)

docs/user-documentation/moderne-platform/how-to-guides/introduction-to-type-aware-code-search.md

@@ -23,7 +23,7 @@ As an example, let's say that you are wanting to find all of the places where yo
 
 If you searched for `createFile` in GitHub, you might end up with a ton of irrelevant results as this is a fairly common method name. To find results that match the method name _and_ are from the correct library, please follow these steps:
 
-*   From the [Java Search](https://app.moderne.io/marketplace/org.openrewrite.java.search) page, scroll down and click on `Find method usages`:
+*   Navigate to the [find method usages recipe](https://app.moderne.io/recipes/org.openrewrite.java.search.FindMethods):
 
     ![](./assets/find-method-usage-empty.png)
 * (Optionally) [Filter down to a specific group of repositories](./managing-user-configured-organizations.md).
@@ -45,10 +45,10 @@ The combination of the fully qualified receiver type, the method name, and the a
 For extensive documentation on each of these components and more examples of different ways you can use method patterns to search for methods, please check out the [OpenRewrite docs](https://docs.openrewrite.org/reference/method-patterns).
 :::
 
-*   Your window should look like:
+* Your window should look like:
 
     ![](./assets/find-method-usage-full.png)
-*   Press `Dry Run` to begin the search. You will be redirected to a page that looks like:
+* Press `Dry Run` to begin the search. You will be redirected to a page that looks like:
 
     ![](./assets/find-method-usage-results.png)
 
@@ -56,9 +56,7 @@ For extensive documentation on each of these components and more examples of dif
 As the code in the SaaS is constantly changing, your results will more than likely be different.
 :::
 
-*   If you click on one of the repository names such as `eclipse/winery`, you'll be taken into the code for that repository. Lines that match the search will be underlined and marked with a magnifying glass icon. These lines match the type that was specified in the search. This means that if any other `createFile` method was invoked, you wouldn't see those results here. Instead, you will see:
-
-    ![](./assets/find-method-usage-result.png)
+* On the right side of the screen, you can see methods that exactly matched the method pattern. In other words, if a different `createFile` method was invoked in your code, you wouldn't see it here.
 
 From there, you can make intelligent decisions about the code. For instance, maybe you'll see that there aren't too many instances of this and conclude that you can safely replace it with a new `createFile` method. Or maybe you just wanted to learn how other people use it to safely use it in your new class. Regardless of what you end up doing, you can be confident that you correctly and quickly found all of the places that use this method.
 

docs/user-documentation/moderne-platform/how-to-guides/recipe-execution-and-commits-with-graphql.md

@@ -32,13 +32,13 @@ This guide assumes that you:
 
 2. Navigate to the recipe you wish to run and fill out the recipe options.
 
+3. In the top right corner of the page, click on `API examples` and select `Run a recipe`. This will provide you with the query that will be run when executing a recipe run. Additionally, the appropriate variables will be added to this query based on your organization selection from step 1.
+
 <figure>
-  ![](./assets/update-gradle-plugin-recipe-run.png)
+  ![](./assets/api-link.png)
   <figcaption></figcaption>
 </figure>
 
-3. In the top right corner of the page, click on `API examples` and select `Run a recipe`. This will provide you with the query that will be run when executing a recipe run. Additionally, the appropriate variables will be added to this query based on your organization selection from step 1.
-
 4. You can then execute a recipe with the following mutation:
 
 <Tabs>

docs/user-documentation/moderne-platform/how-to-guides/track-migrations.md

@@ -33,9 +33,11 @@ When you're done selecting the dependencies you want to look for, press the `Dry
 
 ## Understanding recipe results
 
-If you click on any of the repositories on the recipe results page, you will be redirected to a diff view. Unlike other recipes that actively change code, this recipe will highlight dependencies that depend on one of the dependencies you specified above. 
+On the right side of the page, you can see the results for the selected repository. Feel free to select different repositories to see their results. 
 
-For instance, in the following examples, we can see that `org.springframework.cloud` was highlighted by the recipe. If you mouse over the code or the magnifying glass, you can see that it was highlighted because that depends on `com.fasterxml.jackson.core`:
+Unlike other recipes that actively change code, this recipe will highlight dependencies that depend on one of the dependencies you specified above. 
+
+For instance, in the following examples, we can see that `org.springframework.boot` was highlighted by the recipe. If you click on the highlighted code, you can see that it was highlighted because that depends on `com.fasterxml.jackson.core`:
 
 <figure>
   ![](./assets/dep-insight-diff.png)

docs/user-documentation/moderne-platform/how-to-guides/vulnerable-dependencies.md

@@ -59,7 +59,7 @@ Press `Dry Run` at the bottom of the page and wait for the recipe to run. Once t
 
 ## Step 5: Examine the changes
 
-After the recipe has finished, you can click on any repository to see the changes the recipe made. Keep in mind, though, that these changes will be minimal in nature if you selected `patch` for the `maximum upgrade delta`.
+The right side of the screen shows the changes made for each repository. You can click on any repository to see the changes made. Keep in mind, though, that these changes will be minimal in nature if you selected `patch` for the `maximum upgrade delta`.
 
 <figure>
   ![Example dependency change to fix a security issue](./assets/vuln-dep-change.png)