move actionButton to Aphrodite

- Close #9163
- Auditors: @luixxiul

app/renderer/components/common/browserButton.js

@@ -14,14 +14,16 @@ 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
       // TODO: These are other button styles app-wise
       // 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
   }
 })
 

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>
   }

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'
     }
   },
 

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>
   }

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>
   }

js/about/styles.js

@@ -283,9 +283,9 @@ class AboutStyle extends ImmutableComponent {
           <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>
 

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;