Merge pull request #8044 from luixxiul/sync-aphrodite

Refactor syncTab.js with Aphrodite
brave · May 1, 2017 · b831100 · b831100
2 parents b612b3f + b098619
commit b831100
Show file tree

Hide file tree

Showing 17 changed files with 494 additions and 270 deletions.
diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/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

diff --git a/app/renderer/components/preferences/payment/advancedSettings.js b/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')}

diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/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: {

diff --git a/app/renderer/components/preferences/payment/ledgerBackup.js b/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}

diff --git a/app/renderer/components/preferences/payment/ledgerRecovery.js b/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)}

diff --git a/app/renderer/components/preferences/paymentsTab.js b/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',