🚧 update nav mobile routes when logged in

client/components/Dropdown.jsx

@@ -36,9 +36,7 @@ const DropdownWrapper = styled.ul`
     background-color: ${prop('Button.hover.background')};
     color: ${prop('Button.hover.foreground')};
 
-    & button, & a {
-      color: ${prop('Button.hover.foreground')};
-    }
+    * { color: ${prop('Button.hover.foreground')}; }
   }
 
   li {
@@ -48,12 +46,21 @@ const DropdownWrapper = styled.ul`
     align-items: center;
 
     & button,
+    & button span,
     & a {
-      color: ${prop('primaryTextColor')};
-      width: 100%;
-      text-align: left;
       padding: ${remSize(8)} ${remSize(16)};
     }
+
+    * {
+      text-align: left;
+      justify-content: left;
+
+      color: ${prop('primaryTextColor')};
+      width: 100%;
+      justify-content: flex-start;
+    }
+
+    & button span { padding: 0px }
   }
 `;
 
@@ -63,18 +70,22 @@ const DropdownWrapper = styled.ul`
 const Dropdown = ({ items, align }) => (
   <DropdownWrapper align={align} >
     {/* className="nav__items-left" */}
-    {items && items.map(({ title, icon, href }) => (
+    {items && items.map(({
+      title, icon, href, action
+    }) => (
       <li key={`nav-${title && title.toLowerCase()}`}>
-        <Link to={href}>
-          {/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
-          {title}
-        </Link>
+        {/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
+        {href
+          ? <IconButton to={href}>{title}</IconButton>
+          : <IconButton onClick={() => action()}>{title}</IconButton>}
+
       </li>
     ))
     }
   </DropdownWrapper>
 );
 
+
 Dropdown.propTypes = {
   align: PropTypes.oneOf(['left', 'right']),
   items: PropTypes.arrayOf(PropTypes.shape({

client/components/mobile/IconButton.jsx

@@ -17,7 +17,7 @@ const IconButton = (props) => {
   const Icon = icon;
 
   return (<ButtonWrapper
-    iconBefore={<Icon />}
+    iconBefore={icon && <Icon />}
     kind={Button.kinds.inline}
     focusable="false"
     {...otherProps}
@@ -25,7 +25,11 @@ const IconButton = (props) => {
 };
 
 IconButton.propTypes = {
-  icon: PropTypes.func.isRequired
+  icon: PropTypes.func
+};
+
+IconButton.defaultProps = {
+  icon: null
 };
 
 export default IconButton;

client/modules/IDE/actions/editorAccessibility.js

@@ -14,3 +14,9 @@ export function clearLintMessage() {
     type: ActionTypes.CLEAR_LINT_MESSAGE
   };
 }
+
+export function toggleForceDesktop() {
+  return {
+    type: ActionTypes.TOGGLE_FORCE_DESKTOP
+  };
+}

client/modules/IDE/components/AddToCollectionList.jsx

@@ -14,7 +14,7 @@ import Loader from '../../App/components/loader';
 import QuickAddList from './QuickAddList';
 
 const projectInCollection = (project, collection) =>
-  collection.items.find(item => item.project.id === project.id) != null;
+  collection.items.find(item => item.projectId === project.id) != null;
 
 class CollectionList extends React.Component {
   constructor(props) {
@@ -81,12 +81,14 @@ class CollectionList extends React.Component {
     }
 
     return (
-      <div className="quick-add-wrapper">
-        <Helmet>
-          <title>{this.getTitle()}</title>
-        </Helmet>
+      <div className="collection-add-sketch">
+        <div className="quick-add-wrapper">
+          <Helmet>
+            <title>{this.getTitle()}</title>
+          </Helmet>
 
-        {content}
+          {content}
+        </div>
       </div>
     );
   }

client/modules/IDE/components/AddToCollectionSketchList.jsx

@@ -72,11 +72,13 @@ class SketchList extends React.Component {
     }
 
     return (
-      <div className="quick-add-wrapper">
-        <Helmet>
-          <title>{this.getSketchesTitle()}</title>
-        </Helmet>
-        {content}
+      <div className="collection-add-sketch">
+        <div className="quick-add-wrapper">
+          <Helmet>
+            <title>{this.getSketchesTitle()}</title>
+          </Helmet>
+          {content}
+        </div>
       </div>
     );
   }

client/modules/IDE/components/CollectionList/CollectionList.jsx

@@ -170,12 +170,10 @@ class CollectionList extends React.Component {
               closeOverlay={this.hideAddSketches}
               isFixedHeight
             >
-              <div className="collection-add-sketch">
-                <AddToCollectionSketchList
-                  username={this.props.username}
-                  collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}
-                />
-              </div>
+              <AddToCollectionSketchList
+                username={this.props.username}
+                collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}
+              />
             </Overlay>
           )
         }

client/modules/IDE/pages/MobileIDEView.jsx

@@ -20,7 +20,7 @@ import { getHTMLFile } from '../reducers/files';
 
 // Local Imports
 import Editor from '../components/Editor';
-import { PlayIcon, MoreIcon, CircleFolderIcon } from '../../../common/icons';
+import { PlayIcon, MoreIcon } from '../../../common/icons';
 
 import IconButton from '../../../components/mobile/IconButton';
 import Header from '../../../components/mobile/Header';
@@ -63,18 +63,20 @@ const NavItem = styled.li`
   position: relative;
 `;
 
-const getNavOptions = (username = undefined, toggleForceDesktop = () => {}) =>
+const getNavOptions = (username = undefined, logoutUser = () => {}, toggleForceDesktop = () => {}) =>
   (username
     ? [
       { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
       { icon: PreferencesIcon, title: 'My Stuff', href: `/${username}/sketches` },
       { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
       { icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
+      { icon: PreferencesIcon, title: 'Logout', action: logoutUser, },
     ]
     : [
       { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
       { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
-      { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
+      { icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
+      { icon: PreferencesIcon, title: 'Login', href: '/login', },
     ]
   );
 
@@ -82,7 +84,7 @@ const MobileIDEView = (props) => {
   const {
     preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
     selectedFile, updateFileContent, files, user, params,
-    closeEditorOptions, showEditorOptions,
+    closeEditorOptions, showEditorOptions, logoutUser,
     startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
     showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState, setUnsavedChanges,
     toggleForceDesktop
@@ -111,7 +113,7 @@ const MobileIDEView = (props) => {
 
   // Screen Modals
   const [toggleNavDropdown, NavDropDown] = useAsModal(<Dropdown
-    items={getNavOptions(username, toggleForceDesktop)}
+    items={getNavOptions(username, logoutUser, toggleForceDesktop)}
     align="right"
   />);
 
@@ -296,6 +298,8 @@ MobileIDEView.propTypes = {
     username: PropTypes.string,
   }).isRequired,
 
+  logoutUser: PropTypes.func.isRequired,
+
   setUnsavedChanges: PropTypes.func.isRequired,
   getProject: PropTypes.func.isRequired,
   clearPersistedState: PropTypes.func.isRequired,

client/modules/IDE/reducers/editorAccessibility.js

@@ -7,6 +7,7 @@ const initialState = {
 let messageId = 0;
 
 const editorAccessibility = (state = initialState, action) => {
+  console.log('accessbility');
   switch (action.type) {
     case ActionTypes.UPDATE_LINT_MESSAGE:
       messageId += 1;
@@ -18,7 +19,7 @@ const editorAccessibility = (state = initialState, action) => {
     case ActionTypes.CLEAR_LINT_MESSAGE:
       return Object.assign({}, state, { lintMessages: [] });
     case ActionTypes.TOGGLE_FORCE_DESKTOP:
-      return { ...state, forceDesktop: !state.forceDesktop };
+      return Object.assign({}, state, { forceDesktop: !(state.forceDesktop) });
     default:
       return state;
   }

client/modules/User/components/Collection.jsx

@@ -398,9 +398,10 @@ class Collection extends React.Component {
                     closeOverlay={this.hideAddSketches}
                     isFixedHeight
                   >
-                    <div className="collection-add-sketch">
-                      <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
-                    </div>
+                    <AddToCollectionSketchList
+                      username={this.props.username}
+                      collection={this.props.collection}
+                    />
                   </Overlay>
                 )
               }

client/routes.jsx

@@ -44,7 +44,7 @@ const onRouteChange = (store) => {
 
 const routes = store => (
   <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
-    <IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView)} />
+    <IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView, store)} />
 
     <Route path="/login" component={userIsNotAuthenticated(LoginView)} />
     <Route path="/signup" component={userIsNotAuthenticated(SignupView)} />

client/styles/abstracts/_variables.scss

@@ -88,6 +88,7 @@ $themes: (
     nav-border-color: $middle-light,
     error-color: $p5js-pink,
     table-row-stripe-color: $medium-light,
+    table-row-stripe-color-alternate: $medium-light,
     codefold-icon-open: url(../images/triangle-arrow-down.svg?byUrl),
     codefold-icon-closed: url(../images/triangle-arrow-right.svg?byUrl),
 
@@ -163,6 +164,7 @@ $themes: (
     nav-border-color: $middle-dark,
     error-color: $p5js-pink,
     table-row-stripe-color: $dark,
+    table-row-stripe-color-alternate: $darker,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl),
     codefold-icon-closed: url(../images/triangle-arrow-right-white.svg?byUrl),
 
@@ -236,6 +238,7 @@ $themes: (
     nav-border-color: $middle-dark,
     error-color: $p5-contrast-pink,
     table-row-stripe-color: $dark,
+    table-row-stripe-color-alternate: $darker,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl),
     codefold-icon-closed: url(../images/triangle-arrow-right-white.svg?byUrl),
 

client/styles/components/_quick-add.scss

@@ -1,11 +1,16 @@
 .quick-add-wrapper {
   min-width: #{600 / $base-font-size}rem;
-  overflow-y: scroll;
+  padding: #{24 / $base-font-size}rem;
+  height: 100%;
 }
 
 .quick-add {
   width: auto;
-  padding: #{24 / $base-font-size}rem;
+  overflow-y: scroll;
+  height: 100%;
+  @include themify() {
+    border: 1px solid getThemifyVariable('modal-border-color');
+  }
 }
 
 .quick-add__item {
@@ -23,7 +28,7 @@
 
 .quick-add__item:nth-child(odd) {
   @include themify() {
-    background: getThemifyVariable('table-row-stripe-color');
+    background: getThemifyVariable('table-row-stripe-color-alternate');
   }
 }