clean

2 files changed, 98 insertions, 89 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index ed77f29ad..7661f5aff 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -123,7 +123,7 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
                 <div className="gif-container" style={{ display: this.State?.[StateMessageGIF] ? undefined : 'none' }}>
                     <span id="dots"></span>
                     <img id="gif" className="gif" src={`/assets/${this.State?.[StateMessageGIF]}`} alt="state message gif"></img>
-                    <button onClick={() => this.toggleGIF()} id="toggle-gif">
+                    <button id="toggle-gif" onClick={() => this.toggleGIF()}>
                         Show less
                     </button>
                 </div>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 9ced90a00..f416b61ac 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -76,112 +76,118 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         const presentationMode = () => Doc.ActivePresentation?.presentation_status;
 
         // set of states
-        const start = InfoState('Click anywhere and begin typing to create your first text document.', {
-          docCreated: [() => numDocs(), () => {
-            docX = firstDoc()?.x;
-            docY = firstDoc()?.y;
-            return oneDoc;
-          }],
-        }); // prettier-ignore
+        const start = InfoState(
+            'Click anywhere and begin typing to create your first text document.',
+            {
+                docCreated: [() => numDocs(), () => {
+                    docX = firstDoc()?.x;
+                    docY = firstDoc()?.y;
+                    return oneDoc;
+                }],
+            }
+        ); // prettier-ignore
 
-        const oneDoc = InfoState('Hello world! You can drag and drop to move your document around.', {
-          // docCreated: [() => numDocs() > 1, () => multipleDocs],
-          docDeleted: [() => numDocs() < 1, () => start],
-          docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-            docX = firstDoc()?.x;
-            docY = firstDoc()?.y;
-            return movedDoc1;
-          }],
-        }); // prettier-ignore
+        const oneDoc = InfoState(
+            'Hello world! You can drag and drop to move your document around.',
+            {
+                // docCreated: [() => numDocs() > 1, () => multipleDocs],
+                docDeleted: [() => numDocs() < 1, () => start],
+                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
+                    docX = firstDoc()?.x;
+                    docY = firstDoc()?.y;
+                    return movedDoc1;
+                }],
+            }
+        ); // prettier-ignore
 
         const movedDoc1 = InfoState(
-          'Great moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
-          {
-            docCreated: [() => numDocs() == 2, () => multipleDocs],
-            docDeleted: [() => numDocs() < 1, () => start],
-            docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-              docX = firstDoc()?.x;
-              docY = firstDoc()?.y;
-              return movedDoc2;
-            }],
-          },
-          'dash-colon-menu.gif',
-          () => TopBar.Instance.FlipDocumentationIcon()
+            'Great moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+            {
+                docCreated: [() => numDocs() == 2, () => multipleDocs],
+                docDeleted: [() => numDocs() < 1, () => start],
+                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
+                    docX = firstDoc()?.x;
+                    docY = firstDoc()?.y;
+                    return movedDoc2;
+                }],
+            },
+            'dash-colon-menu.gif',
+            () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const movedDoc2 = InfoState(
-          'Slick moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
-          {
-            docCreated: [() => numDocs() == 2, () => multipleDocs],
-            docDeleted: [() => numDocs() < 1, () => start],
-            docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-              docX = firstDoc()?.x;
-              docY = firstDoc()?.y;
-              return movedDoc3;
-            }],
-          },
-          'dash-colon-menu.gif',
-          () => TopBar.Instance.FlipDocumentationIcon()
+            'Slick moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+            {
+                docCreated: [() => numDocs() == 2, () => multipleDocs],
+                docDeleted: [() => numDocs() < 1, () => start],
+                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
+                    docX = firstDoc()?.x;
+                    docY = firstDoc()?.y;
+                    return movedDoc3;
+                }],
+            },
+            'dash-colon-menu.gif',
+            () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const movedDoc3 = InfoState(
-          'Groovy moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
-          {
-            docCreated: [() => numDocs() == 2, () => multipleDocs],
-            docDeleted: [() => numDocs() < 1, () => start],
-            docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-              docX = firstDoc()?.x;
-              docY = firstDoc()?.y;
-              return movedDoc1;
-            }],
-          },
-          'dash-colon-menu.gif',
-          () => TopBar.Instance.FlipDocumentationIcon()
+            'Groovy moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+            {
+                docCreated: [() => numDocs() == 2, () => multipleDocs],
+                docDeleted: [() => numDocs() < 1, () => start],
+                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
+                    docX = firstDoc()?.x;
+                    docY = firstDoc()?.y;
+                    return movedDoc1;
+                }],
+            },
+            'dash-colon-menu.gif',
+            () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const multipleDocs = InfoState(
-          'Let\'s create a new link. Click the link icon on one of your documents.',
-          {
-            linkStarted: [() => linkStart(), () => startedLink],
-            docRemoved: [() => numDocs() < 2, () => oneDoc],
-          },
-          'dash-create-link-board.gif'
+            'Let\'s create a new link. Click the link icon on one of your documents.',
+            {
+                linkStarted: [() => linkStart(), () => startedLink],
+                docRemoved: [() => numDocs() < 2, () => oneDoc],
+            },
+            'dash-create-link-board.gif'
         ); // prettier-ignore
 
         const startedLink = InfoState(
-          'Now click the highlighted link icon on your other document.',
-          {
-            linkCreated: [() => numDocLinks(), () => madeLink],
-            docRemoved: [() => numDocs() < 2, () => oneDoc],
-          },
-          'dash-create-link-board.gif'
+            'Now click the highlighted link icon on your other document.',
+            {
+                linkCreated: [() => numDocLinks(), () => madeLink],
+                docRemoved: [() => numDocs() < 2, () => oneDoc],
+            },
+            'dash-create-link-board.gif'
         ); // prettier-ignore
 
         const madeLink = InfoState(
-          'You made your first link! You can view your links by selecting the blue dot.',
-          {
-            linkCreated: [() => !numDocLinks(), () => multipleDocs],
-            linkViewed: [() => linkMenuOpen(), () => {
-              alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
-              return viewedLink;
-            }],
-          },
-          'dash-following-link.gif'
+            'You made your first link! You can view your links by selecting the blue dot.',
+            {
+                linkCreated: [() => !numDocLinks(), () => multipleDocs],
+                linkViewed: [() => linkMenuOpen(), () => {
+                    alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
+                    return viewedLink;
+                }],
+            },
+            'dash-following-link.gif'
         ); // prettier-ignore
 
         const viewedLink = InfoState(
-          'Great work. You are now ready to create your own hypermedia world. Click the blinking question mark to learn more.',
-          {
-            linkDeleted: [() => !numDocLinks(), () => multipleDocs],
-            docRemoved: [() => numDocs() < 2, () => oneDoc],
-            docCreated: [() => numDocs() == 3, () => {
-                trail = pin().length;
-                return presentDocs;
-            }],
-            activePen: [() => activeTool() === InkTool.Pen, () => penMode],
-          },
-          'documentation.png',
-          () => TopBar.Instance.FlipDocumentationIcon()
+            'Great work. You are now ready to create your own hypermedia world. Click the ? icon in the top right corner to learn more.',
+            {
+                linkDeleted: [() => !numDocLinks(), () => multipleDocs],
+                docRemoved: [() => numDocs() < 2, () => oneDoc],
+                docCreated: [() => numDocs() == 3, () => {
+                    trail = pin().length;
+                    return presentDocs;
+                }],
+                activePen: [() => activeTool() === InkTool.Pen, () => penMode],
+            },
+            'documentation.png',
+            () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const presentDocs = InfoState(
@@ -275,9 +281,12 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             docCreated: [() => numDocs() == 4, () => completed],
         });
 
-        const completed = InfoState('Eager to learn more? Click the ? icon in the top right corner to read our full documentation.', {
-            docRemoved: [() => numDocs() == 1, () => oneDoc],
-        }); // prettier-ignore
+        const completed = InfoState(
+            'Eager to learn more? Click the ? icon in the top right corner to read our full documentation.',
+            { docRemoved: [() => numDocs() == 1, () => oneDoc] },
+            'documentation.png',
+            () => TopBar.Instance.FlipDocumentationIcon()
+        ); // prettier-ignore
 
         return start;
     };