Fixed advanced settings modal dialogs on about:preferences#payments

Set the equal paddings to
- .advancedSettings
- .ledgerBackupContent
- .recoveryContent

Set the equal margin-bottom to
- .ledgerRecoveryContent
- .firstRecoveryKey
- .secondRecoveryKey

Added white-space:nowrap to recovery keys
Addressed #4807 (comment)

Auditors: @bsclifton

Test Plan:
1. Open about:preferences#payments
2. Click "Advanced Settings..."
3. Make sure style of "Backup your wallet" and "Recover your wallet" is consistent

js/about/preferences.js

@@ -1019,7 +1019,7 @@ class PaymentsTab extends ImmutableComponent {
     return <div className='board'>
       <div className='panel advancedSettings'>
         <div className='settingsPanelDivider'>
-          <div data-l10n-id='minimumPageTimeSetting' />
+          <div className='minimumPageTimeSetting' data-l10n-id='minimumPageTimeSetting' />
           <SettingsList>
             <SettingItem>
               <select
@@ -1032,7 +1032,7 @@ class PaymentsTab extends ImmutableComponent {
               </select>
             </SettingItem>
           </SettingsList>
-          <div data-l10n-id='minimumVisitsSetting' />
+          <div className='minimumVisitsSetting' data-l10n-id='minimumVisitsSetting' />
           <SettingsList>
             <SettingItem>
               <select
@@ -1072,7 +1072,7 @@ class PaymentsTab extends ImmutableComponent {
     const passphrase = this.props.ledgerData.get('passphrase')
 
     return <div className='board'>
-      <div className='panel'>
+      <div className='panel ledgerBackupContent'>
         <span data-l10n-id='ledgerBackupContent' />
         <div className='copyKeyContainer'>
           <div className='copyContainer'>
@@ -1129,13 +1129,13 @@ class PaymentsTab extends ImmutableComponent {
       }
       <div className='panel recoveryContent'>
         <h4 data-l10n-id='ledgerRecoverySubtitle' />
-        <span data-l10n-id='ledgerRecoveryContent' />
+        <div className='ledgerRecoveryContent' data-l10n-id='ledgerRecoveryContent' />
         <SettingsList>
           <SettingItem>
             <h3 data-l10n-id='firstRecoveryKey' />
-            <input className='form-control' onChange={this.handleFirstRecoveryKeyChange} type='text' />
+            <input className='form-control firstRecoveryKey' onChange={this.handleFirstRecoveryKeyChange} type='text' />
             <h3 data-l10n-id='secondRecoveryKey' />
-            <input className='form-control' onChange={this.handleSecondRecoveryKeyChange} type='text' />
+            <input className='form-control secondRecoveryKey' onChange={this.handleSecondRecoveryKeyChange} type='text' />
           </SettingItem>
         </SettingsList>
       </div>

less/about/preferences.less

@@ -555,7 +555,9 @@ table.sortableTable {
       .dialog-body {
         .board {
           .panel {
-            &.advancedSettings {
+            &.advancedSettings,
+            &.ledgerBackupContent,
+            &.recoveryContent {
               padding-left: 50px;
               padding-right: 50px;
 
@@ -564,10 +566,27 @@ table.sortableTable {
               }
             }
 
+            &.advancedSettings {
+              .settingsPanelDivider {
+                .settingsListContainer:last-child {
+                  margin-bottom: 0;
+                }
+              }
+            }
+
             &.recoveryContent {
               h4,
-              span {
+              .ledgerRecoveryContent {
                 margin-bottom: 20px;
+
+                & + .settingsListContainer {
+                  margin-bottom: 0;
+
+                  .firstRecoveryKey,
+                  .secondRecoveryKey {
+                    margin-bottom: 20px;
+                  }
+                }
               }
             }
 
@@ -583,6 +602,12 @@ table.sortableTable {
               &:nth-child(2) {
                 text-align: right;
               }
+
+              .minimumPageTimeSetting,
+              .minimumVisitsSetting {
+                margin-bottom: 12px; // @itemMargin in .walletBar
+              }
+
             }
 
             .copyKeyContainer {
@@ -604,6 +629,10 @@ table.sortableTable {
                 h3 {
                   margin-bottom: 15px;
                 }
+
+                > span {
+                  white-space: nowrap;
+                }
               }
             }
           }
@@ -780,8 +809,7 @@ table.sortableTable {
 
       .dialog-footer {
         .advancedSettingsFooter {
-          padding-top: 20px;
-          padding-bottom: 20px;
+          padding: 20px;
           display: flex;
           flex-wrap: wrap;
           justify-content: center;