From 548e11b1c889332fadb379237555625ad2a3c845 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <cezaraugusto@outlook.it>
Date: Thu, 4 May 2017 21:06:53 -0300
Subject: [PATCH] Add BrowserButton component - Close #8568 - Auditors:
 @luixxiul, @NejcZdovc

---
 .../brave/locales/en-US/styles.properties     |   6 +-
 .../bookmarks/addEditBookmarkHanger.js        |   8 +-
 .../components/bookmarks/bookmarksToolbar.js  |  14 +-
 app/renderer/components/browserAction.js      |  21 +--
 .../components/checkDefaultBrowserDialog.js   |   6 +-
 .../components/common/browserButton.js        | 139 ++++++++++++++++++
 app/renderer/components/common/messageBox.js  |   7 +-
 .../components/navigation/navigationBar.js    |   9 +-
 .../components/navigation/navigator.js        |   4 +-
 .../preferences/payment/advancedSettings.js   |   8 +-
 .../preferences/payment/enabledContent.js     |   7 +-
 .../preferences/payment/ledgerBackup.js       |  14 +-
 .../preferences/payment/ledgerRecovery.js     |  14 +-
 .../preferences/payment/ledgerTable.js        |   6 +-
 .../components/preferences/syncTab.js         |  38 ++---
 app/renderer/components/publisherToggle.js    |  15 +-
 .../components/styles/commonStyles.js         |  73 ---------
 app/renderer/components/styles/global.js      |  49 +++++-
 .../components/windowCaptionButtons.js        |   3 +
 js/about/styles.js                            |  64 ++++----
 js/components/button.js                       |   9 ++
 js/components/notificationBar.js              |   9 +-
 js/components/updateBar.js                    |  27 +---
 less/button.less                              |  15 +-
 test/about/extensionsTest.js                  |  10 +-
 .../app/renderer/components/messageBoxTest.js |   8 +-
 26 files changed, 345 insertions(+), 238 deletions(-)
 create mode 100644 app/renderer/components/common/browserButton.js

diff --git a/app/extensions/brave/locales/en-US/styles.properties b/app/extensions/brave/locales/en-US/styles.properties
index 74de9801d0..c293679908 100644
--- a/app/extensions/brave/locales/en-US/styles.properties
+++ b/app/extensions/brave/locales/en-US/styles.properties
@@ -15,10 +15,12 @@ offByDefault=Off by default
 
 buttons=Buttons
 browserButton=Browser Button
-whiteButton=White Button
+secondaryColor=Secondary Button
 inlineButton=Inline Button
 wideButton=Wide Button
 smallButton=Small Button
-primaryButton=Primary Button
+primaryColor=Primary Button
 actionButton=Action Button
 subtleButton=Subtle Button
+extensionItem=Extension Item
+notificationItem=Notification Item
diff --git a/app/renderer/components/bookmarks/addEditBookmarkHanger.js b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
index fed7e9afd5..f8402ebd9e 100644
--- a/app/renderer/components/bookmarks/addEditBookmarkHanger.js
+++ b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
@@ -7,7 +7,7 @@ const React = require('react')
 // Components
 const ImmutableComponent = require('../immutableComponent')
 const Dialog = require('../../../../js/components/dialog')
-const Button = require('../../../../js/components/button')
+const BrowserButton = require('../common/browserButton')
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')
@@ -273,18 +273,18 @@ class AddEditBookmarkHanger extends ImmutableComponent {
         <CommonFormButtonWrapper>
           {
             this.props.originalDetail
-            ? <Button className='whiteButton'
+            ? <BrowserButton secondaryColor
               l10nId='remove'
               testId='bookmarkHangerRemoveButton'
               onClick={this.onRemoveBookmark}
             />
-            : <Button className='whiteButton'
+            : <BrowserButton secondaryColor
               l10nId='cancel'
               testId='bookmarkHangerCancelButton'
               onClick={this.onClose}
             />
           }
-          <Button className='primaryButton'
+          <BrowserButton primaryColor
             l10nId='done'
             testId='bookmarkHangerDoneButton'
             disabled={!this.bookmarkNameValid}
diff --git a/app/renderer/components/bookmarks/bookmarksToolbar.js b/app/renderer/components/bookmarks/bookmarksToolbar.js
index 289be90165..0b00071dc7 100644
--- a/app/renderer/components/bookmarks/bookmarksToolbar.js
+++ b/app/renderer/components/bookmarks/bookmarksToolbar.js
@@ -8,7 +8,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const ImmutableComponent = require('../immutableComponent')
-const Button = require('../../../../js/components/button')
+const BrowserButton = require('../common/browserButton')
 const BookmarkToolbarButton = require('./bookmarkToolbarButton')
 
 // Actions
@@ -231,13 +231,13 @@ class BookmarksToolbar extends ImmutableComponent {
       }
       {
         this.overflowBookmarkItems.size !== 0
-        ? <Button iconClass='fa-angle-double-right'
+        ? <BrowserButton
+          iconClass={globalStyles.appIcons.angleDoubleRight}
           onClick={this.onMoreBookmarksMenu}
-          className={cx({
-            bookmarkButton: true,
-            [css(styles.bookmarksToolbar__bookmarkButton)]: true,
-            [css(styles.bookmarksToolbar__overflowIndicator)]: true
-          })} />
+          custom={[
+            styles.bookmarksToolbar__bookmarkButton,
+            styles.bookmarksToolbar__overflowIndicator
+          ]} />
         : null
       }
     </div>
diff --git a/app/renderer/components/browserAction.js b/app/renderer/components/browserAction.js
index 46ab4c728c..6fe7a32e2e 100644
--- a/app/renderer/components/browserAction.js
+++ b/app/renderer/components/browserAction.js
@@ -6,7 +6,7 @@ const React = require('react')
 const ImmutableComponent = require('./immutableComponent')
 const electron = require('electron')
 const ipc = electron.ipcRenderer
-const Button = require('../../../js/components/button')
+const BrowserButton = require('./common/browserButton')
 const BrowserActionBadge = require('../../renderer/components/browserActionBadge')
 const extensionState = require('../../common/state/extensionState')
 const windowActions = require('../../../js/actions/windowActions')
@@ -47,12 +47,16 @@ class BrowserAction extends ImmutableComponent {
     const browserBadgeColor = this.props.browserAction.get('color')
     // TODO(bridiver) should have some visual notification of hover/press
     return <div className={css(styles.browserActionButton)}>
-      <Button iconClass='extensionBrowserAction'
+      <BrowserButton extensionItem
         l10nId='browserActionButton'
+        testId='extensionBrowserAction'
         l10nArgs={{ name: this.props.browserAction.get('title') }}
-        className={css(styles.extensionButton)}
         inlineStyles={{
-          backgroundImage: extensionState.browserActionBackgroundImage(this.props.browserAction, this.props.tabId)
+          backgroundImage: extensionState
+            .browserActionBackgroundImage(this.props.browserAction, this.props.tabId),
+          backgroundPosition: 'center',
+          backgroundSize: 'contain',
+          backgroundRepeat: 'no-repeat'
         }}
         dataButtonValue={this.props.extensionId}
         onClick={this.onClick} />
@@ -67,15 +71,6 @@ class BrowserAction extends ImmutableComponent {
 const styles = StyleSheet.create({
   browserActionButton: {
     position: 'relative'
-  },
-  extensionButton: {
-    '-webkit-app-region': 'no-drag',
-    backgroundSize: 'contain',
-    height: '17px',
-    margin: '4px 0 0 0',
-    opacity: '0.85',
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'center'
   }
 })
 
diff --git a/app/renderer/components/checkDefaultBrowserDialog.js b/app/renderer/components/checkDefaultBrowserDialog.js
index 5017e6313e..0fdcf6d3c7 100644
--- a/app/renderer/components/checkDefaultBrowserDialog.js
+++ b/app/renderer/components/checkDefaultBrowserDialog.js
@@ -7,7 +7,7 @@ const React = require('react')
 // Components
 const ImmutableComponent = require('./immutableComponent')
 const Dialog = require('../../../js/components/dialog')
-const Button = require('../../../js/components/button')
+const BrowserButton = require('./common/browserButton')
 const SwitchControl = require('../../../js/components/switchControl')
 
 // Actions
@@ -67,12 +67,12 @@ class CheckDefaultBrowserDialog extends ImmutableComponent {
           </div>
         </CommonFormSection>
         <CommonFormButtonWrapper>
-          <Button className='whiteButton'
+          <BrowserButton secondaryColor
             l10nId='notNow'
             testId='notNowButton'
             onClick={this.onNotNow}
           />
-          <Button className='primaryButton'
+          <BrowserButton primaryColor
             l10nId='useBrave'
             testId='useBraveButton'
             onClick={this.onUseBrave}
diff --git a/app/renderer/components/common/browserButton.js b/app/renderer/components/common/browserButton.js
new file mode 100644
index 0000000000..aa444c5855
--- /dev/null
+++ b/app/renderer/components/common/browserButton.js
@@ -0,0 +1,139 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const {StyleSheet, css} = require('aphrodite/no-important')
+const ImmutableComponent = require('../immutableComponent')
+const globalStyles = require('../styles/global')
+
+class BrowserButton extends ImmutableComponent {
+  get classNames () {
+    return [
+      styles.browserButton,
+      this.props.primaryColor && [styles.browserButton_default, styles.browserButton_primaryColor],
+      this.props.secondaryColor && [styles.browserButton_default, styles.browserButton_secondaryColor],
+      this.props.extensionItem && styles.browserButton_extensionItem,
+      this.props.groupedItem && styles.browserButton_groupedItem,
+      this.props.notificationItem && styles.browserButton_notificationItem
+      // TODO: These are other button styles app-wise
+      // that needs to be refactored and included in this file
+      // .............................................
+      // this.props.smallItem && styles.browserButton_actionItem,
+      // this.props.actionItem && styles.browserButton_actionItem,
+      // this.props.navItem && styles.browserButton_navItem,
+      // this.props.panelItem && styles.browserButton_panelItem,
+      // this.props.subtleItem && styles.browserButton_subtleItem
+    ]
+  }
+  render () {
+    return <button
+      disabled={this.props.disabled}
+      data-l10n-id={this.props.l10nId}
+      data-test-id={this.props.testId}
+      data-test2-id={this.props.test2Id}
+      data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
+      style={this.props.inlineStyles}
+      data-button-value={this.props.dataButtonValue}
+      onClick={this.props.onClick}
+      className={css(this.classNames, this.props.custom)}>
+      {
+        this.props.iconClass || this.props.label
+        ? <span className={this.props.iconClass}>{this.props.label}</span>
+        : null
+      }
+    </button>
+  }
+}
+
+const styles = StyleSheet.create({
+  browserButton: {
+    margin: '0 3px',
+    whiteSpace: 'nowrap',
+    outline: 'none',
+    cursor: 'default',
+    display: 'inline-block',
+    lineHeight: '25px',
+    height: '25px',
+    width: '25px',
+    fontSize: '13px',
+    color: globalStyles.button.default.color,
+    borderRadius: '2px',
+    textAlign: 'center',
+    transition: '.1s opacity, .1s background',
+    userSelect: 'none',
+    backgroundSize: '16px',
+    backgroundPosition: 'center center',
+    backgroundRepeat: 'no-repeat',
+    backgroundImage: 'none',
+    backgroundColor: globalStyles.button.default.backgroundColor,
+    border: 'none',
+    ':hover': {
+      color: globalStyles.button.default.hoverColor
+    }
+  },
+  // applies for primary and white buttons
+  browserButton_default: {
+    position: 'relative',
+    boxShadow: globalStyles.button.default.boxShadow,
+    cursor: 'pointer',
+    lineHeight: 1.25,
+    width: 'auto',
+    height: 'auto',
+    minWidth: '78px',
+    fontSize: '13px',
+    padding: '7px 20px',
+    ':active': {
+      // push the button down when active
+      bottom: '-1px'
+    }
+  },
+  browserButton_primaryColor: {
+    background: globalStyles.button.primary.background,
+    borderLeft: '2px solid transparent',
+    borderRight: '2px solid transparent',
+    borderTop: `2px solid ${globalStyles.button.primary.gradientColor1}`,
+    borderBottom: `2px solid ${globalStyles.button.primary.gradientColor2}`,
+    color: globalStyles.button.primary.color,
+    cursor: 'pointer',
+    ':hover': {
+      border: `2px solid ${globalStyles.button.primary.borderHoverColor}`,
+      color: globalStyles.button.primary.hoverColor
+    }
+  },
+  browserButton_secondaryColor: {
+    background: globalStyles.button.secondary.background,
+    border: '1px solid white',
+    color: globalStyles.button.secondary.color,
+    cursor: 'pointer',
+    ':hover': {
+      border: `1px solid ${globalStyles.button.secondary.borderHoverColor}`,
+      color: globalStyles.button.secondary.hoverColor
+    }
+  },
+  browserButton_extensionItem: {
+    WebkitAppRegion: 'no-drag',
+    backgroundSize: 'contain',
+    height: '17px',
+    margin: '4px 0 0 0',
+    opacity: '0.85',
+    backgroundRepeat: 'no-repeat'
+  },
+  browserButton_groupedItem: {
+    // Legacy LESS inside ledger is too nested
+    // and this style won't have effect without using !important
+    // TODO: remove !important and check advancedSettings.js
+    // once preferences is fully refactored
+    marginRight: '4px !important',
+    marginLeft: '4px !important'
+  },
+  browserButton_notificationItem: {
+    fontSize: '13px',
+    marginRight: '10px',
+    padding: '2px 15px',
+    textTransform: 'capitalize',
+    width: 'auto'
+  }
+})
+
+module.exports = BrowserButton
diff --git a/app/renderer/components/common/messageBox.js b/app/renderer/components/common/messageBox.js
index c3b6a2d67c..2d7062f0af 100644
--- a/app/renderer/components/common/messageBox.js
+++ b/app/renderer/components/common/messageBox.js
@@ -8,7 +8,7 @@ const {StyleSheet, css} = require('aphrodite')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../../../../js/components/dialog')
-const Button = require('../../../../js/components/button')
+const BrowserButton = require('../common/browserButton')
 const SwitchControl = require('../../../../js/components/switchControl')
 
 // Actions
@@ -88,8 +88,9 @@ class MessageBox extends React.Component {
     const newButtons = []
 
     for (let index = (buttons.size - 1); index > -1; index--) {
-      newButtons.push(<Button l10nId={buttons.get(index)}
-        className={index === 0 ? 'primaryButton' : 'whiteButton'}
+      newButtons.push(<BrowserButton l10nId={buttons.get(index)}
+        primaryColor={index === 0}
+        secondaryColor={index !== 0}
         onClick={this.onDismiss.bind(this, this.props.tabId, index)} />)
     }
 
diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js
index ff86580d51..b2b0c0ca3f 100644
--- a/app/renderer/components/navigation/navigationBar.js
+++ b/app/renderer/components/navigation/navigationBar.js
@@ -192,13 +192,13 @@ class NavigationBar extends React.Component {
         : this.props.loading
           ? <span className='navigationButtonContainer'>
             <button data-l10n-id='stopButton'
-              className='navigationButton stopButton'
+              className='normalizeButton navigationButton stopButton'
               onClick={this.onStop} />
           </span>
           : <span className='navigationButtonContainer'>
             <LongPressButton
               l10nId='reloadButton'
-              className='navigationButton reloadButton'
+              className='normalizeButton navigationButton reloadButton'
               onClick={this.onReload}
               onLongPress={this.onReloadLongPress} />
           </span>
@@ -207,7 +207,7 @@ class NavigationBar extends React.Component {
         !this.props.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
         ? <span className='navigationButtonContainer'>
           <button data-l10n-id='homeButton'
-            className='navigationButton homeButton'
+            className='normalizeButton navigationButton homeButton'
             onClick={this.onHome} />
         </span>
         : null
@@ -221,7 +221,8 @@ class NavigationBar extends React.Component {
                 navigationButton: true,
                 bookmarkButton: true,
                 removeBookmarkButton: this.bookmarked,
-                withHomeButton: getSetting(settings.SHOW_HOME_BUTTON)
+                withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
+                normalizeButton: true
               })}
               onClick={this.onToggleBookmark} />
           </span>
diff --git a/app/renderer/components/navigation/navigator.js b/app/renderer/components/navigation/navigator.js
index f4569785c5..74e48002b7 100644
--- a/app/renderer/components/navigation/navigator.js
+++ b/app/renderer/components/navigation/navigator.js
@@ -227,7 +227,7 @@ class Navigator extends ImmutableComponent {
             })}>
               <LongPressButton
                 l10nId='backButton'
-                className='navigationButton backButton'
+                className='normalizeButton navigationButton backButton'
                 disabled={!activeTab || !activeTab.get('canGoBack') || activeTabShowingMessageBox}
                 onClick={this.onBack}
                 onLongPress={this.onBackLongPress}
@@ -240,7 +240,7 @@ class Navigator extends ImmutableComponent {
             })}>
               <LongPressButton
                 l10nId='forwardButton'
-                className='navigationButton forwardButton'
+                className='normalizeButton navigationButton forwardButton'
                 disabled={!activeTab || !activeTab.get('canGoForward') || activeTabShowingMessageBox}
                 onClick={this.onForward}
                 onLongPress={this.onForwardLongPress}
diff --git a/app/renderer/components/preferences/payment/advancedSettings.js b/app/renderer/components/preferences/payment/advancedSettings.js
index c71ce3a2db..c3537d2ad9 100644
--- a/app/renderer/components/preferences/payment/advancedSettings.js
+++ b/app/renderer/components/preferences/payment/advancedSettings.js
@@ -10,7 +10,7 @@ const {changeSetting} = require('../../../lib/settingsUtil')
 const appConfig = require('../../../../../js/constants/appConfig')
 
 // components
-const Button = require('../../../../../js/components/button')
+const BrowserButton = require('../../common/browserButton')
 const {SettingsList, SettingItem, SettingCheckbox} = require('../../settings')
 const {SettingDropdown} = require('../../common/dropdown')
 const ImmutableComponent = require('../../immutableComponent')
@@ -89,17 +89,17 @@ class AdvancedSettingsContent extends ImmutableComponent {
 class AdvancedSettingsFooter extends ImmutableComponent {
   render () {
     return <section>
-      <Button className='primaryButton'
+      <BrowserButton groupedItem primaryColor
         l10nId='backupLedger'
         testId='backupLedgerButton'
         onClick={this.props.showOverlay.bind(this, 'ledgerBackup')}
       />
-      <Button className='primaryButton'
+      <BrowserButton groupedItem primaryColor
         l10nId='recoverLedger'
         testId='recoverLedgerButton'
         onClick={this.props.showOverlay.bind(this, 'ledgerRecovery')}
       />
-      <Button className='whiteButton'
+      <BrowserButton groupedItem secondaryColor
         l10nId='done'
         testId='doneButton'
         onClick={this.props.hideOverlay.bind(this, 'advancedSettings')}
diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
index 507e2b84f1..d26f4cb569 100644
--- a/app/renderer/components/preferences/payment/enabledContent.js
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -13,7 +13,7 @@ const {changeSetting} = require('../../../lib/settingsUtil')
 
 // components
 const ImmutableComponent = require('../../immutableComponent')
-const Button = require('../../../../../js/components/button')
+const BrowserButton = require('../../common/browserButton')
 const {FormTextbox} = require('../../common/textbox')
 const {FormDropdown} = require('../../common/dropdown')
 const {SettingsList, SettingItem} = require('../../settings')
@@ -22,7 +22,6 @@ const LedgerTable = require('./ledgerTable')
 // style
 const globalStyles = require('../../styles/global')
 const {paymentStyles} = require('../../styles/payment')
-const commonStyles = require('../../styles/commonStyles')
 const cx = require('../../../../../js/lib/classSet')
 
 // other
@@ -42,11 +41,11 @@ class EnabledContent extends ImmutableComponent {
       ? this.props.showOverlay.bind(this, 'addFunds')
       : (ledgerData.get('creating') ? () => {} : this.createWallet())
 
-    return <Button
+    return <BrowserButton primaryColor
       testId={buttonText}
       test2Id={'addFunds'}
       l10nId={buttonText}
-      className={css(commonStyles.primaryButton, styles.addFunds)}
+      custom={styles.addFunds}
       onClick={onButtonClick.bind(this)}
       disabled={ledgerData.get('creating')}
     />
diff --git a/app/renderer/components/preferences/payment/ledgerBackup.js b/app/renderer/components/preferences/payment/ledgerBackup.js
index a6c23508eb..7276762267 100644
--- a/app/renderer/components/preferences/payment/ledgerBackup.js
+++ b/app/renderer/components/preferences/payment/ledgerBackup.js
@@ -7,7 +7,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 
 // components
 const ImmutableComponent = require('../../immutableComponent')
-const Button = require('../../../../../js/components/button')
+const BrowserButton = require('../../common/browserButton')
 
 // style
 const globalStyles = require('../../styles/global')
@@ -27,8 +27,7 @@ class LedgerBackupContent extends ImmutableComponent {
     return <section>
       <span data-l10n-id='ledgerBackupContent' />
       <div className={css(styles.copyKeyContainer)}>
-        {/* TODO: refactor button */}
-        <Button className='whiteButton'
+        <BrowserButton secondaryColor
           l10nId='copy'
           testId='copyButtonFirst'
           onClick={this.copyToClipboard.bind(this, paymentId)}
@@ -39,8 +38,7 @@ class LedgerBackupContent extends ImmutableComponent {
         </div>
       </div>
       <div className={css(styles.copyKeyContainer)}>
-        {/* TODO: refactor button */}
-        <Button className='whiteButton'
+        <BrowserButton secondaryColor
           l10nId='copy'
           testId='copyButtonSecond'
           onClick={this.copyToClipboard.bind(this, passphrase)}
@@ -75,17 +73,17 @@ class LedgerBackupFooter extends ImmutableComponent {
 
   render () {
     return <section>
-      <Button className='primaryButton'
+      <BrowserButton primaryColor
         l10nId='printKeys'
         testId='printKeysButton'
         onClick={this.printKeys}
       />
-      <Button className='primaryButton'
+      <BrowserButton primaryColor
         l10nId='saveRecoveryFile'
         testId='saveRecoveryFileButton'
         onClick={this.saveKeys}
       />
-      <Button className='whiteButton'
+      <BrowserButton secondaryColor
         l10nId='done'
         testId='doneButton'
         onClick={this.props.hideOverlay.bind(this, 'ledgerBackup')}
diff --git a/app/renderer/components/preferences/payment/ledgerRecovery.js b/app/renderer/components/preferences/payment/ledgerRecovery.js
index 31e9dfe7b0..8ae214cbf4 100644
--- a/app/renderer/components/preferences/payment/ledgerRecovery.js
+++ b/app/renderer/components/preferences/payment/ledgerRecovery.js
@@ -10,7 +10,7 @@ const {btcToCurrencyString} = require('../../../../common/lib/ledgerUtil')
 
 // components
 const ImmutableComponent = require('../../immutableComponent')
-const Button = require('../../../../../js/components/button')
+const BrowserButton = require('../../common/browserButton')
 const {RecoveryKeyTextbox} = require('../../common/textbox')
 const {SettingsList, SettingItem} = require('../../settings')
 
@@ -58,7 +58,7 @@ class LedgerRecoveryContent extends ImmutableComponent {
               data-l10n-id='balanceRecovered'
               data-l10n-args={JSON.stringify(l10nDataArgs)}
             />
-            <Button className='whiteButton'
+            <BrowserButton secondaryColor
               l10nId='ok'
               testId='okButton'
               onClick={this.clearRecoveryStatus.bind(this)}
@@ -73,7 +73,7 @@ class LedgerRecoveryContent extends ImmutableComponent {
             <p className={css(styles.recoveryOverlay__textColor, styles.recoveryOverlay__spaceAround)}
               data-l10n-id='ledgerRecoveryNetworkFailedMessage'
             />
-            <Button className='whiteButton'
+            <BrowserButton secondaryColor
               l10nId='ok'
               testId='okButton'
               onClick={this.clearRecoveryStatus.bind(this)}
@@ -88,7 +88,7 @@ class LedgerRecoveryContent extends ImmutableComponent {
             <p className={css(styles.recoveryOverlay__textColor, styles.recoveryOverlay__spaceAround)}
               data-l10n-id='ledgerRecoveryFailedMessage'
             />
-            <Button className='whiteButton'
+            <BrowserButton secondaryColor
               l10nId='ok'
               testId='okButton'
               onClick={this.clearRecoveryStatus.bind(this)}
@@ -126,17 +126,17 @@ class LedgerRecoveryFooter extends ImmutableComponent {
 
   render () {
     return <div>
-      <Button className='primaryButton'
+      <BrowserButton primaryColor groupedItem
         l10nId='recover'
         testId='recoverButton'
         onClick={this.recoverWallet}
       />
-      <Button className='primaryButton'
+      <BrowserButton primaryColor groupedItem
         l10nId='recoverFromFile'
         testId='recoverFromFileButton'
         onClick={this.recoverWalletFromFile}
       />
-      <Button className='whiteButton'
+      <BrowserButton secondaryColor groupedItem
         l10nId='cancel'
         testId='cancelButton'
         onClick={this.props.hideOverlay.bind(this, 'ledgerRecovery')}
diff --git a/app/renderer/components/preferences/payment/ledgerTable.js b/app/renderer/components/preferences/payment/ledgerTable.js
index d64534cd66..00d0867510 100644
--- a/app/renderer/components/preferences/payment/ledgerTable.js
+++ b/app/renderer/components/preferences/payment/ledgerTable.js
@@ -9,12 +9,11 @@ const {StyleSheet, css} = require('aphrodite')
 const ImmutableComponent = require('../../immutableComponent')
 const SortableTable = require('../../../../../js/components/sortableTable')
 const SwitchControl = require('../../../../../js/components/switchControl')
-const Button = require('../../../../../js/components/button')
+const BrowserButton = require('../../common/browserButton')
 const PinnedInput = require('./pinnedInput')
 
 // style
 const globalStyles = require('../../styles/global')
-const commonStyles = require('../../styles/commonStyles')
 const verifiedGreenIcon = require('../../../../extensions/brave/img/ledger/verified_green_icon.svg')
 const verifiedWhiteIcon = require('../../../../extensions/brave/img/ledger/verified_white_icon.svg')
 const removeIcon = require('../../../../extensions/brave/img/ledger/icon_remove.svg')
@@ -302,9 +301,8 @@ class LedgerTable extends ImmutableComponent {
       {
         (totalUnPinnedRows !== unPinnedRows.size && hideLower)
         ? <div className={css(styles.showAllWrap)}>
-          <Button
+          <BrowserButton secondaryColor
             l10nId={hideLower ? 'showAll' : 'hideLower'}
-            className={css(commonStyles.whiteButton)}
             onClick={this.showAll.bind(this, !hideLower)}
           />
         </div>
diff --git a/app/renderer/components/preferences/syncTab.js b/app/renderer/components/preferences/syncTab.js
index a1f1031e86..d59a8c5720 100644
--- a/app/renderer/components/preferences/syncTab.js
+++ b/app/renderer/components/preferences/syncTab.js
@@ -10,7 +10,7 @@ const niceware = require('niceware')
 
 // Components
 const ModalOverlay = require('../../../../js/components/modalOverlay')
-const Button = require('../../../../js/components/button')
+const BrowserButton = require('../common/browserButton')
 const {SettingsList, SettingItem, SettingCheckbox} = require('../settings')
 const SortableTable = require('../../../../js/components/sortableTable')
 
@@ -56,7 +56,7 @@ class SyncTab extends ImmutableComponent {
   get errorContent () {
     return <section className={css(styles.settingsListContainerMargin__bottom)}>
       <div className={css(styles.errorContent__setupError)} data-test-id='syncSetupError'>{this.setupError}</div>
-      <Button className='primaryButton'
+      <BrowserButton primaryColor
         l10nId='syncRetryButton'
         testId='syncRetryButton'
         onClick={this.retry.bind(this)}
@@ -69,13 +69,13 @@ class SyncTab extends ImmutableComponent {
       <DefaultSectionTitle data-l10n-id='syncClearData' />
       {
         this.enabled
-          ? <Button className='primaryButton'
+          ? <BrowserButton primaryColor
             l10nId='syncResetButton'
             testId='clearDataButton'
             onClick={this.props.showOverlay.bind(this, 'syncReset')}
           />
           : <div>
-            <Button className='primaryButton'
+            <BrowserButton primaryColor
               disabled
               l10nId='syncResetButton'
               testId='clearDataButton'
@@ -92,12 +92,12 @@ class SyncTab extends ImmutableComponent {
     }
     // displayed before a sync userId has been created
     return <section className={css(styles.setupContent)}>
-      <Button className='primaryButton'
+      <BrowserButton primaryColor
         l10nId='syncStart'
         testId='syncStartButton'
         onClick={this.props.showOverlay.bind(this, 'syncStart')}
       />
-      <Button className='whiteButton'
+      <BrowserButton secondaryColor
         l10nId='syncAdd'
         testId='syncAddButton'
         onClick={this.props.showOverlay.bind(this, 'syncAdd')}
@@ -123,7 +123,7 @@ class SyncTab extends ImmutableComponent {
         </div>
       </div>
       {this.enabled ? this.devicesContent : null}
-      <Button className='primaryButton'
+      <BrowserButton primaryColor
         l10nId='syncNewDevice'
         testId='syncNewDeviceButton'
         onClick={this.props.showOverlay.bind(this, 'syncNewDevice')}
@@ -175,7 +175,7 @@ class SyncTab extends ImmutableComponent {
             styles.syncOverlayBody__listItem,
             commonStyles.noMarginLeft
           )}>
-            <Button className='whiteButton'
+            <BrowserButton secondaryColor
               l10nId='syncHideQR'
               testId='syncHideQRButton'
               onClick={this.props.hideQR}
@@ -193,7 +193,7 @@ class SyncTab extends ImmutableComponent {
         styles.syncOverlayBody__listItem,
         commonStyles.noMarginLeft
       )}>
-        <Button className='whiteButton'
+        <BrowserButton secondaryColor
           l10nId='syncShowQR'
           testId='syncShowQRButton'
           onClick={this.props.showQR}
@@ -221,7 +221,7 @@ class SyncTab extends ImmutableComponent {
           commonStyles.noMarginBottom,
           commonStyles.noMarginLeft
         )}>
-          <Button className='whiteButton'
+          <BrowserButton secondaryColor
             l10nId='syncHidePassphrase'
             testId='syncHidePassphraseButton'
             onClick={this.props.hidePassphrase}
@@ -240,7 +240,7 @@ class SyncTab extends ImmutableComponent {
           commonStyles.noMarginBottom,
           commonStyles.noMarginLeft
         )}>
-          <Button className='whiteButton'
+          <BrowserButton secondaryColor
             l10nId='syncShowPassphrase'
             testId='syncShowPassphraseButton'
             onClick={this.props.showPassphrase}
@@ -270,7 +270,7 @@ class SyncTab extends ImmutableComponent {
   }
 
   get newOverlayFooter () {
-    return <Button className='whiteButton'
+    return <BrowserButton secondaryColor
       l10nId='done'
       testId='doneButton'
       onClick={this.props.hideOverlay.bind(this, 'syncNewDevice')}
@@ -311,7 +311,7 @@ class SyncTab extends ImmutableComponent {
   }
 
   get startOverlayFooter () {
-    return <Button className='primaryButton'
+    return <BrowserButton primaryColor
       l10nId='syncCreate'
       testId='syncCreateButton'
       onClick={this.onSetup}
@@ -340,7 +340,7 @@ class SyncTab extends ImmutableComponent {
   }
 
   get addOverlayFooter () {
-    return <Button className='primaryButton'
+    return <BrowserButton primaryColor
       l10nId='syncCreate'
       testId='syncCreateButton'
       onClick={this.onRestore}
@@ -364,15 +364,12 @@ class SyncTab extends ImmutableComponent {
 
   get resetOverlayFooter () {
     return <section>
-      <Button className='whiteButton'
+      <BrowserButton secondaryColor groupedItem
         l10nId='cancel'
         testId='cancelButton'
         onClick={this.props.hideOverlay.bind(this, 'syncReset')}
       />
-      <Button className={cx({
-        primaryButton: true,
-        [css(styles.marginButton)]: true
-      })}
+      <BrowserButton primaryColor groupedItem
         l10nId='syncReset'
         testId='syncResetButton'
         onClick={this.onReset}
@@ -537,9 +534,6 @@ class SyncTab extends ImmutableComponent {
 }
 
 const styles = StyleSheet.create({
-  marginButton: {
-    marginLeft: globalStyles.spacing.overlayButtonMargin
-  },
   settingsListContainerMargin__top: {
     marginTop: globalStyles.spacing.settingsListContainerMargin
   },
diff --git a/app/renderer/components/publisherToggle.js b/app/renderer/components/publisherToggle.js
index e9f6cdd059..10a9309da3 100644
--- a/app/renderer/components/publisherToggle.js
+++ b/app/renderer/components/publisherToggle.js
@@ -9,9 +9,9 @@ const settings = require('../../../js/constants/settings')
 const getSetting = require('../../../js/settings').getSetting
 const {StyleSheet, css} = require('aphrodite')
 const globalStyles = require('./styles/global')
-const commonStyles = require('./styles/commonStyles')
 const {getHostPattern, isHttpOrHttps} = require('../../../js/lib/urlutil')
 const {getBaseUrl} = require('../../../js/lib/appUrlUtil')
+const BrowserButton = require('./common/browserButton')
 
 const noFundVerifiedPublisherImage = require('../../extensions/brave/img/urlbar/browser_URL_fund_no_verified.svg')
 const fundVerifiedPublisherImage = require('../../extensions/brave/img/urlbar/browser_URL_fund_yes_verified.svg')
@@ -102,16 +102,13 @@ class PublisherToggle extends ImmutableComponent {
         data-test-authorized={this.enabledForPaymentsPublisher}
         data-test-verified={this.verifiedPublisher}
         className={css(styles.addPublisherButtonContainer)}>
-        <button
-          className={
-          css(
-            commonStyles.browserButton,
+        <BrowserButton
+          custom={[
             !this.enabledForPaymentsPublisher && this.verifiedPublisher && styles.noFundVerified,
             this.enabledForPaymentsPublisher && this.verifiedPublisher && styles.fundVerified,
             !this.enabledForPaymentsPublisher && !this.verifiedPublisher && styles.noFundUnverified,
             this.enabledForPaymentsPublisher && !this.verifiedPublisher && styles.fundUnverified
-            )
-          }
+          ]}
           data-l10n-id={this.l10nString}
           onClick={this.onAuthorizePublisher}
         />
@@ -139,27 +136,23 @@ const styles = StyleSheet.create({
   },
 
   noFundVerified: {
-    border: 'none',
     backgroundImage: `url(${noFundVerifiedPublisherImage})`,
     backgroundSize: '18px',
     marginLeft: '2px'
   },
 
   fundVerified: {
-    border: 'none',
     backgroundImage: `url(${fundVerifiedPublisherImage})`,
     backgroundSize: '18px',
     marginLeft: '2px'
   },
 
   noFundUnverified: {
-    border: 'none',
     backgroundImage: `url(${noFundUnverifiedPublisherImage})`,
     backgroundSize: '18px'
   },
 
   fundUnverified: {
-    border: 'none',
     backgroundImage: `url(${fundUnverifiedPublisherImage})`,
     backgroundSize: '18px'
   }
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 19c50c6200..d2fecb0c8d 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -94,72 +94,6 @@ const styles = StyleSheet.create({
     whiteSpace: 'nowrap'
   },
 
-  // Buttons
-  browserButton: {
-    margin: '0',
-    whiteSpace: 'nowrap',
-    outline: 'none',
-    cursor: 'default',
-    display: 'inline-block',
-    lineHeight: globalStyles.spacing.buttonHeight,
-    height: globalStyles.spacing.buttonHeight,
-    width: globalStyles.spacing.buttonWidth,
-    fontSize: globalStyles.spacing.defaultFontSize,
-    color: globalStyles.color.buttonColor,
-    borderRadius: globalStyles.radius.borderRadius,
-    textAlign: 'center',
-    transition: '.1s opacity, .1s background',
-    userSelect: 'none',
-    backgroundSize: '16px',
-    backgroundPosition: 'center center',
-    backgroundRepeat: 'no-repeat'
-  },
-  primaryButton: {
-    background: 'linear-gradient(#FF7A1D, #ff5000)',
-    borderLeft: '2px solid transparent',
-    borderRight: '2px solid transparent',
-    borderTop: '2px solid #FF7A1D',
-    borderBottom: '2px solid #ff5000',
-    boxShadow: '0px 1px 5px -1px rgba(0, 0, 0, 0.5)',
-    fontWeight: '500',
-    fontSize: '0.9rem',
-    padding: '8px 20px',
-    margin: 0,
-    color: '#fff',
-    lineHeight: '1.25',
-    width: 'auto',
-    height: 'auto',
-    minWidth: '78px',
-
-    ':hover': {
-      border: '2px solid white',
-      color: 'white',
-      cursor: 'pointer'
-    }
-  },
-  whiteButton: {
-    background: 'linear-gradient(white, #ececec)',
-    border: '1px solid white',
-    boxShadow: '0px 1px 5px -1px rgba(0, 0, 0, 0.5)',
-    cursor: 'pointer',
-    color: '#444444',
-    lineHeight: 1.25,
-    width: 'auto',
-    height: 'auto',
-    minWidth: '78px',
-    fontSize: '0.9rem',
-    padding: '8px 20px',
-    margin: 0,
-
-    ':hover': {
-      border: `1px solid ${globalStyles.color.gray}`,
-      color: '#000'
-    }
-  },
-  inlineButton: {
-    display: 'inline'
-  },
-
   // margin/padding
   noMargin: {
     margin: 0
@@ -254,13 +188,6 @@ const styles = StyleSheet.create({
     padding: '0',
     margin: 'auto 0 auto 10px'
   },
-  notificationItem__button: {
-    fontSize: '13px',
-    marginRight: '10px',
-    padding: '2px 15px',
-    textTransform: 'capitalize',
-    width: 'auto'
-  },
 
   siteDetailsPageContent: {
     /* TODO: refactor siteDetails.less */
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 8d416d3f7e..592e50976c 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -1,3 +1,25 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * Historically this file includes styles with no defined criteria.
+ * Imagine this file as a future reference for theming, in a way
+ * that each component should be an object wrapping all properties
+ * that would change in a dark mode, for example.
+ *
+ * Valid as well for things that needs to be fully global,
+ * i.e. breakpoints, icons and zIndexes.
+ *
+ * Thus said, please take preference for inlined styles in the component itself.
+ * If you really feel repetitve writing the same style for a given component,
+ * consider including a variable inside component.
+ *
+ * TODO:
+ * remove unnecessary styles properties (as items get refactored)
+ * Remove fully global items and take preference for component properties (@see button)
+ */
+
 const globalStyles = {
   breakpoint: {
     breakpointWideViewport: '1000px',
@@ -215,7 +237,32 @@ const globalStyles = {
     volumeOn: 'fa fa-volume-up',
     exclude: 'fa fa-ban',
     trash: 'fa fa-trash',
-    moreInfo: 'fa fa-info-circle'
+    moreInfo: 'fa fa-info-circle',
+    angleDoubleRight: 'fa fa-angle-double-right'
+  },
+  button: {
+    default: {
+      color: '#5a5a5a',
+      backgroundColor: 'transparent',
+      hoverColor: '#000',
+      boxShadow: '0px 1px 5px -1px rgba(0, 0, 0, 0.5)'
+    },
+    primary: {
+      gradientColor1: '#FF7A1D',
+      gradientColor2: '#ff5000',
+      background: 'linear-gradient(#FF7A1D, #ff5000)',
+      color: '#fff',
+      hoverColor: '#fff',
+      borderHoverColor: '#fff'
+    },
+    secondary: {
+      gradientColor1: '#fff',
+      gradientColor2: '#ececec',
+      background: 'linear-gradient(#fff, #ececec)',
+      color: '#444',
+      hoverColor: '#000',
+      borderHoverColor: 'rgb(153, 153, 153)'
+    }
   }
 }
 
diff --git a/app/renderer/components/windowCaptionButtons.js b/app/renderer/components/windowCaptionButtons.js
index 01722ce3d5..36fcb94c4d 100644
--- a/app/renderer/components/windowCaptionButtons.js
+++ b/app/renderer/components/windowCaptionButtons.js
@@ -62,6 +62,7 @@ class WindowCaptionButtons extends ImmutableComponent {
         <button
           {...props}
           className={cx({
+            normalizeButton: true,
             fullscreen: this.props.windowMaximized,
             captionButton: true,
             minimize: true
@@ -73,6 +74,7 @@ class WindowCaptionButtons extends ImmutableComponent {
         <button
           {...props}
           className={cx({
+            normalizeButton: true,
             fullscreen: this.props.windowMaximized,
             captionButton: true,
             maximize: true
@@ -88,6 +90,7 @@ class WindowCaptionButtons extends ImmutableComponent {
         <button
           {...props}
           className={cx({
+            normalizeButton: true,
             fullscreen: this.props.windowMaximized,
             captionButton: true,
             close: true
diff --git a/js/about/styles.js b/js/about/styles.js
index 2f59292f74..571ba1e128 100644
--- a/js/about/styles.js
+++ b/js/about/styles.js
@@ -14,6 +14,7 @@ require('../../less/forms.less')
 const {Textbox, FormTextbox, SettingTextbox, RecoveryKeyTextbox} = require('../../app/renderer/components/common/textbox')
 const {TextArea, DefaultTextArea} = require('../../app/renderer/components/common/textbox')
 const {Dropdown, FormDropdown, SettingDropdown} = require('../../app/renderer/components/common/dropdown')
+const BrowserButton = require('../../app/renderer/components/common/browserButton')
 
 const {
   SectionTitleWrapper,
@@ -233,40 +234,36 @@ class AboutStyle extends ImmutableComponent {
 
       <div id='buttons'>
         <h1 data-l10n-id='buttons' />
-        <button data-l10n-id='browserButton' className='browserButton' onClick={this.onRemoveBookmark} />
+        <BrowserButton l10nId='browserButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          &lt;button data-l10n-id='done' className='browserButton'{'\n'}
-          onClick={'{this.onRemoveBookmark}'} />
+          &lt;BrowserButton l10nId='browserButton' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
-        <button data-l10n-id='whiteButton' className='browserButton whiteButton' onClick={this.onRemoveBookmark} />
+        <BrowserButton secondaryColor l10nId='secondaryColor' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          &lt;button data-l10n-id='cancel' className='browserButton whiteButton'{'\n'}
-          onClick={'{this.onRemoveBookmark}'} />
+          &lt;BrowserButton secondaryColor l10nId='secondaryColor' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
+        {
+          /* TODO: I don't think we really need it. Once we confirm by removing
+            legacy button styles, remove this as well */
+        }
         <button data-l10n-id='inlineButton' className='browserButton whiteButton inlineButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          &lt;button data-l10n-id='done' className='browserButton whiteButton inlineButton'{'\n'}
-          onClick={'{this.onRemoveBookmark}'} />
-        </Code></Pre>
-
-        <button data-l10n-id='wideButton' className='browserButton whiteButton wideButton' onClick={this.onRemoveBookmark} />
-        <Pre><Code>
-          &lt;button data-l10n-id='cancel' className='browserButton whiteButton wideButton'{'\n'}
+          &lt;button data-l10n-id='inlineButton' className='browserButton whiteButton inlineButton'{'\n'}
           onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
+        {/* TODO: This button size doesn't match its name */}
         <button data-l10n-id='smallButton' className='browserButton whiteButton smallButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
           &lt;button data-l10n-id='done' className='browserButton whiteButton smallButton'{'\n'}
           onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
-        <button data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} />
+        <BrowserButton primaryColor l10nId='primaryColor' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          &lt;button data-l10n-id='cancel' className='browserButton primaryButton'{'\n'}
-          onClick={'{this.onRemoveBookmark}'} />
+          &lt;BrowserButton l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
         <button data-l10n-id='actionButton' className='browserButton actionButton' onClick={this.onRemoveBookmark} />
@@ -281,16 +278,25 @@ class AboutStyle extends ImmutableComponent {
           onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
-        <button data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} /><button data-l10n-id='whiteButton' className='browserButton whiteButton' onClick={this.onRemoveBookmark} /><button data-l10n-id='wideButton' className='browserButton whiteButton wideButton' onClick={this.onRemoveBookmark} /><button data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} />
+        <BrowserButton primaryColor groupedItem l10nId='primaryButton' onClick={this.onRemoveBookmark} />
+        <BrowserButton secondaryColor groupedItem l10nId='whiteButton' onClick={this.onRemoveBookmark} />
+        <BrowserButton secondaryColor groupedItem l10nId='wideButton' onClick={this.onRemoveBookmark} />
+        <BrowserButton primaryColor groupedItem l10nId='primaryButton' onClick={this.onRemoveBookmark} />
+        <Pre><Code>
+          &lt;BrowserButton primaryColor groupedItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
+          &lt;BrowserButton secondaryColor groupedItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
+          &lt;BrowserButton secondaryColor groupedItem wideItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
+          &lt;BrowserButton primaryColor groupedItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
+        </Code></Pre>
+
+        <BrowserButton extensionItem l10nId='extensionItem' onClick={this.onRemoveBookmark} />
+        <Pre><Code>
+          &lt;BrowserButton extensionItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
+        </Code></Pre>
+
+        <BrowserButton notificationItem l10nId='notificationItem' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          &lt;button data-l10n-id='cancel' className='browserButton primaryButton'{'\n'}
-          onClick={'{this.onRemoveBookmark}'} />{'\n'}
-          &lt;button data-l10n-id='cancel' className='browserButton whiteButton'{'\n'}
-          onClick={'{this.onRemoveBookmark}'} />{'\n'}
-          &lt;button data-l10n-id='cancel' className='browserButton whiteButton wideButton'{'\n'}
-          onClick={'{this.onRemoveBookmark}'} />{'\n'}
-          &lt;button data-l10n-id='cancel' className='browserButton primaryButton'{'\n'}
-          onClick={'{this.onRemoveBookmark}'} />{'\n'}
+          &lt;BrowserButton notificationItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
         <GoTop />
@@ -331,8 +337,8 @@ class AboutStyle extends ImmutableComponent {
                 labore et dolore magna aliqua.
               </CommonFormSection>
               <CommonFormButtonWrapper>
-                <button data-l10n-id='Cancel' className='browserButton whiteButton' />
-                <button data-l10n-id='Done' className='browserButton primaryButton' />
+                <BrowserButton secondaryColor l10nId='Cancel' />
+                <BrowserButton primaryColor l10nId='Done' />
               </CommonFormButtonWrapper>
               <CommonFormBottomWrapper>
                 <CommonFormClickable>CommonFormClickable</CommonFormClickable>
@@ -522,8 +528,8 @@ class AboutStyle extends ImmutableComponent {
           }}>
             <CommonForm>
               <CommonFormButtonWrapper>
-                <button data-l10n-id='Cancel' className='browserButton whiteButton' />
-                <button data-l10n-id='Done' className='browserButton primaryButton' />
+                <BrowserButton secondaryColor l10nId='Cancel' />
+                <BrowserButton primaryColor l10nId='Done' />
               </CommonFormButtonWrapper>
             </CommonForm>
           </div>
diff --git a/js/components/button.js b/js/components/button.js
index 20468bcfec..45c148e587 100644
--- a/js/components/button.js
+++ b/js/components/button.js
@@ -6,6 +6,15 @@ const React = require('react')
 const ImmutableComponent = require('../../app/renderer/components/immutableComponent')
 const cx = require('../lib/classSet')
 
+/**
+ * ************************************************************
+ * THIS FILE WILL BE DEPRECATED IN FAVOR OF
+ * /app/renderer/components/common/browserButton
+ * PLEASE USE THE FORMER FOR NEWLY INTRODUCED CODE
+ * ************************************************************
+ * THIS FILE WILL BE REMOVED ONCE ALL BUTTONS WERE REFACTORED
+ * ************************************************************
+ */
 class Button extends ImmutableComponent {
   render () {
     if (this.props.iconClass) {
diff --git a/js/components/notificationBar.js b/js/components/notificationBar.js
index f6afb12a67..2fd5e1083f 100644
--- a/js/components/notificationBar.js
+++ b/js/components/notificationBar.js
@@ -11,7 +11,7 @@ const appActions = require('../actions/appActions')
 const getOrigin = require('../state/siteUtil').getOrigin
 
 const cx = require('../lib/classSet')
-const Button = require('./button')
+const BrowserButton = require('../../app/renderer/components/common/browserButton')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
 const commonStyles = require('../../app/renderer/components/styles/commonStyles')
@@ -76,11 +76,8 @@ class NotificationItem extends ImmutableComponent {
           }
           {
             this.props.detail.get('buttons').map((button) =>
-              <Button className={cx({
-                [css(commonStyles.notificationItem__button)]: true,
-                [button.get('className')]: button.get('className'),
-                whiteButton: !button.get('className')
-              })}
+              <BrowserButton notificationItem secondaryColor
+                iconClass={button.get('className')}
                 testId='notificationButton'
                 label={button.get('text')}
                 onClick={this.clickHandler.bind(this, i++)}
diff --git a/js/components/updateBar.js b/js/components/updateBar.js
index aef9fb7e49..57ac9cfedd 100644
--- a/js/components/updateBar.js
+++ b/js/components/updateBar.js
@@ -5,7 +5,7 @@
 const React = require('react')
 const ImmutableComponent = require('../../app/renderer/components/immutableComponent')
 
-const Button = require('./button')
+const BrowserButton = require('../../app/renderer/components/common/browserButton')
 const appActions = require('../actions/appActions')
 const windowActions = require('../actions/windowActions')
 const UpdateStatus = require('../constants/updateStatus')
@@ -62,10 +62,7 @@ class UpdateHello extends ImmutableComponent {
 
 class UpdateHide extends ImmutableComponent {
   render () {
-    return <Button className={cx({
-      [css(commonStyles.notificationItem__button)]: true,
-      whiteButton: true
-    })}
+    return <BrowserButton notificationItem secondaryColor
       testId='updateHide'
       l10nId='updateHide'
       onClick={appActions.setUpdateStatus.bind(null, this.props.reset ? UpdateStatus.UPDATE_NONE : undefined, false, undefined)} />
@@ -77,10 +74,7 @@ class UpdateLog extends ImmutableComponent {
     remote.shell.openItem(path.join(remote.app.getPath('userData'), 'updateLog.log'))
   }
   render () {
-    return <Button className={cx({
-      [css(commonStyles.notificationItem__button)]: true,
-      whiteButton: true
-    })}
+    return <BrowserButton notificationItem secondaryColor
       testId='updateViewLogButton'
       l10nId='updateViewLog'
       onClick={this.onViewLog.bind(this)} />
@@ -98,26 +92,17 @@ class UpdateAvailable extends ImmutableComponent {
       <span className={css(styles.flexAlignCenter)} data-test-id='notificationOptions'>
         {
           this.props.metadata && this.props.metadata.get('notes')
-          ? <Button className={cx({
-            [css(commonStyles.notificationItem__button)]: true,
-            whiteButton: true
-          })}
+          ? <BrowserButton notificationItem secondaryColor
             testId='updateDetails'
             l10nId='updateDetails'
             onClick={windowActions.setReleaseNotesVisible.bind(null, true)} />
           : null
         }
-        <Button className={cx({
-          [css(commonStyles.notificationItem__button)]: true,
-          whiteButton: true
-        })}
+        <BrowserButton notificationItem secondaryColor
           testId='updateLater'
           l10nId='updateLater'
           onClick={appActions.setUpdateStatus.bind(null, UpdateStatus.UPDATE_AVAILABLE_DEFERRED, false, undefined)} />
-        <Button className={cx({
-          [css(commonStyles.notificationItem__button)]: true,
-          primaryButton: true
-        })}
+        <BrowserButton notificationItem primaryColor
           testId='updateNow'
           l10nId='updateNow'
           onClick={appActions.setUpdateStatus.bind(null, UpdateStatus.UPDATE_APPLYING_RESTART, false, undefined)} />
diff --git a/less/button.less b/less/button.less
index b167aa2ac2..fbba867a76 100644
--- a/less/button.less
+++ b/less/button.less
@@ -4,7 +4,12 @@
 
 @import "variables.less";
 
-button[class*="Button"] {
+// Remove this class from buttons as soon as
+// they have been refactored.
+// Only use it for default HTML <button> elements
+// Otherwise please keep with BrowserButton and
+// this class is unecessary.
+.normalizeButton {
   background: none;
   outline: none;
   border: none;
@@ -49,6 +54,14 @@ span.buttonSeparator {
   user-select: none;
   user-select: none;
 
+  // Inhehit from global [*=Button] selector
+  background: none;
+  outline: none;
+  border: none;
+  margin: 0;
+  white-space: nowrap;
+
+
   & + .browserButton {
     margin-left: 5px;
   }
diff --git a/test/about/extensionsTest.js b/test/about/extensionsTest.js
index dd7fa438cd..4a9e59f371 100644
--- a/test/about/extensionsTest.js
+++ b/test/about/extensionsTest.js
@@ -71,7 +71,7 @@ describe('about:extensions', function () {
       yield this.app.client
         .windowByUrl(Brave.browserWindowUrl)
         .changeSetting(settingsConst.ACTIVE_PASSWORD_MANAGER, passwordManagers.ONE_PASSWORD)
-        .waitForVisible(`.extensionBrowserAction[data-button-value="${extensionIds[passwordManagers.ONE_PASSWORD]}"]`)
+        .waitForVisible(`[data-test-id="extensionBrowserAction"][data-button-value="${extensionIds[passwordManagers.ONE_PASSWORD]}"]`)
         .tabByIndex(0)
         .waitForVisible(`[data-extension-id="${extensionIds[passwordManagers.ONE_PASSWORD]}"]`, extensionDownloadWaitTime)
     })
@@ -85,7 +85,7 @@ describe('about:extensions', function () {
       yield this.app.client
         .windowByUrl(Brave.browserWindowUrl)
         .changeSetting(settingsConst.ACTIVE_PASSWORD_MANAGER, passwordManagers.DASHLANE)
-        .waitForVisible(`.extensionBrowserAction[data-button-value="${extensionIds[passwordManagers.DASHLANE]}"]`)
+        .waitForVisible(`[data-test-id="extensionBrowserAction"][data-button-value="${extensionIds[passwordManagers.DASHLANE]}"]`)
         .tabByIndex(0)
         .waitForVisible(`[data-extension-id="${extensionIds[passwordManagers.DASHLANE]}"]`, extensionDownloadWaitTime)
     })
@@ -99,7 +99,7 @@ describe('about:extensions', function () {
       yield this.app.client
         .windowByUrl(Brave.browserWindowUrl)
         .changeSetting(settingsConst.ACTIVE_PASSWORD_MANAGER, passwordManagers.LAST_PASS)
-        .waitForVisible(`.extensionBrowserAction[data-button-value="${extensionIds[passwordManagers.LAST_PASS]}"]`)
+        .waitForVisible(`[data-test-id="extensionBrowserAction"][data-button-value="${extensionIds[passwordManagers.LAST_PASS]}"]`)
         .tabByIndex(0)
         .waitForVisible(`[data-extension-id="${extensionIds[passwordManagers.LAST_PASS]}"]`, extensionDownloadWaitTime)
     })
@@ -113,7 +113,7 @@ describe('about:extensions', function () {
       yield this.app.client
         .windowByUrl(Brave.browserWindowUrl)
         .changeSetting(settingsConst.ACTIVE_PASSWORD_MANAGER, passwordManagers.ENPASS)
-        .waitForVisible(`.extensionBrowserAction[data-button-value="${extensionIds[passwordManagers.ENPASS]}"]`)
+        .waitForVisible(`[data-test-id="extensionBrowserAction"][data-button-value="${extensionIds[passwordManagers.ENPASS]}"]`)
         .tabByIndex(0)
         .waitForVisible(`[data-extension-id="${extensionIds[passwordManagers.ENPASS]}"]`, extensionDownloadWaitTime)
     })
@@ -127,7 +127,7 @@ describe('about:extensions', function () {
       yield this.app.client
         .windowByUrl(Brave.browserWindowUrl)
         .changeSetting(settingsConst.ACTIVE_PASSWORD_MANAGER, passwordManagers.BITWARDEN)
-        .waitForVisible(`.extensionBrowserAction[data-button-value="${extensionIds[passwordManagers.BITWARDEN]}"]`)
+        .waitForVisible(`[data-test-id="extensionBrowserAction"][data-button-value="${extensionIds[passwordManagers.BITWARDEN]}"]`)
         .tabByIndex(0)
         .waitForVisible(`[data-extension-id="${extensionIds[passwordManagers.BITWARDEN]}"]`, extensionDownloadWaitTime)
     })
diff --git a/test/unit/app/renderer/components/messageBoxTest.js b/test/unit/app/renderer/components/messageBoxTest.js
index dd4dc8db7d..df9f7a4261 100644
--- a/test/unit/app/renderer/components/messageBoxTest.js
+++ b/test/unit/app/renderer/components/messageBoxTest.js
@@ -84,13 +84,13 @@ describe('MessageBox component unit tests', function () {
       assert.equal(wrapper.find('button[data-l10n-id="OK"].primaryButton').length, 1)
     })
 
-    it('renders the button index 1 as whiteButton', function () {
+    it('renders the button index 1 as secondaryButton', function () {
       const wrapper = mount(
         <MessageBox
           tabId={tabId}
         />
       )
-      assert.equal(wrapper.find('button[data-l10n-id="Cancel"].whiteButton').length, 1)
+      assert.equal(wrapper.find('button[data-l10n-id="Cancel"][data-test-id="secondaryColor"]').length, 1)
     })
 
     it('hides the suppress checkbox if showSuppress is false', function () {
@@ -133,7 +133,7 @@ describe('MessageBox component unit tests', function () {
         suppress: detail1.suppress,
         result: true
       }
-      wrapper.find('button[data-l10n-id="OK"].primaryButton').simulate('click')
+      wrapper.find('button[data-l10n-id="OK"][data-test-id="primaryColor"]').simulate('click')
       assert.equal(spy.withArgs(tabId, response).calledOnce, true)
       appActions.tabMessageBoxDismissed.restore()
     })
@@ -149,7 +149,7 @@ describe('MessageBox component unit tests', function () {
         suppress: detail1.suppress,
         result: false
       }
-      wrapper.find('button[data-l10n-id="Cancel"].whiteButton').simulate('click')
+      wrapper.find('button[data-l10n-id="Cancel"][data-test-id="secondaryColor"]').simulate('click')
       assert.equal(spy.withArgs(tabId, response).calledOnce, true)
       appActions.tabMessageBoxDismissed.restore()
     })