From 43e89233c35520726d3003f5c02f9ef51b769018 Mon Sep 17 00:00:00 2001
From: Jon Kuperman <jon.kuperman@gmail.com>
Date: Tue, 29 Nov 2016 12:47:13 -0800
Subject: [PATCH 1/3] make button styles consistent

---
 .../brave/locales/en-US/styles.properties     |  13 +-
 .../components/checkDefaultBrowserDialog.js   |   2 +-
 .../components/importBrowserDataPanel.js      |   2 +-
 app/renderer/components/widevinePanel.js      |   2 +-
 js/about/preferences.js                       |  16 ++-
 js/about/styles.js                            |  58 ++++++++-
 js/components/autofillAddressPanel.js         |   2 +-
 js/components/autofillCreditCardPanel.js      |   2 +-
 js/components/button.js                       |   6 +-
 js/components/clearBrowsingDataPanel.js       |   2 +-
 js/components/longPressButton.js              |   2 +-
 js/components/navigationBar.js                |  22 ++--
 js/components/siteInfo.js                     |   4 +-
 less/about/preferences.less                   |  51 +-------
 less/button.less                              | 121 ++++++++++--------
 less/modalOverlay.less                        |   2 -
 less/navigationBar.less                       |  42 +++---
 less/tabs.less                                |   1 +
 18 files changed, 193 insertions(+), 157 deletions(-)

diff --git a/app/extensions/brave/locales/en-US/styles.properties b/app/extensions/brave/locales/en-US/styles.properties
index 763be25632e..74de9801d02 100644
--- a/app/extensions/brave/locales/en-US/styles.properties
+++ b/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
\ No newline at end of file
+actionButton=Action Button
+subtleButton=Subtle Button
diff --git a/app/renderer/components/checkDefaultBrowserDialog.js b/app/renderer/components/checkDefaultBrowserDialog.js
index ab2ee14bae7..7e1744a44c7 100644
--- a/app/renderer/components/checkDefaultBrowserDialog.js
+++ b/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>
diff --git a/app/renderer/components/importBrowserDataPanel.js b/app/renderer/components/importBrowserDataPanel.js
index 71bb84305df..f65c56c1cef 100644
--- a/app/renderer/components/importBrowserDataPanel.js
+++ b/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'>
diff --git a/app/renderer/components/widevinePanel.js b/app/renderer/components/widevinePanel.js
index 4560fcbbc04..79583b864bf 100644
--- a/app/renderer/components/widevinePanel.js
+++ b/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'>
diff --git a/js/about/preferences.js b/js/about/preferences.js
index 3d6cb4a0214..dcea02ba4da 100644
--- a/js/about/preferences.js
+++ b/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>
     }
diff --git a/js/about/styles.js b/js/about/styles.js
index f714d7b1bf8..3922f09826f 100644
--- a/js/about/styles.js
+++ b/js/about/styles.js
@@ -44,17 +44,67 @@ class AboutStyle extends ImmutableComponent {
           &lt;/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>
   }
 }
diff --git a/js/components/autofillAddressPanel.js b/js/components/autofillAddressPanel.js
index 3cc43381417..af2eb733c37 100644
--- a/js/components/autofillAddressPanel.js
+++ b/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>
diff --git a/js/components/autofillCreditCardPanel.js b/js/components/autofillCreditCardPanel.js
index ef88daae08d..ccb0b00a9ff 100644
--- a/js/components/autofillCreditCardPanel.js
+++ b/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>
diff --git a/js/components/button.js b/js/components/button.js
index 37b886cfb83..cb8bf46f114 100644
--- a/js/components/button.js
+++ b/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>
   }
 }
 
diff --git a/js/components/clearBrowsingDataPanel.js b/js/components/clearBrowsingDataPanel.js
index 515e29d1544..fc9f68b0808 100644
--- a/js/components/clearBrowsingDataPanel.js
+++ b/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'>
diff --git a/js/components/longPressButton.js b/js/components/longPressButton.js
index 751ac6658d5..59fa6863090 100644
--- a/js/components/longPressButton.js
+++ b/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}
diff --git a/js/components/navigationBar.js b/js/components/navigationBar.js
index ca71045d1d4..d04647e3b7f 100644
--- a/js/components/navigationBar.js
+++ b/js/components/navigationBar.js
@@ -131,12 +131,12 @@ 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>
@@ -144,7 +144,7 @@ class NavigationBar extends ImmutableComponent {
       {
         !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>
       }
diff --git a/js/components/siteInfo.js b/js/components/siteInfo.js
index da436cd0fd3..a8df51efbcf 100644
--- a/js/components/siteInfo.js
+++ b/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>
diff --git a/less/about/preferences.less b/less/about/preferences.less
index ba828111aa3..eaf48bf08e0 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -15,6 +15,7 @@ body {
 
 #paymentsSwitches {
   margin-top: 15px;
+  padding: 5px;
 
   .enablePaymentsSwitch {
     float: left;
@@ -375,38 +376,6 @@ span.settingsListCopy {
   }
 }
 
-span.browserButton {
-  &.advancedSettings {
-    font-size: 0.9em;
-  }
-
-  &.primaryButton {
-    &.addFunds {
-      font-size: 0.9em;
-      margin-right: 50px;
-    }
-
-    &.clearBrowsingDataButton,
-    &.importNowButton,
-    &.setAsDefaultButton,
-    &.manageAdblockSettings,
-    &.viewExtensionsInfo,
-    &.manageAutofillDataButton {
-      font-size: 0.9em;
-      margin-top: 20px;
-      padding: 5px 20px;
-    }
-
-    &.importNowButton {
-      margin-top: 5px;
-    }
-
-    &.setAsDefaultButton {
-      margin-top: 5px;
-    }
-  }
-}
-
 .settingsList {
   .settingItem {
 
@@ -430,10 +399,6 @@ span.browserButton {
       font-size: 0.95em;
     }
 
-    .browserButton {
-      font-size: 0.95em;
-    }
-
     span.linkText {
       text-align: left;
       display: inline;
@@ -703,12 +668,6 @@ div.nextPaymentSubmission {
       top: 1px;
       left: 5px;
     }
-    .addFunds {
-      margin: 0;
-      height: 30px;
-      line-height: 24px;
-      box-sizing: border-box;
-    }
     .accountBalanceError, .nextReconcileDate {
       font-size: 14px;
       margin: 10px 0;
@@ -919,6 +878,11 @@ div.nextPaymentSubmission {
     a {
       text-decoration: none;
     }
+
+    button > a {
+      color: #fff;
+    }
+
     .labelText {
       clear: both;
       font-size: 1em;
@@ -934,12 +898,11 @@ div.nextPaymentSubmission {
         transform: rotate(12deg);
       }
     }
+
     .primaryButton {
       display: block;
       float: right;
-      font-size: 14px;
       width: 180px;
-      padding: 4px 0px;
       margin-bottom: 15px;
     }
 
diff --git a/less/button.less b/less/button.less
index a11bb654cad..06326d1a4f8 100644
--- a/less/button.less
+++ b/less/button.less
@@ -4,13 +4,11 @@
 
 @import "variables.less";
 
-.buttonCommon {
-  color: #fff;
-  font-size: inherit;
-  height: 22px;
-  line-height: 22px;
-  margin: 5px 5px 0px 0px;
-  padding: 0px 20px;
+button[class*="Button"] {
+  background: none;
+  outline: none;
+  border: none;
+  margin: 0;
   white-space: nowrap;
 }
 
@@ -20,7 +18,7 @@ span.buttonSeparator {
   margin: 4px 3px 4px 3px;
 }
 
-span.menuButton {
+.menuButton {
   background-color: @buttonColor;
   display: inline-block;
   width: 20px;
@@ -42,7 +40,7 @@ span.menuButton {
   line-height: 25px;
   width: 25px;
   height: 25px;
-  font-size: 15px;
+  font-size: 14px;
   color: @buttonColor;
   border-radius: @borderRadius;
   margin: 0 3px;
@@ -51,6 +49,10 @@ span.menuButton {
   user-select: none;
   -webkit-user-select: none;
 
+  & + .browserButton {
+    margin-left: 5px;
+  }
+
   &:not([disabled]):hover {
     color: black;
   }
@@ -88,94 +90,101 @@ span.menuButton {
   &.primaryButton,
   &.actionButton,
   &.wideButton,
-  &.secondaryButton,
-  &.secondaryAltButton,
   &.subtleButton,
   &.whiteButton {
-    .buttonCommon;
+    color: #fff;
+    line-height: 1.25;
+    padding-top: 5px;
+    padding-bottom: 5px;
     width: auto;
     height: auto;
   }
 
+  &.primaryButton,
+  &.actionButton,
+  &.subtleButton,
+  &.whiteButton {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
   &.primaryButton {
     background: linear-gradient(@braveLightOrange, @braveOrange);
-    border: 2px solid transparent;
-    border-top: 2px solid @braveLightOrange;
-    border-bottom: 2px solid @braveOrange;
+    border: 1px solid transparent;
+    border-top: 1px solid @braveLightOrange;
+    border-bottom: 1px solid @braveOrange;
     box-shadow: @buttonShadow;
     font-weight: 400;
 
     &:hover {
-      border: 2px solid white;
+      border: 1px solid white;
       color: white;
       cursor: pointer;
     }
   }
 
-  &.actionButton,
-  &.wideButton {
+  &.actionButton {
     background-color: #4099FF;
   }
 
   &.wideButton {
-    display: block;
-    margin-right: 0px;
-    margin-left: 0px;
     width: auto;
-    padding: 3px 35px;
+    padding-right: 35px;
+    padding-left: 35px;
   }
 
   &.whiteButton {
     background: linear-gradient(white, @lightGray);
-    border: 2px solid white;
+    border: 1px solid white;
     box-shadow: @buttonShadow;
     cursor: pointer;
-    font-weight: normal;
-    font-style: normal;
     color: @darkGray;
+
+    &:hover {
+      border: 1px solid @gray;
+    }
   }
 
   &.inlineButton {
     display: inline;
   }
 
-  &.secondaryButton {
-    background-color: #eee;
-  }
-
-  &.secondaryAltButton {
-    background-color: #fff;
-    color: @braveOrange;
-    border: 1px solid #ccc;
-  }
-
   &.subtleButton {
     background-color: #ccc;
     font-size: 14px;
   }
+}
 
-  &.tactileButton {
-    display: block;
-    min-width: 80px;
-    height: 2em;
-    line-height: 2em;
-    margin: 0.5em 0;
-    vertical-align: middle;
-    text-align: center;
-    border: solid 1px @braveMediumOrange;
-    background: @braveMediumOrange;
-    border-radius: @borderRadius;
-    color: white;
-    box-shadow: @lightBoxShadow;
-    padding-left: 1em;
-    font-size: 0.9em;
-    font-weight: 400;
-    cursor: pointer;
-    outline: none;
-    text-align: left;
+// for about:preferences
+.prefBody {
+  .browserButton {
+    &.advancedSettings {
+      font-size: 0.9em;
+    }
 
-    &:hover {
-      color: white;
+    &.primaryButton {
+      &.addFunds {
+        margin-right: 50px;
+      }
+
+      &.clearBrowsingDataButton,
+      &.importNowButton,
+      &.setAsDefaultButton,
+      &.manageAdblockSettings,
+      &.viewExtensionsInfo,
+      &.manageAutofillDataButton {
+        font-size: 0.9em;
+        margin-top: 20px;
+        padding: 5px 20px;
+      }
+
+      &.importNowButton {
+        margin-top: 5px;
+      }
+
+      &.setAsDefaultButton {
+        margin-top: 5px;
+      }
     }
   }
 }
diff --git a/less/modalOverlay.less b/less/modalOverlay.less
index 6da47d7ddeb..5cc3fe609bd 100644
--- a/less/modalOverlay.less
+++ b/less/modalOverlay.less
@@ -139,8 +139,6 @@
   }
 
   button {
-    &:extend(.tactileButton);
-
     &.close {
       display: inline-block;
       background: none;
diff --git a/less/navigationBar.less b/less/navigationBar.less
index dc5438f0ae3..182b57f1245 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -486,8 +486,19 @@
     .backButton,
     .forwardButton {
       width: 100%;
+      height: 100%;
+      margin: 0;
     }
 
+    .backButton {
+      background: url('../img/toolbar/back_btn.svg') center no-repeat;
+      background-size: 14px 14px;
+    }
+
+    .forwardButton {
+      background: url('../img/toolbar/forward_btn.svg') center no-repeat;
+      background-size: 14px 14px;
+    }
   }
 
   // Navigation bar at the center
@@ -592,21 +603,18 @@
   }
 }
 
-.backButton,
-.forwardButton {
-  height: 24px;
-  width: 30px;
-  margin: 0;
-}
+.noScriptButtonContainer {
+    display: flex;
+    margin-left: 6px;
 
-.backButton {
-  background: url('../img/toolbar/back_btn.svg') center no-repeat;
-  background-size: 14px 14px;
-}
+    .noScript {
+      font-size: 16px;
+      color: @braveOrange;
 
-.forwardButton {
-  background: url('../img/toolbar/forward_btn.svg') center no-repeat;
-  background-size: 14px 14px;
+      &:hover {
+        color: @braveOrange;
+      }
+  }
 }
 
 #navigator {
@@ -675,7 +683,7 @@
     z-index: @zindexNavigationBar;
     transition: margin @transitionDuration ease-in-out;
 
-    span {
+    button {
       -webkit-user-select: none;
       color: @buttonColor;
       cursor: default;
@@ -851,12 +859,6 @@
     }
   }
 
-  .noScript {
-    font-size: 16px;
-    margin-left: 10px;
-    color: @braveOrange;
-  }
-
   /* Disable selection of button text */
   > span {
      -webkit-user-select: none;
diff --git a/less/tabs.less b/less/tabs.less
index 3c901f4fe9f..79e4aeab974 100644
--- a/less/tabs.less
+++ b/less/tabs.less
@@ -19,6 +19,7 @@
 
 .tabs {
   box-sizing: border-box;
+  background: none;
   display: flex;
   flex: 1;
   overflow: auto;

From e8955ce529ea00d319d12e7325c43eaadf476731 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 1 Dec 2016 15:53:27 +0900
Subject: [PATCH 2/3] Make button styles consistent (part 2)

- some buttons on about:preferences were excluded from settingItem
- the buttons styles on about pages were made consistent
  - about:preferences
  - about:history
- elements in titleBar on about:preferences#payments were aligned
- font-size and padding of the buttons on about:preferences were made consistent

Auditors: @bradleyrichter

Test Plan:
---
 js/about/preferences.js     | 20 ++++++++-----------
 less/about/preferences.less |  5 +++--
 less/button.less            | 39 +++++++++++--------------------------
 3 files changed, 22 insertions(+), 42 deletions(-)

diff --git a/js/about/preferences.js b/js/about/preferences.js
index dcea02ba4da..ec7333a0112 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -1516,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}
@@ -1663,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>
diff --git a/less/about/preferences.less b/less/about/preferences.less
index eaf48bf08e0..35db2e0e537 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -14,8 +14,9 @@ body {
 }
 
 #paymentsSwitches {
-  margin-top: 15px;
-  padding: 5px;
+  display: flex;
+  align-items: center;
+  min-height: 40px;
 
   .enablePaymentsSwitch {
     float: left;
diff --git a/less/button.less b/less/button.less
index 06326d1a4f8..1033d4e846c 100644
--- a/less/button.less
+++ b/less/button.less
@@ -157,34 +157,17 @@ span.buttonSeparator {
 
 // for about:preferences
 .prefBody {
-  .browserButton {
-    &.advancedSettings {
-      font-size: 0.9em;
-    }
+  .settingsList > .settingItem + button,
+  .settingItem > span + button {
+    font-size: 0.9em;
+    padding: 5px 20px;
+  }
 
-    &.primaryButton {
-      &.addFunds {
-        margin-right: 50px;
-      }
-
-      &.clearBrowsingDataButton,
-      &.importNowButton,
-      &.setAsDefaultButton,
-      &.manageAdblockSettings,
-      &.viewExtensionsInfo,
-      &.manageAutofillDataButton {
-        font-size: 0.9em;
-        margin-top: 20px;
-        padding: 5px 20px;
-      }
-
-      &.importNowButton {
-        margin-top: 5px;
-      }
-
-      &.setAsDefaultButton {
-        margin-top: 5px;
-      }
-    }
+  .settingsList > .settingItem + button {
+    margin-top: 20px;
+  }
+
+  .settingItem > span + button {
+    margin-top: 5px;
   }
 }

From 46ee335509920c0a569a9da29d38bb3d3d4ee1e6 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sat, 3 Dec 2016 03:02:39 +0900
Subject: [PATCH 3/3] Make button styles consistent (part 3)

- Paddings of buttons on about:preferences were increased
- Removed unnecessary class

Auditors:

Test Plan:
---
 js/about/preferences.js     |  2 +-
 less/about/preferences.less |  4 +---
 less/button.less            | 12 ++++++++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/js/about/preferences.js b/js/about/preferences.js
index ec7333a0112..46e6128eef1 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -927,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 () {
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 35db2e0e537..998e1303031 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -655,9 +655,7 @@ div.nextPaymentSubmission {
       width: auto;
       min-width: 235px;
     }
-    span.browserButton.primaryButton.addFunds {
-      margin-right: 0;
-    }
+
     .fundsAmount {
       display: inline;
       margin: 0;
diff --git a/less/button.less b/less/button.less
index 1033d4e846c..e8622a4932c 100644
--- a/less/button.less
+++ b/less/button.less
@@ -158,9 +158,10 @@ span.buttonSeparator {
 // for about:preferences
 .prefBody {
   .settingsList > .settingItem + button,
-  .settingItem > span + button {
+  .settingItem > span + button,
+  #paymentsContainer button:not(.close) {
     font-size: 0.9em;
-    padding: 5px 20px;
+    padding: 8px 20px;
   }
 
   .settingsList > .settingItem + button {
@@ -170,4 +171,11 @@ span.buttonSeparator {
   .settingItem > span + button {
     margin-top: 5px;
   }
+
+  #paymentsContainer {
+    .browserButton + .browserButton {
+      margin-left: 8px;
+    }
+  }
+
 }