Add panelItem prop to browserButton

Auditors: @luixxiul Close #9543
brave · Jun 19, 2017 · 0572679 · 0572679
1 parent f214325
commit 0572679
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 1 deletion.
diff --git a/app/extensions/brave/locales/en-US/styles.properties b/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
diff --git a/app/renderer/components/common/browserButton.js b/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',

diff --git a/app/renderer/components/preferences/payment/bitcoinDashboard.js b/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)}

diff --git a/js/about/styles.js b/js/about/styles.js
@@ -312,6 +312,13 @@ class AboutStyle extends ImmutableComponent {
  &lt;BrowserButton iconOnly icon={'{'}globalStyles.appIcons.private{'}'} size='60px' color='red' />
  </Code></Pre>
 
+ <BrowserButton groupedItem secondaryColor panelItem l10nId='panelItem' onClick={this.onEnableAutoplay} />
+ <BrowserButton groupedItem primaryColor panelItem l10nId='panelItem' onClick={this.onEnableAutoplay} />
+ <Pre><Code>
+ &lt;BrowserButton groupedItem secondaryColor panelItem l10nId='panelItem' onClick={'{this.onEnableAutoplay}'} />{'\n'}
+ &lt;BrowserButton groupedItem primaryColor panelItem l10nId='panelItem' onClick={'{this.onEnableAutoplay}'} />
+ </Code></Pre>
+
  <GoTop />
  </div>