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] 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;
   }
 }