From 00c3bbb73224500dd5553ec69a0488d82fd5cf03 Mon Sep 17 00:00:00 2001
From: Brian Clifton <brian@clifton.me>
Date: Sat, 15 Apr 2017 00:13:04 -0700
Subject: [PATCH] Move the FAQ link next to the payment on/off toggle (instead
 of next to auto-include)

This is a suggestion, but I think it makes more sense here. See issue details for more info:
https://github.com/brave/browser-laptop/issues/7796

Fixes https://github.com/brave/browser-laptop/issues/7796

Auditors: @bradleyrichter, @luixxiul

Test Plan:
1. Launch Brave and open Preferences > Payments
2. You should see the "?" icon next to the on/off switch
3. Toggle the on/off switch; it should still show after changing
4. Click link and confirm it goes to Payment FAQ
---
 .../components/preferences/paymentsTab.js     | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index 1143c2e148..447c203efa 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -180,6 +180,16 @@ class PaymentsTab extends ImmutableComponent {
               switchClassName={css(styles.switchWrap__switchControl)}
               labelClassName={css(styles.switchWrap__label)}
             />
+            <a className={cx({
+              fa: true,
+              'fa-question-circle': true,
+              [css(styles.autoSuggestSwitch__moreInfo)]: true,
+              [css(styles.autoSuggestSwitch__moreInfoBtnSuggest)]: true
+            })}
+              href='https://brave.com/Payments_FAQ.html'
+              target='_blank'
+              data-l10n-id='paymentsFAQLink'
+            />
           </div>
           {
             this.enabled
@@ -197,16 +207,6 @@ class PaymentsTab extends ImmutableComponent {
                     onChangeSetting={this.props.onChangeSetting}
                     switchClassName={css(styles.switchWrap__switchControl)}
                   />
-                  <a className={cx({
-                    fa: true,
-                    'fa-question-circle': true,
-                    [css(styles.autoSuggestSwitch__moreInfo)]: true,
-                    [css(styles.autoSuggestSwitch__moreInfoBtnSuggest)]: true
-                  })}
-                    href='https://brave.com/Payments_FAQ.html'
-                    target='_blank'
-                    data-l10n-id='paymentsFAQLink'
-                  />
                 </div>
               </div>
               <div className={css(styles.switchWrap__mainIconsRight)}>
@@ -308,7 +308,8 @@ const styles = StyleSheet.create({
   },
   autoSuggestSwitch__moreInfoBtnSuggest: {
     position: 'relative',
-    left: '5px',
+    top: '-1px',
+    left: '8px',
     cursor: 'pointer',
 
     // TODO: refactor preferences.less to remove !important