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

@@ -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>

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;

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