Merge pull request #32401 from github/jules-8015

updates screenshots

components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/dotnet.tsx

@@ -29,7 +29,7 @@ const article: PlaygroundArticleT = {
       type: 'default',
       title: 'Step 1: Open your project in a codespace',
       content: dedent`
-        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click **Create codespace on BRANCH**.
+        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click the plus sign (+).
 
             ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
 

components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/java.tsx

@@ -29,7 +29,7 @@ const article: PlaygroundArticleT = {
       type: 'default',
       title: 'Step 1: Open your project in a codespace',
       content: dedent`
-        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click **Create codespace on BRANCH**.
+        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click the plus sign (+).
 
             ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
 

components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/nodejs.tsx

@@ -29,7 +29,7 @@ const article: PlaygroundArticleT = {
       type: 'default',
       title: 'Step 1: Open your project in a codespace',
       content: dedent`
-        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click **Create codespace on BRANCH**.
+        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click the plus sign (+).
 
            ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
 

components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/python.tsx

@@ -29,7 +29,7 @@ const article: PlaygroundArticleT = {
       type: 'default',
       title: 'Step 1: Open your project in a codespace',
       content: dedent`
-        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click **Create codespace on BRANCH**.
+        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click the plus sign (+).
 
            ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
 

content/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository.md

@@ -76,24 +76,16 @@ If you want to use Git hooks for your codespace, then you should set up hooks us
  
    * **Use the default options**
 
-      To create a codespace using the default options, click **Create codespace on BRANCH**.
-
-      Optionally, before clicking **Create codespace on BRANCH**, you can click the down arrow at the side of the button to see what machine type will be used for your codespace.
-
-      ![View the default machine type](/assets/images/help/codespaces/default-machine-type.png)
-
-      {% note %}
-
-      **Note**: The machine type with the lowest resources that are valid for the repository is selected by default.
-
-      {% endnote %}
+      To create a codespace using the default options, click the plus sign ({% octicon "plus" aria-label="The plus icon" %}). Alternatively, if you don't currently have any codespaces for this repository, you can click **Create codespace on BRANCH**.
 
    * **Configure options**
 
       To configure advanced options for your codespace, such as a different machine type or a particular `devcontainer.json` file:
 
-      1. Click the down arrow at the side of the **Create codespace on BRANCH** button, then click **Configure and create codespace**.
-      1. Click the **Configure and create codespace** button.
+      1. Click the ellipsis (**...**) at the top right of the **Codespaces** tab and select **New with options**.
+
+      ![View the default machine type](/assets/images/help/codespaces/default-machine-type.png)
+
       1. On the options page for your codespace, choose your preferred options from the dropdown menus.
 
          ![The codespace options page](/assets/images/help/codespaces/advanced-options.png)
@@ -110,7 +102,7 @@ If you want to use Git hooks for your codespace, then you should set up hooks us
       
          {% endnote %}
 
-      1. Click **Start session**.
+      1. Click **Create codespace**.
 
 {% endwebui %}
    

content/codespaces/developing-in-codespaces/using-github-codespaces-for-pull-requests.md

@@ -28,7 +28,7 @@ redirect_from:
 
 1. In the list of pull requests, click the pull request you'd like to open in {% data variables.product.prodname_codespaces %}.
 1. On the right-hand side of your screen, click **{% octicon "code" aria-label="The code icon" %} Code**. 
-1. In the {% data variables.product.prodname_codespaces %} tab, click **Create codespace on BRANCH**.
+1. In the {% data variables.product.prodname_codespaces %} tab, click the plus sign ({% octicon "plus" aria-label="The plus icon" %})
 
    ![Option to open PR in a codespace](/assets/images/help/codespaces/open-with-codespaces-pr.png)
 

content/codespaces/setting-up-your-project-for-codespaces/adding-a-codespaces-badge.md

@@ -35,9 +35,9 @@ From the advanced options page, users can change the preselected settings if req
 
    ![Screenshot of the New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
 
-1. Click the down arrow at the side of the **Create codespace on BRANCH** button, click **Configure and create codespace**, then click the **Configure and create codespace** button.
+1. Click the ellipsis (**...**) at the top right of the **Codespaces** tab, then click **New with options**.
 
-   ![Screenshot of the "Configure and create codespace" option](/assets/images/help/codespaces/configure-and-create-option.png)
+   ![Screenshot of the "Configure and create codespace" option](/assets/images/help/codespaces/default-machine-type.png)
 
 1. On the advanced options page for codespace creation, select the values you want to be preselected in each field.
 

content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-dotnet-project-for-codespaces.md

@@ -25,7 +25,7 @@ This guide shows you how to set up your C# (.NET) project {% data reusables.code
 
 ## Step 1: Open your project in a codespace
 
-1. Under the repository name, use the **{% octicon "code" aria-label="The code icon" %} Code** dropdown menu, and in the **Codespaces** tab, click **Create codespace on main**.
+1. Under the repository name, use the **{% octicon "code" aria-label="The code icon" %} Code** dropdown menu, and in the **Codespaces** tab, click the plus sign ({% octicon "plus" aria-label="The plus icon" %}).
 
   ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
 

content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-java-project-for-codespaces.md

@@ -25,7 +25,7 @@ This guide shows you how to set up your Java project {% data reusables.codespace
 
 ## Step 1: Open your project in a codespace
 
-1. Under the repository name, use the **{% octicon "code" aria-label="The code icon" %} Code** dropdown menu, and in the **Codespaces** tab, click **Create codespace on main**.
+1. Under the repository name, use the **{% octicon "code" aria-label="The code icon" %} Code** dropdown menu, and in the **Codespaces** tab, click the plus sign ({% octicon "plus" aria-label="The plus icon" %}).
 
   ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
 

content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-nodejs-project-for-codespaces.md

@@ -31,7 +31,7 @@ This guide shows you how to set up your JavaScript, Node.js, or TypeScript proje
 
 ## Step 1: Open your project in a codespace
 
-1. Under the repository name, use the **{% octicon "code" aria-label="The code icon" %} Code** dropdown menu, and in the **Codespaces** tab, click **Create codespace on main**.
+1. Under the repository name, use the **{% octicon "code" aria-label="The code icon" %} Code** dropdown menu, and in the **Codespaces** tab, click the plus sign ({% octicon "plus" aria-label="The plus icon" %}).
 
    ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
 

content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces.md

@@ -28,7 +28,7 @@ This guide shows you how to set up your Python project {% data reusables.codespa
 
 ## Step 1: Open your project in a codespace
 
-1. Under the repository name, use the **{% octicon "code" aria-label="The code icon" %} Code** dropdown menu, and in the **Codespaces** tab, click **Create codespace on main**.
+1. Under the repository name, use the **{% octicon "code" aria-label="The code icon" %} Code** dropdown menu, and in the **Codespaces** tab, click the plus sign ({% octicon "plus" aria-label="The plus icon" %}).
 
   ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)