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 1/7] :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 2/7] :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 3/7] :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 4/7] :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 5/7] :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 6/7] :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 7/7] :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
+      }
+    }
   },
 };