From 85e428a20f59d96adc57bf2ccf123ac5da5bac23 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 17 Nov 2016 15:36:22 +0900
Subject: [PATCH] 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     |  2 +-
 less/about/preferences.less | 49 ++++++++++++++++++++++---------------
 less/button.less            | 11 ++++-----
 3 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/js/about/preferences.js b/js/about/preferences.js
index eb3e3a7f36c..2b1d1faad29 100644
--- a/js/about/preferences.js
+++ b/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>
       {
diff --git a/less/about/preferences.less b/less/about/preferences.less
index d92514624e8..50ffbab0181 100644
--- a/less/about/preferences.less
+++ b/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 {
diff --git a/less/button.less b/less/button.less
index 3a505487f16..f54c87381e5 100644
--- a/less/button.less
+++ b/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 {