sync v2

-
several UI changes
user flow for sync improvements

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

@@ -76,6 +76,7 @@ clearAll=Clear all
 clearBrowsingDataNow=Clear Browsing Data Now…
 comingSoon=Coming soon!
 compactBraveryPanel=Use compact panel
+computer=Computer
 contentSettings=Content Settings
 contributionAmount=Contribution Amount
 contributionDate=Contribution Date
@@ -325,27 +326,42 @@ submitFeedback=Help Center
 swipeNavigationDistance=Swipe Navigation Distance
 switchToNewTabs=Switch to new tabs immediately
 sync=Sync
-syncAdd=I have an existing Sync code
+syncAddCode=Enter a sync chain code
+syncAddButton=Add
 syncBetaMessage=Note: Sync for iOS and Android is still being completed and will be released soon.
 syncBookmarks=Bookmarks
+syncChainCode=Enter the sync chain code below
+syncChainCodeDescription1=On your computer, go to:
+syncChainCodeDescription2=Settings > Sync and click "Enter a sync chain code".
+syncChainCodeDescription3=Then enter this code:
+syncChooseDevice=Choose a device type:
 syncClearData=Clear Data
 syncClearProfile=Sync a new device…
+syncConfirm=Confirm Sync Code
 syncCreate=Set up Sync
 syncData=Sync Data
 syncDataMessage=Sync the following data from this device:
 syncDeviceLastActive=Last active
+syncDeviceLoading=Loading devices. Please wait...
+syncDeviceListLoaded=Great! Your devices are now in sync
+syncDeviceListLoading=Updating devices list
 syncDeviceName=Device name
 syncDeviceNameInput=Enter an optional name for this device:
 syncDevices=Devices
+syncDevicesDescription=Your synced devices are listed below. You can add additional devices now or at any time in the future.
+syncDevicesInSyncChain=Devices in your sync chain:
 syncEnable=Sync this device
-syncEnterPassphrase=Enter your Sync code words:
+syncEnterPassphrase=Go to Brave Settings > Sync > Display sync code.
 syncHidePassphrase=Hide code words
 syncHideQR=Hide QR code
 syncHistory=Browsing history
+syncNewDeviceTitle=Let's sync a new device with "{{device}}"
 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.
 syncNewDevice3=If asks you to enter code words, type in the words below.
-syncNewDevice=Sync a new device…
+syncNewDeviceButton=Sync a new device…
+syncNoCamera=I don't have a camera
+syncPhoneOrTablet=Phone/Tablet
 syncQRImg.title=Brave sync QR code
 syncReset=Reset Sync
 syncResetButton=Reset Sync…
@@ -354,10 +370,15 @@ syncResetMessageOtherDevices=If you've synced other devices, they will continue
 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.
 syncRetryButton=Try again
+syncScan=Scan the code
+syncWelcome1=Brave Sync allows you to sync bookmarks, tabs, history and other data privately between your Brave Browsers on your various devices.
+syncWelcome2=When you start a new sync chain, a new sync code is created. You will use this same code across your devices to link them together.
+syncScanDescription=On your phone or tablet, go to: Brave Settings > Sync > Scan Sync Code
+syncScanCamera=Then scan this code with your device camera.
 syncShowPassphrase=Show secret code words. (Do not share!)
 syncShowQR=Show secret QR code. (Do not share!)
 syncSiteSettings=Saved site settings
-syncStart=I am new to Sync
+syncStart=Start a new sync chain
 syncTitle=Brave Sync
 syncTitleMessage=Sync encrypted browser data between your devices securely and privately using Brave Sync.
 tabCloseAction=When closing an active tab:
@@ -393,3 +414,4 @@ visits=Visits
 wideURLbar=Use wide URL bar
 widevine=Run Google Widevine
 widevineSection=Google Widevine Support
+wordCount=word count:

app/renderer/components/common/modalOverlay.js

@@ -52,6 +52,7 @@ class ModalOverlay extends ImmutableComponent {
     var close = null
     var title = null
     var subTitle = null
+    var titleImage = null
 
     const customDialogClassesStr = this.props.customDialogClasses ? this.props.customDialogClasses : ''
     const customDialogHeaderClassesStr = this.props.customDialogHeaderClasses ? this.props.customDialogHeaderClasses : ''
@@ -66,11 +67,15 @@ class ModalOverlay extends ImmutableComponent {
           testId='modalCloseButton'
           onClick={this.props.onHide}
         /> : null)
+      titleImage = (this.props.titleImage
+        ? <img className={css(styles.dialog__header__image)}
+          src={this.props.titleImage} /> : null)
       title = (this.props.title
         ? <div className={cx({
           [css(styles.dialog__header__title)]: true,
           [customTitleClassesStr]: true
         })} data-l10n-id={this.props.title}
+          data-l10n-args={JSON.stringify(this.props.titleArgs)}
         /> : null)
       subTitle = (this.props.subTitle
         ? <aside className={css(styles.dialog__header__subTitle)}>
@@ -88,13 +93,17 @@ class ModalOverlay extends ImmutableComponent {
 
     return <section className={cx({
       [css(styles.dialog)]: true,
+      [css(styles.dialog_gray)]: this.props.grayOverlay,
       [customDialogClassesStr]: true
     })}>
 
       <header className={cx({
         [css(styles.dialog__header)]: true,
-        [customDialogHeaderClassesStr]: true
-      })}>
+        [customDialogHeaderClassesStr]: true,
+        [css(styles.dialog__header_white)]: this.props.grayOverlay
+      })}
+        style={this.props.titleImage ? {justifyContent: 'start'} : null}>
+        {titleImage}
         {title}
         {subTitle}
         {close}
@@ -106,6 +115,7 @@ class ModalOverlay extends ImmutableComponent {
       })}>
         <div className={cx({
           [css(styles.dialog__body)]: true,
+          [css(styles.dialog__body_gray)]: this.props.grayOverlay,
           [customDialogBodyClassesStr]: true
         })}>
           {this.props.content}
@@ -167,12 +177,25 @@ const styles = StyleSheet.create({
     zIndex: globalStyles.zindex.zindexDialogs
   },
 
+  dialog_gray: {
+    background: '#eee'
+  },
+
   dialog__header: {
     padding: `25px ${globalStyles.spacing.modalDialogPaddingHorizontal}`,
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center'
   },
+
+  dialog__header_white: {
+    padding: '25px 50px 0px'
+  },
+
+  dialog__header__image: {
+    marginRight: '20px'
+  },
+
   dialog__header__close: {
     display: 'inline-block',
     position: 'absolute',
@@ -221,6 +244,10 @@ const styles = StyleSheet.create({
     padding: `${globalStyles.spacing.dialogInsideMargin} ${globalStyles.spacing.modalDialogPaddingHorizontal}`
   },
 
+  dialog__body_gray: {
+    background: '#eee'
+  },
+
   dialog__footer: {
     padding: '20px',
     paddingLeft: globalStyles.spacing.modalDialogPaddingHorizontal,