From 8c4bfa08f7f085308a0d6a3f6bfc2dc10f117b6d Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Tue, 24 Oct 2017 10:38:05 +0200
Subject: [PATCH 1/2] Fix header menu items to be clickable on margins

There were left and right margins that were not clickable
In the saveAccountButton even bottom and top margins were not clickable
---
 src/components/header/header.css              |  6 +++++
 src/components/header/header.js               | 22 +++++++++----------
 .../saveAccountButton/saveAccountButton.css   |  6 -----
 .../saveAccountButton/saveAccountButton.js    |  7 +++---
 4 files changed, 20 insertions(+), 21 deletions(-)
 delete mode 100644 src/components/saveAccountButton/saveAccountButton.css

diff --git a/src/components/header/header.css b/src/components/header/header.css
index 21ba04c14..e1da2cdea 100644
--- a/src/components/header/header.css
+++ b/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;
 }
diff --git a/src/components/header/header.js b/src/components/header/header.js
index d0c471acd..f09c3cb7c 100644
--- a/src/components/header/header.js
+++ b/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>
 
diff --git a/src/components/saveAccountButton/saveAccountButton.css b/src/components/saveAccountButton/saveAccountButton.css
deleted file mode 100644
index 2e98680fb..000000000
--- a/src/components/saveAccountButton/saveAccountButton.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.menuItem {
-  text-decoration: none;
-  text-align: left;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.87);
-}
diff --git a/src/components/saveAccountButton/saveAccountButton.js b/src/components/saveAccountButton/saveAccountButton.js
index 53230ea14..1ef4098b7 100644
--- a/src/components/saveAccountButton/saveAccountButton.js
+++ b/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>

From 93b41c3eac8650152b443f59965ae43e40df9f36 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Tue, 24 Oct 2017 10:44:21 +0200
Subject: [PATCH 2/2] Add theme prop to saveAccountButton unit tests

---
 src/components/saveAccountButton/index.test.js             | 2 +-
 src/components/saveAccountButton/saveAccountButton.test.js | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/saveAccountButton/index.test.js b/src/components/saveAccountButton/index.test.js
index f93e562f7..b3422cc06 100644
--- a/src/components/saveAccountButton/index.test.js
+++ b/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,
diff --git a/src/components/saveAccountButton/saveAccountButton.test.js b/src/components/saveAccountButton/saveAccountButton.test.js
index 61a7486af..5e7239123 100644
--- a/src/components/saveAccountButton/saveAccountButton.test.js
+++ b/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,