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] :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,