From 1ea1d1613938848b158f32f44cf74656ddd8dcfa Mon Sep 17 00:00:00 2001
From: Cezar Augusto <cezaraugusto@outlook.it>
Date: Wed, 31 May 2017 01:14:56 -0300
Subject: [PATCH] move actionButton to Aphrodite - Close #9163 - Auditors:
 @luixxiul

---
 app/renderer/components/common/browserButton.js |  8 +++++++-
 app/renderer/components/main/noScriptInfo.js    |  8 +++-----
 app/renderer/components/styles/global.js        |  5 +++++
 js/about/certerror.js                           | 10 +++++-----
 js/about/errorPage.js                           |  6 +++---
 js/about/styles.js                              |  4 ++--
 less/button.less                                |  6 ------
 7 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/app/renderer/components/common/browserButton.js b/app/renderer/components/common/browserButton.js
index cd813154bac..19ba55a4e9b 100644
--- a/app/renderer/components/common/browserButton.js
+++ b/app/renderer/components/common/browserButton.js
@@ -14,6 +14,9 @@ class BrowserButton extends ImmutableComponent {
       this.props.primaryColor && [styles.browserButton_default, styles.browserButton_primaryColor],
       this.props.secondaryColor && [styles.browserButton_default, styles.browserButton_secondaryColor],
       this.props.subtleItem && [styles.browserButton_default, styles.browserButton_subtleItem],
+      // actionItem is just subtleItem with a blue background
+      this.props.actionItem &&
+        [styles.browserButton_default, styles.browserButton_subtleItem, styles.browserButton_actionItem],
       this.props.extensionItem && styles.browserButton_extensionItem,
       this.props.groupedItem && styles.browserButton_groupedItem,
       this.props.notificationItem && styles.browserButton_notificationItem
@@ -21,7 +24,6 @@ class BrowserButton extends ImmutableComponent {
       // that needs to be refactored and included in this file
       // .............................................
       // this.props.smallItem && styles.browserButton_smallItem,
-      // this.props.actionItem && styles.browserButton_actionItem,
       // this.props.navItem && styles.browserButton_navItem,
       // this.props.panelItem && styles.browserButton_panelItem,
     ]
@@ -178,6 +180,10 @@ const styles = StyleSheet.create({
     ':active': {
       bottom: 0
     }
+  },
+
+  browserButton_actionItem: {
+    background: globalStyles.button.action.backgroundColor
   }
 })
 
diff --git a/app/renderer/components/main/noScriptInfo.js b/app/renderer/components/main/noScriptInfo.js
index 217e1664d44..755e9bf67d1 100644
--- a/app/renderer/components/main/noScriptInfo.js
+++ b/app/renderer/components/main/noScriptInfo.js
@@ -11,7 +11,7 @@ const urlParse = require('../../../common/urlParse')
 // Components
 const ImmutableComponent = require('../immutableComponent')
 const Dialog = require('../common/dialog')
-const Button = require('../common/button')
+const BrowserButton = require('../common/browserButton')
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')
@@ -100,12 +100,10 @@ class NoScriptInfo extends ImmutableComponent {
 
   get buttons () {
     return <div>
-      <Button l10nId='allowScriptsOnce' className='actionButton'
-        onClick={this.onAllow.bind(this, 0)} />
+      <BrowserButton actionItem l10nId='allowScriptsOnce' onClick={this.onAllow.bind(this, 0)} />
       {this.isPrivate
         ? null
-        : <span><Button l10nId='allowScriptsTemp' className='subtleButton'
-          onClick={this.onAllow.bind(this, 1)} /></span>
+        : <BrowserButton subtleItem l10nId='allowScriptsTemp' onClick={this.onAllow.bind(this, 1)} />
       }
     </div>
   }
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 39dfb6e13f9..a99959bd7fd 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -283,6 +283,11 @@ const globalStyles = {
     subtle: {
       // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L151
       backgroundColor: '#ccc'
+    },
+
+    action: {
+      backgroundColor: '#4099FF',
+      hoverColor: '#000'
     }
   },
 
diff --git a/js/about/certerror.js b/js/about/certerror.js
index 797a4fc7e2b..6e6461519fa 100644
--- a/js/about/certerror.js
+++ b/js/about/certerror.js
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const Button = require('../../app/renderer/components/common/button')
+const BrowserButton = require('../../app/renderer/components/common/browserButton')
 const aboutActions = require('./aboutActions')
 const messages = require('../constants/messages')
 const ipc = window.chrome.ipcRenderer
@@ -137,12 +137,12 @@ class CertErrorPage extends React.Component {
           </div>) : null}
       </div>
       <div className='buttons'>
-        <Button l10nId='certErrorSafety' className='actionButton' onClick={this.onSafety.bind(this)} />
+        <BrowserButton actionItem l10nId='certErrorSafety' onClick={this.onSafety.bind(this)} />
         {this.state.url ? (this.state.advanced
-          ? (<Button l10nId='certErrorButtonText' className='subtleButton' onClick={this.onAccept.bind(this)} />) : null) : null}
+          ? (<BrowserButton subtleItem l10nId='certErrorButtonText' onClick={this.onAccept.bind(this)} />) : null) : null}
         {this.state.url ? (this.state.advanced
-          ? (<Button l10nId='certErrorShowCertificate' className='subtleButton' onClick={this.onDetail.bind(this)} />)
-          : <Button l10nId='certErrorAdvanced' className='subtleButton' onClick={this.onAdvanced.bind(this)} />) : null}
+          ? (<BrowserButton subtleItem l10nId='certErrorShowCertificate' onClick={this.onDetail.bind(this)} />)
+          : <BrowserButton subtleItem l10nId='certErrorAdvanced' onClick={this.onAdvanced.bind(this)} />) : null}
       </div>
     </div>
   }
diff --git a/js/about/errorPage.js b/js/about/errorPage.js
index e3e252f6be5..8eab2036b79 100644
--- a/js/about/errorPage.js
+++ b/js/about/errorPage.js
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const Button = require('../../app/renderer/components/common/button')
+const BrowserButton = require('../../app/renderer/components/common/browserButton')
 
 require('../../less/button.less')
 require('../../less/window.less')
@@ -43,8 +43,8 @@ class ErrorPage extends React.Component {
         <span className='errorText' data-l10n-id={this.state.message} />
       </div>
       <div className='buttons'>
-        {this.showBackButton ? <Button l10nId='back' className='actionButton' onClick={this.reloadPrevious.bind(this)} /> : null}
-        {this.state.url ? <Button l10nId='errorReload' l10nArgs={{url: this.state.url}} className='actionButton' onClick={this.reload.bind(this)} /> : null}
+        {this.showBackButton ? <BrowserButton actionItem l10nId='back' onClick={this.reloadPrevious.bind(this)} /> : null}
+        {this.state.url ? <BrowserButton actionItem l10nId='errorReload' l10nArgs={{url: this.state.url}} onClick={this.reload.bind(this)} /> : null}
       </div>
     </div>
   }
diff --git a/js/about/styles.js b/js/about/styles.js
index ce417fdde80..e8fe3d8918d 100644
--- a/js/about/styles.js
+++ b/js/about/styles.js
@@ -283,9 +283,9 @@ class AboutStyle extends ImmutableComponent {
           &lt;BrowserButton l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
-        <button data-l10n-id='actionButton' className='browserButton actionButton' onClick={this.onRemoveBookmark} />
+        <BrowserButton actionItem l10nId='actionButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          &lt;button data-l10n-id='done' className='browserButton actionButton'{'\n'}
+          &lt;BrowserButton actionItem l10nId='done'{'\n'}
           onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
diff --git a/less/button.less b/less/button.less
index fbba867a761..3740d1697b2 100644
--- a/less/button.less
+++ b/less/button.less
@@ -85,7 +85,6 @@ span.buttonSeparator {
   }
 
   &.primaryButton,
-  &.actionButton,
   &.wideButton,
   &.subtleButton,
   &.whiteButton {
@@ -99,7 +98,6 @@ span.buttonSeparator {
   }
 
   &.primaryButton,
-  &.actionButton,
   &.subtleButton,
   &.whiteButton {
     padding-right: 16px;
@@ -121,10 +119,6 @@ span.buttonSeparator {
     }
   }
 
-  &.actionButton {
-    background-color: #4099FF;
-  }
-
   &.wideButton {
     width: auto;
     padding-right: 35px;