Refactor syncTab.js with Aphrodite

Closes #8042
Addresses #7989
Addresses #8054

- Unified the modal dialog design of payments and sync
  Copied the styles of modal dialog of payments to commonStyles.js, adding modalOverlay__dialog and modalOverlay__title to ModalOverlay on syncTab.js
  Copied panelMargin, panelItemMargin, and panelPadding from payment.js to global.js
  Added modalVeryLightGray, modalLightGray, and borderRadiusModal to global.js
  Replaced linkButton with primaryButton
  Set flex:1 to two elements under postSetupContent
  TODO: refactor modalOverlay with Aphrodite to remove !important from syncTab.js and commonStyles.js

- Introduced modalOverlay__footer and modalOverlay__footerButton
  Removed advanceFooter and replaced paymentCommon.advanceFooter with them to make the styling of the modal dialog footer consistent

- Removed styles under .syncContainer, #syncPassphrase, and #syncQR in preferences.less
  Unified margins between buttons on dialog to 8px with globalStyles.spacing.overlayButtonMargin
  Aligned buttons to the right

- Removed .formControl from forms.less
  We no longer need it as commonStyles.formControl is applied manually, along with commonStyles.textbox, commonStyles.textbox__outlineable, and commonStyles.textbox__isSettings.

Also:
- Changed settingsListContainerMargin into a variable to apply it to syncOverlayBody__form
- Added "Done" button to the new device sync dialog
- Added styles.section to unify the margin-bottom of each section
- Replaced 'sync' with 'Sync'
- Updated test code

Auditors:

Test plan 1:
1. Open about:preferences#sync
2. Verify you are able to sync two devices using the secret code
3. Visit a site on device 1 and change shield setting, ensure that the saved site preference is synced to device 2
4. Enable Browsing history sync on device 1, ensure the history is shown on device 2
5. Import/Add bookmarks on device 1, ensure it is synced on device 2
6. Ensure imported bookmark folder structure is maintained on device 2
7. Ensure bookmark favicons are shown after sync
8. Open about:preferences#payments
9. Click "Add funds..."
10. Make sure the style of the modal overlay dialog is same as that of sync dialog

Test Plan 2:
1. Automated tests should pass
2. Open about:preferences#sync
3. Make the window small
4. Scroll the page to the bottom
5. Make sure there is 2rem margin between the reset sync button and the the border of the window

Test Plan 3:
1. Open about:preferences#sync
2. Open about:preferences#payments
3. Make sure the headers appear exactly on the same place

Test Plan 4:
1. Reset Sync
2. Make sure margin-top of the buttons is set to 18px
3. Enable Sync
4. Make sure margin-top of DefaultSectionTitle is set to 2rem
5. Disable Sync
6. Make sure margin around the gray box is set to 15px

Test Plan 5:
1. Enable Sync
2. Click "Sync a new device"
3. Click "Show secret QR code"
4. Hover on the QR image
5. Make sure the title appears

app/extensions/brave/locales/en-US/preferences.properties

@@ -49,18 +49,19 @@ syncReset=Reset Sync
 syncResetMessageWhat=Resetting Sync clears data stored on the Sync server and resets this device's Sync settings.
 syncResetMessageWhatNot=You will keep any bookmarks, history and other browsing data currently on this device.
 syncResetMessageOtherDevices=If you've synced other devices, they will continue to sync their future browsing data. If you don't want that, you should reset Sync on those devices as well.
-syncStart=I am new to sync
-syncAdd=I have an existing sync code
+syncStart=I am new to Sync
+syncAdd=I have an existing Sync code
 syncNewDevice1=Open Brave on your new device and go to Preferences > Sync > 'I have an existing synced device'.
 syncNewDevice2=If it asks you to scan a QR code, click the button below and point your camera at the QR code.
+syncQRImg.title=Brave sync QR code
 syncShowQR=Show secret QR code. (Do not share!)
 syncHideQR=Hide QR code
 syncNewDevice3=If asks you to enter code words, type in the words below.
 syncShowPassphrase=Show secret code words. (Do not share!)
 syncHidePassphrase=Hide code words
 syncDeviceNameInput=Enter an optional name for this device:
-syncCreate=Set up sync
-syncEnterPassphrase=Enter your sync code words:
+syncCreate=Set up Sync
+syncEnterPassphrase=Enter your Sync code words:
 accountBalance=account balance
 accountBalanceConnectionError=Please check your Internet connection.
 monthlyBudget=monthly budget

app/renderer/components/preferences/payment/advancedSettings.js

@@ -91,7 +91,7 @@ class AdvancedSettingsContent extends ImmutableComponent {
 
 class AdvancedSettingsFooter extends ImmutableComponent {
   render () {
-    return <div className={css(paymentCommon.advanceFooter)}>
+    return <div className={css(commonStyles.modalOverlay__footer, commonStyles.modalOverlay__footerButton)}>
       <Button l10nId='backupLedger'
         className={css(commonStyles.primaryButton)}
         onClick={this.props.showOverlay.bind(this, 'ledgerBackup')}

app/renderer/components/preferences/payment/enabledContent.js

@@ -241,8 +241,8 @@ const styles = StyleSheet.create({
   walletBar: {
     background: globalStyles.color.lightGray,
     borderRadius: globalStyles.radius.borderRadiusUIbox,
-    padding: paymentStyles.padding.bar,
-    margin: `${paymentStyles.margin.bar} 0`
+    padding: globalStyles.spacing.panelPadding,
+    margin: `${globalStyles.spacing.panelMargin} 0`
   },
 
   listContainer: {
@@ -266,7 +266,7 @@ const styles = StyleSheet.create({
   },
 
   accountBalanceError: {
-    marginTop: paymentStyles.margin.barItem
+    marginTop: globalStyles.spacing.panelItemMargin
   },
 
   settingsListContainer: {

app/renderer/components/preferences/payment/ledgerBackup.js

@@ -74,7 +74,7 @@ class LedgerBackupFooter extends ImmutableComponent {
   }
 
   render () {
-    return <div className={css(paymentCommon.advanceFooter)}>
+    return <div className={css(commonStyles.modalOverlay__footer, commonStyles.modalOverlay__footerButton)}>
       <Button l10nId='printKeys'
         className={css(commonStyles.primaryButton)}
         onClick={this.printKeys}

app/renderer/components/preferences/payment/ledgerRecovery.js

@@ -125,7 +125,7 @@ class LedgerRecoveryFooter extends ImmutableComponent {
   }
 
   render () {
-    return <div className={css(paymentCommon.advanceFooter)}>
+    return <div className={css(commonStyles.modalOverlay__footer, commonStyles.modalOverlay__footerButton)}>
       <div className={css(styles.recoveryFooterButtons)}>
         <Button l10nId='recover'
           className={css(commonStyles.primaryButton)}

app/renderer/components/preferences/paymentsTab.js

@@ -30,7 +30,7 @@ const {LedgerRecoveryContent, LedgerRecoveryFooter} = require('./payment/ledgerR
 // style
 const globalStyles = require('../styles/global')
 const {paymentStyles, paymentStylesVariables} = require('../styles/payment')
-const settingIcon = require('../../../extensions/brave/img/ledger/icon_settings.svg')
+const settingsIcon = require('../../../extensions/brave/img/ledger/icon_settings.svg')
 const historyIcon = require('../../../extensions/brave/img/ledger/icon_history.svg')
 
 // other
@@ -238,8 +238,8 @@ class PaymentsTab extends ImmutableComponent {
                   data-l10n-id='advancedSettingsIcon'
                   className={css(
                     styles.switchWrap__mainIcons,
-                    styles.mainIcons__settingIcon,
-                    !enabled && styles.mainIcons__settingIconDisabled
+                    styles.mainIcons__settingsIcon,
+                    !enabled && styles.mainIcons__settingsIconDisabled
                   )}
                   onClick={enabled ? this.props.showOverlay.bind(this, 'advancedSettings') : () => {}}
                 />
@@ -312,6 +312,7 @@ const styles = StyleSheet.create({
     position: 'relative'
   },
 
+  // Auto suggest switch
   switchWrap__autoSuggestSwitch: {
     // TODO: Refactor switchControls.less
     position: 'relative',
@@ -336,6 +337,7 @@ const styles = StyleSheet.create({
     }
   },
 
+  // History and settings icons
   switchWrap__mainIconsRight: {
     position: 'relative',
     right: '12px',
@@ -352,7 +354,6 @@ const styles = StyleSheet.create({
       backgroundColor: globalStyles.color.braveDarkOrange
     }
   },
-
   mainIcons__historyIcon: {
     right: '5px',
     WebkitMaskImage: `url(${historyIcon})`,
@@ -369,14 +370,14 @@ const styles = StyleSheet.create({
       backgroundColor: globalStyles.color.chromeTertiary
     }
   },
-  mainIcons__settingIcon: {
-    WebkitMaskImage: `url(${settingIcon})`,
+  mainIcons__settingsIcon: {
+    WebkitMaskImage: `url(${settingsIcon})`,
 
     ':hover': {
       backgroundColor: globalStyles.color.braveDarkOrange
     }
   },
-  mainIcons__settingIconDisabled: {
+  mainIcons__settingsIconDisabled: {
     backgroundColor: globalStyles.color.chromeTertiary,
     cursor: 'default',