address new design spec

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

@@ -271,3 +271,5 @@ dappDismiss=No thanks
 dappEnableExtension=Install MetaMask
 windowCaptionButtonMinimize=Minimize
 yes=Yes
+thisDevice=this device
+invalidCode=Invalid sync code. Please try again.

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

@@ -326,61 +326,66 @@ submitFeedback=Help Center
 swipeNavigationDistance=Swipe Navigation Distance
 switchToNewTabs=Switch to new tabs immediately
 sync=Sync
-syncAddCode=Enter a sync chain code
+syncAddCode=Enter a sync code
 syncAddButton=Add
-syncBetaMessage=Note: Sync for iOS and Android is still being completed and will be released soon.
+syncAddDevice=Add device
 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:
+syncChainCodeComputer=Now, using Brave on your computer, enter this code:
+syncChainCodeMobile=Now, using Brave on your mobile device, enter this code:
+syncChainCodeDescription=Go to: Brave Settings > Sync and click "Enter a Sync Chain 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
+syncData=Data to Sync from {{device}}
 syncDataMessage=Sync the following data from this device:
+syncDeviceAddedOn=Added On
 syncDeviceLastActive=Last active
 syncDeviceLoading=Loading devices. Please wait...
 syncDeviceListLoaded=Great! Your devices are now in sync
 syncDeviceListLoading=Updating devices list
-syncDeviceName=Device name
+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=Go to Brave Settings > Sync > Display sync code.
+thisDevice=(this device)
+syncDevicesInSyncChain=Devices in your sync chain
+syncEnterPassphrase=Go to: Brave Settings > Sync > Display sync code
 syncHidePassphrase=Hide code words
 syncHideQR=Hide QR code
 syncHistory=Browsing history
+syncLeaveChainButton=Leave Sync Chain
+syncLookingForDevice=Looking for device
 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.
 syncNewDeviceButton=Sync a new device…
-syncNoCamera=I don't have a camera
 syncPhoneOrTablet=Phone/Tablet
+syncQRCode=QR Code
 syncQRImg.title=Brave sync QR code
-syncReset=Reset Sync
-syncResetButton=Reset Sync…
+syncRemove=Remove
+syncRemoveDeviceModal=Remove "{{device}}" from this sync chain?
+syncRemoveDevice.title=Remove this device
+syncRemoveActiveDeviceWarning1=Local device data will remain intact on all devices. Other devices in this sync chain will remain sync'd.
+syncRemoveActiveDeviceWarning2=To join a sync chain again, choose "Enter a sync chain code".
+syncRemoveOtherDeviceWarning= Note: Removing this device from this sync chain does not clear previously sync'd data from the device.
 syncResetDataDisabled=This feature is only available when Sync is enabled.
-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.
-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.
+syncScanMobile=Now, using Brave on your mobile device, scan this code
+syncScanComputer=Now, using Brave on your computer device, scan this code
+syncScanDescription=Go to: Brave Settings > Sync > Scan Sync Code
 syncShowPassphrase=Show secret code words. (Do not share!)
 syncShowQR=Show secret QR code. (Do not share!)
 syncSiteSettings=Saved site settings
 syncStart=Start a new sync chain
 syncTitle=Brave Sync
-syncTitleMessage=Sync encrypted browser data between your devices securely and privately using Brave Sync.
+syncTypeSecurityCode=Enter code words instead...
+syncScanQRCode=Use my camera instead...
+syncViewCode=View sync code
+syncWelcome1=Brave Sync allows you to sync bookmarks 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.
+syncWordCode=Word Code
 tabCloseAction=When closing an active tab:
 tabCloseActionLastActive=Select the last viewed tab
 tabCloseActionNext=Select the next tab

app/locale.js

@@ -256,6 +256,9 @@ var rendererIdentifiers = function () {
     'noDownloads',
     'torrentDesc',
     'multiSelectionBookmarks',
+    // global sync
+    'thisDevice',
+    'invalidCode',
     // Caption buttons in titlebar (min/max/close - Windows only)
     'windowCaptionButtonMinimize',
     'windowCaptionButtonMaximize',

app/renderer/components/common/clipboardButton.js

@@ -50,6 +50,7 @@ class ClipboardButton extends React.Component {
         data-l10n-id='copied'
       />
       <BrowserButton
+        disabled={this.props.disabled}
         iconClass={globalStyles.appIcons.clipboard}
         custom={styles.clipboardButton__browserButton}
         l10nId={this.props.dataL10nId ? this.props.dataL10nId : 'copyToClipboard'}

app/renderer/components/common/modalOverlay.js

@@ -93,14 +93,14 @@ class ModalOverlay extends ImmutableComponent {
 
     return <section className={cx({
       [css(styles.dialog)]: true,
-      [css(styles.dialog_gray)]: this.props.grayOverlay,
+      [css(styles.dialog_white)]: this.props.whiteOverlay,
       [customDialogClassesStr]: true
     })}>
 
       <header className={cx({
         [css(styles.dialog__header)]: true,
         [customDialogHeaderClassesStr]: true,
-        [css(styles.dialog__header_white)]: this.props.grayOverlay
+        [css(styles.dialog__header_white)]: this.props.whiteOverlay
       })}
         style={this.props.titleImage ? {justifyContent: 'start'} : null}>
         {titleImage}
@@ -115,7 +115,7 @@ class ModalOverlay extends ImmutableComponent {
       })}>
         <div className={cx({
           [css(styles.dialog__body)]: true,
-          [css(styles.dialog__body_gray)]: this.props.grayOverlay,
+          [css(styles.dialog__body_white)]: this.props.whiteOverlay,
           [customDialogBodyClassesStr]: true
         })}>
           {this.props.content}
@@ -177,8 +177,8 @@ const styles = StyleSheet.create({
     zIndex: globalStyles.zindex.zindexDialogs
   },
 
-  dialog_gray: {
-    background: '#eee'
+  dialog_white: {
+    background: '#fff'
   },
 
   dialog__header: {
@@ -189,7 +189,8 @@ const styles = StyleSheet.create({
   },
 
   dialog__header_white: {
-    padding: '25px 50px 0px'
+    padding: '25px 50px 0px',
+    background: '#fff'
   },
 
   dialog__header__image: {
@@ -244,8 +245,8 @@ const styles = StyleSheet.create({
     padding: `${globalStyles.spacing.dialogInsideMargin} ${globalStyles.spacing.modalDialogPaddingHorizontal}`
   },
 
-  dialog__body_gray: {
-    background: '#eee'
+  dialog__body_white: {
+    background: '#fff'
   },
 
   dialog__footer: {