Merge pull request #4040 from brave/reorder-payment-buttons

Reorder Brave Payments buttons to improve 1st-time flow
brave · Sep 17, 2016 · 0749dfa · 0749dfa
2 parents b6b54d9 + 5961e01
commit 0749dfa
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 39 deletions.
diff --git a/js/about/preferences.js b/js/about/preferences.js
@@ -682,18 +682,16 @@ class PaymentsTab extends ImmutableComponent {
       return null
     }
 
-    return <span id='fundsAmount'>
+    return <div>
       {
       !(this.props.ledgerData.get('balance') === undefined || this.props.ledgerData.get('balance') === null)
-        ? <span>
-          {this.btcToCurrencyString(this.props.ledgerData.get('balance'))}
-          <a href='https://brave.com/Payments_FAQ.html' target='_blank'>
-            <span className='fa fa-question-circle fundsFAQ' />
-          </a>
-        </span>
+        ? <input className='fundsAmount' readOnly value={this.btcToCurrencyString(this.props.ledgerData.get('balance'))} />
         : <span><span data-l10n-id='accountBalanceLoading' /></span>
       }
-    </span>
+      <a href='https://brave.com/Payments_FAQ.html' target='_blank'>
+        <span className='fa fa-question-circle fundsFAQ' />
+      </a>
+    </div>
   }
 
   get walletButton () {
@@ -828,24 +826,13 @@ class PaymentsTab extends ImmutableComponent {
         <table>
           <thead>
             <tr>
-              <th data-l10n-id='accountBalance' />
               <th data-l10n-id='monthlyBudget' />
+              <th data-l10n-id='accountBalance' />
               <th data-l10n-id='status' />
             </tr>
           </thead>
           <tbody>
             <tr>
-              <td>
-                {
-                  this.props.ledgerData.get('error') && this.props.ledgerData.get('error').get('caller') === 'getWalletProperties'
-                    ? <span data-l10n-id='accountBalanceConnectionError' />
-                    : <span>
-                      {this.fundsAmount}
-                      {this.walletButton}
-                      {this.paymentHistoryButton}
-                    </span>
-                }
-              </td>
               <td>
                 <SettingsList>
                   <SettingItem>
@@ -862,6 +849,21 @@ class PaymentsTab extends ImmutableComponent {
                   </SettingItem>
                 </SettingsList>
               </td>
+              <td>
+                {
+                  this.props.ledgerData.get('error') && this.props.ledgerData.get('error').get('caller') === 'getWalletProperties'
+                    ? <span data-l10n-id='accountBalanceConnectionError' />
+                    : <span>
+                      <SettingsList>
+                        <SettingItem>
+                          {this.fundsAmount}
+                          {this.walletButton}
+                          {this.paymentHistoryButton}
+                        </SettingItem>
+                      </SettingsList>
+                    </span>
+                }
+              </td>
               <td>
                 <div id='walletStatus' data-l10n-id={this.walletStatus.id} data-l10n-args={this.walletStatus.args ? JSON.stringify(this.walletStatus.args) : null} />
                 {this.nextReconcileDate}

diff --git a/less/about/preferences.less b/less/about/preferences.less
@@ -67,16 +67,6 @@ body {
   display: inline-block;
 }
 
-#fundsAmount {
-  margin-right: 10px;
-
-  .fundsFAQ {
-    position: relative;
-    margin: 0 10px;
-    top: -1px;
-  }
-}
-
 .bitcoinQRTitle {
   color: @braveOrange;
   margin-bottom: 70px;
@@ -410,8 +400,8 @@ span.browserButton.primaryButton {
       margin-left: 10px;
     }
 
-    > input,
-    > select {
+    input,
+    select {
       display: block;
       border-radius: @borderRadius;
       height: 2.25em;
@@ -424,20 +414,20 @@ span.browserButton.primaryButton {
       outline: none;
     }
 
-    > input {
+    input {
       box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
     }
 
-    > select  {
+    select  {
       box-shadow: @lightBoxShadow;
     }
 
-    > input[type="number"] {
+    input[type="number"] {
       width: 50px;
       min-width: 50px;
     }
 
-    > select[disabled] {
+    select[disabled] {
       color: #ccc
     }
 
@@ -639,7 +629,6 @@ div.nextPaymentSubmission {
     margin: 30px 0px;
     th {
       text-align: left;
-      font-weight: normal;
     }
     tr {
       height: 1em;
@@ -652,10 +641,22 @@ div.nextPaymentSubmission {
     span.browserButton.primaryButton.addFunds {
       margin-right: 0;
     }
+    .fundsAmount {
+      display: inline;
+      margin: 0;
+      width: auto;
+    }
+    .fundsFAQ {
+      display: inline;
+      position: relative;
+      top: 1px;
+      left: 5px;
+    }
     .addFunds {
       margin: 0;
       height: 30px;
-      line-height: 30px;
+      line-height: 24px;
+      box-sizing: border-box;
     }
     .nextReconcileDate {
       font-size: 14px;
@@ -1044,6 +1045,5 @@ div.nextPaymentSubmission {
 
 #fundsSelectBox {
   margin-top: 0px;
-  min-width: 130px;
   width: auto;
 }