Fix header menu items to be clickable on margins - Closes #898

src/components/header/header.css

@@ -31,10 +31,16 @@
 }
 
 .menuItem {
+  padding: 0;
+}
+
+.menuLink {
   text-decoration: none;
   text-align: left;
   width: 100%;
   height: 100%;
   line-height: 48px;
   color: rgba(0, 0, 0, 0.87);
+  padding-left: 16px;
+  padding-right: 16px;
 }

src/components/header/header.js

@@ -25,29 +25,29 @@ const Header = props => (
       >
         {
           !props.account.isDelegate &&
-            <MenuItem>
-              <RelativeLink className={`register-as-delegate ${styles.menuItem}`}
+            <MenuItem theme={styles}>
+              <RelativeLink className={`register-as-delegate ${styles.menuLink}`}
                 to='register-delegate'>{props.t('Register as delegate')}</RelativeLink>
             </MenuItem>
         }
         {
           !props.account.secondSignature &&
-            <MenuItem>
-              <RelativeLink className={`register-second-passphrase ${styles.menuItem}`}
+            <MenuItem theme={styles}>
+              <RelativeLink className={`register-second-passphrase ${styles.menuLink}`}
                 to='register-second-passphrase'>{props.t('Register second passphrase')}</RelativeLink>
             </MenuItem>
         }
-        <MenuItem>
-          <RelativeLink className={`sign-message ${styles.menuItem}`} to='sign-message'>{props.t('Sign message')}</RelativeLink>
+        <MenuItem theme={styles}>
+          <RelativeLink className={`sign-message ${styles.menuLink}`} to='sign-message'>{props.t('Sign message')}</RelativeLink>
         </MenuItem>
-        <MenuItem>
-          <RelativeLink className={`verify-message ${styles.menuItem}`}
+        <MenuItem theme={styles}>
+          <RelativeLink className={`verify-message ${styles.menuLink}`}
             to='verify-message'>{props.t('Verify message')}</RelativeLink>
         </MenuItem>
         <MenuDivider />
-        <SaveAccountButton />
-        <MenuItem>
-          <RelativeLink className={`settings ${styles.menuItem}`} to='settings'>{props.t('Settings')}</RelativeLink>
+        <SaveAccountButton theme={styles} />
+        <MenuItem theme={styles}>
+          <RelativeLink className={`settings ${styles.menuLink}`} to='settings'>{props.t('Settings')}</RelativeLink>
         </MenuItem>
       </IconMenu>
 

src/components/saveAccountButton/index.test.js

@@ -25,7 +25,7 @@ describe('SaveAccountButtonHOC', () => {
   });
 
   beforeEach(() => {
-    wrapper = mount(<Router><SaveAccountButtonHOC /></Router>, {
+    wrapper = mount(<Router><SaveAccountButtonHOC theme={{}} /></Router>, {
       context: { store, i18n },
       childContextTypes: {
         store: PropTypes.object.isRequired,

src/components/saveAccountButton/saveAccountButton.js

@@ -1,16 +1,15 @@
 import { MenuItem } from 'react-toolbox/lib/menu';
 import React from 'react';
 import RelativeLink from '../relativeLink';
-import styles from './saveAccountButton.css';
 
-const SaveAccountButton = ({ account, savedAccounts, accountRemoved, t }) =>
+const SaveAccountButton = ({ account, savedAccounts, accountRemoved, t, theme }) =>
   (savedAccounts.length > 0 ?
     <MenuItem caption={t('Forget this account')}
       className='forget-account'
       onClick={accountRemoved.bind(null, account.publicKey)}
     /> :
-    <MenuItem>
-      <RelativeLink className={`${styles.menuItem} save-account`} to='save-account'>
+    <MenuItem theme={theme}>
+      <RelativeLink className={`${theme.menuLink} save-account`} to='save-account'>
         {t('Save account')}
       </RelativeLink>
     </MenuItem>

src/components/saveAccountButton/saveAccountButton.test.js

@@ -12,6 +12,10 @@ describe('SaveAccountButton', () => {
   const emptySavedAccounts = [];
   const savedAccounts = [account];
   const props = {
+    theme: {
+      menuLink: 'some class',
+      menuItem: 'some other class',
+    },
     account,
     accountRemoved: sinon.spy(),
     t: key => key,