From eb0324c7d2cf4856e50f9fb03dba286a9ca962c2 Mon Sep 17 00:00:00 2001
From: Santiago Siri <santisiri@gmail.com>
Date: Fri, 23 Oct 2020 13:48:05 +0200
Subject: [PATCH 1/3] micro tweaks for mobile

---
 src/components/Expand/Expand.jsx |  4 ++--
 src/styles/Dapp.css              | 15 ++++++++++-----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/Expand/Expand.jsx b/src/components/Expand/Expand.jsx
index 5705a0728..6f46b5da0 100644
--- a/src/components/Expand/Expand.jsx
+++ b/src/components/Expand/Expand.jsx
@@ -30,8 +30,8 @@ export default class Expand extends Component {
     super(props);
     this.state = {
       open: props.open,
-      img: arrowDown,
-      logo: this.props.icon,
+      img: (props.open) ? arrowDownActive : arrowDown,
+      logo: (props.open) ? this.props.iconActive : this.props.icon,
     };
 
     this.mouseToggle = this.mouseToggle.bind(this);
diff --git a/src/styles/Dapp.css b/src/styles/Dapp.css
index fd56c3710..9c8b6fae9 100755
--- a/src/styles/Dapp.css
+++ b/src/styles/Dapp.css
@@ -8252,7 +8252,7 @@ h4 {
 
   .parameter {
     padding: 0px 10px 10px;
-    margin: 10px 10px 0px 0px;
+    margin: 10px 5px 0px 0px;
   }
 
   .details-wrapper {
@@ -8991,10 +8991,6 @@ h4 {
     top: -55px;
   }
 
-  .period { 
-    margin-bottom: -3px;
-  }
-
   .parameter-value {
     margin-top: 7px;
   }
@@ -9004,6 +9000,15 @@ h4 {
   .tab-menu {
     position: absolute;
   }
+
+  .details:hover {
+    text-decoration: none;
+    border: 1px solid #e6e0ee;
+  }
+
+  .details.details-open {
+    border: 1px solid var(--menu-sidebar-selected);
+  }
 }
 
 

From d9893ce7dd49b92ef8dfc0a8382547fcb6f758e6 Mon Sep 17 00:00:00 2001
From: Santiago Siri <santisiri@gmail.com>
Date: Fri, 23 Oct 2020 14:07:15 +0200
Subject: [PATCH 2/3] non floating menu on desktop

---
 src/components/Menu/Sidebar.jsx | 30 +++++++++++++++++++++---------
 src/styles/Dapp.css             |  7 +++++++
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/Menu/Sidebar.jsx b/src/components/Menu/Sidebar.jsx
index bf4ba3058..27d9be2ac 100644
--- a/src/components/Menu/Sidebar.jsx
+++ b/src/components/Menu/Sidebar.jsx
@@ -44,7 +44,7 @@ const _getMenu = (view, data, address, param) => {
   }
 
   return (
-    <div>
+    <div className="submenu">
       <Item sharp hideEmpty={hideEmpty} label={`${i18n.t(defaultLabels[0])}`} score={(atHome) ? null : _getProposalCount(data.proposals, defaultLabels[0])} key={0} href={(atHome) ? `/` : baseRoute } />
       <Item sharp hideEmpty={hideEmpty} label={`${i18n.t(defaultLabels[1])}`} score={(atHome) ? null : _getProposalCount(data.proposals, defaultLabels[1])} key={1} href={(atHome) ? '/period/queue' : `${baseRoute}/period/queue`} />
       <Item sharp hideEmpty={hideEmpty} label={`${i18n.t(defaultLabels[2])}`} score={(atHome) ? null : _getProposalCount(data.proposals, defaultLabels[2])} key={2} href={(atHome) ? '/period/voting' : `${baseRoute}/period/voting`} />
@@ -223,7 +223,9 @@ const MenuQuery = ({ address, scrollUp, view, proposalId, param }) => {
             <div className="separator">
               {_getHeadline('proposals', address, view)}
             </div>
-            {<div className="option-placeholder identity-placeholder" />}
+            <div className="submenu">
+              <div className="option-placeholder identity-placeholder" />
+            </div>
           </div>
         </div>
       </div>
@@ -251,10 +253,14 @@ const MenuQuery = ({ address, scrollUp, view, proposalId, param }) => {
       </div>
       {
       (daoList.length > 0) ?
-      daoList
+        <div className="submenu">
+          {daoList}
+        </div>
       :
-      <div className="empty">
-        {i18n.t('no-memberships-found')}
+      <div className="submenu">
+        <div className="empty">
+          {i18n.t('no-memberships-found')}
+        </div>
       </div>
       }
     </>
@@ -269,7 +275,9 @@ const MenuQuery = ({ address, scrollUp, view, proposalId, param }) => {
         menuList
         :
         <div className="empty">
-          {i18n.t('no-proposals-found')}
+          <div className="submenu">
+            {i18n.t('no-proposals-found')}
+          </div>
         </div>
       }
     </>
@@ -278,10 +286,12 @@ const MenuQuery = ({ address, scrollUp, view, proposalId, param }) => {
   const goBack = (
     <>
       {(window.innerWidth < 768) ?
-        <Item sharp hideEmpty={false} icon={back} label={`${i18n.t('all-daos')}`} href={'/'} />
+        <div className="submenu">
+          <Item sharp hideEmpty={false} icon={back} label={`${i18n.t('all-daos')}`} href={'/'} />
+        </div>
         :
         null
-      }      
+      }          
     </>
   )
 
@@ -366,7 +376,9 @@ export default class Sidebar extends Component {
       <div id="sidebar" className={_getScrollClass(this.state.scrollUp)}>
         <div className="menu">
           {(this.props.view === routerView.SEARCH) ?
-            <Item sharp hideEmpty={false} icon={back} label={`${i18n.t('all-daos')}`} href={'/'} />  
+            <div className="submenu">
+              <Item sharp hideEmpty={false} icon={back} label={`${i18n.t('all-daos')}`} href={'/'} />  
+            </div>
             :
             null
           }
diff --git a/src/styles/Dapp.css b/src/styles/Dapp.css
index 9c8b6fae9..1b6c76d02 100755
--- a/src/styles/Dapp.css
+++ b/src/styles/Dapp.css
@@ -8239,6 +8239,13 @@ h4 {
   font-weight: 400;
 }
 
+.submenu {
+  padding: 10px 10px 2px;
+  background-color: #f0f0f5;
+  border-radius: 10px;
+  margin-bottom: 20px;
+}
+
 @media (max-width: 991px) {
  h4 {
     margin-bottom: 10px;

From 35537583623f6025974af58580201d00fe398fb7 Mon Sep 17 00:00:00 2001
From: Santiago Siri <santisiri@gmail.com>
Date: Fri, 23 Oct 2020 14:10:27 +0200
Subject: [PATCH 3/3] mobile menu fix

---
 src/styles/Dapp.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/Dapp.css b/src/styles/Dapp.css
index 1b6c76d02..8de24d912 100755
--- a/src/styles/Dapp.css
+++ b/src/styles/Dapp.css
@@ -6714,7 +6714,6 @@ blockquote {
   }
   .menu-item {
     font-weight: 400;
-    margin-bottom: 5px;
   }
   .content.content-feed {
     padding-right: 10px;