Merge pull request #1 from cezaraugusto/the-eth-wallet-metamask-logo

add metamask icon for disabled content page

app/renderer/components/preferences/ethWalletTab.js

@@ -7,6 +7,7 @@ const ImmutableComponent = require('../immutableComponent')
 const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('../styles/global')
 const ethereumIcon = require('../../../../img/ethereum/ethereum-logo.svg')
+const metamaskIcon = require('../../../../img/ethereum/metamask-logo.svg')
 
 // Components
 const {SettingCheckbox} = require('../common/settings')
@@ -61,7 +62,18 @@ class EthWalletTab extends ImmutableComponent {
           </div>
         </div>
         <div className={css(styles.disabledContent__sidebar)}>
-          <h2 className={css(styles.disabledContent__sidebar__text)}>MetaMask</h2>
+          <div className={css(styles.disabledContent__sidebar__metamask)}>
+            <img className={
+              css(
+                styles.disabledContent__sidebar__metamask__content,
+                styles.disabledContent__sidebar__metamask__content__image
+              )
+            } src={metamaskIcon} />
+            <h2 className={css(
+              styles.disabledContent__sidebar__metamask__content,
+              styles.disabledContent__sidebar__text
+            )}>MetaMask</h2>
+          </div>
           <p className={css(styles.disabledContent__sidebar__text)}>Do you use DApps? Try MetaMask with ETH Wallet for additional functionality.</p>
         </div>
       </div>
@@ -277,6 +289,17 @@ const disabledContentStyles = StyleSheet.create({
     color: globalStyles.color.darkGray
   },
 
+  disabledContent__sidebar__metamask: {
+    marginBottom: '15px'
+  },
+  disabledContent__sidebar__metamask__content: {
+    display: 'inline-block',
+    verticalAlign: 'middle'
+  },
+  disabledContent__sidebar__metamask__content__image: {
+    marginRight: '15px'
+  },
+
   disabledContent__background: {
     backgroundImage: `url(${ethereumIcon})`,
     backgroundSize: 'contain',

app/renderer/components/preferences/preferenceNavigation.js

@@ -18,7 +18,8 @@ const iconShieldsOn = require('../../../extensions/brave/img/preferences/browser
 const iconShieldsOff = require('../../../extensions/brave/img/preferences/browser_prefs_shields_off.svg')
 const iconPaymentsOn = require('../../../extensions/brave/img/preferences/browser_prefs_payments_on.svg')
 const iconPaymentsOff = require('../../../extensions/brave/img/preferences/browser_prefs_payments_off.svg')
-const iconEthWallet = require('../../../extensions/brave/img/preferences/browser_prefs_advanced.svg')
+const iconEthWalletOn = require('../../../extensions/brave/img/preferences/browser_prefs_ethwallet_on.svg')
+const iconEthWalletOff = require('../../../extensions/brave/img/preferences/browser_prefs_ethwallet_off.svg')
 // sync TBD
 const iconSync = require('../../../extensions/brave/img/preferences/browser_prefs_sync.svg')
 const iconAdvanced = require('../../../extensions/brave/img/preferences/browser_prefs_advanced.svg')
@@ -64,6 +65,8 @@ class PreferenceNavigation extends ImmutableComponent {
           selected={this.props.preferenceTab === preferenceTabs.PAYMENTS}
         />
         <PreferenceNavigationButton icon={styles.ethWallet}
+          iconOn={styles.ethWalletOn}
+          iconOff={styles.ethWalletOff}
           l10nId='ethWallet'
           testId='ethWalletTabButton'
           onClick={this.props.changeTab.bind(null, preferenceTabs.ETHWALLET)}
@@ -127,8 +130,9 @@ const styles = StyleSheet.create({
   shieldsOff: navIcon(iconShieldsOff),
   paymentsOn: {background: `url(${iconPaymentsOn}) no-repeat 0 0`},
   paymentsOff: navIcon(iconPaymentsOff),
+  ethWalletOn: {background: `url(${iconEthWalletOn}) no-repeat 0 0`},
+  ethWalletOff: navIcon(iconEthWalletOff),
   sync: navIcon(iconSync),
-  ethWallet: navIcon(iconEthWallet),
   extensions: navIcon(iconExtensions),
   advanced: navIcon(iconAdvanced)
 })

test/unit/about/preferencesTest.js

@@ -71,6 +71,7 @@ describe('Preferences component unittest', function () {
     mockery.registerMock('../../../../../extensions/brave/img/ledger/uphold_logo_medium.png')
     // Mocks the icons used in EthWallet
     mockery.registerMock('../../../../img/ethereum/ethereum-logo.svg')
+    mockery.registerMock('../../../../img/ethereum/metamask-logo.svg')
 
     mockery.registerMock('electron', fakeElectron)