diff --git a/assets/images/help/codespaces/change-machine-type-menu-option.png b/assets/images/help/codespaces/change-machine-type-menu-option.png index 657e6b207e..f6a61c2d9a 100644 Binary files a/assets/images/help/codespaces/change-machine-type-menu-option.png and b/assets/images/help/codespaces/change-machine-type-menu-option.png differ diff --git a/assets/images/help/codespaces/default-machine-type.png b/assets/images/help/codespaces/default-machine-type.png index ebf9618e42..d0c0bf7dbc 100644 Binary files a/assets/images/help/codespaces/default-machine-type.png and b/assets/images/help/codespaces/default-machine-type.png differ diff --git a/assets/images/help/codespaces/delete-codespace.png b/assets/images/help/codespaces/delete-codespace.png index f84f267a19..f9da915488 100644 Binary files a/assets/images/help/codespaces/delete-codespace.png and b/assets/images/help/codespaces/delete-codespace.png differ diff --git a/assets/images/help/codespaces/export-changes-to-a-branch.png b/assets/images/help/codespaces/export-changes-to-a-branch.png index f5391541c2..3f13e4a3b3 100644 Binary files a/assets/images/help/codespaces/export-changes-to-a-branch.png and b/assets/images/help/codespaces/export-changes-to-a-branch.png differ diff --git a/assets/images/help/codespaces/new-codespace-button.png b/assets/images/help/codespaces/new-codespace-button.png index 57c856eb49..feb162863e 100644 Binary files a/assets/images/help/codespaces/new-codespace-button.png and b/assets/images/help/codespaces/new-codespace-button.png differ diff --git a/assets/images/help/codespaces/open-with-codespaces-pr.png b/assets/images/help/codespaces/open-with-codespaces-pr.png index eccf23d8b5..7159d06c3b 100644 Binary files a/assets/images/help/codespaces/open-with-codespaces-pr.png and b/assets/images/help/codespaces/open-with-codespaces-pr.png differ diff --git a/assets/images/help/codespaces/retention-deletion-message.png b/assets/images/help/codespaces/retention-deletion-message.png index 62b190f7f5..74cb0eb238 100644 Binary files a/assets/images/help/codespaces/retention-deletion-message.png and b/assets/images/help/codespaces/retention-deletion-message.png differ diff --git a/assets/images/help/codespaces/stop-codespace-webui.png b/assets/images/help/codespaces/stop-codespace-webui.png index 8b722c1c99..f9837644ef 100644 Binary files a/assets/images/help/codespaces/stop-codespace-webui.png and b/assets/images/help/codespaces/stop-codespace-webui.png differ diff --git a/components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/dotnet.tsx b/components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/dotnet.tsx index e7cf699b4e..ee5a7c2094 100644 --- a/components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/dotnet.tsx +++ b/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) diff --git a/components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/java.tsx b/components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/java.tsx index b76d195fd9..9082ad2843 100644 --- a/components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/java.tsx +++ b/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) diff --git a/components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/nodejs.tsx b/components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/nodejs.tsx index 972664becd..4c63305db0 100644 --- a/components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/nodejs.tsx +++ b/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) diff --git a/components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/python.tsx b/components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/python.tsx index 8372d82474..5910e1abd7 100644 --- a/components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/python.tsx +++ b/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) diff --git a/content/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository.md b/content/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository.md index 6603c79df6..e4492c0bb6 100644 --- a/content/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository.md +++ b/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 %} diff --git a/content/codespaces/developing-in-codespaces/using-github-codespaces-for-pull-requests.md b/content/codespaces/developing-in-codespaces/using-github-codespaces-for-pull-requests.md index 2878e9f096..ef83a33004 100644 --- a/content/codespaces/developing-in-codespaces/using-github-codespaces-for-pull-requests.md +++ b/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) diff --git a/content/codespaces/setting-up-your-project-for-codespaces/adding-a-codespaces-badge.md b/content/codespaces/setting-up-your-project-for-codespaces/adding-a-codespaces-badge.md index 2b63f0b3e8..36e4e0ae51 100644 --- a/content/codespaces/setting-up-your-project-for-codespaces/adding-a-codespaces-badge.md +++ b/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. diff --git a/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-dotnet-project-for-codespaces.md b/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-dotnet-project-for-codespaces.md index 180df6e454..43cbbf8871 100644 --- a/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-dotnet-project-for-codespaces.md +++ b/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) diff --git a/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-java-project-for-codespaces.md b/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-java-project-for-codespaces.md index 1dc01cbdbf..954d74025b 100644 --- a/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-java-project-for-codespaces.md +++ b/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) diff --git a/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-nodejs-project-for-codespaces.md b/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-nodejs-project-for-codespaces.md index 115e4275c9..b46287cc47 100644 --- a/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-nodejs-project-for-codespaces.md +++ b/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) diff --git a/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces.md b/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces.md index 0d63dbf043..6b6e352488 100644 --- a/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces.md +++ b/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)