feat: Updated Templates Documentation

packages/projects-docs/pages/learn/devboxes/templates.mdx

@@ -1,84 +1,86 @@
 ---
 title: Templates
-authors: ['Saeris']
+authors: ['James']
 description: Use templates to kickstart new projects with no setup.
 ---
 
+import { Callout } from 'nextra-theme-docs'
+
+---
+
 # Templates
 
 ## What are Templates?
 
-Templates are starting points for Devboxes and Sandboxes. When you pick a template, you create a fork of the original project. Forked templates are already set up with the
-configuration, file structure, and dependencies installed, so you don't have to
+Templates are starting points for development environments that you create through CodeSandbox. When you pick a template, you create a fork of the original project. Forked templates are already set up with the
+configuration, file structure and installed dependencies. So you don't have to
 spend time doing this each time you begin working on something new. They
-are easily accessible from your dashboard and the "Create" modal.
+are easily accessible from the ["Create" modal](https://codesandbox.io/s).
 
-CodeSandbox offers several official templates for several different programming languages. You can find templates in the ["Create" modal](https://codesandbox.io/s).
+From the modal, CodeSandbox offers several official templates for several different programming languages.
 
-You can also create your own custom templates. Turn any Sandbox and Devbox into a template
-that's customized for your particular use-case and preferences. Once a custom
-template has been created, you can then start new projects from the "Create" modal using one of your templates. Custom templates can also be added
-to workspaces, so workspace members can make use of them.
+You can also create your own custom templates from your projects. So you can fully customize your development start points for your particular use case and preferences. Once a custom
+template has been created, you can use it to start new projects through the ["Create" modal](https://codesandbox.io/s). Custom templates can also be added
+to workspaces so workspace members can use them. Any custom templates you can access can be found in the [Templates folder](https://codesandbox.io/dashboard/templates) on the Dashboard or under 'Workspace Templates' within the modal.
 
 ## How to make a custom template
 
 There are a few ways to create a template, but the main way is from within the
-"Sandbox Info" panel inside the editor. When viewing one of your sandboxes,
-you'll see a button at the bottom of the "Sandbox Info" panel that says
-`Save as template`. Clicking this will convert the sandbox to a template, which
-will freeze it and make it available from the "Create" modal.
+"Devbox Info" panel inside the editor. When viewing one of your Devboxes,
+expand the "Devbox Info" panel on the left. You will then see an edit icon in line with the "Devbox Info" header. Click the icon and then check the 'Template' box in the settings pane that opens on the right of the interface.
 
-![Make Template from Sandbox](../images/template-1.jpg)
+<Callout>
+You can also rename and set a description for the template from this interface, as well as configure the template privacy options. Private and Unlisted Templates are only available for Pro subscribers.
+</Callout>
 
-Optionally, from the dashboard, you can either drag and drop a sandbox from
-"Overview" or one of your folders under "My Sandboxes" to the new "My Templates"
-folder. There is also an option within the sandbox options menu to
-`Make Sandbox a Template`.
+![Make Template from Devbox](../images/devbox-info-pane.png)
 
-import Image from 'next/image'
-import gif1 from '../images/template-2.gif'
-import gif2 from '../images/template-3.gif'
+You can also create templates from the Dashboard. You can do this by either dragging and dropping a Devbox from
+any folder into ["Templates"](https://codesandbox.io/dashboard/templates) or using the right-click menu and selecting
+_Make Devbox a Template_.
 
-<br/>
-<Image src={gif1} width={1438} height={790} />
-<br/>
-<br/>
-<Image src={gif2} width={1438} height={790} />
+<Callout>
+The Templates folder will only appear once you have created your first custom template.
+</Callout>
 
 ## Using Templates
 
-After you've made your first custom template, there's a few places from which
-you can access and use them. First, inside of the "Create New Sandbox" modal,
-you will see a list of your templates under `My Templates`. Clicking on one of
+After you've made your first custom template, there are a few places from which
+you can access and use them. First, inside the "Create a Devbox" modal,
+you will see a list of your templates under _Workspace Templates_. Clicking on one of
 these will fork the template and open it in the editor.
 
-![Sandbox Modal](../images/template-4.jpg)
+![Sandbox Modal](../images/devbox-template-modal.png)
 
-You can also find all of your templates under the `Templates` folder within the
-Dashboard. Clicking on any of the templates shown inside this folder will open
+You can also find all your templates under the [Templates folder](https://codesandbox.io/dashboard/templates) on the
+Dashboard. Clicking on any of the templates in this folder will open
 it in the editor.
 
 ## Editing Templates
 
-Templates are frozen upon creation, preventing you from accidentally making
-changes to it. In order to make changes to a template, unfreeze it from the
-"Sandbox Info" panel. Any time you try to make a change to a frozen template, a
-modal will prompt you to fork the template or unfreeze it for the current
-session.
+When you first create a template it will be fully editable to allow you to quickly make any required changes.
+Once you're happy with the template, open up the 'Template Info' settings using the instructions above. 
+Then, check 'Frozen' and reload the page to prevent further changes. 
+In order to make further changes to a template, you just need to uncheck 'Frozen' and reload the page again.  
+Any time you try to save a change to a frozen template, it will automatically fork into a new environment. 
 
-Any changes you make to an unfrozen Template are saved immediately. You don't
-need to freeze it again as it is automatically frozen again when you navigate
-away from the editor or finish the current sandbox session.
+<Callout>
+The 'Template Info' panel is in the same position as the 'Devbox Info' panel prior to conversion.
+</Callout>
 
 ## Deleting Templates
 
-There are a few ways in which you can "delete" a template. From the "Sandbox
-Info" panel inside the editor, there is a `Delete Template` button at the bottom
-when viewing an existing template. Clicking this will convert the template back
-to a regular sandbox, removing it from the "Create New Sandbox" modal and moving
-back to the "Overview" and "My Sandboxes" folders inside the dashboard.
+There are a few ways in which you can "delete" a template. From the "Template
+Info" panel inside the editor you can uncheck 'Template'. Doing this will convert the template back
+to a regular Devbox and remove it from the ["Create" modal](https://codesandbox.io/s).
+
+You can then delete the Devbox from your dashboard as you would normally. 
+
+Alternatively, you can use the 'right click' template's options menu inside the [Templates folder](https://codesandbox.io/dashboard/templates)
+folder to select _Convert to Devbox_.
 
-Alternatively, you can use a template's options menu inside the "My Templates"
-folder to select `Convert to Sandbox`.
+![Delete template from dashboard](../images/devbox-template-menu.png)
 
-![Delete template from dashboard](../images/template-6.jpg)
+<Callout>
+This menu is only available within the Templates folder.
+</Callout>

packages/projects-docs/pages/learn/sandboxes/templates.mdx

@@ -1,14 +1,85 @@
 ---
 title: Templates
-authors: ['necoline']
-description: About sandbox templates.
+authors: ['James']
+description: Use templates to kickstart new projects with no setup.
 ---
 
-# Sandbox Templates
+import { Callout } from 'nextra-theme-docs'
 
-In the sandbox template modal, you will find the official list of sandbox templates along with any templates that have been created or imported within the workspace.
+---
+
+# Templates
+
+## What are Templates?
+
+Templates are starting points for development environments that you create through CodeSandbox. When you pick a template, you create a fork of the original project. Forked templates are already set up with the
+configuration, file structure and installed dependencies. So you don't have to
+spend time doing this each time you begin working on something new. They
+are easily accessible from the ["Create" modal](https://codesandbox.io/s).
+
+From the modal, CodeSandbox offers several official templates for several different programming languages.
+
+You can also create your own custom templates from your projects. So you can fully customize your development start points for your particular use case and preferences. Once a custom
+template has been created, you can use it to start new projects through the ["Create" modal](https://codesandbox.io/s). Custom templates can also be added to workspaces so members can use them. Any custom templates you can access can be found in the [Templates folder](https://codesandbox.io/dashboard/templates) or under 'Workspace Templates' within the modal.
+
+## How to make a custom template
+
+There are a few ways to create a template, but the main way is from within the
+"Sandbox Info" panel inside the editor. When viewing one of your Sandboxes,
+expand the "Sandbox Info" panel on the left. You will then see an edit icon in line with the "Sandbox Info" header. Just click the icon and then check the 'Template' box in the settings pane that opens on the right of the editor.
+
+<Callout>
+You can also rename and set a description for the template from this interface, as well as configure the template privacy options. Private and Unlisted Templates are only available for Pro subscribers.
+</Callout>
+
+![Make a Template from a Sandbox](../images/devbox-info-pane.png)
+
+You can also create templates from the Dashboard. You can do this by either dragging and dropping a Sandbox from
+any folder into ["Templates"](https://codesandbox.io/dashboard/templates) or using the right-click menu and selecting
+_Make Sandbox a Template_.
+
+<Callout>
+The Templates folder will only appear once you have created your first custom template. 
+</Callout>
+
+## Using Templates
+
+After you've made your first custom template, there are a few places from which
+you can access and use them. First, inside the "Create a Sandbox" modal,
+you will see a list of your templates under `Workspace Templates`. Clicking on one of
+these will fork the template and open it in the editor.
+
+![Sandbox Modal](../images/sandbox-template-modal.png)
+
+You can also find all of your templates under the [Templates folder](https://codesandbox.io/dashboard/templates) on the
+Dashboard. Clicking on any of the templates in this folder will open
+it in the editor.
+
+## Editing Templates
+
+When you first create a template it will be fully editable to allow you to quickly make any required changes.
+Once you're happy with the template, just open up the 'Template Info' settings using the instructions above. 
+Then, check 'Frozen' and reload the page to prevent further changes. 
+In order to make further changes to a template, you just need to uncheck 'Frozen' and reload the page again.  
+Any time you try to save a change to a frozen template, it will automatically fork into a new environment. 
+
+<Callout>
+The 'Template Info' panel is in the same position as the 'Sandbox Info' panel prior to conversion.
+</Callout>
+
+## Deleting Templates
+
+There are a few ways in which you can "delete" a template. From the "Template
+Info" panel inside the editor, you can uncheck 'Template'. Doing this will convert the template back
+to a regular Sandbox and remove it from the ["Create" modal](https://codesandbox.io/s).
+
+You can then delete the Sandbox from your Dashboard as you would normally. 
 
-![sandbox templates](../images/sandbox-modal.png)
-If you are unable to find the template you are looking for, check out the devbox templates. There are many more languages and frameworks that devboxes support.
+Alternatively, you can use the 'right click' template's options menu inside the [Templates folder](https://codesandbox.io/dashboard/templates)
+folder to select _Convert to Sandbox_.
 
+![Delete template from dashboard](../images/template-folder-menu.png)
 
+<Callout>
+This menu is only available within the Templates folder.
+</Callout>