From ac0c519ccbd53187a13d12edeb1fd85591c1c94f Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 21 Jul 2020 15:03:00 -0300
Subject: [PATCH 01/12] :construction: create <Dropdown /> component

---
 client/components/Dropdown.jsx | 62 ++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 client/components/Dropdown.jsx

diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx
new file mode 100644
index 00000000..9e2526bd
--- /dev/null
+++ b/client/components/Dropdown.jsx
@@ -0,0 +1,62 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Link } from 'react-router';
+
+
+// <ul className="nav__dropdown">
+
+
+// <ul className="nav__dropdown">
+
+// <li className="nav__dropdown-item">
+//   <button
+//     onFocus={this.handleFocusForLang}
+//     onBlur={this.handleBlur}
+//     value="it"
+//     onClick={e => this.handleLangSelection(e)}
+//   >
+//     Italian (Test Fallback)
+//   </button>
+// </li>
+// <li className="nav__dropdown-item">
+//   <button
+//     onFocus={this.handleFocusForLang}
+//     onBlur={this.handleBlur}
+//     value="en-US"
+//     onClick={e => this.handleLangSelection(e)}
+//   >English
+//   </button>
+// </li>
+// <li className="nav__dropdown-item">
+//   <button
+//     onFocus={this.handleFocusForLang}
+//     onBlur={this.handleBlur}
+//     value="es-419"
+//     onClick={e => this.handleLangSelection(e)}
+//   >
+//     Español
+//   </button>
+// </li>
+// </ul>
+
+const Dropdown = ({ items }) => (
+  <ul className="nav__dropdown">
+    {items && items.map(item => (
+      <li className="nav__dropdown-item">
+      </li>
+    ))
+    }
+  </ul>
+);
+
+Dropdown.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    action: PropTypes.func
+  }))
+};
+
+Dropdown.defaultProps = {
+  items: []
+};
+
+export default Dropdown;

From 24e6b3639f656c557a20c3b7eacf17487070e7c4 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 21 Jul 2020 18:33:10 -0300
Subject: [PATCH 02/12] :bento: create <MoreIcon />

---
 client/common/icons.jsx                    | 2 ++
 client/images/more.svg                     | 5 +++++
 client/modules/IDE/pages/MobileIDEView.jsx | 4 ++--
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 client/images/more.svg

diff --git a/client/common/icons.jsx b/client/common/icons.jsx
index bbc2a662..b0521f0c 100644
--- a/client/common/icons.jsx
+++ b/client/common/icons.jsx
@@ -12,6 +12,7 @@ import Exit from '../images/exit.svg';
 import DropdownArrow from '../images/down-filled-triangle.svg';
 import Preferences from '../images/preferences.svg';
 import Play from '../images/triangle-arrow-right.svg';
+import More from '../images/more.svg';
 
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@@ -74,3 +75,4 @@ export const ExitIcon = withLabel(Exit);
 export const DropdownArrowIcon = withLabel(DropdownArrow);
 export const PreferencesIcon = withLabel(Preferences);
 export const PlayIcon = withLabel(Play);
+export const MoreIcon = withLabel(More);
diff --git a/client/images/more.svg b/client/images/more.svg
new file mode 100644
index 00000000..ee41de95
--- /dev/null
+++ b/client/images/more.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.28004 13.76C10.5207 13.76 11.52 14.7324 11.52 16.0174C11.52 17.2676 10.5207 18.24 9.28004 18.24C8.03942 18.24 7.04004 17.2676 7.04004 16.0174C7.04004 14.7324 8.03942 13.76 9.28004 13.76Z" fill="#333333"/>
+<path d="M18.24 16C18.24 14.7629 17.2371 13.76 16 13.76C14.7629 13.76 13.76 14.7629 13.76 16C13.76 17.2371 14.7629 18.24 16 18.24C17.2371 18.24 18.24 17.2371 18.24 16Z" fill="#333333"/>
+<path d="M22.72 13.76C23.9606 13.76 24.96 14.705 24.96 15.965C24.96 17.295 23.9606 18.24 22.72 18.24C21.4794 18.24 20.48 17.295 20.48 15.965C20.48 14.74 21.4794 13.76 22.72 13.76Z" fill="#333333"/>
+</svg>
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 943c980e..f24eba76 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -19,7 +19,7 @@ import { getHTMLFile } from '../reducers/files';
 
 // Local Imports
 import Editor from '../components/Editor';
-import { PreferencesIcon, PlayIcon, ExitIcon } from '../../../common/icons';
+import { PreferencesIcon, PlayIcon, ExitIcon, MoreIcon } from '../../../common/icons';
 
 import IconButton from '../../../components/mobile/IconButton';
 import Header from '../../../components/mobile/Header';
@@ -60,7 +60,7 @@ const MobileIDEView = (props) => {
         <IconButton
           to="/mobile/preferences"
           onClick={() => setOverlay('preferences')}
-          icon={PreferencesIcon}
+          icon={MoreIcon}
           aria-label="Open preferences menu"
         />
         <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />

From ca88c4e68cfa85257577dbf5ff09f71ab60a7821 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 21 Jul 2020 19:03:22 -0300
Subject: [PATCH 03/12] :construction: put an invisible <Dropdown /> on
 MobileIDEView

---
 client/components/Dropdown.jsx             |  2 ++
 client/modules/IDE/pages/MobileIDEView.jsx | 22 +++++++++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx
index 9e2526bd..1ca7210b 100644
--- a/client/components/Dropdown.jsx
+++ b/client/components/Dropdown.jsx
@@ -39,6 +39,8 @@ import { Link } from 'react-router';
 // </li>
 // </ul>
 
+// 'nav__item--open'
+
 const Dropdown = ({ items }) => (
   <ul className="nav__dropdown">
     {items && items.map(item => (
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index f24eba76..15f211cd 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -28,6 +28,7 @@ import Footer from '../../../components/mobile/Footer';
 import IDEWrapper from '../../../components/mobile/IDEWrapper';
 import Console from '../components/Console';
 import { remSize } from '../../../theme';
+import Dropdown from '../../../components/Dropdown';
 
 const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
 
@@ -36,6 +37,16 @@ const BottomBarContent = styled.h2`
   padding-left: ${remSize(32)};
 `;
 
+
+// TODO: Move to new file?
+// const overlays = {};
+// const OverlayManager = name => overlays[name] || null;
+
+const headerNavOptions = [
+  { icon: PreferencesIcon, title: 'Preferences', route: '/mobile/preferences' }
+];
+
+
 const MobileIDEView = (props) => {
   const {
     preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
@@ -48,6 +59,8 @@ const MobileIDEView = (props) => {
   const [tmController, setTmController] = useState(null); // eslint-disable-line
   const [overlay, setOverlay] = useState(null); // eslint-disable-line
 
+  // const overlayActive = name => (overlay === name);
+
   return (
     <Screen fullscreen>
       <Header
@@ -58,10 +71,10 @@ const MobileIDEView = (props) => {
         }
       >
         <IconButton
-          to="/mobile/preferences"
-          onClick={() => setOverlay('preferences')}
+          // to="/mobile/preferences"
+          onClick={() => setOverlay('dropdown')}
           icon={MoreIcon}
-          aria-label="Open preferences menu"
+          aria-label="Options"
         />
         <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
       </Header>
@@ -106,6 +119,9 @@ const MobileIDEView = (props) => {
         <Console />
         <BottomBarContent>Bottom Bar</BottomBarContent>
       </Footer>
+
+      {/* Overlays */}
+      <Dropdown hidden={overlay !== 'dropdown'} items={headerNavOptions} />
     </Screen>
   );
 };

From 91a766dd4549b3cc86638e2fffd043757b91416f Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 22 Jul 2020 15:37:44 -0300
Subject: [PATCH 04/12] :construction: import dropdown list style from scss

---
 client/components/Dropdown.jsx             | 116 +++++++++++++++++++--
 client/modules/IDE/pages/MobileIDEView.jsx |  19 ++--
 client/theme.js                            |  15 ++-
 3 files changed, 133 insertions(+), 17 deletions(-)

diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx
index 1ca7210b..f7429cfa 100644
--- a/client/components/Dropdown.jsx
+++ b/client/components/Dropdown.jsx
@@ -1,6 +1,8 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router';
+import styled from 'styled-components';
+import { remSize, prop, common } from '../theme';
 
 
 // <ul className="nav__dropdown">
@@ -41,14 +43,112 @@ import { Link } from 'react-router';
 
 // 'nav__item--open'
 
+// %dropdown-open {
+//   @include themify() {
+//     background-color: map-get($theme-map, 'modal-background-color');
+//     border: 1px solid map-get($theme-map, 'modal-border-color');
+//     box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
+//     color: getThemifyVariable('primary-text-color');
+//   }
+//   text-align: left;
+//   width: #{180 / $base-font-size}rem;
+//   display: flex;
+//   position: absolute;
+//   flex-direction: column;
+//   top: 95%;
+//   height: auto;
+//   z-index: 9999;
+//   border-radius: #{6 / $base-font-size}rem;
+// -------------
+//   & li:first-child {
+//     border-radius: #{5 / $base-font-size}rem #{5 / $base-font-size}rem 0 0;
+//   }
+//   & li:last-child {
+//     border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
+//   }
+//   & li {
+//     & button,
+//     & a {
+//       @include themify() {
+//         color: getThemifyVariable('primary-text-color');
+//       }
+//       width: 100%;
+//       text-align: left;
+//       padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
+//     }
+//     height: #{35 / $base-font-size}rem;
+//     cursor: pointer;
+//     display: flex;
+//     align-items: center;
+//   }
+//   & li:hover {
+//     @include themify() {
+//       background-color: getThemifyVariable('button-background-hover-color');
+//       color: getThemifyVariable('button-hover-color')
+//     }
+//     & button, & a {
+//       @include themify() {
+//         color: getThemifyVariable('button-hover-color');
+//       }
+//     }
+//   }
+// }
+
+// %dropdown-open-left {
+//   @extend %dropdown-open;
+//   left: 0;
+// }
+
+// %dropdown-open-right {
+//   @extend %dropdown-open;
+//   right: 0;
+// }
+
+
+const DropdownWrapper = styled.div`
+  background-color: ${prop('Modal.background')};
+  border: 1px solid ${prop('Modal.border')};
+  box-shadow: 0 0 18px 0 ${common.shadowColor};
+  color: ${prop('primaryTextColor')};
+
+  text-align: left;
+  width: ${remSize(180)};
+  display: flex;
+  position: absolute;
+  flex-direction: column;
+  top: 95%;
+  height: auto;
+  z-index: 9999;
+  border-radius: ${remSize(6)};
+`;
+
+
+// @include themify() {
+//   background-color: map-get($theme-map, 'modal-background-color');
+//   border: 1px solid map-get($theme-map, 'modal-border-color');
+//   box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
+//   color: getThemifyVariable('primary-text-color');
+// }
+
+
 const Dropdown = ({ items }) => (
-  <ul className="nav__dropdown">
-    {items && items.map(item => (
-      <li className="nav__dropdown-item">
-      </li>
-    ))
-    }
-  </ul>
+  <DropdownWrapper>
+    <h1>space</h1>
+    <h1>space</h1>
+    <h1>space</h1>
+    <h1>space</h1>
+    {/* className="nav__items-left" */}
+    <ul className="nav__items-left nav__dropdown nav__item nav__item--open">
+      <h1 className="nav__dropdown-item">hello</h1>
+      <h1 className="nav__dropdown-item">hello</h1>
+      {items && items.map(({ title }) => (
+        <li className="nav__dropdown-item" key={`nav-${title && title.toLowerCase()}`}>
+          <h1>space</h1>
+        </li>
+      ))
+      }
+    </ul>
+  </DropdownWrapper>
 );
 
 Dropdown.propTypes = {
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 15f211cd..b5579fb0 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -42,10 +42,6 @@ const BottomBarContent = styled.h2`
 // const overlays = {};
 // const OverlayManager = name => overlays[name] || null;
 
-const headerNavOptions = [
-  { icon: PreferencesIcon, title: 'Preferences', route: '/mobile/preferences' }
-];
-
 
 const MobileIDEView = (props) => {
   const {
@@ -61,6 +57,10 @@ const MobileIDEView = (props) => {
 
   // const overlayActive = name => (overlay === name);
 
+  const headerNavOptions = [
+    { icon: PreferencesIcon, title: 'Preferences', route: '/mobile/preferences' }
+  ];
+
   return (
     <Screen fullscreen>
       <Header
@@ -79,6 +79,10 @@ const MobileIDEView = (props) => {
         <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
       </Header>
 
+
+      {/* TODO: Overlays */}
+      <Dropdown items={headerNavOptions} />
+
       <IDEWrapper>
         <Editor
           lintWarning={preferences.lintWarning}
@@ -115,13 +119,12 @@ const MobileIDEView = (props) => {
           provideController={setTmController}
         />
       </IDEWrapper>
+
+      {/*
       <Footer>
         <Console />
         <BottomBarContent>Bottom Bar</BottomBarContent>
-      </Footer>
-
-      {/* Overlays */}
-      <Dropdown hidden={overlay !== 'dropdown'} items={headerNavOptions} />
+      </Footer> */}
     </Screen>
   );
 };
diff --git a/client/theme.js b/client/theme.js
index 5dba9b88..b20bbbd4 100644
--- a/client/theme.js
+++ b/client/theme.js
@@ -41,7 +41,8 @@ export const grays = {
 };
 
 export const common = {
-  baseFontSize: 12
+  baseFontSize: 12,
+  shadowColor: 'rgba(0, 0, 0, 0.16)'
 };
 
 export const remSize = size => `${size / common.baseFontSize}rem`;
@@ -95,6 +96,10 @@ export default {
         background: grays.light,
         border: grays.middleLight,
       },
+    },
+    Modal: {
+      background: grays.light,
+      border: grays.middleLight
     }
   },
   [Theme.dark]: {
@@ -134,6 +139,10 @@ export default {
         background: grays.dark,
         border: grays.middleDark,
       },
+    },
+    Modal: {
+      background: grays.dark,
+      border: grays.middleDark
     }
   },
   [Theme.contrast]: {
@@ -173,6 +182,10 @@ export default {
         background: grays.dark,
         border: grays.middleDark,
       },
+    },
+    Modal: {
+      background: grays.dark,
+      border: grays.middleDark
     }
   },
 };

From c58cdc29c3e496d91694aceaa0cfa56fbea22063 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 22 Jul 2020 16:24:39 -0300
Subject: [PATCH 05/12] :construction: add navigation elements to the dropdown
 menu

---
 client/components/Dropdown.jsx             | 91 ++++++++++++++--------
 client/modules/IDE/pages/MobileIDEView.jsx |  4 +-
 2 files changed, 61 insertions(+), 34 deletions(-)

diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx
index f7429cfa..16a67475 100644
--- a/client/components/Dropdown.jsx
+++ b/client/components/Dropdown.jsx
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 import styled from 'styled-components';
 import { remSize, prop, common } from '../theme';
+import IconButton from './mobile/IconButton';
+import Button from '../common/Button';
 
 
 // <ul className="nav__dropdown">
@@ -51,21 +53,21 @@ import { remSize, prop, common } from '../theme';
 //     color: getThemifyVariable('primary-text-color');
 //   }
 //   text-align: left;
-//   width: #{180 / $base-font-size}rem;
+//   width: ${remSize(180)};
 //   display: flex;
 //   position: absolute;
 //   flex-direction: column;
 //   top: 95%;
 //   height: auto;
 //   z-index: 9999;
-//   border-radius: #{6 / $base-font-size}rem;
-// -------------
+//   border-radius: ${remSize(6)};
 //   & li:first-child {
-//     border-radius: #{5 / $base-font-size}rem #{5 / $base-font-size}rem 0 0;
+//     border-radius: ${remSize(5)} ${remSize(5)} 0 0;
 //   }
 //   & li:last-child {
-//     border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
+//     border-radius: 0 0 ${remSize(5)} ${remSize(5)};
 //   }
+// -------------
 //   & li {
 //     & button,
 //     & a {
@@ -74,9 +76,9 @@ import { remSize, prop, common } from '../theme';
 //       }
 //       width: 100%;
 //       text-align: left;
-//       padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
+//       padding: ${remSize(8)} ${remSize(16)};
 //     }
-//     height: #{35 / $base-font-size}rem;
+//     height: ${remSize(35)};
 //     cursor: pointer;
 //     display: flex;
 //     align-items: center;
@@ -105,10 +107,10 @@ import { remSize, prop, common } from '../theme';
 // }
 
 
-const DropdownWrapper = styled.div`
+const DropdownWrapper = styled.ul`
   background-color: ${prop('Modal.background')};
   border: 1px solid ${prop('Modal.border')};
-  box-shadow: 0 0 18px 0 ${common.shadowColor};
+  box-shadow: 0 0 18px 0 ${prop('shadowColor')};
   color: ${prop('primaryTextColor')};
 
   text-align: left;
@@ -120,45 +122,68 @@ const DropdownWrapper = styled.div`
   height: auto;
   z-index: 9999;
   border-radius: ${remSize(6)};
+
+  & li:first-child { border-radius: ${remSize(5)} ${remSize(5)} 0 0; }
+  & li:last-child  { border-radius: 0 0 ${remSize(5)} ${remSize(5)}; }
+
+  & li:hover {
+    
+    background-color: ${prop('Button.hover.background')};
+    color: ${prop('Button.hover.foreground')};
+
+    & button, & a {
+      color: ${prop('Button.hover.foreground')};
+    }
+  }
+
+  li {
+    height: ${remSize(36)};
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    & button,
+    & a {
+      color: ${prop('primaryTextColor')};
+      width: 100%;
+      text-align: left;
+      padding: ${remSize(8)} ${remSize(16)};
+    }
+  }
+
 `;
 
+// { onPress
+//   ? <IconButton
+//   : <Link to={to}>{title}</Link>}
 
-// @include themify() {
-//   background-color: map-get($theme-map, 'modal-background-color');
-//   border: 1px solid map-get($theme-map, 'modal-border-color');
-//   box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
-//   color: getThemifyVariable('primary-text-color');
-// }
-
+const MaybeIcon = (Element, label) => Element && <Element aria-label={label} />;
 
 const Dropdown = ({ items }) => (
   <DropdownWrapper>
-    <h1>space</h1>
-    <h1>space</h1>
-    <h1>space</h1>
-    <h1>space</h1>
     {/* className="nav__items-left" */}
-    <ul className="nav__items-left nav__dropdown nav__item nav__item--open">
-      <h1 className="nav__dropdown-item">hello</h1>
-      <h1 className="nav__dropdown-item">hello</h1>
-      {items && items.map(({ title }) => (
-        <li className="nav__dropdown-item" key={`nav-${title && title.toLowerCase()}`}>
-          <h1>space</h1>
-        </li>
-      ))
-      }
-    </ul>
+    {items && items.map(({ title, icon, href }) => (
+      <li key={`nav-${title && title.toLowerCase()}`}>
+        <Link to={href}>
+          {MaybeIcon(icon, `Navigate to ${title}`)}
+          {title}
+        </Link>
+      </li>
+    ))
+    }
   </DropdownWrapper>
 );
 
 Dropdown.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({
-    action: PropTypes.func
-  }))
+    action: PropTypes.func,
+    icon: PropTypes.func,
+    href: PropTypes.string
+  })),
 };
 
 Dropdown.defaultProps = {
-  items: []
+  items: [],
 };
 
 export default Dropdown;
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index b5579fb0..84aa0081 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -58,7 +58,9 @@ const MobileIDEView = (props) => {
   // const overlayActive = name => (overlay === name);
 
   const headerNavOptions = [
-    { icon: PreferencesIcon, title: 'Preferences', route: '/mobile/preferences' }
+    { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences' },
+    { icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
+    { icon: PreferencesIcon, title: 'Original View', href: '/mobile/preferences' }
   ];
 
   return (

From 371e4ccdde5c13a540fae346fcd1186178475972 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 22 Jul 2020 18:48:24 -0300
Subject: [PATCH 06/12] :alembic: create <OverlayManager /> component

---
 client/components/Dropdown.jsx             | 117 ++-------------------
 client/modules/App/App.jsx                 |   3 +-
 client/modules/IDE/pages/MobileIDEView.jsx |  66 ++++++++----
 3 files changed, 57 insertions(+), 129 deletions(-)

diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx
index 16a67475..48490f9c 100644
--- a/client/components/Dropdown.jsx
+++ b/client/components/Dropdown.jsx
@@ -6,119 +6,20 @@ import { remSize, prop, common } from '../theme';
 import IconButton from './mobile/IconButton';
 import Button from '../common/Button';
 
-
-// <ul className="nav__dropdown">
-
-
-// <ul className="nav__dropdown">
-
-// <li className="nav__dropdown-item">
-//   <button
-//     onFocus={this.handleFocusForLang}
-//     onBlur={this.handleBlur}
-//     value="it"
-//     onClick={e => this.handleLangSelection(e)}
-//   >
-//     Italian (Test Fallback)
-//   </button>
-// </li>
-// <li className="nav__dropdown-item">
-//   <button
-//     onFocus={this.handleFocusForLang}
-//     onBlur={this.handleBlur}
-//     value="en-US"
-//     onClick={e => this.handleLangSelection(e)}
-//   >English
-//   </button>
-// </li>
-// <li className="nav__dropdown-item">
-//   <button
-//     onFocus={this.handleFocusForLang}
-//     onBlur={this.handleBlur}
-//     value="es-419"
-//     onClick={e => this.handleLangSelection(e)}
-//   >
-//     Español
-//   </button>
-// </li>
-// </ul>
-
-// 'nav__item--open'
-
-// %dropdown-open {
-//   @include themify() {
-//     background-color: map-get($theme-map, 'modal-background-color');
-//     border: 1px solid map-get($theme-map, 'modal-border-color');
-//     box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
-//     color: getThemifyVariable('primary-text-color');
-//   }
-//   text-align: left;
-//   width: ${remSize(180)};
-//   display: flex;
-//   position: absolute;
-//   flex-direction: column;
-//   top: 95%;
-//   height: auto;
-//   z-index: 9999;
-//   border-radius: ${remSize(6)};
-//   & li:first-child {
-//     border-radius: ${remSize(5)} ${remSize(5)} 0 0;
-//   }
-//   & li:last-child {
-//     border-radius: 0 0 ${remSize(5)} ${remSize(5)};
-//   }
-// -------------
-//   & li {
-//     & button,
-//     & a {
-//       @include themify() {
-//         color: getThemifyVariable('primary-text-color');
-//       }
-//       width: 100%;
-//       text-align: left;
-//       padding: ${remSize(8)} ${remSize(16)};
-//     }
-//     height: ${remSize(35)};
-//     cursor: pointer;
-//     display: flex;
-//     align-items: center;
-//   }
-//   & li:hover {
-//     @include themify() {
-//       background-color: getThemifyVariable('button-background-hover-color');
-//       color: getThemifyVariable('button-hover-color')
-//     }
-//     & button, & a {
-//       @include themify() {
-//         color: getThemifyVariable('button-hover-color');
-//       }
-//     }
-//   }
-// }
-
-// %dropdown-open-left {
-//   @extend %dropdown-open;
-//   left: 0;
-// }
-
-// %dropdown-open-right {
-//   @extend %dropdown-open;
-//   right: 0;
-// }
-
-
 const DropdownWrapper = styled.ul`
   background-color: ${prop('Modal.background')};
   border: 1px solid ${prop('Modal.border')};
   box-shadow: 0 0 18px 0 ${prop('shadowColor')};
   color: ${prop('primaryTextColor')};
 
+  position: absolute;
+  top: ${remSize(64)};
+  right: ${remSize(16)};
+
   text-align: left;
   width: ${remSize(180)};
   display: flex;
-  position: absolute;
   flex-direction: column;
-  top: 95%;
   height: auto;
   z-index: 9999;
   border-radius: ${remSize(6)};
@@ -150,14 +51,10 @@ const DropdownWrapper = styled.ul`
       padding: ${remSize(8)} ${remSize(16)};
     }
   }
-
 `;
 
-// { onPress
-//   ? <IconButton
-//   : <Link to={to}>{title}</Link>}
-
-const MaybeIcon = (Element, label) => Element && <Element aria-label={label} />;
+// TODO: Add Icon to the left of the items in the menu
+// const MaybeIcon = (Element, label) => Element && <Element aria-label={label} />;
 
 const Dropdown = ({ items }) => (
   <DropdownWrapper>
@@ -165,7 +62,7 @@ const Dropdown = ({ items }) => (
     {items && items.map(({ title, icon, href }) => (
       <li key={`nav-${title && title.toLowerCase()}`}>
         <Link to={href}>
-          {MaybeIcon(icon, `Navigate to ${title}`)}
+          {/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
           {title}
         </Link>
       </li>
diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index af441a9d..b43dee17 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 84aa0081..bc2866e8 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, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
@@ -42,6 +42,42 @@ const BottomBarContent = styled.h2`
 // const overlays = {};
 // const OverlayManager = name => overlays[name] || null;
 
+const OverlayManager = ({ ref, overlay, hideOverlay }) => {
+  useEffect(() => {
+    const handleClickOutside = ({ target }) => {
+      if (ref && ref.current && !ref.current.contains(target)) { hideOverlay(); console.log('click'); }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => { document.removeEventListener('mousedown', handleClickOutside); };
+  }, [ref]);
+
+  const headerNavOptions = [
+    { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences' },
+    { icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
+    { icon: PreferencesIcon, title: 'Original View', href: '/mobile/preferences' }
+  ];
+
+  return (
+    <div ref={(r) => { if (ref) { ref.current = r; } }}>
+      {(overlay === 'dropdown') && <Dropdown items={headerNavOptions} />}
+    </div>
+  );
+};
+
+const refPropType = PropTypes.oneOfType([
+  PropTypes.func,
+  PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+]);
+
+OverlayManager.propTypes = {
+  ref: refPropType.isRequired,
+  overlay: PropTypes.string,
+  hideOverlay: PropTypes.func.isRequired
+};
+
+OverlayManager.defaultProps = { overlay: null };
+
 
 const MobileIDEView = (props) => {
   const {
@@ -53,18 +89,15 @@ const MobileIDEView = (props) => {
   } = props;
 
   const [tmController, setTmController] = useState(null); // eslint-disable-line
-  const [overlay, setOverlay] = useState(null); // eslint-disable-line
+  const [overlayName, setOverlay] = useState(null); // eslint-disable-line
 
-  // const overlayActive = name => (overlay === name);
+  // TODO: Move this to OverlayController (?)
+  const hideOverlay = () => setOverlay(null);
+  const overlayRef = useRef();
 
-  const headerNavOptions = [
-    { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences' },
-    { icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
-    { icon: PreferencesIcon, title: 'Original View', href: '/mobile/preferences' }
-  ];
 
   return (
-    <Screen fullscreen>
+    <Screen fullscreen >
       <Header
         title={project.name}
         subtitle={selectedFile.name}
@@ -81,10 +114,6 @@ const MobileIDEView = (props) => {
         <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
       </Header>
 
-
-      {/* TODO: Overlays */}
-      <Dropdown items={headerNavOptions} />
-
       <IDEWrapper>
         <Editor
           lintWarning={preferences.lintWarning}
@@ -122,11 +151,12 @@ const MobileIDEView = (props) => {
         />
       </IDEWrapper>
 
-      {/*
-      <Footer>
-        <Console />
-        <BottomBarContent>Bottom Bar</BottomBarContent>
-      </Footer> */}
+      {/* TODO: Create Overlay Manager */}
+      {<OverlayManager
+        ref={overlayRef}
+        overlay={overlayName}
+        hideOverlay={hideOverlay}
+      />}
     </Screen>
   );
 };

From 9f8b41c092e16a3ebc644f1ca35c4ccc734ddf65 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 24 Jul 2020 16:30:14 -0300
Subject: [PATCH 07/12] :sparkles: make dropdown menu open and close

---
 client/components/OverlayManager.jsx       | 63 ++++++++++++++++++++++
 client/modules/IDE/pages/MobileIDEView.jsx | 62 +++++----------------
 2 files changed, 75 insertions(+), 50 deletions(-)
 create mode 100644 client/components/OverlayManager.jsx

diff --git a/client/components/OverlayManager.jsx b/client/components/OverlayManager.jsx
new file mode 100644
index 00000000..82669516
--- /dev/null
+++ b/client/components/OverlayManager.jsx
@@ -0,0 +1,63 @@
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
+
+import Dropdown from './Dropdown';
+
+
+import { PreferencesIcon } from '../common/icons';
+
+const OverlayManager = ({ overlay, hideOverlay }) => {
+  const ref = useRef({});
+
+  const handleClickOutside = ({ target }) => {
+    if (ref && ref.current && !ref.current.contains(target)) {
+      hideOverlay();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [ref]);
+
+  const headerNavOptions = [
+    {
+      icon: PreferencesIcon,
+      title: 'Preferences',
+      href: '/mobile/preferences',
+    },
+    { icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
+    {
+      icon: PreferencesIcon,
+      title: 'Original View',
+      href: '/mobile/preferences',
+    },
+  ];
+
+  const jsx = (
+    <React.Fragment>
+      <div ref={(r) => { ref.current = r; }} >
+        {overlay === 'dropdown' && <Dropdown items={headerNavOptions} />}
+      </div>
+    </React.Fragment>
+  );
+
+  return jsx && createPortal(jsx, document.body);
+};
+
+// const refPropType = PropTypes.oneOfType([
+//   PropTypes.func,
+//   PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+// ]);
+
+OverlayManager.propTypes = {
+  // ref: refPropType.isRequired,
+  overlay: PropTypes.string,
+  hideOverlay: PropTypes.func.isRequired,
+};
+
+OverlayManager.defaultProps = { overlay: null };
+
+export default OverlayManager;
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index bc2866e8..f1b528e1 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -7,6 +7,7 @@ import styled from 'styled-components';
 
 // Imports to be Refactored
 import { bindActionCreators } from 'redux';
+
 import * as FileActions from '../actions/files';
 import * as IDEActions from '../actions/ide';
 import * as ProjectActions from '../actions/project';
@@ -19,7 +20,7 @@ import { getHTMLFile } from '../reducers/files';
 
 // Local Imports
 import Editor from '../components/Editor';
-import { PreferencesIcon, PlayIcon, ExitIcon, MoreIcon } from '../../../common/icons';
+import { PlayIcon, ExitIcon, MoreIcon } from '../../../common/icons';
 
 import IconButton from '../../../components/mobile/IconButton';
 import Header from '../../../components/mobile/Header';
@@ -28,7 +29,7 @@ import Footer from '../../../components/mobile/Footer';
 import IDEWrapper from '../../../components/mobile/IDEWrapper';
 import Console from '../components/Console';
 import { remSize } from '../../../theme';
-import Dropdown from '../../../components/Dropdown';
+import OverlayManager from '../../../components/OverlayManager';
 
 const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
 
@@ -38,47 +39,6 @@ const BottomBarContent = styled.h2`
 `;
 
 
-// TODO: Move to new file?
-// const overlays = {};
-// const OverlayManager = name => overlays[name] || null;
-
-const OverlayManager = ({ ref, overlay, hideOverlay }) => {
-  useEffect(() => {
-    const handleClickOutside = ({ target }) => {
-      if (ref && ref.current && !ref.current.contains(target)) { hideOverlay(); console.log('click'); }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => { document.removeEventListener('mousedown', handleClickOutside); };
-  }, [ref]);
-
-  const headerNavOptions = [
-    { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences' },
-    { icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
-    { icon: PreferencesIcon, title: 'Original View', href: '/mobile/preferences' }
-  ];
-
-  return (
-    <div ref={(r) => { if (ref) { ref.current = r; } }}>
-      {(overlay === 'dropdown') && <Dropdown items={headerNavOptions} />}
-    </div>
-  );
-};
-
-const refPropType = PropTypes.oneOfType([
-  PropTypes.func,
-  PropTypes.shape({ current: PropTypes.instanceOf(Element) })
-]);
-
-OverlayManager.propTypes = {
-  ref: refPropType.isRequired,
-  overlay: PropTypes.string,
-  hideOverlay: PropTypes.func.isRequired
-};
-
-OverlayManager.defaultProps = { overlay: null };
-
-
 const MobileIDEView = (props) => {
   const {
     preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
@@ -93,11 +53,10 @@ const MobileIDEView = (props) => {
 
   // TODO: Move this to OverlayController (?)
   const hideOverlay = () => setOverlay(null);
-  const overlayRef = useRef();
-
+  // const overlayRef = useRef({});
 
   return (
-    <Screen fullscreen >
+    <Screen fullscreen>
       <Header
         title={project.name}
         subtitle={selectedFile.name}
@@ -151,12 +110,15 @@ const MobileIDEView = (props) => {
         />
       </IDEWrapper>
 
-      {/* TODO: Create Overlay Manager */}
-      {<OverlayManager
-        ref={overlayRef}
+      <Footer>
+        <Console />
+      </Footer>
+
+      <OverlayManager
+        // ref={overlayRef}
         overlay={overlayName}
         hideOverlay={hideOverlay}
-      />}
+      />
     </Screen>
   );
 };

From 0a065cb00af47ed8664856122fba7ef1c835712c Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 24 Jul 2020 17:27:24 -0300
Subject: [PATCH 08/12] :broom: unhide sidebar

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

diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index b43dee17..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>
     );

From f7d06319e4f6f0ad171562abe9cf88efea346e24 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 24 Jul 2020 17:32:39 -0300
Subject: [PATCH 09/12] :ok_hand: remove isRequired from consoleEvents

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

diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index f052b27b..609ab107 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -143,7 +143,7 @@ MobileIDEView.propTypes = {
   ide: PropTypes.shape({
     isPlaying: PropTypes.bool.isRequired,
     isAccessibleOutputPlaying: PropTypes.bool.isRequired,
-    consoleEvent: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+    consoleEvent: PropTypes.arrayOf(PropTypes.shape({})),
     modalIsVisible: PropTypes.bool.isRequired,
     sidebarIsExpanded: PropTypes.bool.isRequired,
     consoleIsExpanded: PropTypes.bool.isRequired,

From 77a40a9934f3f7aedf48f41588c5c584418e0bd2 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 24 Jul 2020 17:45:40 -0300
Subject: [PATCH 10/12] :ok_hand: rename last menu option to 'Original Editor'

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

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

From f5e901ad0baa3a3aab8b9b991f2b54693eae0de4 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 28 Jul 2020 10:46:53 -0300
Subject: [PATCH 11/12] :ok_hand: add CodeIcon to icons.jsx

---
 client/common/icons.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/common/icons.jsx b/client/common/icons.jsx
index f91e4dc7..215083a6 100644
--- a/client/common/icons.jsx
+++ b/client/common/icons.jsx
@@ -80,3 +80,4 @@ export const PreferencesIcon = withLabel(Preferences);
 export const PlayIcon = withLabel(Play);
 export const MoreIcon = withLabel(More);
 export const TerminalIcon = withLabel(Terminal);
+export const CodeIcon = withLabel(Code);

From dd37c7731dcd1be6332c2bd6ed1d355611b12685 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 28 Jul 2020 10:56:16 -0300
Subject: [PATCH 12/12] :ok_hand: remove eslint-disable-lines

---
 client/modules/IDE/pages/IDEView.jsx               | 4 ++--
 client/modules/User/components/APIKeyForm.jsx      | 4 ++--
 client/modules/User/components/AccountForm.jsx     | 8 ++++----
 client/modules/User/components/LoginForm.jsx       | 4 ++--
 client/modules/User/components/NewPasswordForm.jsx | 4 ++--
 client/modules/User/components/SignupForm.jsx      | 8 ++++----
 6 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 2f2bdc7a..b28e505f 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -478,7 +478,7 @@ IDEView.propTypes = {
   ide: PropTypes.shape({
     isPlaying: PropTypes.bool.isRequired,
     isAccessibleOutputPlaying: PropTypes.bool.isRequired,
-    consoleEvent: PropTypes.array, // eslint-disable-line
+    consoleEvent: PropTypes.array,
     modalIsVisible: PropTypes.bool.isRequired,
     sidebarIsExpanded: PropTypes.bool.isRequired,
     consoleIsExpanded: PropTypes.bool.isRequired,
@@ -513,7 +513,7 @@ IDEView.propTypes = {
     updatedAt: PropTypes.string
   }).isRequired,
   editorAccessibility: PropTypes.shape({
-    lintMessages: PropTypes.array.isRequired, // eslint-disable-line
+    lintMessages: PropTypes.array.isRequired,
   }).isRequired,
   updateLintMessage: PropTypes.func.isRequired,
   clearLintMessage: PropTypes.func.isRequired,
diff --git a/client/modules/User/components/APIKeyForm.jsx b/client/modules/User/components/APIKeyForm.jsx
index fd11bf83..cb99dcde 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, // eslint-disable-line
-  token: PropTypes.object, // eslint-disable-line
+  id: PropTypes.object.isRequired,
+  token: PropTypes.object,
   label: PropTypes.string.isRequired,
   createdAt: PropTypes.string.isRequired,
   lastUsedAt: PropTypes.string,
diff --git a/client/modules/User/components/AccountForm.jsx b/client/modules/User/components/AccountForm.jsx
index 0a5b7669..e032448b 100644
--- a/client/modules/User/components/AccountForm.jsx
+++ b/client/modules/User/components/AccountForm.jsx
@@ -103,10 +103,10 @@ function AccountForm(props) {
 
 AccountForm.propTypes = {
   fields: PropTypes.shape({
-    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
+    username: PropTypes.object.isRequired,
+    email: PropTypes.object.isRequired,
+    currentPassword: PropTypes.object.isRequired,
+    newPassword: PropTypes.object.isRequired,
   }).isRequired,
   user: PropTypes.shape({
     verified: PropTypes.number.isRequired,
diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx
index 9c1fb882..9cc85d98 100644
--- a/client/modules/User/components/LoginForm.jsx
+++ b/client/modules/User/components/LoginForm.jsx
@@ -44,8 +44,8 @@ function LoginForm(props) {
 
 LoginForm.propTypes = {
   fields: PropTypes.shape({
-    email: PropTypes.object.isRequired, // eslint-disable-line
-    password: PropTypes.object.isRequired // eslint-disable-line
+    email: PropTypes.object.isRequired,
+    password: PropTypes.object.isRequired
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,
   validateAndLoginUser: PropTypes.func.isRequired,
diff --git a/client/modules/User/components/NewPasswordForm.jsx b/client/modules/User/components/NewPasswordForm.jsx
index d0fd6011..59240908 100644
--- a/client/modules/User/components/NewPasswordForm.jsx
+++ b/client/modules/User/components/NewPasswordForm.jsx
@@ -43,8 +43,8 @@ function NewPasswordForm(props) {
 
 NewPasswordForm.propTypes = {
   fields: PropTypes.shape({
-    password: PropTypes.object.isRequired, // eslint-disable-line
-    confirmPassword: PropTypes.object.isRequired // eslint-disable-line
+    password: PropTypes.object.isRequired,
+    confirmPassword: PropTypes.object.isRequired
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,
   updatePassword: PropTypes.func.isRequired,
diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index 51c0c16d..7d18062b 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -71,10 +71,10 @@ function SignupForm(props) {
 
 SignupForm.propTypes = {
   fields: PropTypes.shape({
-    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
+    username: PropTypes.object.isRequired,
+    email: PropTypes.object.isRequired,
+    password: PropTypes.object.isRequired,
+    confirmPassword: PropTypes.object.isRequired
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,
   signUpUser: PropTypes.func.isRequired,