make button styles consistent

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

@@ -9,9 +9,16 @@ h3=This is an h3
 h4=This is an h4
 forms=Forms
 inputs=Inputs
+switches=Switches
+onByDefault=On by default
+offByDefault=Off by default
+
 buttons=Buttons
+browserButton=Browser Button
 whiteButton=White Button
+inlineButton=Inline Button
+wideButton=Wide Button
+smallButton=Small Button
 primaryButton=Primary Button
-switches=Switches
-onByDefault=On by default
-offByDefault=Off by default
+actionButton=Action Button
+subtleButton=Subtle Button

app/renderer/components/checkDefaultBrowserDialog.js

@@ -42,7 +42,7 @@ class CheckDefaultBrowserDialog extends ImmutableComponent {
         <SwitchControl className='checkDefaultOnStartup' rightl10nId='checkDefaultOnStartup'
           checkedOn={this.props.checkDefaultOnStartup} onClick={this.onCheckDefaultOnStartup} />
         <div className='checkDefaultBrowserButtons'>
-          <Button l10nId='notNow' className='secondaryAltButton' onClick={this.onNotNow} />
+          <Button l10nId='notNow' className='whiteButton' onClick={this.onNotNow} />
           <Button l10nId='useBrave' className='primaryButton' onClick={this.onUseBrave} />
         </div>
       </div>

app/renderer/components/importBrowserDataPanel.js

@@ -135,7 +135,7 @@ class ImportBrowserDataPanel extends ImmutableComponent {
           <div data-l10n-id='importDataCloseBrowserWarning' />
         </div>
         <div className='formSection importBrowserDataButtons'>
-          <Button l10nId='cancel' className='secondaryAltButton' onClick={this.props.onHide} />
+          <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
           <Button l10nId='import' className='primaryButton' onClick={this.onImport} />
         </div>
         <div className='formSection importBrowserDataWarning'>

app/renderer/components/widevinePanel.js

@@ -45,7 +45,7 @@ class ImportBrowserDataPanel extends ImmutableComponent {
           <WidevineInfo newFrameAction={windowActions.newFrame} />
         </div>
         <div className='formSection commonFormButtons'>
-          <Button l10nId='cancel' className='secondaryAltButton' onClick={this.props.onHide} />
+          <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
           <Button l10nId='installAndAllow' className='primaryButton' onClick={this.onInstallAndAllow} />
         </div>
         <div className='formSection commonFormBottom'>

js/about/preferences.js

@@ -370,9 +370,11 @@ class BitcoinDashboard extends ImmutableComponent {
         <div className='settingsListTitle' data-l10n-id='outsideUSAPayment' />
       </div>
       <div className='settingsPanelDivider'>
-        <a target='_blank' className='browserButton primaryButton' href='https://www.buybitcoinworldwide.com/'>
-          buybitcoinworldwide.com
-        </a>
+        <button className='browserButton primaryButton'>
+          <a target='_blank' href='https://www.buybitcoinworldwide.com/'>
+            buybitcoinworldwide.com
+          </a>
+        </button>
       </div>
     </div>
   }
@@ -415,9 +417,11 @@ class BitcoinDashboard extends ImmutableComponent {
           <div className='settingsListTitle' data-l10n-id='outsideUSAPayment' />
         </div>
         <div className='settingsPanelDivider'>
-          <a target='_blank' className='browserButton primaryButton' href={url}>
-            {name}
-          </a>
+          <button className='browserButton primaryButton'>
+            <a target='_blank' href={url}>
+              {name}
+            </a>
+          </button>
         </div>
       </div>
     }
@@ -923,7 +927,7 @@ class PaymentsTab extends ImmutableComponent {
     const onButtonClick = this.props.ledgerData.get('created')
       ? this.props.showOverlay.bind(this, 'addFunds')
       : (this.props.ledgerData.get('creating') ? () => {} : this.createWallet)
-    return <Button l10nId={buttonText} className='primaryButton addFunds' onClick={onButtonClick.bind(this)} disabled={this.props.ledgerData.get('creating')} />
+    return <Button l10nId={buttonText} className='primaryButton wideButton' onClick={onButtonClick.bind(this)} disabled={this.props.ledgerData.get('creating')} />
   }
 
   get paymentHistoryButton () {
@@ -1512,12 +1516,10 @@ class ShieldsTab extends ImmutableComponent {
         <SettingCheckbox checked={this.props.braveryDefaults.get('safeBrowsing')} dataL10nId='safeBrowsing' onChange={this.onToggleSafeBrowsing} />
         <SettingCheckbox checked={this.props.braveryDefaults.get('noScript')} dataL10nId='noScriptPref' onChange={this.onToggleNoScript} />
         <SettingCheckbox dataL10nId='blockCanvasFingerprinting' prefKey={settings.BLOCK_CANVAS_FINGERPRINTING} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <SettingItem>
-          <Button l10nId='manageAdblockSettings' className='primaryButton manageAdblockSettings'
-            onClick={aboutActions.newFrame.bind(null, {
-              location: 'about:adblock'
-            }, true)} />
-        </SettingItem>
+        <Button l10nId='manageAdblockSettings' className='primaryButton manageAdblockSettings'
+          onClick={aboutActions.newFrame.bind(null, {
+            location: 'about:adblock'
+          }, true)} />
       </SettingsList>
       <SitePermissionsPage siteSettings={this.props.siteSettings}
         names={braveryPermissionNames}
@@ -1659,12 +1661,10 @@ class AdvancedTab extends ImmutableComponent {
         <SettingCheckbox dataL10nId='usePDFJS' prefKey={settings.PDFJS_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         <SettingCheckbox dataL10nId='useTorrentViewer' prefKey={settings.TORRENT_VIEWER_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         <SettingCheckbox dataL10nId='enablePocket' prefKey={settings.POCKET_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <SettingItem>
-          <Button l10nId='viewInstalledExtensions' className='primaryButton viewExtensionsInfo'
-            onClick={aboutActions.newFrame.bind(null, {
-              location: 'about:extensions'
-            }, true)} />
-        </SettingItem>
+        <Button l10nId='viewInstalledExtensions' className='primaryButton viewExtensionsInfo'
+          onClick={aboutActions.newFrame.bind(null, {
+            location: 'about:extensions'
+          }, true)} />
         <div data-l10n-id='moreExtensionsComingSoon' className='moreExtensionsComingSoon' />
       </SettingsList>
     </div>

js/about/styles.js

@@ -44,17 +44,67 @@ class AboutStyle extends ImmutableComponent {
           </select>
         </code></pre>
       </div>
+
       <h2 data-l10n-id='buttons' />
-      <span data-l10n-id='whiteButton' className='browserButton whiteButton inlineButton' onClick={this.onRemoveBookmark} />
+      <button data-l10n-id='browserButton' className='browserButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;button data-l10n-id='done' className='browserButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />
+      </code></pre>
+
+      <button data-l10n-id='whiteButton' className='browserButton whiteButton' onClick={this.onRemoveBookmark} />
       <pre><code>
-        &lt;span data-l10n-id='cancel' className='browserButton whiteButton inlineButton'{'\n'}
+        &lt;button data-l10n-id='cancel' className='browserButton whiteButton'{'\n'}
         onClick={'{this.onRemoveBookmark}'} />
       </code></pre>
-      <span data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} />
+
+      <button data-l10n-id='inlineButton' className='browserButton whiteButton inlineButton' onClick={this.onRemoveBookmark} />
       <pre><code>
-        &lt;span data-l10n-id='done' className='browserButton primaryButton'{'\n'}
+        &lt;button data-l10n-id='done' className='browserButton whiteButton inlineButton'{'\n'}
         onClick={'{this.onRemoveBookmark}'} />
       </code></pre>
+
+      <button data-l10n-id='wideButton' className='browserButton whiteButton wideButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;button data-l10n-id='cancel' className='browserButton whiteButton wideButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />
+      </code></pre>
+
+      <button data-l10n-id='smallButton' className='browserButton whiteButton smallButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;button data-l10n-id='done' className='browserButton whiteButton smallButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />
+      </code></pre>
+
+      <button data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;button data-l10n-id='cancel' className='browserButton primaryButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />
+      </code></pre>
+
+      <button data-l10n-id='actionButton' className='browserButton actionButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;button data-l10n-id='done' className='browserButton actionButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />
+      </code></pre>
+
+      <button data-l10n-id='subtleButton' className='browserButton subtleButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;button data-l10n-id='cancel' className='browserButton subtleButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />
+      </code></pre>
+
+      <button data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} /><button data-l10n-id='whiteButton' className='browserButton whiteButton' onClick={this.onRemoveBookmark} /><button data-l10n-id='wideButton' className='browserButton whiteButton wideButton' onClick={this.onRemoveBookmark} /><button data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} />
+      <pre><code>
+        &lt;button data-l10n-id='cancel' className='browserButton primaryButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />{'\n'}
+        &lt;button data-l10n-id='cancel' className='browserButton whiteButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />{'\n'}
+        &lt;button data-l10n-id='cancel' className='browserButton whiteButton wideButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />{'\n'}
+        &lt;button data-l10n-id='cancel' className='browserButton primaryButton'{'\n'}
+        onClick={'{this.onRemoveBookmark}'} />{'\n'}
+      </code></pre>
     </div>
   }
 }

js/components/autofillAddressPanel.js

@@ -150,7 +150,7 @@ class AutofillAddressPanel extends ImmutableComponent {
               value={this.props.currentDetail.get('email')} />
           </div>
           <div className='formRow manageAutofillDataButtons'>
-            <Button l10nId='cancel' className='secondaryAltButton' onClick={this.props.onHide} />
+            <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
             <Button l10nId='save' className='primaryButton saveAddressButton' onClick={this.onSave}
               disabled={this.disableSaveButton} />
           </div>

js/components/autofillCreditCardPanel.js

@@ -103,7 +103,7 @@ class AutofillCreditCardPanel extends ImmutableComponent {
             </select>
           </div>
           <div className='formRow manageAutofillDataButtons'>
-            <Button l10nId='cancel' className='secondaryAltButton' onClick={this.props.onHide} />
+            <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
             <Button l10nId='save' className='primaryButton saveCreditCardButton' onClick={this.onSave}
               disabled={this.disableSaveButton} />
           </div>

js/components/button.js

@@ -9,7 +9,7 @@ const cx = require('../lib/classSet')
 class Button extends ImmutableComponent {
   render () {
     if (this.props.iconClass) {
-      return <span disabled={this.props.disabled}
+      return <button disabled={this.props.disabled}
         data-l10n-id={this.props.l10nId}
         style={this.props.inlineStyles}
         data-button-value={this.props.dataButtonValue}
@@ -21,7 +21,7 @@ class Button extends ImmutableComponent {
         })}
         onClick={this.props.onClick} />
     }
-    return <span disabled={this.props.disabled}
+    return <button disabled={this.props.disabled}
       data-l10n-id={this.props.l10nId}
       data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
       style={this.props.inlineStyles}
@@ -30,7 +30,7 @@ class Button extends ImmutableComponent {
         [this.props.className]: !!this.props.className
       })} onClick={this.props.onClick}>
       {this.props.label}
-    </span>
+    </button>
   }
 }
 

js/components/clearBrowsingDataPanel.js

@@ -52,7 +52,7 @@ class ClearBrowsingDataPanel extends ImmutableComponent {
           <SwitchControl className='siteSettingsSwitch' rightl10nId='savedSiteSettings' checkedOn={this.props.clearBrowsingDataDetail.get('savedSiteSettings')} onClick={this.onToggleSavedSiteSettings} />
         </div>
         <div className='formSection clearBrowsingDataButtons'>
-          <Button l10nId='cancel' className='secondaryAltButton' onClick={this.props.onHide} />
+          <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
           <Button l10nId='clear' className='primaryButton clearDataButton' onClick={this.onClear} />
         </div>
         <div className='formSection clearBrowsingDataWarning'>

js/components/longPressButton.js

@@ -68,7 +68,7 @@ class LongPressButton extends ImmutableComponent {
   }
 
   render () {
-    return <span data-l10n-id={this.props.l10nId}
+    return <button data-l10n-id={this.props.l10nId}
       className={this.props.className}
       disabled={this.props.disabled}
       onClick={this.onClick}

js/components/navigationBar.js

@@ -131,20 +131,20 @@ class NavigationBar extends ImmutableComponent {
         ? null
         : this.loading
           ? <span className='navigationButtonContainer'>
-            <span data-l10n-id='stopButton'
+            <button data-l10n-id='stopButton'
               className='navigationButton stopButton'
               onClick={this.onStop} />
           </span>
           : <span className='navigationButtonContainer'>
-            <span data-l10n-id='reloadButton'
+            <button data-l10n-id='reloadButton'
               className='navigationButton reloadButton'
               onClick={this.onReload} />
           </span>
       }
       {
         !this.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
         ? <span className='navigationButtonContainer'>
-          <span data-l10n-id='homeButton'
+          <button data-l10n-id='homeButton'
             className='navigationButton homeButton'
             onClick={this.onHome} />
         </span>
@@ -154,7 +154,7 @@ class NavigationBar extends ImmutableComponent {
         {
           !this.titleMode
           ? <span className='bookmarkButtonContainer'>
-            <span data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
+            <button data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
               className={cx({
                 navigationButton: true,
                 bookmarkButton: true,
@@ -192,12 +192,14 @@ class NavigationBar extends ImmutableComponent {
           {
             !this.showNoScriptInfo
             ? null
-            : <Button iconClass='fa-ban'
-              l10nId='noScriptButton'
-              className={cx({
-                'noScript': true
-              })}
-              onClick={this.onNoScript} />
+            : <span className='noScriptButtonContainer'>
+              <Button iconClass='fa-ban'
+                l10nId='noScriptButton'
+                className={cx({
+                  'noScript': true
+                })}
+                onClick={this.onNoScript} />
+            </span>
           }
         </div>
       }

js/components/siteInfo.js

@@ -84,7 +84,7 @@ class SiteInfo extends ImmutableComponent {
           <ul>
             <li><span className='runInsecureContentWarning' data-l10n-id='runInsecureContentWarning' /></li>
             <li>
-              <Button l10nId='allowRunInsecureContent' className='secondaryAltButton allowRunInsecureContentButton' onClick={this.onAllowRunInsecureContent} />
+              <Button l10nId='allowRunInsecureContent' className='whiteButton allowRunInsecureContentButton' onClick={this.onAllowRunInsecureContent} />
               <Button l10nId='dismissAllowRunInsecureContent' className='primaryButton dismissAllowRunInsecureContentButton' onClick={this.props.onHide} />
             </li>
           </ul>
@@ -96,7 +96,7 @@ class SiteInfo extends ImmutableComponent {
             <li><span className='denyRunInsecureContentWarning' data-l10n-id='denyRunInsecureContentWarning' /></li>
             <li>
               <Button l10nId='denyRunInsecureContent' className='primaryButton denyRunInsecureContentButton' onClick={this.onDenyRunInsecureContent} />
-              <Button l10nId='dismissDenyRunInsecureContent' className='secondaryAltButton dismissDenyRunInsecureContentButton' onClick={this.props.onHide} />
+              <Button l10nId='dismissDenyRunInsecureContent' className='whiteButton dismissDenyRunInsecureContentButton' onClick={this.props.onHide} />
             </li>
           </ul>
         </li>