Updated docs screenshots, text, and styling (codesandbox#3834)

* Update blue shad in headers to use design system blue

* Update blog header share to match design system blue

* Updating live text to reflect recent changes

* Delete configuration.png

* Delete create-wizard.png

* Delete deployment-sidebar.png

* Delete github-sidebar.png

* Delete live-classroom.png

* Delete live-live.png

* Delete sandbox-private.png

* Delete secrets-1.png

* Delete secrets-2.png

* Delete share-button.png

* Delete upload.png

* Updated screenshots

* Delete 1.png

* Delete 4.png

* Delete 6.png

* Updated template images

* Updating text

* Delete live-make-spectator.png

* Delete live-make-editor.png

* Delete secrets-3.png

* Delete secrets-4.png

* Update packages/homepage/content/docs/2-live.md

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/homepage/content/docs/5-secrets.md

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/homepage/content/docs/2-live.md

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/homepage/content/docs/2-live.md

Co-Authored-By: Michaël De Boey <[email protected]>

* Added new Images and Tweaked CSS some what

Added new Images and Tweaked CSS some what

* updated images

* Added new images

Added new images

Co-authored-by: Michaël De Boey <[email protected]>
Co-authored-by: Danny Ruchtie <[email protected]>

Author: 3 people

packages/homepage/content/docs/2-live.md

@@ -7,20 +7,24 @@ description:
 
 ## What is Live?
 
-Live is a mode in CodeSandbox that allows you to share your sandbox with others
-for real time collaboration on code. You can simultaneously create, delete, edit
-and move files and code with others in a sandbox, as well as chat about your
-changes. It's like Google Docs, but for coding.
+All sandboxes on CodeSandbox are live, meaning you can share your sandbox with
+others for real time collaboration on code. You can simultaneously create,
+delete, edit for real time collaboration on code. You can simultaneously create,
+delete, edit and move files and code with others in a sandbox, as well as chat
+about your and move files and code with others in a sandbox, as well as chat
+about your changes. It's like Google Docs, but for coding. changes. It's like
+Google Docs, but for coding.
 
-![Live mode](./images/live-screenshot.png)
+![Live mode](./images/live-screenshot.png?v1)
 
 ## Going Live
 
-You can go live by pressing the 'Go Live' button under the Live tab in the
-left-hand activity bar in the editor. This will give you a URL that you can
-share with others to join the session. Invited editors can only make edits to
-the sandbox while they are in the live session, they cannot do this when just
-viewing the sandbox.
+All sandboxes are live by default, you can invite contributors to join the
+sandbox using the share button from the top bar in the editor. In addition, if
+you go to the Live tab from the activity bar, you can get a Live URL to share
+with guests (non-members of the sandbox) so they can temporarily join the
+session. Guest editors can only make edits to the sandbox while they are in the
+live session, they cannot do this when just viewing the sandbox.
 
 Invited editors can simultaneously edit, create, rename and update files and
 code, as well as add and remove dependencies. You can also see which file other
@@ -38,10 +42,5 @@ You can enable Classroom Mode from the Live Mode drop-down menu.
 
 ![Classroom mode](./images/live-classroom.png)
 
-You can give someone editor rights by pressing the '+' icon next to their name.
-
-![Going Live](./images/live-make-editor.png)
-
-You can make someone a spectator by clicking the '-' icon next to their name.
-
-![Going Live](./images/live-make-spectator.png)
+You can give someone editor rights by pressing the '+' icon next to their name,
+or you can make someone a spectator by clicking the '-' icon next to their name.

packages/homepage/content/docs/2-tests.md

@@ -40,7 +40,7 @@ A failed test looks like this in the Test View:
 
 And will also show squiggles in the editor:
 
-![Test Squiggles](./images/jest-squiggles.png)
+![Test Squiggles](./images/jest-squiggles.png?v2)
 
 ## Example
 

packages/homepage/content/docs/3-uploading.md

@@ -30,7 +30,7 @@ You can use an uploaded file in multiple sandboxes at the same time. For this
 reason we have a separate 'Storage Management' that allows you to see which
 files you have uploaded. You can find the manager in your user menu.
 
-![Storage Management in User Menu](./images/storage-management-user.png)
+![Storage Management in User Menu](./images/storage-management-users.png?v2)
 
 You are able to view your storage usage with the option to either open uploaded
 files, add uploaded files to the opened sandbox or to delete an uploaded file.

packages/homepage/content/docs/5-secrets.md

@@ -30,12 +30,11 @@ Pro tip: It's good practice to name your secrets all in uppercase.
 After clicking the "Add Secret" button the secret is added, the sandbox is
 restarted, and you can see the list of all your secrets above the form.
 
-![Secrets](./images/secrets-3.png)
-
 Secrets are environment variables, meaning they are defined on `process.env`. In
 the example above, we can read the API key from
 `process.env.GOOGLE_MAPS_API_KEY`. See the example below, showing how to access
-secrets in your server-side code.
+secrets in your server-side code (though obviously you wouldn't want to share a
+secret like this, it justs illustrates how to access them).
 
 <iframe
      src="https://codesandbox.io/embed/broken-resonance-35lyl?codemirror=1&fontsize=14&hidenavigation=1&theme=dark"
@@ -48,9 +47,7 @@ secrets in your server-side code.
 ## Editing secrets
 
 You can edit and remove existing secrets. Click on the pencil to edit the name
-and value of your secret:
-
-![Icons](./images/secrets-4.png)
+and value of your secret.
 
 Once saved, this will take effect automatically, restarting your sandbox to make
 sure we use the new value.