Add panelItem prop to browserButton

Auditors: @luixxiul
Close #9543

Author: cezaraugusto

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

@@ -21,3 +21,4 @@ actionButton=Action Button
 subtleButton=Subtle Button
 extensionItem=Extension Item
 notificationItem=Notification Item
+panelItem=Panel Item

app/renderer/components/common/browserButton.js

@@ -21,11 +21,11 @@ class BrowserButton extends ImmutableComponent {
       this.props.groupedItem && styles.browserButton_groupedItem,
       this.props.notificationItem && styles.browserButton_notificationItem,
       this.props.iconOnly && styles.browserButton_iconOnly,
+      this.props.panelItem && styles.browserButton_panelItem,
       // TODO: These are other button styles app-wise
       // that needs to be refactored and included in this file
       // .............................................
       // this.props.navItem && styles.browserButton_navItem,
-      // this.props.panelItem && styles.browserButton_panelItem,
 
       // note: this should be the last item so it can override other styles
       this.props.disabled && styles.browserButton_disabled
@@ -236,6 +236,10 @@ const styles = StyleSheet.create({
     background: globalStyles.button.action.backgroundColor
   },
 
+  browserButton_panelItem: {
+    minWidth: '180px'
+  },
+
   browserButton_iconOnly: {
     display: 'flex',
     justifyContent: 'center',

app/renderer/components/preferences/payment/bitcoinDashboard.js

@@ -97,6 +97,7 @@ class BitcoinDashboard extends ImmutableComponent {
       l10nId: 'add',
       testId: 'bitcoinPurchaseButton',
       primaryColor: true,
+      panelItem: true,
       disabled: disabled
     }
     const hrefAttrs = {
@@ -195,6 +196,7 @@ class BitcoinDashboard extends ImmutableComponent {
           <a target='_blank' href={url}>
             <BrowserButton
               primaryColor
+              panelItem
               testId='exchangePanelButton'
               l10nId={name}
             />
@@ -219,6 +221,7 @@ class BitcoinDashboard extends ImmutableComponent {
         <a target='_blank' href='https://www.buybitcoinworldwide.com/'>
           <BrowserButton
             primaryColor
+            panelItem
             testId='worldWidePanelButton'
             label='buybitcoinworldwide.com'
           />
@@ -254,6 +257,7 @@ class BitcoinDashboard extends ImmutableComponent {
                   <a href={ledgerData.get('paymentURL')} target='_blank'>
                     <BrowserButton
                       primaryColor
+                      panelItem
                       l10nId='bitcoinVisitAccount'
                       testId='bitcoinVisitAccountButton'
                     />
@@ -265,6 +269,7 @@ class BitcoinDashboard extends ImmutableComponent {
             <div className={css(styles.panel__divider_right__bitcoinPanel__walletAddressText)}>{ledgerData.get('address')}</div>
             <BrowserButton
               primaryColor
+              panelItem
               l10nId='copyToClipboard'
               testId='copyToClipboardButton'
               onClick={this.copyToClipboard.bind(this, ledgerData.get('address'))}
@@ -295,6 +300,7 @@ class BitcoinDashboard extends ImmutableComponent {
       <div className={css(styles.panel__divider, styles.panel__divider_right)}>
         <BrowserButton
           primaryColor
+          panelItem
           l10nId='displayQRCode'
           testId='displayQRCode'
           onClick={this.props.showQRcode.bind(this)}

js/about/styles.js

@@ -312,6 +312,13 @@ class AboutStyle extends ImmutableComponent {
           <BrowserButton iconOnly icon={'{'}globalStyles.appIcons.private{'}'} size='60px' color='red' />
         </Code></Pre>
 
+        <BrowserButton groupedItem primaryColor panelItem l10nId='panelItem' onClick={this.copyToClipboard} />
+        <BrowserButton groupedItem primaryColor panelItem l10nId='panelItem' onClick={this.props.showQRcode} />
+        <Pre><Code>
+          &lt;BrowserButton groupedItem primaryColor panelItem l10nId='panelItem' onClick={'{this.copyToClipboard}'} />{'\n'}
+          &lt;BrowserButton groupedItem primaryColor panelItem l10nId='panelItem' onClick={'{this.props.showQRcode}'} />
+        </Code></Pre>
+
         <GoTop />
       </div>