From a566449fd92e2808f588a0196b2eb1c6961e12f5 Mon Sep 17 00:00:00 2001
From: Brett Sun <qisheng.brett.sun@gmail.com>
Date: Fri, 29 Mar 2019 13:59:34 +0100
Subject: [PATCH] fix(MenuPanel): avoid clickable margin above system apps
 toggle

---
 src/components/MenuPanel/MenuPanel.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/MenuPanel/MenuPanel.js b/src/components/MenuPanel/MenuPanel.js
index 169ed7f6c..f2690a3f6 100644
--- a/src/components/MenuPanel/MenuPanel.js
+++ b/src/components/MenuPanel/MenuPanel.js
@@ -144,10 +144,9 @@ class MenuPanel extends React.PureComponent {
                     : this.renderAppGroup(app, false)
                 )}
               </div>
-              <StyledButton onClick={this.handleToggleSystemApps}>
+              <SystemAppsToggle onClick={this.handleToggleSystemApps}>
                 <h1
                   style={{
-                    marginTop: '24px',
                     display: 'flex',
                     justifyContent: 'space-between',
                     alignItems: 'flex-end',
@@ -166,7 +165,7 @@ class MenuPanel extends React.PureComponent {
                     <IconArrow />
                   </span>
                 </h1>
-              </StyledButton>
+              </SystemAppsToggle>
               <Transition
                 items={systemAppsOpened}
                 config={springs.swift}
@@ -344,15 +343,15 @@ AnimatedMenuPanel.propTypes = {
   onCloseMenuPanel: PropTypes.func.isRequired,
 }
 
-const StyledButton = styled(ButtonBase)`
+const SystemAppsToggle = styled(ButtonBase)`
   padding: 0;
   margin: 0;
+  margin-top: 20px;
   background: none;
   border: none;
   cursor: pointer;
   width: 100%;
   text-align: left;
-  margin-top: 5px;
   outline: none;
 `