📄 Update Help Docs on React Code Playground

ConradSollitt · ConradSollitt · commit 77cd7d7d5ca3 · 2021-03-05T02:38:21.000-08:00
diff --git a/examples/code-playground-react.htm b/examples/code-playground-react.htm
@@ -211,7 +211,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            max-width: 700px;
+            max-width: 800px;
         }
 
         .overlay input,
@@ -519,7 +519,14 @@
 
         function CodeControls(props) {
             if (props.state.selectedFile === null) {
-                return null;
+                return (
+                    <div className="code-controls">
+                        <div className="file-info"></div>
+                        <div className="buttons">
+                            <span className="btn" onClick={props.toggleShowInfo}>Info</span>
+                        </div>
+                    </div>
+                );
             }
 
             const {
@@ -604,8 +611,9 @@ <h2>Code Playground Info</h2>
                             <li>This app creates a temporary Playground Site that will be available for 1 hour.</li>
                             <li>The main version of this app exits at <a href="https://www.dataformsjs.com/en/playground" target="_blank">https://www.dataformsjs.com/en/playground</a></li>
                             <li>This is a fully functional version of the playground, however unlike the main site there is no warning when a site is about to expire and layout of this app does not provide mobile support.</li>
-                            <li>With this playground app sites are created automatically when the page is first opened.</li>
+                            <li>With this playground app sites are created automatically when the page is first opened; you do not have to click an extra button as you normally would on the main site.</li>
                             <li>This app was created to demonstrate a React version of the Playground and to provide an example file that can be used as a good starting point if you would like to develop a custom online content editor that has similar behavior.</li>
+                            <li>The temporary site key is saved to local storage so this site can be accessed both from here and the main site. To start over delete the site from the main URL then refresh this page.</li>
                         </ul>
                     </div>
                 </div>
