From de0e32f6a303a2ab1e72a6cd7a2799f9b8f2a87d Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 24 Jul 2020 18:11:10 -0300
Subject: [PATCH 01/50] :rotating_light: ignore proptype errors

---
 .../modules/IDE/components/EditableInput.jsx  |  21 +-
 client/modules/IDE/components/NewFileForm.jsx |  26 ++-
 .../modules/IDE/components/NewFolderForm.jsx  |  26 ++-
 client/modules/IDE/pages/IDEView.jsx          | 216 +++++++++++-------
 client/modules/IDE/pages/MobileIDEView.jsx    |  81 ++++---
 client/modules/Mobile/MobileExamples.jsx      |  16 ++
 client/modules/User/components/APIKeyForm.jsx |  48 ++--
 .../modules/User/components/AccountForm.jsx   |  87 +++----
 client/modules/User/components/LoginForm.jsx  |  40 ++--
 .../User/components/NewPasswordForm.jsx       |  39 ++--
 .../User/components/ResetPasswordForm.jsx     |  34 ++-
 client/modules/User/components/SignupForm.jsx |  63 +++--
 client/routes.jsx                             |   2 +
 server/routes/server.routes.js                |  14 +-
 14 files changed, 454 insertions(+), 259 deletions(-)
 create mode 100644 client/modules/Mobile/MobileExamples.jsx

diff --git a/client/modules/IDE/components/EditableInput.jsx b/client/modules/IDE/components/EditableInput.jsx
index c10f3d70..64f38222 100644
--- a/client/modules/IDE/components/EditableInput.jsx
+++ b/client/modules/IDE/components/EditableInput.jsx
@@ -5,13 +5,20 @@ import EditIcon from '../../../images/pencil.svg';
 
 // TODO I think this needs a description prop so that it's accessible
 function EditableInput({
-  validate, value, emptyPlaceholder, InputComponent, inputProps, onChange
+  validate,
+  value,
+  emptyPlaceholder,
+  InputComponent,
+  inputProps,
+  onChange,
 }) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [currentValue, setCurrentValue] = React.useState(value || '');
   const displayValue = currentValue || emptyPlaceholder;
   const hasValue = currentValue !== '';
-  const classes = `editable-input editable-input--${isEditing ? 'is-editing' : 'is-not-editing'} editable-input--${hasValue ? 'has-value' : 'has-placeholder'}`;
+  const classes = `editable-input editable-input--${
+    isEditing ? 'is-editing' : 'is-not-editing'
+  } editable-input--${hasValue ? 'has-value' : 'has-placeholder'}`;
   const inputRef = React.createRef();
 
   React.useEffect(() => {
@@ -54,7 +61,11 @@ function EditableInput({
         aria-label={`Edit ${displayValue} value`}
       >
         <span>{displayValue}</span>
-        <EditIcon className="editable-input__icon" focusable="false" aria-hidden="true" />
+        <EditIcon
+          className="editable-input__icon"
+          focusable="false"
+          aria-hidden="true"
+        />
       </button>
 
       <InputComponent
@@ -68,7 +79,7 @@ function EditableInput({
         ref={inputRef}
         value={currentValue}
       />
-    </span >
+    </span>
   );
 }
 
@@ -84,7 +95,7 @@ EditableInput.propTypes = {
   emptyPlaceholder: PropTypes.string,
   InputComponent: PropTypes.elementType,
   // eslint-disable-next-line react/forbid-prop-types
-  inputProps: PropTypes.object,
+  inputProps: PropTypes.object, // eslint-disable-line
   onChange: PropTypes.func.isRequired,
   validate: PropTypes.func,
   value: PropTypes.string,
diff --git a/client/modules/IDE/components/NewFileForm.jsx b/client/modules/IDE/components/NewFileForm.jsx
index 9c0234f7..3a5c102a 100644
--- a/client/modules/IDE/components/NewFileForm.jsx
+++ b/client/modules/IDE/components/NewFileForm.jsx
@@ -15,7 +15,10 @@ class NewFileForm extends React.Component {
   }
 
   render() {
-    const { fields: { name }, handleSubmit } = this.props;
+    const {
+      fields: { name },
+      handleSubmit,
+    } = this.props;
     return (
       <form
         className="new-file-form"
@@ -25,7 +28,9 @@ class NewFileForm extends React.Component {
         }}
       >
         <div className="new-file-form__input-wrapper">
-          <label className="new-file-form__name-label" htmlFor="name">Name:</label>
+          <label className="new-file-form__name-label" htmlFor="name">
+            Name:
+          </label>
           <input
             className="new-file-form__name-input"
             id="name"
@@ -33,14 +38,15 @@ class NewFileForm extends React.Component {
             placeholder="Name"
             maxLength="128"
             {...domOnlyProps(name)}
-            ref={(element) => { this.fileName = element; }}
+            ref={(element) => {
+              this.fileName = element;
+            }}
           />
-          <Button
-            type="submit"
-          >Add File
-          </Button>
+          <Button type="submit">Add File</Button>
         </div>
-        {name.touched && name.error && <span className="form-error">{name.error}</span>}
+        {name.touched && name.error && (
+          <span className="form-error">{name.error}</span>
+        )}
       </form>
     );
   }
@@ -48,11 +54,11 @@ class NewFileForm extends React.Component {
 
 NewFileForm.propTypes = {
   fields: PropTypes.shape({
-    name: PropTypes.object.isRequired
+    name: PropTypes.object.isRequired, // eslint-disable-line
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,
   createFile: PropTypes.func.isRequired,
-  focusOnModal: PropTypes.func.isRequired
+  focusOnModal: PropTypes.func.isRequired,
 };
 
 export default NewFileForm;
diff --git a/client/modules/IDE/components/NewFolderForm.jsx b/client/modules/IDE/components/NewFolderForm.jsx
index c5e0b564..2da6ccb1 100644
--- a/client/modules/IDE/components/NewFolderForm.jsx
+++ b/client/modules/IDE/components/NewFolderForm.jsx
@@ -16,7 +16,8 @@ class NewFolderForm extends React.Component {
 
   render() {
     const {
-      fields: { name }, handleSubmit
+      fields: { name },
+      handleSubmit,
     } = this.props;
     return (
       <form
@@ -26,22 +27,25 @@ class NewFolderForm extends React.Component {
         }}
       >
         <div className="new-folder-form__input-wrapper">
-          <label className="new-folder-form__name-label" htmlFor="name">Name:</label>
+          <label className="new-folder-form__name-label" htmlFor="name">
+            Name:
+          </label>
           <input
             className="new-folder-form__name-input"
             id="name"
             type="text"
             maxLength="128"
             placeholder="Name"
-            ref={(element) => { this.fileName = element; }}
+            ref={(element) => {
+              this.fileName = element;
+            }}
             {...domOnlyProps(name)}
           />
-          <Button
-            type="submit"
-          >Add Folder
-          </Button>
+          <Button type="submit">Add Folder</Button>
         </div>
-        {name.touched && name.error && <span className="form-error">{name.error}</span>}
+        {name.touched && name.error && (
+          <span className="form-error">{name.error}</span>
+        )}
       </form>
     );
   }
@@ -49,16 +53,16 @@ class NewFolderForm extends React.Component {
 
 NewFolderForm.propTypes = {
   fields: PropTypes.shape({
-    name: PropTypes.object.isRequired
+    name: PropTypes.object.isRequired, // eslint-disable-line
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,
   createFolder: PropTypes.func.isRequired,
   closeModal: PropTypes.func.isRequired,
   submitting: PropTypes.bool,
-  pristine: PropTypes.bool
+  pristine: PropTypes.bool,
 };
 NewFolderForm.defaultProps = {
   submitting: false,
-  pristine: true
+  pristine: true,
 };
 export default NewFolderForm;
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index b28e505f..e72249f3 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -44,13 +44,22 @@ function isUserOwner(props) {
   return props.project.owner && props.project.owner.id === props.user.id;
 }
 
-function warnIfUnsavedChanges(props) { // eslint-disable-line
+function warnIfUnsavedChanges(props) {
+  // eslint-disable-line
   const { route } = props.route;
-  if (route && (route.action === 'PUSH' && (route.pathname === '/login' || route.pathname === '/signup'))) {
+  if (
+    route &&
+    route.action === 'PUSH' &&
+      (route.pathname === '/login' || route.pathname === '/signup')
+  ) {
     // don't warn
     props.persistState();
     window.onbeforeunload = null;
-  } else if (route && (props.location.pathname === '/login' || props.location.pathname === '/signup')) {
+  } else if (
+    route &&
+    (props.location.pathname === '/login' ||
+      props.location.pathname === '/signup')
+  ) {
     // don't warn
     props.persistState();
     window.onbeforeunload = null;
@@ -61,6 +70,7 @@ function warnIfUnsavedChanges(props) { // eslint-disable-line
     props.setUnsavedChanges(false);
     return true;
   }
+  return false;
 }
 
 class IDEView extends React.Component {
@@ -70,7 +80,7 @@ class IDEView extends React.Component {
 
     this.state = {
       consoleSize: props.ide.consoleIsExpanded ? 150 : 29,
-      sidebarSize: props.ide.sidebarIsExpanded ? 160 : 20
+      sidebarSize: props.ide.sidebarIsExpanded ? 160 : 20,
     };
   }
 
@@ -90,7 +100,10 @@ class IDEView extends React.Component {
     this.isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
     document.addEventListener('keydown', this.handleGlobalKeydown, false);
 
-    this.props.router.setRouteLeaveHook(this.props.route, this.handleUnsavedChanges);
+    this.props.router.setRouteLeaveHook(
+      this.props.route,
+      this.handleUnsavedChanges
+    );
 
     window.onbeforeunload = this.handleUnsavedChanges;
 
@@ -103,11 +116,15 @@ class IDEView extends React.Component {
     }
 
     if (this.props.ide.consoleIsExpanded !== nextProps.ide.consoleIsExpanded) {
-      this.setState({ consoleSize: nextProps.ide.consoleIsExpanded ? 150 : 29 });
+      this.setState({
+        consoleSize: nextProps.ide.consoleIsExpanded ? 150 : 29,
+      });
     }
 
     if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
-      this.setState({ sidebarSize: nextProps.ide.sidebarIsExpanded ? 160 : 20 });
+      this.setState({
+        sidebarSize: nextProps.ide.sidebarIsExpanded ? 160 : 20,
+      });
     }
   }
 
@@ -121,10 +138,15 @@ class IDEView extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (isUserOwner(this.props) && this.props.project.id) {
-      if (this.props.preferences.autosave && this.props.ide.unsavedChanges && !this.props.ide.justOpenedProject) {
+      if (
+        this.props.preferences.autosave &&
+        this.props.ide.unsavedChanges &&
+        !this.props.ide.justOpenedProject
+      ) {
         if (
           this.props.selectedFile.name === prevProps.selectedFile.name &&
-          this.props.selectedFile.content !== prevProps.selectedFile.content) {
+          this.props.selectedFile.content !== prevProps.selectedFile.content
+        ) {
           if (this.autosaveInterval) {
             clearTimeout(this.autosaveInterval);
           }
@@ -141,7 +163,8 @@ class IDEView extends React.Component {
     }
 
     if (this.props.route.path !== prevProps.route.path) {
-      this.props.router.setRouteLeaveHook(this.props.route, () => warnIfUnsavedChanges(this.props));
+      this.props.router.setRouteLeaveHook(this.props.route, () =>
+        warnIfUnsavedChanges(this.props));
     }
   }
 
@@ -153,10 +176,16 @@ class IDEView extends React.Component {
 
   handleGlobalKeydown(e) {
     // 83 === s
-    if (e.keyCode === 83 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) {
+    if (
+      e.keyCode === 83 &&
+      ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))
+    ) {
       e.preventDefault();
       e.stopPropagation();
-      if (isUserOwner(this.props) || (this.props.user.authenticated && !this.props.project.owner)) {
+      if (
+        isUserOwner(this.props) ||
+        (this.props.user.authenticated && !this.props.project.owner)
+      ) {
         this.props.saveProject(this.cmController.getContent());
       } else if (this.props.user.authenticated) {
         this.props.cloneProject();
@@ -164,23 +193,41 @@ class IDEView extends React.Component {
         this.props.showErrorModal('forceAuthentication');
       }
       // 13 === enter
-    } else if (e.keyCode === 13 && e.shiftKey && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) {
+    } else if (
+      e.keyCode === 13 &&
+      e.shiftKey &&
+      ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))
+    ) {
       e.preventDefault();
       e.stopPropagation();
       this.props.stopSketch();
-    } else if (e.keyCode === 13 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) {
+    } else if (
+      e.keyCode === 13 &&
+      ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))
+    ) {
       e.preventDefault();
       e.stopPropagation();
       this.props.startSketch();
       // 50 === 2
-    } else if (e.keyCode === 50 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) && e.shiftKey) {
+    } else if (
+      e.keyCode === 50 &&
+      ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) &&
+      e.shiftKey
+    ) {
       e.preventDefault();
       this.props.setAllAccessibleOutput(false);
       // 49 === 1
-    } else if (e.keyCode === 49 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) && e.shiftKey) {
+    } else if (
+      e.keyCode === 49 &&
+      ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) &&
+      e.shiftKey
+    ) {
       e.preventDefault();
       this.props.setAllAccessibleOutput(true);
-    } else if (e.keyCode === 66 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) {
+    } else if (
+      e.keyCode === 66 &&
+      ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))
+    ) {
       e.preventDefault();
       if (!this.props.ide.sidebarIsExpanded) {
         this.props.expandSidebar();
@@ -219,7 +266,7 @@ class IDEView extends React.Component {
           cmController={this.cmController}
         />
         <Toolbar key={this.props.project.id} />
-        {this.props.ide.preferencesIsVisible &&
+        {this.props.ide.preferencesIsVisible && (
           <Overlay
             title={this.props.t('Settings')}
             ariaLabel="settings"
@@ -246,7 +293,7 @@ class IDEView extends React.Component {
               setTheme={this.props.setTheme}
             />
           </Overlay>
-        }
+        )}
         <main className="editor-preview-container">
           <SplitPane
             split="vertical"
@@ -275,10 +322,17 @@ class IDEView extends React.Component {
             <SplitPane
               split="vertical"
               defaultSize="50%"
-              onChange={() => { this.overlay.style.display = 'block'; }}
-              onDragFinished={() => { this.overlay.style.display = 'none'; }}
+              onChange={() => {
+                this.overlay.style.display = 'block';
+              }}
+              onDragFinished={() => {
+                this.overlay.style.display = 'none';
+              }}
               resizerStyle={{
-                borderLeftWidth: '2px', borderRightWidth: '2px', width: '2px', margin: '0px 0px'
+                borderLeftWidth: '2px',
+                borderRightWidth: '2px',
+                width: '2px',
+                margin: '0px 0px',
               }}
             >
               <SplitPane
@@ -304,7 +358,9 @@ class IDEView extends React.Component {
                   editorOptionsVisible={this.props.ide.editorOptionsVisible}
                   showEditorOptions={this.props.showEditorOptions}
                   closeEditorOptions={this.props.closeEditorOptions}
-                  showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
+                  showKeyboardShortcutModal={
+                    this.props.showKeyboardShortcutModal
+                  }
                   setUnsavedChanges={this.props.setUnsavedChanges}
                   isPlaying={this.props.ide.isPlaying}
                   theme={this.props.preferences.theme}
@@ -321,37 +377,44 @@ class IDEView extends React.Component {
                   consoleEvents={this.props.console}
                   showRuntimeErrorWarning={this.props.showRuntimeErrorWarning}
                   hideRuntimeErrorWarning={this.props.hideRuntimeErrorWarning}
-                  runtimeErrorWarningVisible={this.props.ide.runtimeErrorWarningVisible}
-                  provideController={(ctl) => { this.cmController = ctl; }}
+                  runtimeErrorWarningVisible={
+                    this.props.ide.runtimeErrorWarningVisible
+                  }
+                  provideController={(ctl) => {
+                    this.cmController = ctl;
+                  }}
                 />
                 <Console />
               </SplitPane>
               <section className="preview-frame-holder">
                 <header className="preview-frame__header">
-                  <h2 className="preview-frame__title">{this.props.t('Preview')}</h2>
+                  <h2 className="preview-frame__title">
+                    {this.props.t('Preview')}
+                  </h2>
                 </header>
                 <div className="preview-frame__content">
-                  <div className="preview-frame-overlay" ref={(element) => { this.overlay = element; }}>
+                  <div
+                    className="preview-frame-overlay"
+                    ref={(element) => {
+                      this.overlay = element;
+                    }}
+                  >
                   </div>
                   <div>
-                    {(
-                      (
-                        (this.props.preferences.textOutput ||
-                          this.props.preferences.gridOutput ||
-                          this.props.preferences.soundOutput
-                        ) &&
-                        this.props.ide.isPlaying
-                      ) ||
-                      this.props.ide.isAccessibleOutputPlaying
-                    )
-                    }
+                    {((this.props.preferences.textOutput ||
+                      this.props.preferences.gridOutput ||
+                      this.props.preferences.soundOutput) &&
+                      this.props.ide.isPlaying) ||
+                      this.props.ide.isAccessibleOutputPlaying}
                   </div>
                   <PreviewFrame
                     htmlFile={this.props.htmlFile}
                     files={this.props.files}
                     content={this.props.selectedFile.content}
                     isPlaying={this.props.ide.isPlaying}
-                    isAccessibleOutputPlaying={this.props.ide.isAccessibleOutputPlaying}
+                    isAccessibleOutputPlaying={
+                      this.props.ide.isAccessibleOutputPlaying
+                    }
                     textOutput={this.props.preferences.textOutput}
                     gridOutput={this.props.preferences.gridOutput}
                     soundOutput={this.props.preferences.soundOutput}
@@ -373,21 +436,17 @@ class IDEView extends React.Component {
             </SplitPane>
           </SplitPane>
         </main>
-        { this.props.ide.modalIsVisible &&
-          <NewFileModal />
-        }
-        {this.props.ide.newFolderModalVisible &&
+        {this.props.ide.modalIsVisible && <NewFileModal />}
+        {this.props.ide.newFolderModalVisible && (
           <NewFolderModal
             closeModal={this.props.closeNewFolderModal}
             createFolder={this.props.createFolder}
           />
-        }
-        {this.props.ide.uploadFileModalVisible &&
-          <UploadFileModal
-            closeModal={this.props.closeUploadFileModal}
-          />
-        }
-        { this.props.location.pathname === '/about' &&
+        )}
+        {this.props.ide.uploadFileModalVisible && (
+          <UploadFileModal closeModal={this.props.closeUploadFileModal} />
+        )}
+        {this.props.location.pathname === '/about' && (
           <Overlay
             title={this.props.t('About')}
             previousPath={this.props.ide.previousPath}
@@ -395,8 +454,8 @@ class IDEView extends React.Component {
           >
             <About previousPath={this.props.ide.previousPath} />
           </Overlay>
-        }
-        {this.props.location.pathname === '/feedback' &&
+        )}
+        {this.props.location.pathname === '/feedback' && (
           <Overlay
             title="Submit Feedback"
             previousPath={this.props.ide.previousPath}
@@ -404,8 +463,8 @@ class IDEView extends React.Component {
           >
             <Feedback previousPath={this.props.ide.previousPath} />
           </Overlay>
-        }
-        {this.props.location.pathname.match(/add-to-collection$/) &&
+        )}
+        {this.props.location.pathname.match(/add-to-collection$/) && (
           <Overlay
             ariaLabel="add to collection"
             title="Add to collection"
@@ -419,8 +478,8 @@ class IDEView extends React.Component {
               user={this.props.user}
             />
           </Overlay>
-        }
-        {this.props.ide.shareModalVisible &&
+        )}
+        {this.props.ide.shareModalVisible && (
           <Overlay
             title="Share"
             ariaLabel="share"
@@ -432,8 +491,8 @@ class IDEView extends React.Component {
               ownerUsername={this.props.ide.shareModalProjectUsername}
             />
           </Overlay>
-        }
-        {this.props.ide.keyboardShortcutVisible &&
+        )}
+        {this.props.ide.keyboardShortcutVisible && (
           <Overlay
             title={this.props.t('KeyboardShortcuts')}
             ariaLabel="keyboard shortcuts"
@@ -441,8 +500,8 @@ class IDEView extends React.Component {
           >
             <KeyboardShortcutModal />
           </Overlay>
-        }
-        {this.props.ide.errorType &&
+        )}
+        {this.props.ide.errorType && (
           <Overlay
             title="Error"
             ariaLabel="error"
@@ -453,7 +512,7 @@ class IDEView extends React.Component {
               closeModal={this.props.hideErrorModal}
             />
           </Overlay>
-        }
+        )}
       </div>
     );
   }
@@ -466,19 +525,19 @@ IDEView.propTypes = {
     reset_password_token: PropTypes.string,
   }).isRequired,
   location: PropTypes.shape({
-    pathname: PropTypes.string
+    pathname: PropTypes.string,
   }).isRequired,
   getProject: PropTypes.func.isRequired,
   user: PropTypes.shape({
     authenticated: PropTypes.bool.isRequired,
     id: PropTypes.string,
-    username: PropTypes.string
+    username: PropTypes.string,
   }).isRequired,
   saveProject: PropTypes.func.isRequired,
   ide: PropTypes.shape({
     isPlaying: PropTypes.bool.isRequired,
     isAccessibleOutputPlaying: PropTypes.bool.isRequired,
-    consoleEvent: PropTypes.array,
+    consoleEvent: PropTypes.array, // eslint-disable-line
     modalIsVisible: PropTypes.bool.isRequired,
     sidebarIsExpanded: PropTypes.bool.isRequired,
     consoleIsExpanded: PropTypes.bool.isRequired,
@@ -500,7 +559,7 @@ IDEView.propTypes = {
     justOpenedProject: PropTypes.bool.isRequired,
     errorType: PropTypes.string,
     runtimeErrorWarningVisible: PropTypes.bool.isRequired,
-    uploadFileModalVisible: PropTypes.bool.isRequired
+    uploadFileModalVisible: PropTypes.bool.isRequired,
   }).isRequired,
   stopSketch: PropTypes.func.isRequired,
   project: PropTypes.shape({
@@ -508,12 +567,12 @@ IDEView.propTypes = {
     name: PropTypes.string.isRequired,
     owner: PropTypes.shape({
       username: PropTypes.string,
-      id: PropTypes.string
+      id: PropTypes.string,
     }),
-    updatedAt: PropTypes.string
+    updatedAt: PropTypes.string,
   }).isRequired,
   editorAccessibility: PropTypes.shape({
-    lintMessages: PropTypes.array.isRequired,
+    lintMessages: PropTypes.array.isRequired, // eslint-disable-line
   }).isRequired,
   updateLintMessage: PropTypes.func.isRequired,
   clearLintMessage: PropTypes.func.isRequired,
@@ -527,7 +586,7 @@ IDEView.propTypes = {
     gridOutput: PropTypes.bool.isRequired,
     soundOutput: PropTypes.bool.isRequired,
     theme: PropTypes.string.isRequired,
-    autorefresh: PropTypes.bool.isRequired
+    autorefresh: PropTypes.bool.isRequired,
   }).isRequired,
   closePreferences: PropTypes.func.isRequired,
   setFontSize: PropTypes.func.isRequired,
@@ -542,19 +601,19 @@ IDEView.propTypes = {
   files: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired
+    content: PropTypes.string.isRequired,
   })).isRequired,
   updateFileContent: PropTypes.func.isRequired,
   selectedFile: PropTypes.shape({
     id: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired
+    name: PropTypes.string.isRequired,
   }).isRequired,
   setSelectedFile: PropTypes.func.isRequired,
   htmlFile: PropTypes.shape({
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired
+    content: PropTypes.string.isRequired,
   }).isRequired,
   dispatchConsoleEvent: PropTypes.func.isRequired,
   newFile: PropTypes.func.isRequired,
@@ -577,11 +636,11 @@ IDEView.propTypes = {
   showKeyboardShortcutModal: PropTypes.func.isRequired,
   closeKeyboardShortcutModal: PropTypes.func.isRequired,
   toast: PropTypes.shape({
-    isVisible: PropTypes.bool.isRequired
+    isVisible: PropTypes.bool.isRequired,
   }).isRequired,
   autosaveProject: PropTypes.func.isRequired,
   router: PropTypes.shape({
-    setRouteLeaveHook: PropTypes.func
+    setRouteLeaveHook: PropTypes.func,
   }).isRequired,
   route: PropTypes.oneOfType([PropTypes.object, PropTypes.element]).isRequired,
   setUnsavedChanges: PropTypes.func.isRequired,
@@ -592,7 +651,7 @@ IDEView.propTypes = {
   setPreviousPath: PropTypes.func.isRequired,
   console: PropTypes.arrayOf(PropTypes.shape({
     method: PropTypes.string.isRequired,
-    args: PropTypes.arrayOf(PropTypes.string)
+    args: PropTypes.arrayOf(PropTypes.string),
   })).isRequired,
   clearConsole: PropTypes.func.isRequired,
   showErrorModal: PropTypes.func.isRequired,
@@ -603,13 +662,14 @@ IDEView.propTypes = {
   startSketch: PropTypes.func.isRequired,
   openUploadFileModal: PropTypes.func.isRequired,
   closeUploadFileModal: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
 };
 
 function mapStateToProps(state) {
   return {
     files: state.files,
-    selectedFile: state.files.find(file => file.isSelectedFile) ||
+    selectedFile:
+      state.files.find(file => file.isSelectedFile) ||
       state.files.find(file => file.name === 'sketch.js') ||
       state.files.find(file => file.name !== 'root'),
     htmlFile: getHTMLFile(state.files),
@@ -619,7 +679,7 @@ function mapStateToProps(state) {
     user: state.user,
     project: state.project,
     toast: state.toast,
-    console: state.console
+    console: state.console,
   };
 }
 
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 43851092..e024e193 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -30,8 +30,8 @@ import Console from '../components/Console';
 import { remSize } from '../../../theme';
 import ActionStrip from '../../../components/mobile/ActionStrip';
 
-const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
-
+const isUserOwner = ({ project, user }) =>
+  project.owner && project.owner.id === user.id;
 
 const Expander = styled.div`
   height: ${props => (props.expanded ? remSize(160) : remSize(27))};
@@ -39,11 +39,28 @@ const Expander = styled.div`
 
 const MobileIDEView = (props) => {
   const {
-    preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
-    selectedFile, updateFileContent, files,
-    closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges,
-    startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
-    showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch
+    preferences,
+    ide,
+    editorAccessibility,
+    project,
+    updateLintMessage,
+    clearLintMessage,
+    selectedFile,
+    updateFileContent,
+    files,
+    closeEditorOptions,
+    showEditorOptions,
+    showKeyboardShortcutModal,
+    setUnsavedChanges,
+    startRefreshSketch,
+    stopSketch,
+    expandSidebar,
+    collapseSidebar,
+    clearConsole,
+    console,
+    showRuntimeErrorWarning,
+    hideRuntimeErrorWarning,
+    startSketch,
   } = props;
 
   const [tmController, setTmController] = useState(null); // eslint-disable-line
@@ -55,7 +72,11 @@ const MobileIDEView = (props) => {
         title={project.name}
         subtitle={selectedFile.name}
         leftButton={
-          <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
+          <IconButton
+            to="/mobile"
+            icon={ExitIcon}
+            aria-label="Return to original editor"
+          />
         }
       >
         <IconButton
@@ -64,7 +85,14 @@ const MobileIDEView = (props) => {
           icon={PreferencesIcon}
           aria-label="Open preferences menu"
         />
-        <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
+        <IconButton
+          to="/mobile/preview"
+          onClick={() => {
+            startSketch();
+          }}
+          icon={PlayIcon}
+          aria-label="Run sketch"
+        />
       </Header>
 
       <IDEWrapper>
@@ -104,16 +132,18 @@ const MobileIDEView = (props) => {
         />
       </IDEWrapper>
       <Footer>
-        {ide.consoleIsExpanded && <Expander expanded><Console /></Expander>}
+        {ide.consoleIsExpanded && (
+          <Expander expanded>
+            <Console />
+          </Expander>
+        )}
         <ActionStrip />
       </Footer>
     </Screen>
   );
 };
 
-
 MobileIDEView.propTypes = {
-
   preferences: PropTypes.shape({
     fontSize: PropTypes.number.isRequired,
     autosave: PropTypes.bool.isRequired,
@@ -124,13 +154,13 @@ MobileIDEView.propTypes = {
     gridOutput: PropTypes.bool.isRequired,
     soundOutput: PropTypes.bool.isRequired,
     theme: PropTypes.string.isRequired,
-    autorefresh: PropTypes.bool.isRequired
+    autorefresh: PropTypes.bool.isRequired,
   }).isRequired,
 
   ide: PropTypes.shape({
     isPlaying: PropTypes.bool.isRequired,
     isAccessibleOutputPlaying: PropTypes.bool.isRequired,
-    consoleEvent: PropTypes.array,
+    consoleEvent: PropTypes.array, // eslint-disable-line
     modalIsVisible: PropTypes.bool.isRequired,
     sidebarIsExpanded: PropTypes.bool.isRequired,
     consoleIsExpanded: PropTypes.bool.isRequired,
@@ -152,11 +182,11 @@ MobileIDEView.propTypes = {
     justOpenedProject: PropTypes.bool.isRequired,
     errorType: PropTypes.string,
     runtimeErrorWarningVisible: PropTypes.bool.isRequired,
-    uploadFileModalVisible: PropTypes.bool.isRequired
+    uploadFileModalVisible: PropTypes.bool.isRequired,
   }).isRequired,
 
   editorAccessibility: PropTypes.shape({
-    lintMessages: PropTypes.array.isRequired,
+    lintMessages: PropTypes.array.isRequired, // eslint-disable-line
   }).isRequired,
 
   project: PropTypes.shape({
@@ -164,9 +194,9 @@ MobileIDEView.propTypes = {
     name: PropTypes.string.isRequired,
     owner: PropTypes.shape({
       username: PropTypes.string,
-      id: PropTypes.string
+      id: PropTypes.string,
     }),
-    updatedAt: PropTypes.string
+    updatedAt: PropTypes.string,
   }).isRequired,
 
   startSketch: PropTypes.func.isRequired,
@@ -178,7 +208,7 @@ MobileIDEView.propTypes = {
   selectedFile: PropTypes.shape({
     id: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired
+    name: PropTypes.string.isRequired,
   }).isRequired,
 
   updateFileContent: PropTypes.func.isRequired,
@@ -186,7 +216,7 @@ MobileIDEView.propTypes = {
   files: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired
+    content: PropTypes.string.isRequired,
   })).isRequired,
 
   closeEditorOptions: PropTypes.func.isRequired,
@@ -209,7 +239,7 @@ MobileIDEView.propTypes = {
 
   console: PropTypes.arrayOf(PropTypes.shape({
     method: PropTypes.string.isRequired,
-    args: PropTypes.arrayOf(PropTypes.string)
+    args: PropTypes.arrayOf(PropTypes.string),
   })).isRequired,
 
   showRuntimeErrorWarning: PropTypes.func.isRequired,
@@ -219,15 +249,15 @@ MobileIDEView.propTypes = {
   user: PropTypes.shape({
     authenticated: PropTypes.bool.isRequired,
     id: PropTypes.string,
-    username: PropTypes.string
+    username: PropTypes.string,
   }).isRequired,
 };
 
-
 function mapStateToProps(state) {
   return {
     files: state.files,
-    selectedFile: state.files.find(file => file.isSelectedFile) ||
+    selectedFile:
+      state.files.find(file => file.isSelectedFile) ||
       state.files.find(file => file.name === 'sketch.js') ||
       state.files.find(file => file.name !== 'root'),
     htmlFile: getHTMLFile(state.files),
@@ -237,7 +267,7 @@ function mapStateToProps(state) {
     user: state.user,
     project: state.project,
     toast: state.toast,
-    console: state.console
+    console: state.console,
   };
 }
 
@@ -258,5 +288,4 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MobileIDEView));
diff --git a/client/modules/Mobile/MobileExamples.jsx b/client/modules/Mobile/MobileExamples.jsx
new file mode 100644
index 00000000..7a8339e6
--- /dev/null
+++ b/client/modules/Mobile/MobileExamples.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { bindActionCreators } from 'redux';
+import Screen from '../../components/mobile/MobileScreen';
+import Header from '../../components/mobile/Header';
+import IconButton from '../../components/mobile/IconButton';
+import { ExitIcon } from '../../common/icons';
+
+const MobileExamples = () => (
+  <Screen fullscreen>
+    <Header transparent title="My Stuff">
+      <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
+    </Header>
+  </Screen>
+);
+
+export default MobileExamples;
diff --git a/client/modules/User/components/APIKeyForm.jsx b/client/modules/User/components/APIKeyForm.jsx
index cb99dcde..b3a1a4b4 100644
--- a/client/modules/User/components/APIKeyForm.jsx
+++ b/client/modules/User/components/APIKeyForm.jsx
@@ -8,8 +8,8 @@ import CopyableInput from '../../IDE/components/CopyableInput';
 import APIKeyList from './APIKeyList';
 
 export const APIKeyPropType = PropTypes.shape({
-  id: PropTypes.object.isRequired,
-  token: PropTypes.object,
+  id: PropTypes.object.isRequired, // eslint-disable-line
+  token: PropTypes.object, // eslint-disable-line
   label: PropTypes.string.isRequired,
   createdAt: PropTypes.string.isRequired,
   lastUsedAt: PropTypes.string,
@@ -30,7 +30,7 @@ class APIKeyForm extends React.Component {
     const { keyLabel } = this.state;
 
     this.setState({
-      keyLabel: ''
+      keyLabel: '',
     });
 
     this.props.createApiKey(keyLabel);
@@ -64,18 +64,25 @@ class APIKeyForm extends React.Component {
       <div className="api-key-form">
         <p className="api-key-form__summary">
           Personal Access Tokens act like your password to allow automated
-          scripts to access the Editor API. Create a token for each script
-          that needs access.
+          scripts to access the Editor API. Create a token for each script that
+          needs access.
         </p>
 
         <div className="api-key-form__section">
           <h3 className="api-key-form__title">Create new token</h3>
           <form className="form form--inline" onSubmit={this.addKey}>
-            <label htmlFor="keyLabel" className="form__label form__label--hidden ">What is this token for?</label>
+            <label
+              htmlFor="keyLabel"
+              className="form__label form__label--hidden "
+            >
+              What is this token for?
+            </label>
             <input
               className="form__input"
               id="keyLabel"
-              onChange={(event) => { this.setState({ keyLabel: event.target.value }); }}
+              onChange={(event) => {
+                this.setState({ keyLabel: event.target.value });
+              }}
               placeholder="What is this token for? e.g. Example import script"
               type="text"
               value={this.state.keyLabel}
@@ -90,18 +97,21 @@ class APIKeyForm extends React.Component {
             </Button>
           </form>
 
-          {
-            keyWithToken && (
-              <div className="api-key-form__new-token">
-                <h4 className="api-key-form__new-token__title">Your new access token</h4>
-                <p className="api-key-form__new-token__info">
-                  Make sure to copy your new personal access token now.
-                  You won’t be able to see it again!
-                </p>
-                <CopyableInput label={keyWithToken.label} value={keyWithToken.token} />
-              </div>
-            )
-          }
+          {keyWithToken && (
+            <div className="api-key-form__new-token">
+              <h4 className="api-key-form__new-token__title">
+                Your new access token
+              </h4>
+              <p className="api-key-form__new-token__info">
+                Make sure to copy your new personal access token now. You won’t
+                be able to see it again!
+              </p>
+              <CopyableInput
+                label={keyWithToken.label}
+                value={keyWithToken.token}
+              />
+            </div>
+          )}
         </div>
 
         <div className="api-key-form__section">
diff --git a/client/modules/User/components/AccountForm.jsx b/client/modules/User/components/AccountForm.jsx
index e032448b..90d5fc18 100644
--- a/client/modules/User/components/AccountForm.jsx
+++ b/client/modules/User/components/AccountForm.jsx
@@ -13,7 +13,7 @@ function AccountForm(props) {
     initiateVerification,
     submitting,
     invalid,
-    pristine
+    pristine,
   } = props;
 
   const handleInitiateVerification = (evt) => {
@@ -24,7 +24,9 @@ function AccountForm(props) {
   return (
     <form className="form" onSubmit={handleSubmit(props.updateSettings)}>
       <p className="form__field">
-        <label htmlFor="email" className="form__label">Email</label>
+        <label htmlFor="email" className="form__label">
+          Email
+        </label>
         <input
           className="form__input"
           aria-label="email"
@@ -32,30 +34,29 @@ function AccountForm(props) {
           id="email"
           {...domOnlyProps(email)}
         />
-        {email.touched && email.error && <span className="form-error">{email.error}</span>}
+        {email.touched && email.error && (
+          <span className="form-error">{email.error}</span>
+        )}
       </p>
-      {
-        user.verified !== 'verified' &&
-          (
-            <p className="form__context">
-              <span className="form__status">Unconfirmed.</span>
-              {
-                user.emailVerificationInitiate === true ?
-                  (
-                    <span className="form__status"> Confirmation sent, check your email.</span>
-                  ) :
-                  (
-                    <Button
-                      onClick={handleInitiateVerification}
-                    >Resend confirmation email
-                    </Button>
-                  )
-              }
-            </p>
-          )
-      }
+      {user.verified !== 'verified' && (
+        <p className="form__context">
+          <span className="form__status">Unconfirmed.</span>
+          {user.emailVerificationInitiate === true ? (
+            <span className="form__status">
+              {' '}
+              Confirmation sent, check your email.
+            </span>
+          ) : (
+            <Button onClick={handleInitiateVerification}>
+              Resend confirmation email
+            </Button>
+          )}
+        </p>
+      )}
       <p className="form__field">
-        <label htmlFor="username" className="form__label">User Name</label>
+        <label htmlFor="username" className="form__label">
+          User Name
+        </label>
         <input
           className="form__input"
           aria-label="username"
@@ -64,10 +65,14 @@ function AccountForm(props) {
           defaultValue={username}
           {...domOnlyProps(username)}
         />
-        {username.touched && username.error && <span className="form-error">{username.error}</span>}
+        {username.touched && username.error && (
+          <span className="form-error">{username.error}</span>
+        )}
       </p>
       <p className="form__field">
-        <label htmlFor="current password" className="form__label">Current Password</label>
+        <label htmlFor="current password" className="form__label">
+          Current Password
+        </label>
         <input
           className="form__input"
           aria-label="currentPassword"
@@ -75,14 +80,14 @@ function AccountForm(props) {
           id="currentPassword"
           {...domOnlyProps(currentPassword)}
         />
-        {
-          currentPassword.touched &&
-          currentPassword.error &&
+        {currentPassword.touched && currentPassword.error && (
           <span className="form-error">{currentPassword.error}</span>
-        }
+        )}
       </p>
       <p className="form__field">
-        <label htmlFor="new password" className="form__label">New Password</label>
+        <label htmlFor="new password" className="form__label">
+          New Password
+        </label>
         <input
           className="form__input"
           aria-label="newPassword"
@@ -90,12 +95,12 @@ function AccountForm(props) {
           id="newPassword"
           {...domOnlyProps(newPassword)}
         />
-        {newPassword.touched && newPassword.error && <span className="form-error">{newPassword.error}</span>}
+        {newPassword.touched && newPassword.error && (
+          <span className="form-error">{newPassword.error}</span>
+        )}
       </p>
-      <Button
-        type="submit"
-        disabled={submitting || invalid || pristine}
-      >Save All Settings
+      <Button type="submit" disabled={submitting || invalid || pristine}>
+        Save All Settings
       </Button>
     </form>
   );
@@ -103,10 +108,10 @@ function AccountForm(props) {
 
 AccountForm.propTypes = {
   fields: PropTypes.shape({
-    username: PropTypes.object.isRequired,
-    email: PropTypes.object.isRequired,
-    currentPassword: PropTypes.object.isRequired,
-    newPassword: PropTypes.object.isRequired,
+    username: PropTypes.object.isRequired, // eslint-disable-line
+    email: PropTypes.object.isRequired, // eslint-disable-line
+    currentPassword: PropTypes.object.isRequired, // eslint-disable-line
+    newPassword: PropTypes.object.isRequired, // eslint-disable-line
   }).isRequired,
   user: PropTypes.shape({
     verified: PropTypes.number.isRequired,
@@ -123,7 +128,7 @@ AccountForm.propTypes = {
 AccountForm.defaultProps = {
   submitting: false,
   pristine: true,
-  invalid: false
+  invalid: false,
 };
 
 export default AccountForm;
diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx
index 9cc85d98..974f50ba 100644
--- a/client/modules/User/components/LoginForm.jsx
+++ b/client/modules/User/components/LoginForm.jsx
@@ -7,12 +7,20 @@ import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 function LoginForm(props) {
   const {
-    fields: { email, password }, handleSubmit, submitting, pristine
+    fields: { email, password },
+    handleSubmit,
+    submitting,
+    pristine,
   } = props;
   return (
-    <form className="form" onSubmit={handleSubmit(props.validateAndLoginUser.bind(this, props.previousPath))}>
+    <form
+      className="form"
+      onSubmit={handleSubmit(props.validateAndLoginUser.bind(this, props.previousPath))}
+    >
       <p className="form__field">
-        <label htmlFor="email" className="form__label">Email or Username</label>
+        <label htmlFor="email" className="form__label">
+          Email or Username
+        </label>
         <input
           className="form__input"
           aria-label="email or username"
@@ -20,10 +28,14 @@ function LoginForm(props) {
           id="email"
           {...domOnlyProps(email)}
         />
-        {email.touched && email.error && <span className="form-error">{email.error}</span>}
+        {email.touched && email.error && (
+          <span className="form-error">{email.error}</span>
+        )}
       </p>
       <p className="form__field">
-        <label htmlFor="password" className="form__label">Password</label>
+        <label htmlFor="password" className="form__label">
+          Password
+        </label>
         <input
           className="form__input"
           aria-label="password"
@@ -31,12 +43,12 @@ function LoginForm(props) {
           id="password"
           {...domOnlyProps(password)}
         />
-        {password.touched && password.error && <span className="form-error">{password.error}</span>}
+        {password.touched && password.error && (
+          <span className="form-error">{password.error}</span>
+        )}
       </p>
-      <Button
-        type="submit"
-        disabled={submitting || pristine}
-      >Log In
+      <Button type="submit" disabled={submitting || pristine}>
+        Log In
       </Button>
     </form>
   );
@@ -44,21 +56,21 @@ function LoginForm(props) {
 
 LoginForm.propTypes = {
   fields: PropTypes.shape({
-    email: PropTypes.object.isRequired,
-    password: PropTypes.object.isRequired
+    email: PropTypes.object.isRequired, // eslint-disable-line
+    password: PropTypes.object.isRequired, // eslint-disable-line
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,
   validateAndLoginUser: PropTypes.func.isRequired,
   submitting: PropTypes.bool,
   pristine: PropTypes.bool,
   invalid: PropTypes.bool,
-  previousPath: PropTypes.string.isRequired
+  previousPath: PropTypes.string.isRequired,
 };
 
 LoginForm.defaultProps = {
   submitting: false,
   pristine: true,
-  invalid: false
+  invalid: false,
 };
 
 export default LoginForm;
diff --git a/client/modules/User/components/NewPasswordForm.jsx b/client/modules/User/components/NewPasswordForm.jsx
index 59240908..c971eb49 100644
--- a/client/modules/User/components/NewPasswordForm.jsx
+++ b/client/modules/User/components/NewPasswordForm.jsx
@@ -6,12 +6,21 @@ import Button from '../../../common/Button';
 
 function NewPasswordForm(props) {
   const {
-    fields: { password, confirmPassword }, handleSubmit, submitting, invalid, pristine
+    fields: { password, confirmPassword },
+    handleSubmit,
+    submitting,
+    invalid,
+    pristine,
   } = props;
   return (
-    <form className="form" onSubmit={handleSubmit(props.updatePassword.bind(this, props.params.reset_password_token))}>
+    <form
+      className="form"
+      onSubmit={handleSubmit(props.updatePassword.bind(this, props.params.reset_password_token))}
+    >
       <p className="form__field">
-        <label htmlFor="password" className="form__label">Password</label>
+        <label htmlFor="password" className="form__label">
+          Password
+        </label>
         <input
           className="form__input"
           aria-label="password"
@@ -19,10 +28,14 @@ function NewPasswordForm(props) {
           id="Password"
           {...domOnlyProps(password)}
         />
-        {password.touched && password.error && <span className="form-error">{password.error}</span>}
+        {password.touched && password.error && (
+          <span className="form-error">{password.error}</span>
+        )}
       </p>
       <p className="form__field">
-        <label htmlFor="confirm password" className="form__label">Confirm Password</label>
+        <label htmlFor="confirm password" className="form__label">
+          Confirm Password
+        </label>
         <input
           className="form__input"
           type="password"
@@ -30,21 +43,21 @@ function NewPasswordForm(props) {
           id="confirm password"
           {...domOnlyProps(confirmPassword)}
         />
-        {
-          confirmPassword.touched &&
-          confirmPassword.error &&
+        {confirmPassword.touched && confirmPassword.error && (
           <span className="form-error">{confirmPassword.error}</span>
-        }
+        )}
       </p>
-      <Button type="submit" disabled={submitting || invalid || pristine}>Set New Password</Button>
+      <Button type="submit" disabled={submitting || invalid || pristine}>
+        Set New Password
+      </Button>
     </form>
   );
 }
 
 NewPasswordForm.propTypes = {
   fields: PropTypes.shape({
-    password: PropTypes.object.isRequired,
-    confirmPassword: PropTypes.object.isRequired
+    password: PropTypes.object.isRequired, // eslint-disable-line
+    confirmPassword: PropTypes.object.isRequired, // eslint-disable-line
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,
   updatePassword: PropTypes.func.isRequired,
@@ -59,7 +72,7 @@ NewPasswordForm.propTypes = {
 NewPasswordForm.defaultProps = {
   invalid: false,
   pristine: true,
-  submitting: false
+  submitting: false,
 };
 
 export default NewPasswordForm;
diff --git a/client/modules/User/components/ResetPasswordForm.jsx b/client/modules/User/components/ResetPasswordForm.jsx
index df96bd79..2b97c2ff 100644
--- a/client/modules/User/components/ResetPasswordForm.jsx
+++ b/client/modules/User/components/ResetPasswordForm.jsx
@@ -6,12 +6,21 @@ import Button from '../../../common/Button';
 
 function ResetPasswordForm(props) {
   const {
-    fields: { email }, handleSubmit, submitting, invalid, pristine
+    fields: { email },
+    handleSubmit,
+    submitting,
+    invalid,
+    pristine,
   } = props;
   return (
-    <form className="form" onSubmit={handleSubmit(props.initiateResetPassword.bind(this))}>
+    <form
+      className="form"
+      onSubmit={handleSubmit(props.initiateResetPassword.bind(this))}
+    >
       <p className="form__field">
-        <label htmlFor="email" className="form__label">Email used for registration</label>
+        <label htmlFor="email" className="form__label">
+          Email used for registration
+        </label>
         <input
           className="form__input"
           aria-label="email"
@@ -19,12 +28,17 @@ function ResetPasswordForm(props) {
           id="email"
           {...domOnlyProps(email)}
         />
-        {email.touched && email.error && <span className="form-error">{email.error}</span>}
+        {email.touched && email.error && (
+          <span className="form-error">{email.error}</span>
+        )}
       </p>
       <Button
         type="submit"
-        disabled={submitting || invalid || pristine || props.user.resetPasswordInitiate}
-      >Send Password Reset Email
+        disabled={
+          submitting || invalid || pristine || props.user.resetPasswordInitiate
+        }
+      >
+        Send Password Reset Email
       </Button>
     </form>
   );
@@ -32,7 +46,7 @@ function ResetPasswordForm(props) {
 
 ResetPasswordForm.propTypes = {
   fields: PropTypes.shape({
-    email: PropTypes.object.isRequired
+    email: PropTypes.object.isRequired, // eslint-disable-line
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,
   initiateResetPassword: PropTypes.func.isRequired,
@@ -40,14 +54,14 @@ ResetPasswordForm.propTypes = {
   invalid: PropTypes.bool,
   pristine: PropTypes.bool,
   user: PropTypes.shape({
-    resetPasswordInitiate: PropTypes.bool
-  }).isRequired
+    resetPasswordInitiate: PropTypes.bool,
+  }).isRequired,
 };
 
 ResetPasswordForm.defaultProps = {
   submitting: false,
   pristine: true,
-  invalid: false
+  invalid: false,
 };
 
 export default ResetPasswordForm;
diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index 7d18062b..a2d2bd56 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -8,12 +8,21 @@ function SignupForm(props) {
   const {
     fields: {
       username, email, password, confirmPassword
-    }, handleSubmit, submitting, invalid, pristine
+    },
+    handleSubmit,
+    submitting,
+    invalid,
+    pristine,
   } = props;
   return (
-    <form className="form" onSubmit={handleSubmit(props.signUpUser.bind(this, props.previousPath))}>
+    <form
+      className="form"
+      onSubmit={handleSubmit(props.signUpUser.bind(this, props.previousPath))}
+    >
       <p className="form__field">
-        <label htmlFor="username" className="form__label">User Name</label>
+        <label htmlFor="username" className="form__label">
+          User Name
+        </label>
         <input
           className="form__input"
           aria-label="username"
@@ -21,10 +30,14 @@ function SignupForm(props) {
           id="username"
           {...domOnlyProps(username)}
         />
-        {username.touched && username.error && <span className="form-error">{username.error}</span>}
+        {username.touched && username.error && (
+          <span className="form-error">{username.error}</span>
+        )}
       </p>
       <p className="form__field">
-        <label htmlFor="email" className="form__label">Email</label>
+        <label htmlFor="email" className="form__label">
+          Email
+        </label>
         <input
           className="form__input"
           aria-label="email"
@@ -32,10 +45,14 @@ function SignupForm(props) {
           id="email"
           {...domOnlyProps(email)}
         />
-        {email.touched && email.error && <span className="form-error">{email.error}</span>}
+        {email.touched && email.error && (
+          <span className="form-error">{email.error}</span>
+        )}
       </p>
       <p className="form__field">
-        <label htmlFor="password" className="form__label">Password</label>
+        <label htmlFor="password" className="form__label">
+          Password
+        </label>
         <input
           className="form__input"
           aria-label="password"
@@ -43,10 +60,14 @@ function SignupForm(props) {
           id="password"
           {...domOnlyProps(password)}
         />
-        {password.touched && password.error && <span className="form-error">{password.error}</span>}
+        {password.touched && password.error && (
+          <span className="form-error">{password.error}</span>
+        )}
       </p>
       <p className="form__field">
-        <label htmlFor="confirm password" className="form__label">Confirm Password</label>
+        <label htmlFor="confirm password" className="form__label">
+          Confirm Password
+        </label>
         <input
           className="form__input"
           type="password"
@@ -54,16 +75,12 @@ function SignupForm(props) {
           id="confirm password"
           {...domOnlyProps(confirmPassword)}
         />
-        {
-          confirmPassword.touched &&
-          confirmPassword.error &&
+        {confirmPassword.touched && confirmPassword.error && (
           <span className="form-error">{confirmPassword.error}</span>
-        }
+        )}
       </p>
-      <Button
-        type="submit"
-        disabled={submitting || invalid || pristine}
-      >Sign Up
+      <Button type="submit" disabled={submitting || invalid || pristine}>
+        Sign Up
       </Button>
     </form>
   );
@@ -71,23 +88,23 @@ function SignupForm(props) {
 
 SignupForm.propTypes = {
   fields: PropTypes.shape({
-    username: PropTypes.object.isRequired,
-    email: PropTypes.object.isRequired,
-    password: PropTypes.object.isRequired,
-    confirmPassword: PropTypes.object.isRequired
+    username: PropTypes.object.isRequired, // eslint-disable-line
+    email: PropTypes.object.isRequired, // eslint-disable-line
+    password: PropTypes.object.isRequired, // eslint-disable-line
+    confirmPassword: PropTypes.object.isRequired, // eslint-disable-line
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,
   signUpUser: PropTypes.func.isRequired,
   submitting: PropTypes.bool,
   invalid: PropTypes.bool,
   pristine: PropTypes.bool,
-  previousPath: PropTypes.string.isRequired
+  previousPath: PropTypes.string.isRequired,
 };
 
 SignupForm.defaultProps = {
   submitting: false,
   pristine: true,
-  invalid: false
+  invalid: false,
 };
 
 export default SignupForm;
diff --git a/client/routes.jsx b/client/routes.jsx
index 308877e5..b3a61193 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -18,6 +18,7 @@ import createRedirectWithUsername from './components/createRedirectWithUsername'
 import { getUser } from './modules/User/actions';
 import { stopSketch } from './modules/IDE/actions/ide';
 import { userIsAuthenticated, userIsNotAuthenticated, userIsAuthorized } from './utils/auth';
+import MobileExamples from './modules/Mobile/MobileExamples';
 
 const checkAuth = (store) => {
   store.dispatch(getUser());
@@ -60,6 +61,7 @@ const routes = store => (
     <Route path="/mobile" component={MobileIDEView} />
     <Route path="/mobile/preview" component={MobileSketchView} />
     <Route path="/mobile/preferences" component={MobilePreferences} />
+    <Route path="/mobile/examples" component={MobileExamples} />
   </Route>
 );
 
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
index c038a3c7..7fe969e2 100644
--- a/server/routes/server.routes.js
+++ b/server/routes/server.routes.js
@@ -115,17 +115,13 @@ router.get('/about', (req, res) => {
 });
 
 if (process.env.MOBILE_ENABLED) {
-  router.get('/mobile', (req, res) => {
-    res.send(renderIndex());
-  });
+  router.get('/mobile', (req, res) => res.send(renderIndex()));
 
-  router.get('/mobile/preview', (req, res) => {
-    res.send(renderIndex());
-  });
+  router.get('/mobile/preview', (req, res) => res.send(renderIndex()));
 
-  router.get('/mobile/preferences', (req, res) => {
-    res.send(renderIndex());
-  });
+  router.get('/mobile/preferences', (req, res) => res.send(renderIndex()));
+
+  router.get('/mobile/examples', (req, res) => res.send(renderIndex()));
 }
 
 router.get('/:username/collections/create', (req, res) => {

From 691df12f28bc6c2cb3c411f513eb1e425998f762 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 24 Jul 2020 18:43:07 -0300
Subject: [PATCH 02/50] :construction: create bottom tabs

---
 client/components/mobile/Header.jsx      | 22 +++++++----
 client/modules/Mobile/MobileExamples.jsx | 48 ++++++++++++++++++++----
 2 files changed, 55 insertions(+), 15 deletions(-)

diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx
index cf727b7c..9a40f170 100644
--- a/client/components/mobile/Header.jsx
+++ b/client/components/mobile/Header.jsx
@@ -3,14 +3,20 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { prop, remSize } from '../../theme';
 
-const background = transparent => prop(transparent ? 'backgroundColor' : 'MobilePanel.default.background');
-const textColor = prop('primaryTextColor');
+
+const background = ({ transparent, inverted }) => prop(transparent === true
+  ? 'backgroundColor'
+  : `MobilePanel.default.${inverted === true ? 'foreground' : 'background'}`);
+
+const textColor = ({ transparent, inverted }) => prop((transparent === false && inverted === true)
+  ? 'MobilePanel.default.background'
+  : 'primaryTextColor');
 
 
 const HeaderDiv = styled.div`
   position: fixed;
   width: 100%;
-  background: ${props => background(props.transparent === true)};
+  background: ${props => background(props)};
   color: ${textColor};
   padding: ${remSize(12)};
   padding-left: ${remSize(16)};
@@ -46,9 +52,9 @@ const TitleContainer = styled.div`
 `;
 
 const Header = ({
-  title, subtitle, leftButton, children, transparent
+  title, subtitle, leftButton, children, transparent, inverted
 }) => (
-  <HeaderDiv transparent={transparent}>
+  <HeaderDiv transparent={transparent} inverted={inverted}>
     {leftButton}
     <TitleContainer padded={subtitle === null}>
       {title && <h2>{title}</h2>}
@@ -65,7 +71,8 @@ Header.propTypes = {
   subtitle: PropTypes.string,
   leftButton: PropTypes.element,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
-  transparent: PropTypes.bool
+  transparent: PropTypes.bool,
+  inverted: PropTypes.bool
 };
 
 Header.defaultProps = {
@@ -73,7 +80,8 @@ Header.defaultProps = {
   subtitle: null,
   leftButton: null,
   children: [],
-  transparent: false
+  transparent: false,
+  inverted: false
 };
 
 export default Header;
diff --git a/client/modules/Mobile/MobileExamples.jsx b/client/modules/Mobile/MobileExamples.jsx
index 7a8339e6..38edfd9f 100644
--- a/client/modules/Mobile/MobileExamples.jsx
+++ b/client/modules/Mobile/MobileExamples.jsx
@@ -1,16 +1,48 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { bindActionCreators } from 'redux';
+import styled from 'styled-components';
 import Screen from '../../components/mobile/MobileScreen';
 import Header from '../../components/mobile/Header';
 import IconButton from '../../components/mobile/IconButton';
 import { ExitIcon } from '../../common/icons';
+import Footer from '../../components/mobile/Footer';
+import { prop, remSize } from '../../theme';
 
-const MobileExamples = () => (
-  <Screen fullscreen>
-    <Header transparent title="My Stuff">
-      <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
-    </Header>
-  </Screen>
-);
+const FooterTab = styled.div`
+  background: ${props => prop(`MobilePanel.default.${props.selected ? 'background' : 'foreground'}`)};
+  color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
+  padding: ${remSize(16)};
+  width: 100%;
+  display: flex;
+`;
+
+const FooterTabContainer = styled.div`
+  display: flex;
+  
+  h3 { text-align: center; width: 100%;}
+`;
+
+
+const MobileExamples = () => {
+  const tabs = ['Sketches', 'Collections', 'Assets'];
+  const [selected, selectTab] = useState(tabs[0]);
+  return (
+    <Screen fullscreen>
+      <Header inverted title="My Stuff">
+        <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
+      </Header>
+
+      <Footer>
+        <FooterTabContainer>
+
+          {tabs.map(tab => (
+            <FooterTab selected={tab === selected} onClick={() => selectTab(tab)}>
+              <h3>{tab}</h3>
+            </FooterTab>))
+          }
+        </FooterTabContainer>
+      </Footer>
+    </Screen>);
+};
 
 export default MobileExamples;

From 57ee6f0b8b21e4d9c583cfb9044bea994188bd9c Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 28 Jul 2020 11:33:38 -0300
Subject: [PATCH 03/50] :construction: mount List components

---
 client/modules/App/App.jsx                  |  3 +-
 client/modules/Mobile/MobileExamples.jsx    | 43 +++++++++++++++++----
 client/modules/Mobile/MobileSketchView.jsx  |  6 +--
 client/modules/Mobile/MobileViewContent.jsx |  9 +++++
 4 files changed, 48 insertions(+), 13 deletions(-)
 create mode 100644 client/modules/Mobile/MobileViewContent.jsx

diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index af441a9d..346ea411 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -34,7 +34,8 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {/* FIXME: remove false */}
+        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );
diff --git a/client/modules/Mobile/MobileExamples.jsx b/client/modules/Mobile/MobileExamples.jsx
index 38edfd9f..0ecbae27 100644
--- a/client/modules/Mobile/MobileExamples.jsx
+++ b/client/modules/Mobile/MobileExamples.jsx
@@ -7,9 +7,13 @@ import IconButton from '../../components/mobile/IconButton';
 import { ExitIcon } from '../../common/icons';
 import Footer from '../../components/mobile/Footer';
 import { prop, remSize } from '../../theme';
+import SketchList from '../IDE/components/SketchList';
+import CollectionList from '../IDE/components/CollectionList';
+import AssetList from '../IDE/components/AssetList';
+import Content from './MobileViewContent';
 
 const FooterTab = styled.div`
-  background: ${props => prop(`MobilePanel.default.${props.selected ? 'background' : 'foreground'}`)};
+  background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
   color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
   padding: ${remSize(16)};
   width: 100%;
@@ -19,24 +23,49 @@ const FooterTab = styled.div`
 const FooterTabContainer = styled.div`
   display: flex;
   
-  h3 { text-align: center; width: 100%;}
+  h3 { text-align: center; width: 100%; }
 `;
 
+// switch (tabKey) {
+//   case TabKey.assets:
+//     return <AssetList key={username} username={username} />;
+//   case TabKey.collections:
+//     return <CollectionList key={username} username={username} />;
+//   case TabKey.sketches:
+//   default:
+//     return <SketchList key={username} username={username} />;
+// }
+
+const Panels = {
+  Sketches: () => <SketchList />,
+  Collections: () => <CollectionList />,
+  Assets: () => <AssetList />
+};
 
 const MobileExamples = () => {
-  const tabs = ['Sketches', 'Collections', 'Assets'];
-  const [selected, selectTab] = useState(tabs[0]);
+  // const tabs = ['Sketches', 'Collections', 'Assets'];
+  const Tabs = Object.keys(Panels);
+  const [selected, selectTab] = useState(Tabs[0]);
   return (
     <Screen fullscreen>
       <Header inverted title="My Stuff">
         <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
       </Header>
 
+
+      <Content>
+        {Panels[selected] && Panels[selected]()}
+      </Content>
+
+
       <Footer>
         <FooterTabContainer>
-
-          {tabs.map(tab => (
-            <FooterTab selected={tab === selected} onClick={() => selectTab(tab)}>
+          {Tabs.map(tab => (
+            <FooterTab
+              key={`tab-${tab}`}
+              selected={tab === selected}
+              onClick={() => selectTab(tab)}
+            >
               <h3>{tab}</h3>
             </FooterTab>))
           }
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx
index da4e9829..9e24d159 100644
--- a/client/modules/Mobile/MobileSketchView.jsx
+++ b/client/modules/Mobile/MobileSketchView.jsx
@@ -19,11 +19,7 @@ import { getHTMLFile } from '../IDE/reducers/files';
 import { ExitIcon } from '../../common/icons';
 import { remSize } from '../../theme';
 import Footer from '../../components/mobile/Footer';
-
-const Content = styled.div`
-  z-index: 0;
-  margin-top: ${remSize(68)};
-`;
+import Content from './MobileViewContent';
 
 const MobileSketchView = (props) => {
   const { files, ide, preferences } = useSelector(state => state);
diff --git a/client/modules/Mobile/MobileViewContent.jsx b/client/modules/Mobile/MobileViewContent.jsx
new file mode 100644
index 00000000..5e8a5c48
--- /dev/null
+++ b/client/modules/Mobile/MobileViewContent.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+import { remSize } from '../../theme';
+
+
+export default styled.div`
+  z-index: 0;
+  margin-top: ${remSize(68)};
+`;

From 7e9aa18a75bb86947dc9990bfa5447e194b38564 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 28 Jul 2020 16:50:51 -0300
Subject: [PATCH 04/50] :ok_hand: fix dropdown link to original view

---
 client/components/OverlayManager.jsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/client/components/OverlayManager.jsx b/client/components/OverlayManager.jsx
index 53025a7e..204e0cc0 100644
--- a/client/components/OverlayManager.jsx
+++ b/client/components/OverlayManager.jsx
@@ -28,11 +28,7 @@ const OverlayManager = ({ overlay, hideOverlay }) => {
       href: '/mobile/preferences',
     },
     { icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
-    {
-      icon: PreferencesIcon,
-      title: 'Original Editor',
-      href: '/mobile/preferences',
-    },
+    { icon: PreferencesIcon, title: 'Original Editor', href: '/' },
   ];
 
   const jsx = (

From 262199d017be847a3be8dcf6422f6b194651d386 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 28 Jul 2020 17:13:55 -0300
Subject: [PATCH 05/50] :sparkles: load examples on MobileDashboard

---
 client/components/mobile/Header.jsx           | 17 +++++---
 ...MobileExamples.jsx => MobileDashboard.jsx} | 43 +++++++++++--------
 client/routes.jsx                             |  4 +-
 3 files changed, 39 insertions(+), 25 deletions(-)
 rename client/modules/Mobile/{MobileExamples.jsx => MobileDashboard.jsx} (67%)

diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx
index 9a40f170..750a3afa 100644
--- a/client/components/mobile/Header.jsx
+++ b/client/components/mobile/Header.jsx
@@ -18,7 +18,7 @@ const HeaderDiv = styled.div`
   width: 100%;
   background: ${props => background(props)};
   color: ${textColor};
-  padding: ${remSize(12)};
+  padding: ${props => remSize(props.slim === true ? 2 : 12)};
   padding-left: ${remSize(16)};
   padding-right: ${remSize(16)};
   z-index: 1;
@@ -31,8 +31,10 @@ const HeaderDiv = styled.div`
 
   svg {
     max-height: ${remSize(32)};
-    padding: ${remSize(4)}
+    padding: ${remSize(4)};
   }
+
+  & svg path { fill: ${textColor} !important; }
 `;
 
 const IconContainer = styled.div`
@@ -52,9 +54,10 @@ const TitleContainer = styled.div`
 `;
 
 const Header = ({
-  title, subtitle, leftButton, children, transparent, inverted
+  title, subtitle, leftButton, children,
+  transparent, inverted, slim
 }) => (
-  <HeaderDiv transparent={transparent} inverted={inverted}>
+  <HeaderDiv transparent={transparent} slim={slim} inverted={inverted}>
     {leftButton}
     <TitleContainer padded={subtitle === null}>
       {title && <h2>{title}</h2>}
@@ -72,7 +75,8 @@ Header.propTypes = {
   leftButton: PropTypes.element,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
   transparent: PropTypes.bool,
-  inverted: PropTypes.bool
+  inverted: PropTypes.bool,
+  slim: PropTypes.bool,
 };
 
 Header.defaultProps = {
@@ -81,7 +85,8 @@ Header.defaultProps = {
   leftButton: null,
   children: [],
   transparent: false,
-  inverted: false
+  inverted: false,
+  slim: false
 };
 
 export default Header;
diff --git a/client/modules/Mobile/MobileExamples.jsx b/client/modules/Mobile/MobileDashboard.jsx
similarity index 67%
rename from client/modules/Mobile/MobileExamples.jsx
rename to client/modules/Mobile/MobileDashboard.jsx
index 0ecbae27..c08a01ee 100644
--- a/client/modules/Mobile/MobileExamples.jsx
+++ b/client/modules/Mobile/MobileDashboard.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { bindActionCreators } from 'redux';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Screen from '../../components/mobile/MobileScreen';
 import Header from '../../components/mobile/Header';
@@ -37,41 +37,50 @@ const FooterTabContainer = styled.div`
 // }
 
 const Panels = {
-  Sketches: () => <SketchList />,
+  Sketches: props => <SketchList {...props} />,
   Collections: () => <CollectionList />,
   Assets: () => <AssetList />
 };
 
-const MobileExamples = () => {
+const MobileDashboard = ({ username }) => {
   // const tabs = ['Sketches', 'Collections', 'Assets'];
   const Tabs = Object.keys(Panels);
   const [selected, selectTab] = useState(Tabs[0]);
+
+  const isExamples = username === 'p5';
+
   return (
     <Screen fullscreen>
-      <Header inverted title="My Stuff">
+      <Header slim inverted title={isExamples ? 'Examples' : 'My Stuff'}>
         <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
       </Header>
 
 
       <Content>
-        {Panels[selected] && Panels[selected]()}
+        {Panels[selected] && Panels[selected]({ username })}
       </Content>
 
 
       <Footer>
-        <FooterTabContainer>
-          {Tabs.map(tab => (
-            <FooterTab
-              key={`tab-${tab}`}
-              selected={tab === selected}
-              onClick={() => selectTab(tab)}
-            >
-              <h3>{tab}</h3>
-            </FooterTab>))
-          }
-        </FooterTabContainer>
+        {!isExamples &&
+          <FooterTabContainer>
+            {Tabs.map(tab => (
+              <FooterTab
+                key={`tab-${tab}`}
+                selected={tab === selected}
+                onClick={() => selectTab(tab)}
+              >
+                <h3>{(tab === 'Sketches' && username === 'p5') ? 'Examples' : tab}</h3>
+              </FooterTab>))
+            }
+          </FooterTabContainer>
+        }
       </Footer>
     </Screen>);
 };
 
-export default MobileExamples;
+MobileDashboard.propTypes = { username: PropTypes.string };
+MobileDashboard.defaultProps = { username: '' };
+
+
+export default MobileDashboard;
diff --git a/client/routes.jsx b/client/routes.jsx
index b3a61193..d801e838 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -15,10 +15,10 @@ import AccountView from './modules/User/pages/AccountView';
 import CollectionView from './modules/User/pages/CollectionView';
 import DashboardView from './modules/User/pages/DashboardView';
 import createRedirectWithUsername from './components/createRedirectWithUsername';
+import MobileDashboard from './modules/Mobile/MobileDashboard';
 import { getUser } from './modules/User/actions';
 import { stopSketch } from './modules/IDE/actions/ide';
 import { userIsAuthenticated, userIsNotAuthenticated, userIsAuthorized } from './utils/auth';
-import MobileExamples from './modules/Mobile/MobileExamples';
 
 const checkAuth = (store) => {
   store.dispatch(getUser());
@@ -61,7 +61,7 @@ const routes = store => (
     <Route path="/mobile" component={MobileIDEView} />
     <Route path="/mobile/preview" component={MobileSketchView} />
     <Route path="/mobile/preferences" component={MobilePreferences} />
-    <Route path="/mobile/examples" component={MobileExamples} />
+    <Route path="/mobile/examples" component={() => <MobileDashboard username="p5" />} />
   </Route>
 );
 

From b2c4a6cd9d680ae888d47b31a7fb4fe8d8279c18 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 28 Jul 2020 17:46:22 -0300
Subject: [PATCH 06/50] :sparkles: mount searchbar on examples/dashboard view

---
 client/modules/Mobile/MobileDashboard.jsx   | 43 ++++++++++++---------
 client/modules/Mobile/MobileViewContent.jsx |  2 +-
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/client/modules/Mobile/MobileDashboard.jsx b/client/modules/Mobile/MobileDashboard.jsx
index c08a01ee..4358e68e 100644
--- a/client/modules/Mobile/MobileDashboard.jsx
+++ b/client/modules/Mobile/MobileDashboard.jsx
@@ -11,6 +11,9 @@ import SketchList from '../IDE/components/SketchList';
 import CollectionList from '../IDE/components/CollectionList';
 import AssetList from '../IDE/components/AssetList';
 import Content from './MobileViewContent';
+import { SketchSearchbar } from '../IDE/components/Searchbar';
+
+const EXAMPLE_USERNAME = 'p5';
 
 const FooterTab = styled.div`
   background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
@@ -20,34 +23,35 @@ const FooterTab = styled.div`
   display: flex;
 `;
 
-const FooterTabContainer = styled.div`
+const Subheader = styled.div`
+
+  .searchbar {
+    display: flex;
+    * {
+      border-radius: 0px;
+    }
+  }
+  .searchbar__input { width: 100%;    }
+`;
+
+
+const FooterTabSwitcher = styled.div`
   display: flex;
   
   h3 { text-align: center; width: 100%; }
 `;
 
-// switch (tabKey) {
-//   case TabKey.assets:
-//     return <AssetList key={username} username={username} />;
-//   case TabKey.collections:
-//     return <CollectionList key={username} username={username} />;
-//   case TabKey.sketches:
-//   default:
-//     return <SketchList key={username} username={username} />;
-// }
-
 const Panels = {
   Sketches: props => <SketchList {...props} />,
-  Collections: () => <CollectionList />,
-  Assets: () => <AssetList />
+  Collections: props => <CollectionList {...props} />,
+  Assets: props => <AssetList {...props} />
 };
 
 const MobileDashboard = ({ username }) => {
-  // const tabs = ['Sketches', 'Collections', 'Assets'];
   const Tabs = Object.keys(Panels);
   const [selected, selectTab] = useState(Tabs[0]);
 
-  const isExamples = username === 'p5';
+  const isExamples = username === EXAMPLE_USERNAME;
 
   return (
     <Screen fullscreen>
@@ -56,14 +60,17 @@ const MobileDashboard = ({ username }) => {
       </Header>
 
 
-      <Content>
+      <Content slimheader>
+        <Subheader>
+          <SketchSearchbar />
+        </Subheader>
         {Panels[selected] && Panels[selected]({ username })}
       </Content>
 
 
       <Footer>
         {!isExamples &&
-          <FooterTabContainer>
+          <FooterTabSwitcher>
             {Tabs.map(tab => (
               <FooterTab
                 key={`tab-${tab}`}
@@ -73,7 +80,7 @@ const MobileDashboard = ({ username }) => {
                 <h3>{(tab === 'Sketches' && username === 'p5') ? 'Examples' : tab}</h3>
               </FooterTab>))
             }
-          </FooterTabContainer>
+          </FooterTabSwitcher>
         }
       </Footer>
     </Screen>);
diff --git a/client/modules/Mobile/MobileViewContent.jsx b/client/modules/Mobile/MobileViewContent.jsx
index 5e8a5c48..d4e09dbe 100644
--- a/client/modules/Mobile/MobileViewContent.jsx
+++ b/client/modules/Mobile/MobileViewContent.jsx
@@ -5,5 +5,5 @@ import { remSize } from '../../theme';
 
 export default styled.div`
   z-index: 0;
-  margin-top: ${remSize(68)};
+  margin-top: ${props => remSize(props.slimheader ? 50 : 68)};
 `;

From 056455c92d63265326ff2da483f626345bbb8282 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 28 Jul 2020 18:10:20 -0300
Subject: [PATCH 07/50] :broom: restore devtools sidebar, enable mobile on
 .env.example

---
 .env.example                              | 1 +
 client/modules/App/App.jsx                | 3 +--
 client/modules/Mobile/MobileDashboard.jsx | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/.env.example b/.env.example
index 3a070317..a1db1ecb 100644
--- a/.env.example
+++ b/.env.example
@@ -26,3 +26,4 @@ S3_BUCKET_URL_BASE=<alt-for-s3-url>
 SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production
 UI_ACCESS_TOKEN_ENABLED=false
 UPLOAD_LIMIT=250000000
+MOBILE_ENABLED=true
diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index 346ea411..af441a9d 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -34,8 +34,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {/* FIXME: remove false */}
-        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );
diff --git a/client/modules/Mobile/MobileDashboard.jsx b/client/modules/Mobile/MobileDashboard.jsx
index 4358e68e..adda7b59 100644
--- a/client/modules/Mobile/MobileDashboard.jsx
+++ b/client/modules/Mobile/MobileDashboard.jsx
@@ -31,7 +31,7 @@ const Subheader = styled.div`
       border-radius: 0px;
     }
   }
-  .searchbar__input { width: 100%;    }
+  .searchbar__input { width: 100%; }
 `;
 
 
@@ -67,7 +67,6 @@ const MobileDashboard = ({ username }) => {
         {Panels[selected] && Panels[selected]({ username })}
       </Content>
 
-
       <Footer>
         {!isExamples &&
           <FooterTabSwitcher>

From 6e668cda6837d1dd5d9c1bf1879fe21b972b2517 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 30 Jul 2020 15:40:43 -0300
Subject: [PATCH 08/50] :construction: improve routing for mobile examples
 screen

---
 client/modules/App/App.jsx                 |  3 +-
 client/modules/IDE/pages/MobileIDEView.jsx |  2 +-
 client/modules/Mobile/MobileDashboard.jsx  | 27 ++++++++++++------
 client/routes.jsx                          |  7 +++--
 server/routes/server.routes.js             | 32 +++++++++++++++-------
 5 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index af441a9d..346ea411 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -34,7 +34,8 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {/* FIXME: remove false */}
+        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 86cd1766..dd019fab 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -48,7 +48,7 @@ const NavItem = styled.li`
 
 const headerNavOptions = [
   { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
-  { icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
+  { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
   { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
 ];
 
diff --git a/client/modules/Mobile/MobileDashboard.jsx b/client/modules/Mobile/MobileDashboard.jsx
index adda7b59..103f02c0 100644
--- a/client/modules/Mobile/MobileDashboard.jsx
+++ b/client/modules/Mobile/MobileDashboard.jsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import { withRouter } from 'react-router';
+
 import Screen from '../../components/mobile/MobileScreen';
 import Header from '../../components/mobile/Header';
 import IconButton from '../../components/mobile/IconButton';
@@ -42,15 +44,20 @@ const FooterTabSwitcher = styled.div`
 `;
 
 const Panels = {
-  Sketches: props => <SketchList {...props} />,
-  Collections: props => <CollectionList {...props} />,
-  Assets: props => <AssetList {...props} />
+  Sketches: SketchList,
+  Collections: CollectionList,
+  Assets: AssetList
 };
 
-const MobileDashboard = ({ username }) => {
+const renderPanel = (name, props) => (Component => (Component && <Component {...props} />))(Panels[name]);
+
+
+const MobileDashboard = ({ params }) => {
   const Tabs = Object.keys(Panels);
   const [selected, selectTab] = useState(Tabs[0]);
 
+  // const username = 'p5';
+  const { username } = params;
   const isExamples = username === EXAMPLE_USERNAME;
 
   return (
@@ -64,7 +71,7 @@ const MobileDashboard = ({ username }) => {
         <Subheader>
           <SketchSearchbar />
         </Subheader>
-        {Panels[selected] && Panels[selected]({ username })}
+        {renderPanel(selected, { username })}
       </Content>
 
       <Footer>
@@ -85,8 +92,12 @@ const MobileDashboard = ({ username }) => {
     </Screen>);
 };
 
-MobileDashboard.propTypes = { username: PropTypes.string };
-MobileDashboard.defaultProps = { username: '' };
+MobileDashboard.propTypes = {
+  params: PropTypes.shape({
+    username: PropTypes.string.isRequired
+  })
+};
+MobileDashboard.defaultProps = { params: {} };
 
 
-export default MobileDashboard;
+export default withRouter(MobileDashboard);
diff --git a/client/routes.jsx b/client/routes.jsx
index d801e838..4aba9a81 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -58,10 +58,13 @@ const routes = store => (
     <Route path="/:username/collections/:collection_id" component={CollectionView} />
     <Route path="/about" component={IDEView} />
 
-    <Route path="/mobile" component={MobileIDEView} />
+    <Route path="/mobile/:username/sketches/:project_id" component={MobileIDEView} />
+
+    <Route path="/mobile/:username/sketches" component={MobileDashboard} />
     <Route path="/mobile/preview" component={MobileSketchView} />
     <Route path="/mobile/preferences" component={MobilePreferences} />
-    <Route path="/mobile/examples" component={() => <MobileDashboard username="p5" />} />
+    <Route path="/mobile" component={MobileIDEView} />
+
   </Route>
 );
 
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
index 7fe969e2..247d80b1 100644
--- a/server/routes/server.routes.js
+++ b/server/routes/server.routes.js
@@ -114,16 +114,6 @@ router.get('/about', (req, res) => {
   res.send(renderIndex());
 });
 
-if (process.env.MOBILE_ENABLED) {
-  router.get('/mobile', (req, res) => res.send(renderIndex()));
-
-  router.get('/mobile/preview', (req, res) => res.send(renderIndex()));
-
-  router.get('/mobile/preferences', (req, res) => res.send(renderIndex()));
-
-  router.get('/mobile/examples', (req, res) => res.send(renderIndex()));
-}
-
 router.get('/:username/collections/create', (req, res) => {
   userExists(req.params.username, (exists) => {
     const isLoggedInUser = req.user && req.user.username === req.params.username;
@@ -152,4 +142,26 @@ router.get('/:username/collections', (req, res) => {
   ));
 });
 
+
+// Mobile Routes
+if (process.env.MOBILE_ENABLED) {
+  router.get('/mobile', (req, res) => res.send(renderIndex()));
+
+  router.get('/mobile/preview', (req, res) => res.send(renderIndex()));
+
+  router.get('/mobile/preferences', (req, res) => res.send(renderIndex()));
+
+  router.get('/mobile/:username/sketches', (req, res) => {
+    userExists(req.params.username, exists => (
+      exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
+    ));
+  });
+
+  router.get('/mobile/:username/sketches/:project_id', (req, res) => {
+    projectForUserExists(req.params.username, req.params.project_id, exists => (
+      exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
+    ));
+  });
+}
+
 export default router;

From bf674514747aed651c746218ad62c0e60692541b Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 30 Jul 2020 15:44:03 -0300
Subject: [PATCH 09/50] :construction: improve header navigation

---
 client/modules/IDE/pages/MobileIDEView.jsx | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index dd019fab..8b1e770d 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -20,7 +20,7 @@ import { getHTMLFile } from '../reducers/files';
 
 // Local Imports
 import Editor from '../components/Editor';
-import { PlayIcon, ExitIcon, MoreIcon } from '../../../common/icons';
+import { PlayIcon, MoreIcon } from '../../../common/icons';
 
 import IconButton from '../../../components/mobile/IconButton';
 import Header from '../../../components/mobile/Header';
@@ -48,7 +48,7 @@ const NavItem = styled.li`
 
 const headerNavOptions = [
   { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
-  { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
+  { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
   { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
 ];
 
@@ -66,8 +66,6 @@ const MobileIDEView = (props) => {
     files,
     closeEditorOptions,
     showEditorOptions,
-    showKeyboardShortcutModal,
-    setUnsavedChanges,
     startRefreshSketch,
     stopSketch,
     expandSidebar,
@@ -89,13 +87,6 @@ const MobileIDEView = (props) => {
       <Header
         title={project.name}
         subtitle={selectedFile.name}
-        leftButton={
-          <IconButton
-            to="/mobile"
-            icon={ExitIcon}
-            aria-label="Return to original editor"
-          />
-        }
       >
         <NavItem>
           <IconButton
@@ -237,10 +228,6 @@ MobileIDEView.propTypes = {
 
   showEditorOptions: PropTypes.func.isRequired,
 
-  showKeyboardShortcutModal: PropTypes.func.isRequired,
-
-  setUnsavedChanges: PropTypes.func.isRequired,
-
   startRefreshSketch: PropTypes.func.isRequired,
 
   stopSketch: PropTypes.func.isRequired,

From 42b002595b99dbf7e0a114abdd4f0d4b65d34450 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 30 Jul 2020 16:13:00 -0300
Subject: [PATCH 10/50] :construction: add link to MyStuff when user is logged
 in

---
 client/modules/IDE/pages/MobileIDEView.jsx | 24 +++++++++-----
 client/routes.jsx                          |  9 +++--
 server/routes/server.routes.js             | 38 ++++++++++++++++++++++
 3 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 8b1e770d..b548ffe9 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -46,13 +46,6 @@ const NavItem = styled.li`
   position: relative;
 `;
 
-const headerNavOptions = [
-  { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
-  { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
-  { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
-];
-
-
 const MobileIDEView = (props) => {
   const {
     preferences,
@@ -75,12 +68,27 @@ const MobileIDEView = (props) => {
     showRuntimeErrorWarning,
     hideRuntimeErrorWarning,
     startSketch,
+    user
   } = props;
 
   const [tmController, setTmController] = useState(null); // eslint-disable-line
 
+  const { username } = user;
+  const navOptionsLoggedIn = [
+    { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
+    { icon: PreferencesIcon, title: 'My Stuff', href: `/mobile/${username}/sketches` },
+    { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
+    { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
+  ];
 
-  const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown right items={headerNavOptions} />);
+  const navOptionsLoggedOut = [
+    { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
+    { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
+    { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
+  ];
+
+
+  const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown right items={username ? navOptionsLoggedIn : navOptionsLoggedOut} />);
 
   return (
     <Screen fullscreen>
diff --git a/client/routes.jsx b/client/routes.jsx
index 4aba9a81..ed72bcf7 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -58,13 +58,18 @@ const routes = store => (
     <Route path="/:username/collections/:collection_id" component={CollectionView} />
     <Route path="/about" component={IDEView} />
 
-    <Route path="/mobile/:username/sketches/:project_id" component={MobileIDEView} />
 
-    <Route path="/mobile/:username/sketches" component={MobileDashboard} />
     <Route path="/mobile/preview" component={MobileSketchView} />
     <Route path="/mobile/preferences" component={MobilePreferences} />
     <Route path="/mobile" component={MobileIDEView} />
 
+    <Route path="/mobile/:username/sketches" component={MobileDashboard} />
+    <Route path="/mobile/:username/sketches/:project_id" component={MobileIDEView} />
+    <Route path="/mobile/:username/assets" component={userIsAuthenticated(userIsAuthorized(MobileDashboard))} />
+    <Route path="/mobile/:username/collections" component={MobileDashboard} />
+    <Route path="/mobile/:username/collections/create" component={MobileDashboard} />
+    <Route path="/mobile/:username/collections/:collection_id" component={CollectionView} />
+
   </Route>
 );
 
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
index 247d80b1..8d90fc45 100644
--- a/server/routes/server.routes.js
+++ b/server/routes/server.routes.js
@@ -162,6 +162,44 @@ if (process.env.MOBILE_ENABLED) {
       exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
     ));
   });
+
+  router.get('/mobile/:username/assets', (req, res) => {
+    userExists(req.params.username, (exists) => {
+      const isLoggedInUser = req.user && req.user.username === req.params.username;
+      const canAccess = exists && isLoggedInUser;
+      return canAccess ?
+        res.send(renderIndex()) :
+        get404Sketch(html => res.send(html));
+    });
+  });
+
+  router.get('/:username/collections/create', (req, res) => {
+    userExists(req.params.username, (exists) => {
+      const isLoggedInUser = req.user && req.user.username === req.params.username;
+      const canAccess = exists && isLoggedInUser;
+      return canAccess ?
+        res.send(renderIndex()) :
+        get404Sketch(html => res.send(html));
+    });
+  });
+
+  router.get('/:username/collections/create', (req, res) => {
+    userExists(req.params.username, exists => (
+      exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
+    ));
+  });
+
+  router.get('/:username/collections/:id', (req, res) => {
+    collectionForUserExists(req.params.username, req.params.id, exists => (
+      exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
+    ));
+  });
+
+  router.get('/:username/collections', (req, res) => {
+    userExists(req.params.username, exists => (
+      exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
+    ));
+  });
 }
 
 export default router;

From e287e551a36d33ac0b54e8a6c34c42be71e53fc6 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 30 Jul 2020 17:18:21 -0300
Subject: [PATCH 11/50] :construction: rename MobileDashboard to
 MobileDashboardView

---
 .../{MobileDashboard.jsx => MobileDashboardView.jsx}   |  0
 client/routes.jsx                                      | 10 +++++-----
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename client/modules/Mobile/{MobileDashboard.jsx => MobileDashboardView.jsx} (100%)

diff --git a/client/modules/Mobile/MobileDashboard.jsx b/client/modules/Mobile/MobileDashboardView.jsx
similarity index 100%
rename from client/modules/Mobile/MobileDashboard.jsx
rename to client/modules/Mobile/MobileDashboardView.jsx
diff --git a/client/routes.jsx b/client/routes.jsx
index ed72bcf7..79238c87 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -15,7 +15,7 @@ import AccountView from './modules/User/pages/AccountView';
 import CollectionView from './modules/User/pages/CollectionView';
 import DashboardView from './modules/User/pages/DashboardView';
 import createRedirectWithUsername from './components/createRedirectWithUsername';
-import MobileDashboard from './modules/Mobile/MobileDashboard';
+import MobileDashboardView from './modules/Mobile/MobileDashboardView';
 import { getUser } from './modules/User/actions';
 import { stopSketch } from './modules/IDE/actions/ide';
 import { userIsAuthenticated, userIsNotAuthenticated, userIsAuthorized } from './utils/auth';
@@ -63,11 +63,11 @@ const routes = store => (
     <Route path="/mobile/preferences" component={MobilePreferences} />
     <Route path="/mobile" component={MobileIDEView} />
 
-    <Route path="/mobile/:username/sketches" component={MobileDashboard} />
+    <Route path="/mobile/:username/sketches" component={MobileDashboardView} />
     <Route path="/mobile/:username/sketches/:project_id" component={MobileIDEView} />
-    <Route path="/mobile/:username/assets" component={userIsAuthenticated(userIsAuthorized(MobileDashboard))} />
-    <Route path="/mobile/:username/collections" component={MobileDashboard} />
-    <Route path="/mobile/:username/collections/create" component={MobileDashboard} />
+    <Route path="/mobile/:username/assets" component={userIsAuthenticated(userIsAuthorized(MobileDashboardView))} />
+    <Route path="/mobile/:username/collections" component={MobileDashboardView} />
+    <Route path="/mobile/:username/collections/create" component={MobileDashboardView} />
     <Route path="/mobile/:username/collections/:collection_id" component={CollectionView} />
 
   </Route>

From 40db9152821c40eea7427f45c08b49ccdb5272be Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 31 Jul 2020 09:04:48 -0300
Subject: [PATCH 12/50] :bug: fix panels not changing

---
 client/modules/App/App.jsx                    |  2 +-
 client/modules/IDE/actions/collections.js     |  1 +
 client/modules/Mobile/MobileDashboardView.jsx | 40 ++++++++++++-------
 client/routes.jsx                             |  3 +-
 server/routes/server.routes.js                | 31 ++++++--------
 5 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index 346ea411..f9a8de34 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -35,7 +35,7 @@ class App extends React.Component {
     return (
       <div className="app">
         {/* FIXME: remove false */}
-        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );
diff --git a/client/modules/IDE/actions/collections.js b/client/modules/IDE/actions/collections.js
index 3aa954ac..1d2a8e2b 100644
--- a/client/modules/IDE/actions/collections.js
+++ b/client/modules/IDE/actions/collections.js
@@ -17,6 +17,7 @@ export function getCollections(username) {
     } else {
       url = '/collections';
     }
+    console.log(url);
     apiClient.get(url)
       .then((response) => {
         dispatch({
diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 103f02c0..29a69bfb 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { string } from 'prop-types';
 import styled from 'styled-components';
-import { withRouter } from 'react-router';
+import { withRouter, Link } from 'react-router';
 
 import Screen from '../../components/mobile/MobileScreen';
 import Header from '../../components/mobile/Header';
@@ -17,7 +17,7 @@ import { SketchSearchbar } from '../IDE/components/Searchbar';
 
 const EXAMPLE_USERNAME = 'p5';
 
-const FooterTab = styled.div`
+const FooterTab = styled(Link)`
   background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
   color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
   padding: ${remSize(16)};
@@ -44,24 +44,32 @@ const FooterTabSwitcher = styled.div`
 `;
 
 const Panels = {
-  Sketches: SketchList,
-  Collections: CollectionList,
-  Assets: AssetList
+  sketches: SketchList,
+  collections: CollectionList,
+  assets: AssetList
 };
 
 const renderPanel = (name, props) => (Component => (Component && <Component {...props} />))(Panels[name]);
 
+const getPanel = (pathname) => {
+  const pathparts = pathname ? pathname.split('/') : [];
+  const matches = Object.keys(Panels).map(part => part.toLowerCase()).filter(part => pathparts.includes(part));
+  return matches && matches.length > 0 && matches[0];
+};
 
-const MobileDashboard = ({ params }) => {
+
+const MobileDashboard = ({ params, location }) => {
   const Tabs = Object.keys(Panels);
-  const [selected, selectTab] = useState(Tabs[0]);
 
-  // const username = 'p5';
   const { username } = params;
+  const { pathname } = location;
+
   const isExamples = username === EXAMPLE_USERNAME;
 
+  const panel = getPanel(pathname);
+
   return (
-    <Screen fullscreen>
+    <Screen fullscreen key={pathname}>
       <Header slim inverted title={isExamples ? 'Examples' : 'My Stuff'}>
         <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
       </Header>
@@ -71,19 +79,18 @@ const MobileDashboard = ({ params }) => {
         <Subheader>
           <SketchSearchbar />
         </Subheader>
-        {renderPanel(selected, { username })}
+        {renderPanel(panel, { username, key: pathname })}
       </Content>
-
       <Footer>
         {!isExamples &&
           <FooterTabSwitcher>
             {Tabs.map(tab => (
               <FooterTab
                 key={`tab-${tab}`}
-                selected={tab === selected}
-                onClick={() => selectTab(tab)}
+                selected={tab === panel}
+                to={pathname.replace(panel, tab)}
               >
-                <h3>{(tab === 'Sketches' && username === 'p5') ? 'Examples' : tab}</h3>
+                <h3>{(isExamples && tab === 'Sketches') ? 'Examples' : tab}</h3>
               </FooterTab>))
             }
           </FooterTabSwitcher>
@@ -93,6 +100,9 @@ const MobileDashboard = ({ params }) => {
 };
 
 MobileDashboard.propTypes = {
+  location: PropTypes.shape({
+    pathname: PropTypes.string.isRequired
+  }).isRequired,
   params: PropTypes.shape({
     username: PropTypes.string.isRequired
   })
diff --git a/client/routes.jsx b/client/routes.jsx
index 79238c87..3584099f 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -63,12 +63,11 @@ const routes = store => (
     <Route path="/mobile/preferences" component={MobilePreferences} />
     <Route path="/mobile" component={MobileIDEView} />
 
-    <Route path="/mobile/:username/sketches" component={MobileDashboardView} />
     <Route path="/mobile/:username/sketches/:project_id" component={MobileIDEView} />
     <Route path="/mobile/:username/assets" component={userIsAuthenticated(userIsAuthorized(MobileDashboardView))} />
+    <Route path="/mobile/:username/sketches" component={MobileDashboardView} />
     <Route path="/mobile/:username/collections" component={MobileDashboardView} />
     <Route path="/mobile/:username/collections/create" component={MobileDashboardView} />
-    <Route path="/mobile/:username/collections/:collection_id" component={CollectionView} />
 
   </Route>
 );
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
index 8d90fc45..d39f93e2 100644
--- a/server/routes/server.routes.js
+++ b/server/routes/server.routes.js
@@ -7,6 +7,8 @@ import { collectionForUserExists } from '../controllers/collection.controller';
 
 const router = new Router();
 
+const fallback404 = res => (exists => (exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))));
+
 // this is intended to be a temporary file
 // until i figure out isomorphic rendering
 
@@ -152,15 +154,11 @@ if (process.env.MOBILE_ENABLED) {
   router.get('/mobile/preferences', (req, res) => res.send(renderIndex()));
 
   router.get('/mobile/:username/sketches', (req, res) => {
-    userExists(req.params.username, exists => (
-      exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
-    ));
+    userExists(req.params.username, fallback404(res));
   });
 
   router.get('/mobile/:username/sketches/:project_id', (req, res) => {
-    projectForUserExists(req.params.username, req.params.project_id, exists => (
-      exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
-    ));
+    projectForUserExists(req.params.username, req.params.project_id, fallback404(res));
   });
 
   router.get('/mobile/:username/assets', (req, res) => {
@@ -173,7 +171,7 @@ if (process.env.MOBILE_ENABLED) {
     });
   });
 
-  router.get('/:username/collections/create', (req, res) => {
+  router.get('/mobile/:username/collections/create', (req, res) => {
     userExists(req.params.username, (exists) => {
       const isLoggedInUser = req.user && req.user.username === req.params.username;
       const canAccess = exists && isLoggedInUser;
@@ -183,22 +181,17 @@ if (process.env.MOBILE_ENABLED) {
     });
   });
 
-  router.get('/:username/collections/create', (req, res) => {
-    userExists(req.params.username, exists => (
-      exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
-    ));
+
+  router.get('/mobile/:username/collections', (req, res) => {
+    userExists(req.params.username, fallback404(res));
   });
 
-  router.get('/:username/collections/:id', (req, res) => {
-    collectionForUserExists(req.params.username, req.params.id, exists => (
-      exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
-    ));
+  router.get('/mobile/:username/collections/create', (req, res) => {
+    userExists(req.params.username, fallback404(res));
   });
 
-  router.get('/:username/collections', (req, res) => {
-    userExists(req.params.username, exists => (
-      exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
-    ));
+  router.get('/mobile/:username/collections/:id', (req, res) => {
+    collectionForUserExists(req.params.username, req.params.id, fallback404(res));
   });
 }
 

From 4aad59a288687e39f377078d5981ea0e80b3ce1d Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 31 Jul 2020 09:09:35 -0300
Subject: [PATCH 13/50] :sparkles: update search bars

---
 client/modules/Mobile/MobileDashboardView.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 29a69bfb..3e9dd269 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -13,7 +13,7 @@ import SketchList from '../IDE/components/SketchList';
 import CollectionList from '../IDE/components/CollectionList';
 import AssetList from '../IDE/components/AssetList';
 import Content from './MobileViewContent';
-import { SketchSearchbar } from '../IDE/components/Searchbar';
+import { SketchSearchbar, CollectionSearchbar } from '../IDE/components/Searchbar';
 
 const EXAMPLE_USERNAME = 'p5';
 
@@ -77,7 +77,8 @@ const MobileDashboard = ({ params, location }) => {
 
       <Content slimheader>
         <Subheader>
-          <SketchSearchbar />
+          {panel === Tabs[0] && <SketchSearchbar />}
+          {panel === Tabs[1] && <CollectionSearchbar />}
         </Subheader>
         {renderPanel(panel, { username, key: pathname })}
       </Content>

From 6aeeed7ec0c0dc784393859a7808ab82cda3d8ef Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 31 Jul 2020 10:21:26 -0300
Subject: [PATCH 14/50] :sparkles: add new button on dashboard view

---
 client/modules/IDE/pages/MobileIDEView.jsx    |  5 ++-
 client/modules/Mobile/MobileDashboardView.jsx | 35 ++++++++++++++-----
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index b548ffe9..13677363 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -88,7 +88,10 @@ const MobileIDEView = (props) => {
   ];
 
 
-  const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown right items={username ? navOptionsLoggedIn : navOptionsLoggedOut} />);
+  const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown
+    items={username ? navOptionsLoggedIn : navOptionsLoggedOut}
+    right
+  />);
 
   return (
     <Screen fullscreen>
diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 3e9dd269..eda502d4 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
-import PropTypes, { string } from 'prop-types';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import { useSelector } from 'react-redux';
 import { withRouter, Link } from 'react-router';
 
 import Screen from '../../components/mobile/MobileScreen';
@@ -14,6 +15,7 @@ import CollectionList from '../IDE/components/CollectionList';
 import AssetList from '../IDE/components/AssetList';
 import Content from './MobileViewContent';
 import { SketchSearchbar, CollectionSearchbar } from '../IDE/components/Searchbar';
+import Button from '../../common/Button';
 
 const EXAMPLE_USERNAME = 'p5';
 
@@ -26,16 +28,21 @@ const FooterTab = styled(Link)`
 `;
 
 const Subheader = styled.div`
+  display: flex;
+  flex-direction: row;
+  * { border-radius: 0px; }
 
   .searchbar {
     display: flex;
-    * {
-      border-radius: 0px;
-    }
+    width: 100%;
   }
   .searchbar__input { width: 100%; }
 `;
 
+const SubheaderButton = styled(Button)`
+  border-radius: 0px !important;
+`;
+
 
 const FooterTabSwitcher = styled.div`
   display: flex;
@@ -49,7 +56,11 @@ const Panels = {
   assets: AssetList
 };
 
-const renderPanel = (name, props) => (Component => (Component && <Component {...props} />))(Panels[name]);
+const CreatePathname = {
+  sketches: '/mobile',
+  collections: '/mobile/:username/collections/create',
+};
+
 
 const getPanel = (pathname) => {
   const pathparts = pathname ? pathname.split('/') : [];
@@ -57,15 +68,19 @@ const getPanel = (pathname) => {
   return matches && matches.length > 0 && matches[0];
 };
 
+const getCreatePathname = (panel, username) => (CreatePathname[panel] || '#').replace(':username', username);
+
+const isOwner = (user, params) => user && params && user.username === params.username;
+
+const renderPanel = (name, props) => (Component => (Component && <Component {...props} />))(Panels[name]);
 
 const MobileDashboard = ({ params, location }) => {
-  const Tabs = Object.keys(Panels);
-
+  const user = useSelector(state => state.user);
   const { username } = params;
   const { pathname } = location;
 
+  const Tabs = Object.keys(Panels);
   const isExamples = username === EXAMPLE_USERNAME;
-
   const panel = getPanel(pathname);
 
   return (
@@ -77,6 +92,7 @@ const MobileDashboard = ({ params, location }) => {
 
       <Content slimheader>
         <Subheader>
+          {isOwner(user, params) && <SubheaderButton to={getCreatePathname(panel, username)}>new</SubheaderButton>}
           {panel === Tabs[0] && <SketchSearchbar />}
           {panel === Tabs[1] && <CollectionSearchbar />}
         </Subheader>
@@ -100,6 +116,7 @@ const MobileDashboard = ({ params, location }) => {
     </Screen>);
 };
 
+
 MobileDashboard.propTypes = {
   location: PropTypes.shape({
     pathname: PropTypes.string.isRequired

From 862fe1a3ba1cec974aa6045010d0d352baec77c9 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 31 Jul 2020 14:50:38 -0300
Subject: [PATCH 15/50] :ok_hand: update server.routes.js

---
 client/modules/App/App.jsx     |  2 +-
 client/routes.jsx              |  2 +-
 server/routes/server.routes.js | 50 ----------------------------------
 server/server.js               |  4 +++
 4 files changed, 6 insertions(+), 52 deletions(-)

diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index f9a8de34..346ea411 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -35,7 +35,7 @@ class App extends React.Component {
     return (
       <div className="app">
         {/* FIXME: remove false */}
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );
diff --git a/client/routes.jsx b/client/routes.jsx
index 3584099f..a9d5632c 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -27,7 +27,7 @@ const checkAuth = (store) => {
 // TODO: This short-circuit seems unnecessary - using the mobile <Switch /> navigator (future) should prevent this from being called
 const onRouteChange = (store) => {
   const path = window.location.pathname;
-  if (path.includes('/mobile')) return;
+  if (path.includes('/mobile/preview')) return;
 
   store.dispatch(stopSketch());
 };
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
index d39f93e2..7fab75fc 100644
--- a/server/routes/server.routes.js
+++ b/server/routes/server.routes.js
@@ -145,54 +145,4 @@ router.get('/:username/collections', (req, res) => {
 });
 
 
-// Mobile Routes
-if (process.env.MOBILE_ENABLED) {
-  router.get('/mobile', (req, res) => res.send(renderIndex()));
-
-  router.get('/mobile/preview', (req, res) => res.send(renderIndex()));
-
-  router.get('/mobile/preferences', (req, res) => res.send(renderIndex()));
-
-  router.get('/mobile/:username/sketches', (req, res) => {
-    userExists(req.params.username, fallback404(res));
-  });
-
-  router.get('/mobile/:username/sketches/:project_id', (req, res) => {
-    projectForUserExists(req.params.username, req.params.project_id, fallback404(res));
-  });
-
-  router.get('/mobile/:username/assets', (req, res) => {
-    userExists(req.params.username, (exists) => {
-      const isLoggedInUser = req.user && req.user.username === req.params.username;
-      const canAccess = exists && isLoggedInUser;
-      return canAccess ?
-        res.send(renderIndex()) :
-        get404Sketch(html => res.send(html));
-    });
-  });
-
-  router.get('/mobile/:username/collections/create', (req, res) => {
-    userExists(req.params.username, (exists) => {
-      const isLoggedInUser = req.user && req.user.username === req.params.username;
-      const canAccess = exists && isLoggedInUser;
-      return canAccess ?
-        res.send(renderIndex()) :
-        get404Sketch(html => res.send(html));
-    });
-  });
-
-
-  router.get('/mobile/:username/collections', (req, res) => {
-    userExists(req.params.username, fallback404(res));
-  });
-
-  router.get('/mobile/:username/collections/create', (req, res) => {
-    userExists(req.params.username, fallback404(res));
-  });
-
-  router.get('/mobile/:username/collections/:id', (req, res) => {
-    collectionForUserExists(req.params.username, req.params.id, fallback404(res));
-  });
-}
-
 export default router;
diff --git a/server/server.js b/server/server.js
index d82aa6d8..c9794925 100644
--- a/server/server.js
+++ b/server/server.js
@@ -132,6 +132,10 @@ app.get(
 // isomorphic rendering
 app.use('/', serverRoutes);
 
+if (process.env.MOBILE_ENABLED) {
+  app.use('/mobile', serverRoutes);
+}
+
 app.use(assetRoutes);
 
 app.use('/', embedRoutes);

From 229c51238fda659ad6d5d77821600d2cf3fd04af Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Mon, 3 Aug 2020 14:35:28 -0300
Subject: [PATCH 16/50] :bug: fix navigation problem on IDEView.jsx

---
 client/modules/IDE/pages/IDEView.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index dc8d9bdb..956fd974 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -70,7 +70,7 @@ function warnIfUnsavedChanges(props) {
     props.setUnsavedChanges(false);
     return true;
   }
-  return false;
+  return true;
 }
 
 class IDEView extends React.Component {

From b498baab28a39ce6ee79d9df97f5f2ad4c70a9d3 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Mon, 3 Aug 2020 18:14:40 -0300
Subject: [PATCH 17/50] :lipstick: adjust table width to fit 320px

---
 client/modules/Mobile/MobileViewContent.jsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/modules/Mobile/MobileViewContent.jsx b/client/modules/Mobile/MobileViewContent.jsx
index 7f17b751..11582982 100644
--- a/client/modules/Mobile/MobileViewContent.jsx
+++ b/client/modules/Mobile/MobileViewContent.jsx
@@ -9,10 +9,17 @@ export default styled.div`
 
   .sketch-list__sort-button { padding: 0 }
 
-  td { font-size: ${remSize(10)} };
-  th {
+  td {
+    font-size: ${remSize(10)};
+    min-width: ${remSize(72)};
+  };
+  tbody th {
+    flex-direction: row;
     font-size: ${remSize(14)};
     /* font-weight: bold; */
-    max-width: ${remSize(140)}
+    /* width: 100%; */
+    max-width: ${remSize(140)};
+    
   };
+  td.sketch-list__dropdown-column { min-width: unset; }
 `;

From e9ad261c95cf5726147ccf6959047e92e2f82395 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 4 Aug 2020 10:55:16 -0300
Subject: [PATCH 18/50] :lipstick: omit creation date on sketch and collection
 list

---
 client/modules/App/App.jsx                    |  5 ++++-
 .../CollectionList/CollectionList.jsx         | 12 +++++++----
 .../CollectionList/CollectionListRow.jsx      | 11 +++++++---
 client/modules/IDE/components/SketchList.jsx  | 18 +++++++++++++----
 client/modules/Mobile/MobileDashboardView.jsx |  2 +-
 client/modules/Mobile/MobileViewContent.jsx   | 20 +++++++++++++++----
 6 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index af441a9d..4f69fb7c 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -34,7 +34,10 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        <div style={{ display: 'none' }}>
+
+          {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        </div>
         {this.props.children}
       </div>
     );
diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx
index 251f3e3c..0381ca09 100644
--- a/client/modules/IDE/components/CollectionList/CollectionList.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx
@@ -127,6 +127,7 @@ class CollectionList extends React.Component {
 
   render() {
     const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
+    const { mobile } = this.props;
 
     return (
       <article className="sketches-table-container">
@@ -141,8 +142,8 @@ class CollectionList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', 'Name')}
-                {this._renderFieldHeader('createdAt', 'Date Created')}
-                {this._renderFieldHeader('updatedAt', 'Date Updated')}
+                {(!mobile) && this._renderFieldHeader('createdAt', 'Date Created')}
+                {(!mobile) && this._renderFieldHeader('updatedAt', 'Date Updated')}
                 {this._renderFieldHeader('numItems', '# sketches')}
                 <th scope="col"></th>
               </tr>
@@ -150,6 +151,7 @@ class CollectionList extends React.Component {
             <tbody>
               {this.props.collections.map(collection =>
                 (<CollectionListRow
+                  mobile={mobile}
                   key={collection.id}
                   collection={collection}
                   user={this.props.user}
@@ -209,7 +211,8 @@ CollectionList.propTypes = {
     owner: PropTypes.shape({
       id: PropTypes.string
     })
-  })
+  }),
+  mobile: PropTypes.bool,
 };
 
 CollectionList.defaultProps = {
@@ -218,7 +221,8 @@ CollectionList.defaultProps = {
     id: undefined,
     owner: undefined
   },
-  username: undefined
+  username: undefined,
+  mobile: false
 };
 
 function mapStateToProps(state, ownProps) {
diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index 37f992e4..9bc70e42 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -199,7 +199,7 @@ class CollectionListRowBase extends React.Component {
   }
 
   render() {
-    const { collection } = this.props;
+    const { collection, mobile } = this.props;
 
     return (
       <tr
@@ -211,8 +211,8 @@ class CollectionListRowBase extends React.Component {
             {this.renderCollectionName()}
           </span>
         </th>
-        <td>{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>
-        <td>{format(new Date(collection.updatedAt), 'MMM D, YYYY')}</td>
+        {(!mobile) && <td>{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>}
+        {(!mobile) && <td>{format(new Date(collection.updatedAt), 'MMM D, YYYY')}</td>}
         <td>{(collection.items || []).length}</td>
         <td className="sketch-list__dropdown-column">
           {this.renderActions()}
@@ -245,6 +245,11 @@ CollectionListRowBase.propTypes = {
   deleteCollection: PropTypes.func.isRequired,
   editCollection: PropTypes.func.isRequired,
   onAddSketches: PropTypes.func.isRequired,
+  mobile: PropTypes.bool,
+};
+
+CollectionListRowBase.defaultProps = {
+  mobile: false,
 };
 
 function mapDispatchToPropsSketchListRow(dispatch) {
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index bbece87a..d6cfd29b 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -251,6 +251,7 @@ class SketchListRowBase extends React.Component {
     const {
       sketch,
       username,
+      mobile
     } = this.props;
     const { renameOpen, renameValue } = this.state;
     let url = `/${username}/sketches/${sketch.id}`;
@@ -287,7 +288,7 @@ class SketchListRowBase extends React.Component {
           <th scope="row">
             {name}
           </th>
-          <td>{format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}</td>
+          {(!mobile) && <td>{format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}</td>}
           <td>{format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')}</td>
           {this.renderDropdown()}
         </tr>
@@ -312,7 +313,12 @@ SketchListRowBase.propTypes = {
   cloneProject: PropTypes.func.isRequired,
   exportProjectAsZip: PropTypes.func.isRequired,
   changeProjectName: PropTypes.func.isRequired,
-  onAddToCollection: PropTypes.func.isRequired
+  onAddToCollection: PropTypes.func.isRequired,
+  mobile: PropTypes.bool
+};
+
+SketchListRowBase.defaultProps = {
+  mobile: false
 };
 
 function mapDispatchToPropsSketchListRow(dispatch) {
@@ -413,6 +419,7 @@ class SketchList extends React.Component {
 
   render() {
     const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
+    const { mobile } = this.props;
     return (
       <article className="sketches-table-container">
         <Helmet>
@@ -425,7 +432,7 @@ class SketchList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', 'Sketch')}
-                {this._renderFieldHeader('createdAt', 'Date Created')}
+                {(!mobile) && this._renderFieldHeader('createdAt', 'Date Created')}
                 {this._renderFieldHeader('updatedAt', 'Date Updated')}
                 <th scope="col"></th>
               </tr>
@@ -433,6 +440,7 @@ class SketchList extends React.Component {
             <tbody>
               {this.props.sketches.map(sketch =>
                 (<SketchListRow
+                  mobile={mobile}
                   key={sketch.id}
                   sketch={sketch}
                   user={this.props.user}
@@ -482,10 +490,12 @@ SketchList.propTypes = {
     field: PropTypes.string.isRequired,
     direction: PropTypes.string.isRequired
   }).isRequired,
+  mobile: PropTypes.bool,
 };
 
 SketchList.defaultProps = {
-  username: undefined
+  username: undefined,
+  mobile: false,
 };
 
 function mapStateToProps(state) {
diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index eda502d4..5acdd8d3 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -72,7 +72,7 @@ const getCreatePathname = (panel, username) => (CreatePathname[panel] || '#').re
 
 const isOwner = (user, params) => user && params && user.username === params.username;
 
-const renderPanel = (name, props) => (Component => (Component && <Component {...props} />))(Panels[name]);
+const renderPanel = (name, props) => (Component => (Component && <Component {...props} mobile />))(Panels[name]);
 
 const MobileDashboard = ({ params, location }) => {
   const user = useSelector(state => state.user);
diff --git a/client/modules/Mobile/MobileViewContent.jsx b/client/modules/Mobile/MobileViewContent.jsx
index 11582982..ded9301d 100644
--- a/client/modules/Mobile/MobileViewContent.jsx
+++ b/client/modules/Mobile/MobileViewContent.jsx
@@ -4,22 +4,34 @@ import { remSize } from '../../theme';
 
 
 export default styled.div`
+  /* Dashboard Styles */
   z-index: 0;
   margin-top: ${props => remSize(props.slimheader ? 50 : 68)};
 
-  .sketch-list__sort-button { padding: 0 }
+
+
+  /* Dashboard Styles */
+  
 
   td {
     font-size: ${remSize(10)};
     min-width: ${remSize(72)};
   };
   tbody th {
-    flex-direction: row;
     font-size: ${remSize(14)};
     /* font-weight: bold; */
-    /* width: 100%; */
-    max-width: ${remSize(140)};
+    width: 100%;
+    /* max-width: ${remSize(280)}; */
+
     
   };
+
+  .sketch-list__sort-button { padding: 0 }
+  .sketches-table__row {
+    height: ${remSize(48)};
+  }
+
+  .sketches-table-container { padding-bottom: ${remSize(160)} }
+
   td.sketch-list__dropdown-column { min-width: unset; }
 `;

From aa0ab1a9602e29a2c4a54cac9e221c52c70c4a6e Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 4 Aug 2020 11:03:00 -0300
Subject: [PATCH 19/50] :lipstick: make bottom tab switcher thinner

---
 client/modules/Mobile/MobileDashboardView.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 5acdd8d3..7a662ad9 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -22,7 +22,7 @@ const EXAMPLE_USERNAME = 'p5';
 const FooterTab = styled(Link)`
   background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
   color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
-  padding: ${remSize(16)};
+  padding: ${remSize(8)} ${remSize(16)};
   width: 100%;
   display: flex;
 `;

From f5f02488c6e4171f33f6446f1e2e69ba668b0b89 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 4 Aug 2020 12:01:33 -0300
Subject: [PATCH 20/50] :lipstick: format dates for mobile, limit <td /> width

---
 .../CollectionList/CollectionList.jsx         |  3 +-
 .../CollectionList/CollectionListRow.jsx      |  4 ++-
 client/modules/IDE/components/SketchList.jsx  | 11 +++++--
 client/modules/Mobile/MobileDashboardView.jsx | 30 +++++++++++++++++--
 client/modules/Mobile/MobileViewContent.jsx   | 27 -----------------
 5 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx
index 0381ca09..c161d2bb 100644
--- a/client/modules/IDE/components/CollectionList/CollectionList.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx
@@ -21,6 +21,7 @@ import CollectionListRow from './CollectionListRow';
 import ArrowUpIcon from '../../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../../images/sort-arrow-down.svg';
 
+
 class CollectionList extends React.Component {
   constructor(props) {
     super(props);
@@ -143,7 +144,7 @@ class CollectionList extends React.Component {
               <tr>
                 {this._renderFieldHeader('name', 'Name')}
                 {(!mobile) && this._renderFieldHeader('createdAt', 'Date Created')}
-                {(!mobile) && this._renderFieldHeader('updatedAt', 'Date Updated')}
+                {this._renderFieldHeader('updatedAt', 'Date Updated')}
                 {this._renderFieldHeader('numItems', '# sketches')}
                 <th scope="col"></th>
               </tr>
diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index 9bc70e42..f7a645e6 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -11,6 +11,8 @@ import * as ToastActions from '../../actions/toast';
 
 import DownFilledTriangleIcon from '../../../../images/down-filled-triangle.svg';
 
+const formatDateCell = (date, mobile = false) => format(new Date(date), 'MMM D, YYYY');
+
 class CollectionListRowBase extends React.Component {
   static projectInCollection(project, collection) {
     return collection.items.find(item => item.project.id === project.id) != null;
@@ -212,7 +214,7 @@ class CollectionListRowBase extends React.Component {
           </span>
         </th>
         {(!mobile) && <td>{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>}
-        {(!mobile) && <td>{format(new Date(collection.updatedAt), 'MMM D, YYYY')}</td>}
+        <td>{formatDateCell(collection.updatedAt)}</td>
         <td>{(collection.items || []).length}</td>
         <td className="sketch-list__dropdown-column">
           {this.renderActions()}
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index d6cfd29b..38f69f8b 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -22,6 +22,11 @@ import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
 import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
 
+
+const formatDateCell = (date, mobile = false) =>
+  format(new Date(date), mobile ? 'MMM D, YYYY' : 'MMM D, YYYY h:mm A')
+    .replace(', ', mobile ? '\n' : ', ');
+
 class SketchListRowBase extends React.Component {
   constructor(props) {
     super(props);
@@ -288,8 +293,8 @@ class SketchListRowBase extends React.Component {
           <th scope="row">
             {name}
           </th>
-          {(!mobile) && <td>{format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}</td>}
-          <td>{format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')}</td>
+          <td>{formatDateCell(sketch.createdAt, mobile)}</td>
+          <td>{formatDateCell(sketch.updatedAt, mobile)}</td>
           {this.renderDropdown()}
         </tr>
       </React.Fragment>);
@@ -432,7 +437,7 @@ class SketchList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', 'Sketch')}
-                {(!mobile) && this._renderFieldHeader('createdAt', 'Date Created')}
+                {this._renderFieldHeader('createdAt', 'Date Created')}
                 {this._renderFieldHeader('updatedAt', 'Date Updated')}
                 <th scope="col"></th>
               </tr>
diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 7a662ad9..f65b52bf 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -19,6 +19,32 @@ import Button from '../../common/Button';
 
 const EXAMPLE_USERNAME = 'p5';
 
+const ContentWrapper = styled(Content)`
+  td,thead button {
+    font-size: ${remSize(10)};
+    padding-left: 0;
+    text-align: left;
+  };
+
+  thead th { padding-left: 0; }
+
+  tbody th {
+    font-size: ${remSize(12)};
+    /* font-weight: bold; */
+    width: 100%;
+    max-width: 70%;
+  };
+
+  .sketch-list__sort-button { padding: 0 }
+  .sketches-table__row {
+    height: ${remSize(48)};
+  }
+
+  .sketches-table-container { padding-bottom: ${remSize(160)} }
+
+  /* td.sketch-list__dropdown-column { min-width: unset; } */
+`;
+
 const FooterTab = styled(Link)`
   background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
   color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
@@ -90,14 +116,14 @@ const MobileDashboard = ({ params, location }) => {
       </Header>
 
 
-      <Content slimheader>
+      <ContentWrapper slimheader>
         <Subheader>
           {isOwner(user, params) && <SubheaderButton to={getCreatePathname(panel, username)}>new</SubheaderButton>}
           {panel === Tabs[0] && <SketchSearchbar />}
           {panel === Tabs[1] && <CollectionSearchbar />}
         </Subheader>
         {renderPanel(panel, { username, key: pathname })}
-      </Content>
+      </ContentWrapper>
       <Footer>
         {!isExamples &&
           <FooterTabSwitcher>
diff --git a/client/modules/Mobile/MobileViewContent.jsx b/client/modules/Mobile/MobileViewContent.jsx
index ded9301d..e38e4a0c 100644
--- a/client/modules/Mobile/MobileViewContent.jsx
+++ b/client/modules/Mobile/MobileViewContent.jsx
@@ -7,31 +7,4 @@ export default styled.div`
   /* Dashboard Styles */
   z-index: 0;
   margin-top: ${props => remSize(props.slimheader ? 50 : 68)};
-
-
-
-  /* Dashboard Styles */
-  
-
-  td {
-    font-size: ${remSize(10)};
-    min-width: ${remSize(72)};
-  };
-  tbody th {
-    font-size: ${remSize(14)};
-    /* font-weight: bold; */
-    width: 100%;
-    /* max-width: ${remSize(280)}; */
-
-    
-  };
-
-  .sketch-list__sort-button { padding: 0 }
-  .sketches-table__row {
-    height: ${remSize(48)};
-  }
-
-  .sketches-table-container { padding-bottom: ${remSize(160)} }
-
-  td.sketch-list__dropdown-column { min-width: unset; }
 `;

From d3a620e420b393f31ade1a1ebb3d1a34a3d5db34 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 4 Aug 2020 16:57:24 -0300
Subject: [PATCH 21/50] :lipstick: limit width of right-aligned cells

---
 client/modules/IDE/components/SketchList.jsx  |  4 +---
 client/modules/Mobile/MobileDashboardView.jsx | 23 ++++++++++++++-----
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index 38f69f8b..9fa5d478 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -23,9 +23,7 @@ import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
 import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
 
 
-const formatDateCell = (date, mobile = false) =>
-  format(new Date(date), mobile ? 'MMM D, YYYY' : 'MMM D, YYYY h:mm A')
-    .replace(', ', mobile ? '\n' : ', ');
+const formatDateCell = (date, mobile = false) => format(new Date(date), mobile ? 'MMM D, YYYY' : 'MMM D, YYYY h:mm A');
 
 class SketchListRowBase extends React.Component {
   constructor(props) {
diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index f65b52bf..8d7cbf68 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -20,7 +20,12 @@ import Button from '../../common/Button';
 const EXAMPLE_USERNAME = 'p5';
 
 const ContentWrapper = styled(Content)`
-  td,thead button {
+  table {
+    table-layout: fixed;
+    /* white-space: nowrap; */
+  }
+  
+  td ,thead button {
     font-size: ${remSize(10)};
     padding-left: 0;
     text-align: left;
@@ -28,21 +33,27 @@ const ContentWrapper = styled(Content)`
 
   thead th { padding-left: 0; }
 
-  tbody th {
+  thead th:not(:first-child) {
+    width: 48px !important;
+}
+
+  .sketches-table__row th {
     font-size: ${remSize(12)};
-    /* font-weight: bold; */
     width: 100%;
-    max-width: 70%;
+    padding-right: ${remSize(12)}
   };
 
+  .sketches-table__row td {
+    text-align: center;
+    width: ${remSize(24)} !important;
+  }
+
   .sketch-list__sort-button { padding: 0 }
   .sketches-table__row {
     height: ${remSize(48)};
   }
 
   .sketches-table-container { padding-bottom: ${remSize(160)} }
-
-  /* td.sketch-list__dropdown-column { min-width: unset; } */
 `;
 
 const FooterTab = styled(Link)`

From a3a1834aec34c50b46228c642fa13da4a641bb96 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 4 Aug 2020 17:38:51 -0300
Subject: [PATCH 22/50] :lipstick: make sketch name bold on sketch list

---
 client/modules/Mobile/MobileDashboardView.jsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 8d7cbf68..eb0a98c5 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -33,9 +33,11 @@ const ContentWrapper = styled(Content)`
 
   thead th { padding-left: 0; }
 
-  thead th:not(:first-child) {
-    width: 48px !important;
-}
+  thead th:not(:first-child), .sketches-table__row td  {
+    width: ${remSize(54)};
+  }
+
+  tbody th { font-weight: bold; };
 
   .sketches-table__row th {
     font-size: ${remSize(12)};
@@ -45,7 +47,6 @@ const ContentWrapper = styled(Content)`
 
   .sketches-table__row td {
     text-align: center;
-    width: ${remSize(24)} !important;
   }
 
   .sketch-list__sort-button { padding: 0 }

From d452ebc9339eede8d4613eafa814f0c9e7dcd7af Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 4 Aug 2020 17:41:41 -0300
Subject: [PATCH 23/50] :lipstick: update styling so that it affects assets
 panel

---
 client/modules/Mobile/MobileDashboardView.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index eb0a98c5..ac4205d2 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -33,24 +33,24 @@ const ContentWrapper = styled(Content)`
 
   thead th { padding-left: 0; }
 
-  thead th:not(:first-child), .sketches-table__row td  {
+  thead th:not(:first-child), tbody td  {
     width: ${remSize(54)};
   }
 
   tbody th { font-weight: bold; };
 
-  .sketches-table__row th {
+  tbody th {
     font-size: ${remSize(12)};
     width: 100%;
     padding-right: ${remSize(12)}
   };
 
-  .sketches-table__row td {
+  tbody td {
     text-align: center;
   }
 
   .sketch-list__sort-button { padding: 0 }
-  .sketches-table__row {
+  tbody {
     height: ${remSize(48)};
   }
 
@@ -130,7 +130,7 @@ const MobileDashboard = ({ params, location }) => {
 
       <ContentWrapper slimheader>
         <Subheader>
-          {isOwner(user, params) && <SubheaderButton to={getCreatePathname(panel, username)}>new</SubheaderButton>}
+          {isOwner(user, params) && (panel !== Tabs[2]) && <SubheaderButton to={getCreatePathname(panel, username)}>new</SubheaderButton>}
           {panel === Tabs[0] && <SketchSearchbar />}
           {panel === Tabs[1] && <CollectionSearchbar />}
         </Subheader>

From 9771f8fd874f90bbeb143bf64074be3ebca02dc2 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 5 Aug 2020 14:56:24 -0300
Subject: [PATCH 24/50] :construction: make sketchlist route to /mobile if on
 mobile views

---
 client/modules/IDE/components/SketchList.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index 9fa5d478..f69d802e 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -262,6 +262,8 @@ class SketchListRowBase extends React.Component {
       url = `/${username}/sketches/${slugify(sketch.name, '_')}`;
     }
 
+    if (this.props.mobile) url = `/mobile${url}`;
+
     const name = (
       <React.Fragment>
         <Link to={url}>

From dd431a07dfbda349bbca72e51e18578a5e03f8cf Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 5 Aug 2020 15:08:23 -0300
Subject: [PATCH 25/50] :construction: update mobile nav dropdown option list
 structure

---
 client/modules/IDE/pages/MobileIDEView.jsx | 43 ++++++++++++++--------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index c20908a8..3504ff9f 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
@@ -46,6 +46,21 @@ const NavItem = styled.li`
   position: relative;
 `;
 
+const getNatOptions = (username = undefined) =>
+  (username
+    ? [
+      { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
+      { icon: PreferencesIcon, title: 'My Stuff', href: `/mobile/${username}/sketches` },
+      { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
+      { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
+    ]
+    : [
+      { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
+      { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
+      { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
+    ]
+  );
+
 const MobileIDEView = (props) => {
   const {
     preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
@@ -58,25 +73,23 @@ const MobileIDEView = (props) => {
   const [tmController, setTmController] = useState(null); // eslint-disable-line
 
   const { username } = user;
-  const navOptionsLoggedIn = [
-    { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
-    { icon: PreferencesIcon, title: 'My Stuff', href: `/mobile/${username}/sketches` },
-    { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
-    { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
-  ];
-
-  const navOptionsLoggedOut = [
-    { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
-    { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' },
-    { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
-  ];
-
 
   const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown
-    items={username ? navOptionsLoggedIn : navOptionsLoggedOut}
+    items={getNatOptions(username)}
     align="right"
   />);
 
+  // Load Project
+  useEffect(() => {
+    // const { project_id } = params;
+    // const oldproject_id = '';
+
+    // if (nextProps.params.project_id && !oldproject_id)
+    //   if (nextProps.params.project_id !== nextProps.project.id)
+
+    // getProject(nextProps.params.project_id);
+  }, []);
+
   return (
     <Screen fullscreen>
       <Header

From f2e8d4086158bc6550ff7b1e45da1c5be431851b Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 5 Aug 2020 15:27:22 -0300
Subject: [PATCH 26/50] :construction: write hooks for mounting MobileIDEView
 component

---
 client/modules/IDE/pages/MobileIDEView.jsx | 28 +++++++++++++++-------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 3504ff9f..c198ac0c 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -64,10 +64,10 @@ const getNatOptions = (username = undefined) =>
 const MobileIDEView = (props) => {
   const {
     preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
-    selectedFile, updateFileContent, files, user,
+    selectedFile, updateFileContent, files, user, params,
     closeEditorOptions, showEditorOptions,
     startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
-    showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch
+    showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState
   } = props;
 
   const [tmController, setTmController] = useState(null); // eslint-disable-line
@@ -79,16 +79,22 @@ const MobileIDEView = (props) => {
     align="right"
   />);
 
+  // Force state reset
+  useEffect(clearPersistedState, []);
+  useEffect(stopSketch, []);
+  useEffect(() => getProject(params.project_id), []);
+
   // Load Project
+  const [currentProjectID, setCurrentProjectID] = useState(null);
   useEffect(() => {
-    // const { project_id } = params;
-    // const oldproject_id = '';
+    if (params.project_id && !currentProjectID) {
+      if (params.project_id !== project.id) {
+        getProject(params.project_id);
+      }
+    }
+    setCurrentProjectID(params.project_id);
+  }, [params, project]);
 
-    // if (nextProps.params.project_id && !oldproject_id)
-    //   if (nextProps.params.project_id !== nextProps.project.id)
-
-    // getProject(nextProps.params.project_id);
-  }, []);
 
   return (
     <Screen fullscreen>
@@ -260,6 +266,10 @@ MobileIDEView.propTypes = {
     id: PropTypes.string,
     username: PropTypes.string,
   }).isRequired,
+
+  getProject: PropTypes.func.isRequired,
+  clearPersistedState: PropTypes.func.isRequired,
+  params: PropTypes.shape({ project_id: PropTypes.string }).isRequired,
 };
 
 function mapStateToProps(state) {

From 8fcf6533d37aa014064202fc1dc25860b7f9f225 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 5 Aug 2020 15:28:13 -0300
Subject: [PATCH 27/50] :bug: restore sidebar

---
 client/modules/App/App.jsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index 4f69fb7c..af441a9d 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -34,10 +34,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        <div style={{ display: 'none' }}>
-
-          {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
-        </div>
+        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

From 02f51afde8740defee7757a308fcc04fcca523e0 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 6 Aug 2020 10:08:41 -0300
Subject: [PATCH 28/50] :sparkles: load sketches via URL

---
 client/modules/IDE/pages/MobileIDEView.jsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index c198ac0c..c33c6cda 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -82,18 +82,18 @@ const MobileIDEView = (props) => {
   // Force state reset
   useEffect(clearPersistedState, []);
   useEffect(stopSketch, []);
-  useEffect(() => getProject(params.project_id), []);
 
   // Load Project
   const [currentProjectID, setCurrentProjectID] = useState(null);
   useEffect(() => {
+    if (!username) return;
     if (params.project_id && !currentProjectID) {
       if (params.project_id !== project.id) {
-        getProject(params.project_id);
+        getProject(params.project_id, params.username);
       }
     }
     setCurrentProjectID(params.project_id);
-  }, [params, project]);
+  }, [params, project, username]);
 
 
   return (
@@ -269,7 +269,10 @@ MobileIDEView.propTypes = {
 
   getProject: PropTypes.func.isRequired,
   clearPersistedState: PropTypes.func.isRequired,
-  params: PropTypes.shape({ project_id: PropTypes.string }).isRequired,
+  params: PropTypes.shape({
+    project_id: PropTypes.string,
+    username: PropTypes.string
+  }).isRequired,
 };
 
 function mapStateToProps(state) {

From 7558cf5e1ca2dddd771ba5901120f00c0b5376f9 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 7 Aug 2020 19:05:46 -0300
Subject: [PATCH 29/50] :sparkles: make dropdown for sketch and collection
 creation

---
 client/modules/Mobile/MobileDashboardView.jsx | 40 ++++++++++++++-----
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index ac4205d2..7cf22939 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -7,7 +7,7 @@ import { withRouter, Link } from 'react-router';
 import Screen from '../../components/mobile/MobileScreen';
 import Header from '../../components/mobile/Header';
 import IconButton from '../../components/mobile/IconButton';
-import { ExitIcon } from '../../common/icons';
+import { ExitIcon, MoreIcon } from '../../common/icons';
 import Footer from '../../components/mobile/Footer';
 import { prop, remSize } from '../../theme';
 import SketchList from '../IDE/components/SketchList';
@@ -16,6 +16,8 @@ import AssetList from '../IDE/components/AssetList';
 import Content from './MobileViewContent';
 import { SketchSearchbar, CollectionSearchbar } from '../IDE/components/Searchbar';
 import Button from '../../common/Button';
+import useAsModal from '../../components/useAsModal';
+import Dropdown from '../../components/Dropdown';
 
 const EXAMPLE_USERNAME = 'p5';
 
@@ -94,10 +96,11 @@ const Panels = {
   assets: AssetList
 };
 
-const CreatePathname = {
-  sketches: '/mobile',
-  collections: '/mobile/:username/collections/create',
-};
+
+const navOptions = username => [
+  { title: 'Create Sketch', href: '/mobile' },
+  { title: 'Create Collection', href: `/mobile/${username}/collections/create` }
+];
 
 
 const getPanel = (pathname) => {
@@ -106,7 +109,10 @@ const getPanel = (pathname) => {
   return matches && matches.length > 0 && matches[0];
 };
 
-const getCreatePathname = (panel, username) => (CreatePathname[panel] || '#').replace(':username', username);
+const NavItem = styled.li`
+  position: relative;
+`;
+
 
 const isOwner = (user, params) => user && params && user.username === params.username;
 
@@ -114,27 +120,41 @@ const renderPanel = (name, props) => (Component => (Component && <Component {...
 
 const MobileDashboard = ({ params, location }) => {
   const user = useSelector(state => state.user);
-  const { username } = params;
+  const { username: paramsUsername } = params;
   const { pathname } = location;
 
   const Tabs = Object.keys(Panels);
-  const isExamples = username === EXAMPLE_USERNAME;
+  const isExamples = paramsUsername === EXAMPLE_USERNAME;
   const panel = getPanel(pathname);
 
+
+  const [toggleNavDropdown, NavDropdown] = useAsModal(<Dropdown
+    items={navOptions(user.username)}
+    align="right"
+  />);
+
   return (
     <Screen fullscreen key={pathname}>
       <Header slim inverted title={isExamples ? 'Examples' : 'My Stuff'}>
+        <NavItem>
+          <IconButton
+            onClick={toggleNavDropdown}
+            icon={MoreIcon}
+            aria-label="Options"
+          />
+          <NavDropdown />
+
+        </NavItem>
         <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
       </Header>
 
 
       <ContentWrapper slimheader>
         <Subheader>
-          {isOwner(user, params) && (panel !== Tabs[2]) && <SubheaderButton to={getCreatePathname(panel, username)}>new</SubheaderButton>}
           {panel === Tabs[0] && <SketchSearchbar />}
           {panel === Tabs[1] && <CollectionSearchbar />}
         </Subheader>
-        {renderPanel(panel, { username, key: pathname })}
+        {renderPanel(panel, { paramsUsername, key: pathname })}
       </ContentWrapper>
       <Footer>
         {!isExamples &&

From 88c48c300a7444ff5dfa9318d9d1634c99919d55 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Mon, 10 Aug 2020 11:02:52 -0300
Subject: [PATCH 30/50] :sparkles: update bottom tab styles

---
 client/modules/App/App.jsx                    |  2 +-
 client/modules/Mobile/MobileDashboardView.jsx | 33 ++++++++++++-------
 client/theme.js                               |  1 +
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index af441a9d..2c960b8b 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -34,7 +34,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );
diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 7cf22939..824da862 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -59,12 +59,28 @@ const ContentWrapper = styled(Content)`
   .sketches-table-container { padding-bottom: ${remSize(160)} }
 `;
 
-const FooterTab = styled(Link)`
-  background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
-  color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
-  padding: ${remSize(8)} ${remSize(16)};
-  width: 100%;
+const FooterTabSwitcher = styled.div`
   display: flex;
+  justify-content: space-between;
+  
+  h3 { text-align: center; width: 100%; }
+  border-top: 1px solid ${prop('Separator')};
+
+  background: ${props => prop('backgroundColor')};
+`;
+
+const FooterTab = styled(Link)`
+  box-sizing: border-box;
+
+
+  background: transparent;
+  /* border-top: ${remSize(4)} solid ${props => prop(props.selected ? 'colors.p5jsPink' : 'MobilePanel.default.background')}; */
+  border-top: ${remSize(4)} solid ${props => (props.selected ? prop('colors.p5jsPink') : 'transparent')};
+
+  color: ${prop('primaryTextColor')};
+
+  padding: ${remSize(8)} ${remSize(16)};
+  width: 30%;
 `;
 
 const Subheader = styled.div`
@@ -83,13 +99,6 @@ const SubheaderButton = styled(Button)`
   border-radius: 0px !important;
 `;
 
-
-const FooterTabSwitcher = styled.div`
-  display: flex;
-  
-  h3 { text-align: center; width: 100%; }
-`;
-
 const Panels = {
   sketches: SketchList,
   collections: CollectionList,
diff --git a/client/theme.js b/client/theme.js
index 25688d3a..1fc6dada 100644
--- a/client/theme.js
+++ b/client/theme.js
@@ -58,6 +58,7 @@ export const prop = key => (props) => {
   return value;
 };
 
+
 export default {
   [Theme.light]: {
     colors,

From 0baf64c40298dc051112834d44c8540e9db8fe90 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Mon, 10 Aug 2020 11:29:12 -0300
Subject: [PATCH 31/50] :recycle: make Tab and TabSwitcher mobile components

---
 client/components/mobile/Tab.jsx              | 18 +++++++++++
 client/components/mobile/TabSwitcher.jsx      | 15 ++++++++++
 client/modules/Mobile/MobileDashboardView.jsx | 30 +++----------------
 3 files changed, 37 insertions(+), 26 deletions(-)
 create mode 100644 client/components/mobile/Tab.jsx
 create mode 100644 client/components/mobile/TabSwitcher.jsx

diff --git a/client/components/mobile/Tab.jsx b/client/components/mobile/Tab.jsx
new file mode 100644
index 00000000..016b29d2
--- /dev/null
+++ b/client/components/mobile/Tab.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router';
+import { prop, remSize } from '../../theme';
+
+export default styled(Link)`
+  box-sizing: border-box;
+
+
+  background: transparent;
+  /* border-top: ${remSize(4)} solid ${props => prop(props.selected ? 'colors.p5jsPink' : 'MobilePanel.default.background')}; */
+  border-top: ${remSize(4)} solid ${props => (props.selected ? prop('colors.p5jsPink') : 'transparent')};
+
+  color: ${prop('primaryTextColor')};
+
+  padding: ${remSize(8)} ${remSize(16)};
+  width: 30%;
+`;
diff --git a/client/components/mobile/TabSwitcher.jsx b/client/components/mobile/TabSwitcher.jsx
new file mode 100644
index 00000000..15a3bb0e
--- /dev/null
+++ b/client/components/mobile/TabSwitcher.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { prop, remSize } from '../../theme';
+
+export default styled.div`
+  display: flex;
+  justify-content: space-between;
+  
+  h3 { text-align: center; width: 100%; }
+  border-top: 1px solid ${prop('Separator')};
+
+  background: ${props => prop('backgroundColor')};
+`;
+
diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 824da862..a2e2c228 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useSelector } from 'react-redux';
-import { withRouter, Link } from 'react-router';
+import { withRouter } from 'react-router';
 
 import Screen from '../../components/mobile/MobileScreen';
 import Header from '../../components/mobile/Header';
 import IconButton from '../../components/mobile/IconButton';
 import { ExitIcon, MoreIcon } from '../../common/icons';
 import Footer from '../../components/mobile/Footer';
-import { prop, remSize } from '../../theme';
+import { remSize } from '../../theme';
 import SketchList from '../IDE/components/SketchList';
 import CollectionList from '../IDE/components/CollectionList';
 import AssetList from '../IDE/components/AssetList';
@@ -18,6 +18,8 @@ import { SketchSearchbar, CollectionSearchbar } from '../IDE/components/Searchba
 import Button from '../../common/Button';
 import useAsModal from '../../components/useAsModal';
 import Dropdown from '../../components/Dropdown';
+import FooterTabSwitcher from '../../components/mobile/TabSwitcher';
+import FooterTab from '../../components/mobile/Tab';
 
 const EXAMPLE_USERNAME = 'p5';
 
@@ -59,30 +61,6 @@ const ContentWrapper = styled(Content)`
   .sketches-table-container { padding-bottom: ${remSize(160)} }
 `;
 
-const FooterTabSwitcher = styled.div`
-  display: flex;
-  justify-content: space-between;
-  
-  h3 { text-align: center; width: 100%; }
-  border-top: 1px solid ${prop('Separator')};
-
-  background: ${props => prop('backgroundColor')};
-`;
-
-const FooterTab = styled(Link)`
-  box-sizing: border-box;
-
-
-  background: transparent;
-  /* border-top: ${remSize(4)} solid ${props => prop(props.selected ? 'colors.p5jsPink' : 'MobilePanel.default.background')}; */
-  border-top: ${remSize(4)} solid ${props => (props.selected ? prop('colors.p5jsPink') : 'transparent')};
-
-  color: ${prop('primaryTextColor')};
-
-  padding: ${remSize(8)} ${remSize(16)};
-  width: 30%;
-`;
-
 const Subheader = styled.div`
   display: flex;
   flex-direction: row;

From f93c07718a78a4c668dc31fa14a3a710d2c97ac0 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Mon, 10 Aug 2020 11:33:43 -0300
Subject: [PATCH 32/50] :bug: fix mobile dashboard loading wrong user's
 sketches

---
 client/modules/Mobile/MobileDashboardView.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index a2e2c228..1b371469 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -141,7 +141,7 @@ const MobileDashboard = ({ params, location }) => {
           {panel === Tabs[0] && <SketchSearchbar />}
           {panel === Tabs[1] && <CollectionSearchbar />}
         </Subheader>
-        {renderPanel(panel, { paramsUsername, key: pathname })}
+        {renderPanel(panel, { username: paramsUsername, key: pathname })}
       </ContentWrapper>
       <Footer>
         {!isExamples &&

From 672fd406fae2e467aa23d7322da5016d0362b5b0 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Mon, 10 Aug 2020 14:40:56 -0300
Subject: [PATCH 33/50] :lipstick: transform table into card list

---
 client/modules/Mobile/MobileDashboardView.jsx | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 1b371469..a8fe3e72 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -9,7 +9,7 @@ import Header from '../../components/mobile/Header';
 import IconButton from '../../components/mobile/IconButton';
 import { ExitIcon, MoreIcon } from '../../common/icons';
 import Footer from '../../components/mobile/Footer';
-import { remSize } from '../../theme';
+import { remSize, prop } from '../../theme';
 import SketchList from '../IDE/components/SketchList';
 import CollectionList from '../IDE/components/CollectionList';
 import AssetList from '../IDE/components/AssetList';
@@ -26,7 +26,6 @@ const EXAMPLE_USERNAME = 'p5';
 const ContentWrapper = styled(Content)`
   table {
     table-layout: fixed;
-    /* white-space: nowrap; */
   }
   
   td ,thead button {
@@ -35,30 +34,41 @@ const ContentWrapper = styled(Content)`
     text-align: left;
   };
 
-  thead th { padding-left: 0; }
-
-  thead th:not(:first-child), tbody td  {
-    width: ${remSize(54)};
-  }
-
-  tbody th { font-weight: bold; };
 
   tbody th {
-    font-size: ${remSize(12)};
+    font-size: ${remSize(16)};
     width: 100%;
-    padding-right: ${remSize(12)}
+    padding-right: ${remSize(12)};
+    font-weight: bold;
+    display: flex;
+    grid-area: name;
   };
 
-  tbody td {
-    text-align: center;
+  tbody td, thead th {
+    justify-self: stretch;
+    align-self: flex-end;
   }
 
-  .sketch-list__sort-button { padding: 0 }
+  tbody td:nth-child(2) { grid-column-start: 2 }
+  tbody td:last-child { justify-self: end }
+
+  /* .sketch-list__sort-button { padding: 0 } */
   tbody {
     height: ${remSize(48)};
   }
 
   .sketches-table-container { padding-bottom: ${remSize(160)} }
+  .sketches-table__row { background: white !important; height: auto }
+
+  tr {
+    align-self: start;
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    grid-template-areas: "name name name name" "none content content content";
+
+    border-radius: ${remSize(4)}; padding: ${remSize(8)};
+    box-shadow: 0 0 18px 0 ${prop('shadowColor')};
+  };
 `;
 
 const Subheader = styled.div`

From 702adf93f60aa3ca518b737647afbe88a58accf4 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Mon, 10 Aug 2020 14:55:02 -0300
Subject: [PATCH 34/50] :lipstick: improve visibility on dark mode

---
 client/components/mobile/Tab.jsx              |  2 +-
 client/modules/Mobile/MobileDashboardView.jsx | 10 ++++++++--
 client/theme.js                               |  6 ++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/client/components/mobile/Tab.jsx b/client/components/mobile/Tab.jsx
index 016b29d2..20a158b4 100644
--- a/client/components/mobile/Tab.jsx
+++ b/client/components/mobile/Tab.jsx
@@ -9,7 +9,7 @@ export default styled(Link)`
 
   background: transparent;
   /* border-top: ${remSize(4)} solid ${props => prop(props.selected ? 'colors.p5jsPink' : 'MobilePanel.default.background')}; */
-  border-top: ${remSize(4)} solid ${props => (props.selected ? prop('colors.p5jsPink') : 'transparent')};
+  border-top: ${remSize(4)} solid ${props => (props.selected ? prop('TabHighlight') : 'transparent')};
 
   color: ${prop('primaryTextColor')};
 
diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index a8fe3e72..429687e5 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -47,6 +47,7 @@ const ContentWrapper = styled(Content)`
   tbody td, thead th {
     justify-self: stretch;
     align-self: flex-end;
+    color: ${prop('primaryTextColor')}
   }
 
   tbody td:nth-child(2) { grid-column-start: 2 }
@@ -57,8 +58,13 @@ const ContentWrapper = styled(Content)`
     height: ${remSize(48)};
   }
 
-  .sketches-table-container { padding-bottom: ${remSize(160)} }
-  .sketches-table__row { background: white !important; height: auto }
+  .sketches-table-container {
+    padding-bottom: ${remSize(160)};
+    background: ${prop('backgroundColor')};
+    }
+  .sketches-table__row {
+    background: ${prop('backgroundColor')} !important; height: auto
+  }
 
   tr {
     align-self: start;
diff --git a/client/theme.js b/client/theme.js
index 1fc6dada..fec3e93d 100644
--- a/client/theme.js
+++ b/client/theme.js
@@ -104,6 +104,8 @@ export default {
       border: grays.middleLight
     },
     Separator: grays.middleLight,
+
+    TabHighlight: colors.p5jsPink,
   },
   [Theme.dark]: {
     colors,
@@ -149,6 +151,8 @@ export default {
       border: grays.middleDark
     },
     Separator: grays.middleDark,
+
+    TabHighlight: colors.p5jsPink,
   },
   [Theme.contrast]: {
     colors,
@@ -194,5 +198,7 @@ export default {
       border: grays.middleDark
     },
     Separator: grays.middleDark,
+
+    TabHighlight: colors.yellow,
   },
 };

From 8d0cfdcfb4d057bee0a50b9e5fe0062ce1b285a9 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Mon, 10 Aug 2020 15:04:41 -0300
Subject: [PATCH 35/50] :lipstick: improve visibility on light mode

---
 client/modules/Mobile/MobileDashboardView.jsx |  6 +++---
 client/theme.js                               | 20 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 429687e5..99983c86 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -51,7 +51,7 @@ const ContentWrapper = styled(Content)`
   }
 
   tbody td:nth-child(2) { grid-column-start: 2 }
-  tbody td:last-child { justify-self: end }
+  tbody td:last-child { justify-self: end; text-align: end; }
 
   /* .sketch-list__sort-button { padding: 0 } */
   tbody {
@@ -60,10 +60,10 @@ const ContentWrapper = styled(Content)`
 
   .sketches-table-container {
     padding-bottom: ${remSize(160)};
-    background: ${prop('backgroundColor')};
+    background: ${prop('SketchList.background')};
     }
   .sketches-table__row {
-    background: ${prop('backgroundColor')} !important; height: auto
+    background: ${prop('SketchList.card.background')} !important; height: auto
   }
 
   tr {
diff --git a/client/theme.js b/client/theme.js
index fec3e93d..9d096d78 100644
--- a/client/theme.js
+++ b/client/theme.js
@@ -106,6 +106,12 @@ export default {
     Separator: grays.middleLight,
 
     TabHighlight: colors.p5jsPink,
+    SketchList: {
+      background: grays.lighter,
+      card: {
+        background: grays.lighter
+      }
+    }
   },
   [Theme.dark]: {
     colors,
@@ -153,6 +159,12 @@ export default {
     Separator: grays.middleDark,
 
     TabHighlight: colors.p5jsPink,
+    SketchList: {
+      background: grays.darker,
+      card: {
+        background: grays.dark
+      }
+    }
   },
   [Theme.contrast]: {
     colors,
@@ -199,6 +211,12 @@ export default {
     },
     Separator: grays.middleDark,
 
-    TabHighlight: colors.yellow,
+    TabHighlight: grays.darker,
+    SketchList: {
+      background: colors.yellow,
+      card: {
+        background: grays.dark
+      }
+    }
   },
 };

From 4a1eb0e3c5467c95ed374d63add058f6bb344204 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 11 Aug 2020 16:15:17 -0300
Subject: [PATCH 36/50] :ok_hand: create space between dropdown icon and
 sortable th

---
 client/modules/Mobile/MobileDashboardView.jsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 99983c86..0e3095dd 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -50,13 +50,12 @@ const ContentWrapper = styled(Content)`
     color: ${prop('primaryTextColor')}
   }
 
+  thead th svg { margin-left: ${remSize(8)}}
+
   tbody td:nth-child(2) { grid-column-start: 2 }
   tbody td:last-child { justify-self: end; text-align: end; }
 
-  /* .sketch-list__sort-button { padding: 0 } */
-  tbody {
-    height: ${remSize(48)};
-  }
+  tbody { height: ${remSize(48)}; }
 
   .sketches-table-container {
     padding-bottom: ${remSize(160)};
@@ -69,7 +68,7 @@ const ContentWrapper = styled(Content)`
   tr {
     align-self: start;
     display: grid;
-    grid-template-columns: repeat(4,1fr);
+    grid-template-columns: repeat(3,5fr) 1fr;
     grid-template-areas: "name name name name" "none content content content";
 
     border-radius: ${remSize(4)}; padding: ${remSize(8)};

From 9c25daac8ce9e9468b7e03604b7999c9fd237c81 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 11 Aug 2020 16:30:48 -0300
Subject: [PATCH 37/50] :ok_hand: update card fields alignment

---
 .../components/CollectionList/CollectionListRow.jsx |  4 ++--
 client/modules/IDE/components/SketchList.jsx        |  4 ++--
 client/modules/Mobile/MobileDashboardView.jsx       | 13 ++++++++-----
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index f7a645e6..f3119632 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -214,8 +214,8 @@ class CollectionListRowBase extends React.Component {
           </span>
         </th>
         {(!mobile) && <td>{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>}
-        <td>{formatDateCell(collection.updatedAt)}</td>
-        <td>{(collection.items || []).length}</td>
+        <td>{mobile && 'Updated: '}{formatDateCell(collection.updatedAt)}</td>
+        <td>{mobile && '# sketches: '}{(collection.items || []).length}</td>
         <td className="sketch-list__dropdown-column">
           {this.renderActions()}
         </td>
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index f69d802e..4aacd8c2 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -293,8 +293,8 @@ class SketchListRowBase extends React.Component {
           <th scope="row">
             {name}
           </th>
-          <td>{formatDateCell(sketch.createdAt, mobile)}</td>
-          <td>{formatDateCell(sketch.updatedAt, mobile)}</td>
+          <td>{mobile && 'Created: '}{formatDateCell(sketch.createdAt, mobile)}</td>
+          <td>{mobile && 'Updated: '}{formatDateCell(sketch.updatedAt, mobile)}</td>
           {this.renderDropdown()}
         </tr>
       </React.Fragment>);
diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 0e3095dd..84a5d550 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -50,10 +50,13 @@ const ContentWrapper = styled(Content)`
     color: ${prop('primaryTextColor')}
   }
 
-  thead th svg { margin-left: ${remSize(8)}}
+  tbody td { justify-self: center; padding-left: ${remSize(12)}}
 
-  tbody td:nth-child(2) { grid-column-start: 2 }
-  tbody td:last-child { justify-self: end; text-align: end; }
+  thead th svg { margin-left: ${remSize(8)} }
+
+  
+  tbody td:last-child { justify-self: end; text-align: end; };
+  .sketches-table .sketch-list__dropdown-column { min-width: unset };
 
   tbody { height: ${remSize(48)}; }
 
@@ -68,8 +71,8 @@ const ContentWrapper = styled(Content)`
   tr {
     align-self: start;
     display: grid;
-    grid-template-columns: repeat(3,5fr) 1fr;
-    grid-template-areas: "name name name name" "none content content content";
+    grid-template-columns: 5fr 5fr 2fr;
+    grid-template-areas: "name name name" "content content content";
 
     border-radius: ${remSize(4)}; padding: ${remSize(8)};
     box-shadow: 0 0 18px 0 ${prop('shadowColor')};

From 35716b108a4e08781d0680fb3210e69576e104b9 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 11 Aug 2020 16:37:26 -0300
Subject: [PATCH 38/50] :ok_hand: update header alignment

---
 client/modules/Mobile/MobileDashboardView.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 84a5d550..6b2b1834 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -74,9 +74,12 @@ const ContentWrapper = styled(Content)`
     grid-template-columns: 5fr 5fr 2fr;
     grid-template-areas: "name name name" "content content content";
 
-    border-radius: ${remSize(4)}; padding: ${remSize(8)};
     box-shadow: 0 0 18px 0 ${prop('shadowColor')};
   };
+
+  thead tr { grid-template-columns: auto ${remSize(100)} ${remSize(100)} 0fr; }
+
+  tbody tr { padding: ${remSize(8)}; border-radius: ${remSize(4)}; }
 `;
 
 const Subheader = styled.div`

From 222b6d8c627f3827998a5c504b3ad20e8b30c3bb Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 11 Aug 2020 16:45:32 -0300
Subject: [PATCH 39/50] :ok_hand: remove gap between header and search bar

---
 client/modules/Mobile/MobileViewContent.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/modules/Mobile/MobileViewContent.jsx b/client/modules/Mobile/MobileViewContent.jsx
index e38e4a0c..39d2a59f 100644
--- a/client/modules/Mobile/MobileViewContent.jsx
+++ b/client/modules/Mobile/MobileViewContent.jsx
@@ -6,5 +6,5 @@ import { remSize } from '../../theme';
 export default styled.div`
   /* Dashboard Styles */
   z-index: 0;
-  margin-top: ${props => remSize(props.slimheader ? 50 : 68)};
+  margin-top: ${props => remSize(props.slimheader ? 49 : 68)};
 `;

From 5a96c0f8b5933127fd948520918ed614a5203268 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 11 Aug 2020 16:56:56 -0300
Subject: [PATCH 40/50] :ok_hand: centralize loader

---
 client/modules/Mobile/MobileDashboardView.jsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 6b2b1834..aeb66d5c 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -20,6 +20,7 @@ import useAsModal from '../../components/useAsModal';
 import Dropdown from '../../components/Dropdown';
 import FooterTabSwitcher from '../../components/mobile/TabSwitcher';
 import FooterTab from '../../components/mobile/Tab';
+import Loader from '../App/components/loader';
 
 const EXAMPLE_USERNAME = 'p5';
 
@@ -53,7 +54,6 @@ const ContentWrapper = styled(Content)`
   tbody td { justify-self: center; padding-left: ${remSize(12)}}
 
   thead th svg { margin-left: ${remSize(8)} }
-
   
   tbody td:last-child { justify-self: end; text-align: end; };
   .sketches-table .sketch-list__dropdown-column { min-width: unset };
@@ -71,15 +71,21 @@ const ContentWrapper = styled(Content)`
   tr {
     align-self: start;
     display: grid;
-    grid-template-columns: 5fr 5fr 2fr;
-    grid-template-areas: "name name name" "content content content";
-
     box-shadow: 0 0 18px 0 ${prop('shadowColor')};
   };
 
-  thead tr { grid-template-columns: auto ${remSize(100)} ${remSize(100)} 0fr; }
+  thead tr {
+    grid-template-columns: auto ${remSize(100)} ${remSize(100)} 0fr;
+  }
 
-  tbody tr { padding: ${remSize(8)}; border-radius: ${remSize(4)}; }
+  tbody tr {
+    padding: ${remSize(8)};
+    border-radius: ${remSize(4)};
+    grid-template-columns: 5fr 5fr 2fr;
+    grid-template-areas: "name name name" "content content content";
+  }
+
+  .loader-container { position: fixed ; padding-bottom: 32% }
 `;
 
 const Subheader = styled.div`

From a9061afe1c4eff71afbaedcbe29394bdf2ec939a Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 11 Aug 2020 16:57:28 -0300
Subject: [PATCH 41/50] :ok_hand: restore sidebar

---
 client/modules/App/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index 2c960b8b..af441a9d 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -34,7 +34,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

From 19bff74ad6c58d2e7f46b1a91d4c5ca3d685a626 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 11 Aug 2020 18:19:15 -0300
Subject: [PATCH 42/50] :ok_hand: distribute table header evenly

---
 client/modules/Mobile/MobileDashboardView.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index aeb66d5c..3e75db0f 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -31,11 +31,9 @@ const ContentWrapper = styled(Content)`
   
   td ,thead button {
     font-size: ${remSize(10)};
-    padding-left: 0;
     text-align: left;
   };
 
-
   tbody th {
     font-size: ${remSize(16)};
     width: 100%;
@@ -46,16 +44,17 @@ const ContentWrapper = styled(Content)`
   };
 
   tbody td, thead th {
-    justify-self: stretch;
+    justify-self: center;
     align-self: flex-end;
     color: ${prop('primaryTextColor')}
   }
 
-  tbody td { justify-self: center; padding-left: ${remSize(12)}}
-
   thead th svg { margin-left: ${remSize(8)} }
   
+  tbody td:first-child { justify-self: start; text-align: start; };
+  tbody td { justify-self: center; }
   tbody td:last-child { justify-self: end; text-align: end; };
+
   .sketches-table .sketch-list__dropdown-column { min-width: unset };
 
   tbody { height: ${remSize(48)}; }
@@ -75,7 +74,7 @@ const ContentWrapper = styled(Content)`
   };
 
   thead tr {
-    grid-template-columns: auto ${remSize(100)} ${remSize(100)} 0fr;
+    grid-template-columns: 1fr 1fr 1fr 0fr;
   }
 
   tbody tr {
@@ -86,6 +85,7 @@ const ContentWrapper = styled(Content)`
   }
 
   .loader-container { position: fixed ; padding-bottom: 32% }
+
 `;
 
 const Subheader = styled.div`

From a28a4a5c8347715f2b932ec5dc5c1b69a3826718 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 11 Aug 2020 18:38:52 -0300
Subject: [PATCH 43/50] :ok_hand: restore sidebar

---
 client/modules/Mobile/MobileDashboardView.jsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 3e75db0f..7bae38f4 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -49,13 +49,15 @@ const ContentWrapper = styled(Content)`
     color: ${prop('primaryTextColor')}
   }
 
+
   thead th svg { margin-left: ${remSize(8)} }
   
-  tbody td:first-child { justify-self: start; text-align: start; };
-  tbody td { justify-self: center; }
-  tbody td:last-child { justify-self: end; text-align: end; };
+  
+  tbody td              { justify-self: start; text-align: start; padding: 0 }
+  tbody td:nth-child(2) { justify-self: start;  text-align: start; padding-left: ${remSize(12)}};
+  tbody td:last-child   { justify-self: end;    text-align: end; };
 
-  .sketches-table .sketch-list__dropdown-column { min-width: unset };
+  .sketch-list__dropdown-column { width: auto; };
 
   tbody { height: ${remSize(48)}; }
 
@@ -64,8 +66,11 @@ const ContentWrapper = styled(Content)`
     background: ${prop('SketchList.background')};
     }
   .sketches-table__row {
-    background: ${prop('SketchList.card.background')} !important; height: auto
+    background: ${prop('SketchList.card.background')} !important;
+    height: auto
   }
+  
+
 
   tr {
     align-self: start;
@@ -80,7 +85,7 @@ const ContentWrapper = styled(Content)`
   tbody tr {
     padding: ${remSize(8)};
     border-radius: ${remSize(4)};
-    grid-template-columns: 5fr 5fr 2fr;
+    grid-template-columns: 5fr 5fr 1fr;
     grid-template-areas: "name name name" "content content content";
   }
 

From 4b12f2f2f6aab4b4782281a9883502e4aac2664a Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Wed, 12 Aug 2020 14:50:31 -0400
Subject: [PATCH 44/50] Add minor styling fixes for MobileDashboardView

---
 client/modules/Mobile/MobileDashboardView.jsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 7bae38f4..ba51ad02 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -62,7 +62,6 @@ const ContentWrapper = styled(Content)`
   tbody { height: ${remSize(48)}; }
 
   .sketches-table-container {
-    padding-bottom: ${remSize(160)};
     background: ${prop('SketchList.background')};
     }
   .sketches-table__row {
@@ -91,6 +90,19 @@ const ContentWrapper = styled(Content)`
 
   .loader-container { position: fixed ; padding-bottom: 32% }
 
+  .sketches-table thead th {
+    background-color: transparent;
+  }
+
+  .asset-table thead th {
+    height: initial;
+    align-self: center;
+  }
+
+  .asset-table thead tr {
+    height: ${remSize(32)}
+  }
+
 `;
 
 const Subheader = styled.div`

From 9f3e083c1726bc990e15b23534629cc4a4310ccd Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 12 Aug 2020 17:13:03 -0300
Subject: [PATCH 45/50] :construction: move drop arrow to top of card, unhide
 CollectionList createdAt

---
 .../components/CollectionList/CollectionList.jsx    |  2 +-
 .../components/CollectionList/CollectionListRow.jsx |  2 +-
 client/modules/Mobile/MobileDashboardView.jsx       | 13 +++++++++----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx
index c161d2bb..4a933f41 100644
--- a/client/modules/IDE/components/CollectionList/CollectionList.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx
@@ -143,7 +143,7 @@ class CollectionList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', 'Name')}
-                {(!mobile) && this._renderFieldHeader('createdAt', 'Date Created')}
+                {this._renderFieldHeader('createdAt', 'Date Created')}
                 {this._renderFieldHeader('updatedAt', 'Date Updated')}
                 {this._renderFieldHeader('numItems', '# sketches')}
                 <th scope="col"></th>
diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index f3119632..de20cea9 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -213,7 +213,7 @@ class CollectionListRowBase extends React.Component {
             {this.renderCollectionName()}
           </span>
         </th>
-        {(!mobile) && <td>{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>}
+        <td>{mobile && 'Created: '}{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>
         <td>{mobile && 'Updated: '}{formatDateCell(collection.updatedAt)}</td>
         <td>{mobile && '# sketches: '}{(collection.items || []).length}</td>
         <td className="sketch-list__dropdown-column">
diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index ba51ad02..b33bca42 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -55,7 +55,12 @@ const ContentWrapper = styled(Content)`
   
   tbody td              { justify-self: start; text-align: start; padding: 0 }
   tbody td:nth-child(2) { justify-self: start;  text-align: start; padding-left: ${remSize(12)}};
-  tbody td:last-child   { justify-self: end;    text-align: end; };
+  tbody td:last-child   {
+    justify-self: end;
+    text-align: end;
+    grid-row-start: 1;
+    grid-column-start: 3;
+  };
 
   .sketch-list__dropdown-column { width: auto; };
 
@@ -78,13 +83,13 @@ const ContentWrapper = styled(Content)`
   };
 
   thead tr {
-    grid-template-columns: 1fr 1fr 1fr 0fr;
+    grid-template-columns: repeat(${props => props.fieldcount}, 1fr) 0fr;
   }
 
   tbody tr {
     padding: ${remSize(8)};
     border-radius: ${remSize(4)};
-    grid-template-columns: 5fr 5fr 1fr;
+    grid-template-columns: repeat(${props => props.fieldcount - 1}) 1fr;
     grid-template-areas: "name name name" "content content content";
   }
 
@@ -180,7 +185,7 @@ const MobileDashboard = ({ params, location }) => {
       </Header>
 
 
-      <ContentWrapper slimheader>
+      <ContentWrapper slimheader fieldcount={panel === Tabs[1] ? 4 : 3}>
         <Subheader>
           {panel === Tabs[0] && <SketchSearchbar />}
           {panel === Tabs[1] && <CollectionSearchbar />}

From 69acd3af6720c089239340e58fefe74d8719ebcb Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 12 Aug 2020 17:42:14 -0300
Subject: [PATCH 46/50] :construction: add gap to dashboard cards

---
 client/modules/Mobile/MobileDashboardView.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index b33bca42..bce0f454 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -27,6 +27,7 @@ const EXAMPLE_USERNAME = 'p5';
 const ContentWrapper = styled(Content)`
   table {
     table-layout: fixed;
+    margin-bottom: ${remSize(120)}
   }
   
   td ,thead button {
@@ -91,6 +92,7 @@ const ContentWrapper = styled(Content)`
     border-radius: ${remSize(4)};
     grid-template-columns: repeat(${props => props.fieldcount - 1}) 1fr;
     grid-template-areas: "name name name" "content content content";
+    grid-row-gap: ${remSize(12)}
   }
 
   .loader-container { position: fixed ; padding-bottom: 32% }

From 03f28321be9f58b5fd69f6ead9dc9a4053ff2605 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 13 Aug 2020 09:54:10 -0300
Subject: [PATCH 47/50] :ok_hand: hide header on assets list

---
 client/modules/Mobile/MobileDashboardView.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index bce0f454..270faee7 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -24,6 +24,7 @@ import Loader from '../App/components/loader';
 
 const EXAMPLE_USERNAME = 'p5';
 
+// @ghalestrilo 08/13/2020: I'm sorry
 const ContentWrapper = styled(Content)`
   table {
     table-layout: fixed;
@@ -85,6 +86,7 @@ const ContentWrapper = styled(Content)`
 
   thead tr {
     grid-template-columns: repeat(${props => props.fieldcount}, 1fr) 0fr;
+    ${props => props.noheader && 'display: none;'}
   }
 
   tbody tr {
@@ -187,7 +189,7 @@ const MobileDashboard = ({ params, location }) => {
       </Header>
 
 
-      <ContentWrapper slimheader fieldcount={panel === Tabs[1] ? 4 : 3}>
+      <ContentWrapper slimheader fieldcount={panel === Tabs[1] ? 4 : 3} noheader={panel === Tabs[2]}>
         <Subheader>
           {panel === Tabs[0] && <SketchSearchbar />}
           {panel === Tabs[1] && <CollectionSearchbar />}

From 2e34bd7ea35d5c45ea7ac6c3a2a6ac3d0513f257 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 13 Aug 2020 15:52:51 -0300
Subject: [PATCH 48/50] :lipstick: omit 'Date' from header fields on mobile

---
 .../modules/IDE/components/CollectionList/CollectionList.jsx  | 4 ++--
 client/modules/IDE/components/SketchList.jsx                  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx
index 4a933f41..9b9b3807 100644
--- a/client/modules/IDE/components/CollectionList/CollectionList.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx
@@ -143,8 +143,8 @@ class CollectionList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', 'Name')}
-                {this._renderFieldHeader('createdAt', 'Date Created')}
-                {this._renderFieldHeader('updatedAt', 'Date Updated')}
+                {this._renderFieldHeader('createdAt', `${mobile ? '' : 'Date '}Created`)}
+                {this._renderFieldHeader('updatedAt', `${mobile ? '' : 'Date '}Updated`)}
                 {this._renderFieldHeader('numItems', '# sketches')}
                 <th scope="col"></th>
               </tr>
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index 4aacd8c2..4940a495 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -437,8 +437,8 @@ class SketchList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', 'Sketch')}
-                {this._renderFieldHeader('createdAt', 'Date Created')}
-                {this._renderFieldHeader('updatedAt', 'Date Updated')}
+                {this._renderFieldHeader('createdAt', `${mobile && 'Date '}Created`)}
+                {this._renderFieldHeader('updatedAt', `${mobile && 'Date '}Updated`)}
                 <th scope="col"></th>
               </tr>
             </thead>

From e181a741b150a9a815a1ee7e987191b16eeed677 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 13 Aug 2020 16:07:46 -0300
Subject: [PATCH 49/50] :lipstick: omit 'Date' from header fields on mobile

---
 client/modules/IDE/components/SketchList.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index 4940a495..d5f9d71d 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -437,8 +437,8 @@ class SketchList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', 'Sketch')}
-                {this._renderFieldHeader('createdAt', `${mobile && 'Date '}Created`)}
-                {this._renderFieldHeader('updatedAt', `${mobile && 'Date '}Updated`)}
+                {this._renderFieldHeader('createdAt', `${mobile ? '' : 'Date '}Created`)}
+                {this._renderFieldHeader('updatedAt', `${mobile ? '' : 'Date '}Updated`)}
                 <th scope="col"></th>
               </tr>
             </thead>

From cbae85fa518ffc1b561bea21c8386dad04705b31 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 13 Aug 2020 16:17:23 -0300
Subject: [PATCH 50/50] :lipstick: reduce '# sketches' to 'Sketches' on
 collections list

---
 client/modules/IDE/components/CollectionList/CollectionList.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx
index 9b9b3807..1007ca97 100644
--- a/client/modules/IDE/components/CollectionList/CollectionList.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx
@@ -145,7 +145,7 @@ class CollectionList extends React.Component {
                 {this._renderFieldHeader('name', 'Name')}
                 {this._renderFieldHeader('createdAt', `${mobile ? '' : 'Date '}Created`)}
                 {this._renderFieldHeader('updatedAt', `${mobile ? '' : 'Date '}Updated`)}
-                {this._renderFieldHeader('numItems', '# sketches')}
+                {this._renderFieldHeader('numItems', mobile ? 'Sketches' : '# sketches')}
                 <th scope="col"></th>
               </tr>
             </thead>