Refactor syncTab.js with Aphrodite

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',