Update secrets text

Author: garethx

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

@@ -8,16 +8,15 @@ description:
 ## What are secrets?
 
 Secrets are used to hide sensitive information in your application that you
-don't want the world to see, and are implemented in CodeSandbox using
-environment variables. The most common use case for using secrets is with API
-keys.
+don't want the world to see, like passwords and API keys. They're implemented in CodeSandbox using
+environment variables.
 
-Secrets values will not be transferred between forks and **can only be used in
+Secrets are not be transferred between forks and **can only be used in
 container sandboxes**.
 
-## Adding secrets in CodeSandbox
+## Adding secrets
 
-You can control the secrets in your Server Control Panel, before adding any it
+You can add secrets in a container sandbox from the Server Control Panel. Before adding any, it
 should look like this:
 
 ![No Secrets](./images/secrets-1.png)
@@ -26,49 +25,33 @@ Let's say you want to add a Google Maps API key. You can do it like so:
 
 ![Map Secrets](./images/secrets-2.png)
 
-Pro tip: It's always a good practice to name your secrets all in uppercase.
+Pro tip: It's good practice to name your secrets all in uppercase.
 
-After clicking the "Save Secret" button the secret is added, the sandbox is
+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)
 
-As said earlier, secrets are environment variables, meaning they are defined on
+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`.
+`process.env.GOOGLE_MAPS_API_KEY`. See the example below, showing how to access secrets in your server-side code.
 
-Like so:
+<iframe
+     src="https://codesandbox.io/embed/broken-resonance-35lyl?codemirror=1&fontsize=14&hidenavigation=1&theme=dark"
+     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="broken-resonance-35lyl"
+     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+   ></iframe>
 
-```js
-var http = require('http');
+## Editing secrets
 
-const key = process.env.GOOGLE_MAPS_API_KEY;
-
-http
-  .createServer(function(req, res) {
-    res.write('This your maps key' + key);
-    res.end(); //end the response
-  })
-  .listen(8080);
-```
-
-The sandbox used is
-[https://codesandbox.io/s/2v6xq474kj](https://codesandbox.io/s/2v6xq474kj)
-
-## Editing secrets in CodeSandbox
-
-Our UI also gives you the option to edit or even remove a secret, by hovering
-the secret you want to edit you will see these two icons:
+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)
 
-If you click on the pencil you will see it will turn into a form again where you
-can edit the name and value of your secret:
-
-![Icons](./images/secrets-5.png)
-
-This will take effect automatically and it will also restart your sandbox to
+Once saved, this will take effect automatically, restarting your sandbox to
 make sure we use the new value.
 
-To delete you can click on the `x` icon after the pencil one and this one will
+To delete you can click on the `x` icon. This will
 also restart your sandbox.