Refactor buttons on about:preferences#payments

Fixes #4786

- Moved paddings and width in "whiteButton" to "wideButton"
- Added "wideButton" to the advanced settings button on about:preferences#payments
- Added font-size to the button
- Added display:flex to footer of advanced settings
- Added white-space:nowrap to "buttonCommon" (buttons will not be wrapped by default)

Auditors: @jkup

Test Plan:

1. Open about:preferences#payments
2. Make sure the font size of the two buttons "Add funds" and "Advanced Settings..." is equal
3. Click "Advanced Settings..."
4. Make sure the buttons on the footer are aligned center
5. Make sure each button is not wrapped

js/about/preferences.js

@@ -1266,7 +1266,7 @@ class PaymentsTab extends ImmutableComponent {
             <span data-l10n-id='off' />
             <SettingCheckbox dataL10nId='on' prefKey={settings.PAYMENTS_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
           </div>
-          { this.props.ledgerData.get('created') && this.enabled ? <Button l10nId='advancedSettings' className='advancedSettings whiteButton inlineButton' onClick={this.props.showOverlay.bind(this, 'advancedSettings')} /> : null }
+          { this.props.ledgerData.get('created') && this.enabled ? <Button l10nId='advancedSettings' className='advancedSettings whiteButton inlineButton wideButton' onClick={this.props.showOverlay.bind(this, 'advancedSettings')} /> : null }
         </div>
       </div>
       {

less/about/preferences.less

@@ -365,29 +365,35 @@ span.settingsListCopy {
   }
 }
 
-span.browserButton.primaryButton {
-  &.addFunds {
+span.browserButton {
+  &.advancedSettings {
     font-size: 0.9em;
-    margin-right: 50px;
   }
 
-  &.clearBrowsingDataButton,
-  &.importNowButton,
-  &.setAsDefaultButton,
-  &.manageAdblockSettings,
-  &.viewExtensionsInfo,
-  &.manageAutofillDataButton {
-    font-size: 0.9em;
-    margin-top: 20px;
-    padding: 5px 20px;
-  }
+  &.primaryButton {
+    &.addFunds {
+      font-size: 0.9em;
+      margin-right: 50px;
+    }
 
-  &.importNowButton {
-    margin-top: 5px;
-  }
+    &.clearBrowsingDataButton,
+    &.importNowButton,
+    &.setAsDefaultButton,
+    &.manageAdblockSettings,
+    &.viewExtensionsInfo,
+    &.manageAutofillDataButton {
+      font-size: 0.9em;
+      margin-top: 20px;
+      padding: 5px 20px;
+    }
+
+    &.importNowButton {
+      margin-top: 5px;
+    }
 
-  &.setAsDefaultButton {
-    margin-top: 5px;
+    &.setAsDefaultButton {
+      margin-top: 5px;
+    }
   }
 }
 
@@ -993,8 +999,11 @@ div.nextPaymentSubmission {
 }
 
 .advancedSettingsFooter {
-  padding: 20px 100px;
-  text-align: right;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .recoveryOverlay {

less/button.less

@@ -11,6 +11,7 @@
   line-height: 22px;
   margin: 5px 5px 0px 0px;
   padding: 0px 20px;
+  white-space: nowrap;
 }
 
 span.buttonSeparator {
@@ -35,8 +36,6 @@ span.menuButton {
   }
 }
 
-a.browserButton,
-span.browserButton,
 .browserButton {
   cursor: default;
   display: inline-block;
@@ -91,7 +90,8 @@ span.browserButton,
   &.wideButton,
   &.secondaryButton,
   &.secondaryAltButton,
-  &.subtleButton {
+  &.subtleButton,
+  &.whiteButton {
     .buttonCommon;
     width: auto;
     height: auto;
@@ -121,6 +121,8 @@ span.browserButton,
     display: block;
     margin-right: 0px;
     margin-left: 0px;
+    width: auto;
+    padding: 3px 35px;
   }
 
   &.whiteButton {
@@ -131,10 +133,7 @@ span.browserButton,
     display: block;
     font-weight: normal;
     font-style: normal;
-    font-size: 14px;
     color: @darkGray;
-    width: auto;
-    padding: 3px 35px;
   }
 
   &.inlineButton {