Polish clipboardButton

- Apply the modified BEM style to dedupe properties
- Add copyToClipboard.title to preferences.properties
- Replace span with browserButton
- Set copyToClipboard.title by default (because it is what we usually want to set)

Closes #11373

Auditors:

Test Plan:
1. Open about:brave
2. Click the clipboard button
3. Make sure the data is copied
4. Open about:preferences#payments
5. Click add funds
6. Click any currency icon
7. Make sure 'Copy to clipboard' is displayed on hover

app/extensions/brave/locales/en-US/preferences.properties

@@ -88,7 +88,7 @@ contributionStatements=Contribution statements
 contributionTime=Contribution Time
 copied=Copied!
 copy=Copy
-copyToClipboard=Copy to clipboard
+copyToClipboard.title=Copy to clipboard
 createdWalletStatus=Your wallet is ready!
 createWallet=create wallet
 createWalletStatus=Click the Create Wallet button to get started.

app/renderer/components/common/clipboardButton.js

@@ -3,7 +3,10 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../styles/global')
+
+const BrowserButton = require('./browserButton')
 
 /**
  * Represents a 'Copy to clipboard' button
@@ -35,21 +38,24 @@ class ClipboardButton extends React.Component {
   render () {
     return <span className={css(styles.clipboardButton)}>
       <span className={css(
-        styles.doneLabel,
-        this.props.topTooltip && styles.doneLabelTop,
-        this.props.bottomTooltip && styles.doneLabelBottom,
-        this.state.visibleLabel && styles.visible
-      )} onAnimationEnd={this.onAnimationEnd} data-l10n-id='copied' />
-      <span
-        className={this.props.className}
-        data-l10n-id={this.props.dataL10nId}
-        onClick={this.onClick}>
-        {
-          this.props.textContext
-          ? this.props.textContext
-          : ''
-        }
-      </span>
+        styles.clipboardButton__label,
+        this.state.visibleLabel && styles.clipboardButton__label_visible,
+        (this.props.bottomTooltip || this.props.topTooltip) && styles.clipboardButton__label_vertical,
+        (this.props.bottomTooltip && !this.props.topTooltip) && styles.clipboardButton__label_bottom,
+
+        // Applied on add funds panel
+        (!this.props.bottomTooltip && this.props.topTooltip) && styles.clipboardButton__label_top
+      )}
+        onAnimationEnd={this.onAnimationEnd}
+        data-l10n-id='copied'
+      />
+      <BrowserButton
+        iconClass={globalStyles.appIcons.clipboard}
+        custom={styles.clipboardButton__browserButton}
+        l10nId={this.props.dataL10nId ? this.props.dataL10nId : 'copyToClipboard'}
+        testId={this.props.testId}
+        onClick={this.onClick}
+      />
     </span>
   }
 }
@@ -73,32 +79,37 @@ const styles = StyleSheet.create({
     position: 'relative',
     cursor: 'pointer'
   },
-  doneLabel: {
-    marginRight: '15px',
-    opacity: 0,
-    display: 'none'
-  },
-  doneLabelBottom: {
-    position: 'absolute',
-    top: '35px',
-    right: '30px',
-    width: '-webkit-fill-available',
-    opacity: 0,
-    display: 'none'
+
+  clipboardButton__browserButton: {
+    fontSize: '1rem'
   },
-  doneLabelTop: {
-    position: 'absolute',
-    bottom: '35px',
-    right: '30px',
+
+  clipboardButton__label: {
     width: '-webkit-fill-available',
-    opacity: 0,
-    display: 'none'
+    marginRight: '1ch',
+    display: 'none',
+    willChange: 'opacity',
+    opacity: 0
   },
-  visible: {
+
+  clipboardButton__label_visible: {
     display: 'inline',
     animationName: animation,
     animationDuration: '2s',
     animationTimingFunction: 'cubic-bezier(0.23, 1, 0.32, 1)'
+  },
+
+  clipboardButton__label_vertical: {
+    position: 'absolute',
+    right: '30px'
+  },
+
+  clipboardButton__label_bottom: {
+    top: '35px'
+  },
+
+  clipboardButton__label_top: {
+    bottom: '35px'
   }
 })
 

app/renderer/components/preferences/payment/addFundsDialog/steps/addFundsWizardAddress.js

@@ -13,7 +13,6 @@ const ClipboardButton = require('../../../../common/clipboardButton')
 const appActions = require('../../../../../../../js/actions/appActions')
 
 // Styles
-const globalStyles = require('../../../../styles/global')
 const {addFundsDialogMinHeight} = require('../../../../styles/global').spacing
 const ethIcon = require('../../../../../../extensions/brave/img/ledger/cryptoIcons/ETH_icon.svg')
 const btcIcon = require('../../../../../../extensions/brave/img/ledger/cryptoIcons/BTC_icon.svg')
@@ -48,7 +47,6 @@ class AddFundsWizardAddress extends React.Component {
     return (
       <ClipboardButton
         topTooltip
-        className={globalStyles.appIcons.clipboard}
         copyAction={this.onCopy}
       />
     )

js/about/brave.js

@@ -71,11 +71,7 @@ class AboutBrave extends React.Component {
 
         <div className={css(styles.versionInformationWrapper)}>
           <AboutPageSectionSubTitle data-l10n-id='versionInformation' />
-          <ClipboardButton
-            dataL10nId='copyToClipboard'
-            className='fa fa-clipboard'
-            copyAction={this.onCopy}
-          />
+          <ClipboardButton copyAction={this.onCopy} />
         </div>
 
         <SortableTable