From b098619e34708a7926334048e7a31a8e3b275bd7 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Mon, 1 May 2017 11:32:00 +0900
Subject: [PATCH] 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
---
 .../locales/en-US/preferences.properties      |   9 +-
 .../preferences/payment/advancedSettings.js   |   2 +-
 .../preferences/payment/enabledContent.js     |   6 +-
 .../preferences/payment/ledgerBackup.js       |   2 +-
 .../preferences/payment/ledgerRecovery.js     |   2 +-
 .../components/preferences/paymentsTab.js     |  15 +-
 .../components/preferences/syncTab.js         | 493 ++++++++++++++----
 .../components/styles/commonStyles.js         |  34 ++
 app/renderer/components/styles/global.js      |  14 +-
 app/renderer/components/styles/payment.js     |  18 +-
 js/about/newprivatetab.js                     |   2 +-
 js/components/sortableTable.js                |  10 +-
 less/about/preferences.less                   |  96 +---
 less/button.less                              |  17 +-
 less/forms.less                               |  16 -
 less/variables.less                           |   2 +
 test/misc-components/syncTest.js              |  26 +-
 17 files changed, 494 insertions(+), 270 deletions(-)

diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
index 015fd191dd5..4b6b0cffe6d 100644
--- 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
index a364c0192d8..1102ec16eb9 100644
--- 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
index b8300a243b2..0866a6661f6 100644
--- 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
index c8e8686ddb8..197a2a27868 100644
--- 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
index 1ef9e6e1f55..37876acbf43 100644
--- 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
index ed5d1f53b07..f42380bee3f 100644
--- 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',
 
diff --git a/app/renderer/components/preferences/syncTab.js b/app/renderer/components/preferences/syncTab.js
index b4c20d7d130..fd2f1dd5095 100644
--- a/app/renderer/components/preferences/syncTab.js
+++ b/app/renderer/components/preferences/syncTab.js
@@ -25,6 +25,12 @@ const aboutActions = require('../../../../js/about/aboutActions')
 const getSetting = require('../../../../js/settings').getSetting
 const settings = require('../../../../js/constants/settings')
 
+const cx = require('../../../../js/lib/classSet')
+
+const {StyleSheet, css} = require('aphrodite/no-important')
+const commonStyles = require('../styles/commonStyles')
+const globalStyles = require('../styles/global')
+
 class SyncTab extends ImmutableComponent {
   constructor () {
     super()
@@ -48,24 +54,36 @@ class SyncTab extends ImmutableComponent {
   }
 
   get errorContent () {
-    return <div className='errorContainer'>
-      <div className='setupError'>{this.setupError}</div>
-      <Button l10nId='syncRetryButton' className='primaryButton' onClick={this.retry.bind(this)} />
-    </div>
+    return <section className={css(styles.settingsListContainerMargin__bottom)}>
+      <div className={css(styles.errorContent__setupError)} data-test-id='syncSetupError'>{this.setupError}</div>
+      <Button className='primaryButton'
+        l10nId='syncRetryButton'
+        testId='syncRetryButton'
+        onClick={this.retry.bind(this)}
+      />
+    </section>
   }
 
   get clearDataContent () {
-    return <div className='syncClearData'>
+    return <section className={css(styles.settingsListContainerMargin__bottom)}>
       <DefaultSectionTitle data-l10n-id='syncClearData' />
       {
         this.enabled
-          ? <button data-l10n-id='syncResetButton' className='linkButton' onClick={this.props.showOverlay.bind(this, 'syncReset')} />
+          ? <Button className='primaryButton'
+            l10nId='syncResetButton'
+            testId='clearDataButton'
+            onClick={this.props.showOverlay.bind(this, 'syncReset')}
+          />
           : <div>
-            <button disabled data-l10n-id='syncResetButton' className='linkButton' />
+            <Button className='primaryButton'
+              disabled
+              l10nId='syncResetButton'
+              testId='clearDataButton'
+            />
             <div data-l10n-id='syncResetDataDisabled' className='settingsListTitle' />
           </div>
       }
-    </div>
+    </section>
   }
 
   get setupContent () {
@@ -73,27 +91,43 @@ class SyncTab extends ImmutableComponent {
       return null
     }
     // displayed before a sync userId has been created
-    return <div className='setupContent'>
-      <Button l10nId='syncStart' className='primaryButton' onClick={this.props.showOverlay.bind(this, 'syncStart')} />
-      <Button l10nId='syncAdd' className='whiteButton' onClick={this.props.showOverlay.bind(this, 'syncAdd')} />
+    return <div className={css(styles.setupContent)}>
+      <Button className='primaryButton'
+        l10nId='syncStart'
+        testId='syncStartButton'
+        onClick={this.props.showOverlay.bind(this, 'syncStart')}
+      />
+      <Button className='whiteButton'
+        l10nId='syncAdd'
+        testId='syncAddButton'
+        onClick={this.props.showOverlay.bind(this, 'syncAdd')}
+      />
     </div>
   }
 
   get postSetupContent () {
     return <SettingsList>
-      <div className='device'>
-        <SettingCheckbox dataL10nId='syncEnable' id='syncEnableSwitch' prefKey={settings.SYNC_ENABLED} settings={this.props.settings} onChangeSetting={this.toggleSync} />
-        <div>
-          <span className='syncDeviceLabel' data-l10n-id='syncDeviceName' />
-          <div className='deviceName'>
+      <div className={css(styles.device__box)}>
+        <SettingCheckbox
+          className={css(styles.device__item)}
+          dataL10nId='syncEnable'
+          prefKey={settings.SYNC_ENABLED}
+          settings={this.props.settings}
+          onChangeSetting={this.toggleSync}
+        />
+        <div className={css(styles.device__item)}>
+          <span className={css(styles.device__syncDeviceLabel)} data-l10n-id='syncDeviceName' />
+          <div className={css(styles.device__deviceName)}>
             {getSetting(settings.SYNC_DEVICE_NAME, this.props.settings)}
           </div>
         </div>
       </div>
       {this.enabled ? this.devicesContent : null}
-      <SettingItem>
-        <Button l10nId='syncNewDevice' className='primaryButton' onClick={this.props.showOverlay.bind(this, 'syncNewDevice')} />
-      </SettingItem>
+      <Button className='primaryButton'
+        l10nId='syncNewDevice'
+        testId='syncNewDeviceButton'
+        onClick={this.props.showOverlay.bind(this, 'syncNewDevice')}
+      />
     </SettingsList>
   }
 
@@ -117,14 +151,15 @@ class SyncTab extends ImmutableComponent {
   }
 
   get devicesContent () {
-    return <div className='devices'>
+    return <div className={css(styles.settingsListContainerMargin__top)}>
       <DefaultSectionTitle data-l10n-id='syncDevices' data-test-id='syncDevices' />
       <SortableTable
         headings={['id', 'syncDeviceName', 'syncDeviceLastActive']}
         defaultHeading='syncDeviceLastActive'
         defaultHeadingSortOrder='desc'
         rows={this.devicesTableRows}
-        tableClassNames='devicesList'
+        customCellClasses={css(styles.devices__devicesListCell)}
+        tableClassNames={css(styles.devices__devicesList)}
       />
     </div>
   }
@@ -135,10 +170,36 @@ class SyncTab extends ImmutableComponent {
     }
     return this.props.syncQRVisible
       ? <div>
-        <div><Button l10nId='syncHideQR' className='whiteButton wideButton syncToggleButton' onClick={this.props.hideQR} /></div>
-        <img id='syncQR' title='Brave sync QR code' src={this.props.syncData.get('seedQr')} />
+        <ul className={css(styles.syncOverlayBody__listWrapper)}>
+          <li className={css(
+            styles.syncOverlayBody__listItem,
+            commonStyles.noMarginLeft
+          )}>
+            <Button className='whiteButton'
+              l10nId='syncHideQR'
+              testId='syncHideQRButton'
+              onClick={this.props.hideQR}
+            />
+          </li>
+        </ul>
+        <img className={css(styles.syncOverlayBody__syncQRImg)}
+          src={this.props.syncData.get('seedQr')}
+          data-l10n-id='syncQRImg'
+          data-test-id='syncQRImg'
+        />
       </div>
-    : <Button l10nId='syncShowQR' className='whiteButton syncToggleButton' onClick={this.props.showQR} />
+    : <ul className={css(styles.syncOverlayBody__listWrapper)}>
+      <li className={css(
+        styles.syncOverlayBody__listItem,
+        commonStyles.noMarginLeft
+      )}>
+        <Button className='whiteButton'
+          l10nId='syncShowQR'
+          testId='syncShowQRButton'
+          onClick={this.props.showQR}
+        />
+      </li>
+    </ul>
   }
 
   get passphraseContent () {
@@ -154,24 +215,65 @@ class SyncTab extends ImmutableComponent {
       passphrase.slice(12, 16).join(' ')
     ]
     return this.props.syncPassphraseVisible
-      ? <div>
-        <Button l10nId='syncHidePassphrase' className='whiteButton wideButton syncToggleButton' onClick={this.props.hidePassphrase} />
-        <pre id='syncPassphrase'>{words.join('\n')}</pre>
-      </div>
-      : <Button l10nId='syncShowPassphrase' className='whiteButton syncToggleButton' onClick={this.props.showPassphrase} />
+      ? <ul className={css(styles.syncOverlayBody__listWrapper)}>
+        <li className={css(
+          styles.syncOverlayBody__listItem,
+          commonStyles.noMarginBottom,
+          commonStyles.noMarginLeft
+        )}>
+          <Button className='whiteButton'
+            l10nId='syncHidePassphrase'
+            testId='syncHidePassphraseButton'
+            onClick={this.props.hidePassphrase}
+          />
+          <pre data-test-id='syncPassphrase'
+            className={css(
+              styles.passphrase,
+              styles.listItem__passphrase,
+              commonStyles.noMarginBottom
+            )}>{words.join('\n')}</pre>
+        </li>
+      </ul>
+      : <ul className={css(styles.syncOverlayBody__listWrapper)}>
+        <li className={css(
+          styles.syncOverlayBody__listItem,
+          commonStyles.noMarginBottom,
+          commonStyles.noMarginLeft
+        )}>
+          <Button className='whiteButton'
+            l10nId='syncShowPassphrase'
+            testId='syncShowPassphraseButton'
+            onClick={this.props.showPassphrase}
+          />
+        </li>
+      </ul>
   }
 
   get overlayContent () {
     return <div className='syncOverlay'>
-      <div>
+      <div className={css(styles.syncOverlayBody__wrapper)}>
         <ol>
-          <li data-l10n-id='syncNewDevice1' />
-          <li data-l10n-id='syncNewDevice2' />
-          {this.qrcodeContent}
-          <li data-l10n-id='syncNewDevice3' />
-          {this.passphraseContent}
+          <li className={css(styles.syncOverlayBody__listItem, commonStyles.noMarginTop)} data-l10n-id='syncNewDevice1' />
+          <li className={css(styles.syncOverlayBody__listItem)}>
+            <div data-l10n-id='syncNewDevice2' />
+            {this.qrcodeContent}
+          </li>
+          <li className={css(styles.syncOverlayBody__listItem)}>
+            <div data-l10n-id='syncNewDevice3' />
+            {this.passphraseContent}
+          </li>
         </ol>
       </div>
+      <div className={css(
+        commonStyles.modalOverlay__footer,
+        commonStyles.modalOverlay__footerButton
+      )}>
+        <Button className='whiteButton'
+          l10nId='done'
+          testId='doneButton'
+          onClick={this.props.hideOverlay.bind(this, 'syncNewDevice')}
+        />
+      </div>
     </div>
   }
 
@@ -189,62 +291,111 @@ class SyncTab extends ImmutableComponent {
 
   get deviceNameInputContent () {
     return <SettingItem>
-      <span data-l10n-id='syncDeviceNameInput' />
-      <input className='deviceNameInput formControl' spellCheck='false'
-        ref={(node) => { this.deviceNameInput = node }}
-        placeholder={this.defaultDeviceName} />
+      <div className={css(styles.syncOverlayBody__label)} data-l10n-id='syncDeviceNameInput' />
+      <div>
+        <input className={css(
+          commonStyles.formControl,
+          commonStyles.textbox,
+          commonStyles.textbox__outlineable,
+          commonStyles.textbox__isSettings
+        )}
+          spellCheck='false'
+          ref={(node) => { this.deviceNameInput = node }}
+          placeholder={this.defaultDeviceName} />
+      </div>
     </SettingItem>
   }
 
-  get addOverlayContent () {
-    return <div className='syncOverlay'>
-      <SettingsList>
-        <SettingItem>
-          <span data-l10n-id='syncEnterPassphrase' />
-          <textarea spellCheck='false'
-            ref={(node) => { this.passphraseInput = node }}
-            onChange={this.enableRestore}
-            className='form-control' />
-        </SettingItem>
+  get startOverlayContent () {
+    return <div className={css(styles.syncOverlayBody__wrapper)}>
+      <div className={css(styles.syncOverlayBody__formBottomMargin)}>
         {this.deviceNameInputContent}
-      </SettingsList>
+      </div>
     </div>
   }
 
-  get addOverlayFooter () {
-    return <Button l10nId='syncCreate' className='primaryButton'
-      onClick={this.onRestore}
-      disabled={this.props.syncRestoreEnabled === false} />
+  get startOverlayFooter () {
+    return <div className={css(
+      commonStyles.modalOverlay__footer,
+      commonStyles.modalOverlay__footerButton
+    )}>
+      <Button className='primaryButton'
+        l10nId='syncCreate'
+        testId='syncCreateButton'
+        onClick={this.onSetup}
+      />
+    </div>
   }
 
-  get resetOverlayContent () {
-    return <div className='syncOverlay'>
-      <ul>
-        <li data-l10n-id='syncResetMessageWhat' />
-        <li data-l10n-id='syncResetMessageWhatNot' />
-        <li data-l10n-id='syncResetMessageOtherDevices' />
-      </ul>
+  get addOverlayContent () {
+    return <div className={css(styles.syncOverlayBody__wrapper)}>
+      <div className={css(styles.syncOverlayBody__label)} data-l10n-id='syncEnterPassphrase' />
+      <div className={css(styles.syncOverlayBody__form)}>
+        <textarea className={css(
+          commonStyles.formControl,
+          commonStyles.textArea,
+          styles.passphrase,
+          styles.textArea__passphrase
+        )}
+          spellCheck='false'
+          ref={(node) => { this.passphraseInput = node }}
+          onChange={this.enableRestore}
+        />
+      </div>
+      <div className={css(styles.syncOverlayBody__formBottomMargin)}>
+        {this.deviceNameInputContent}
+      </div>
     </div>
   }
 
-  get resetOverlayFooter () {
-    return <div className='panel'>
-      <Button l10nId='syncReset' className='primaryButton' onClick={this.onReset} />
-      <Button l10nId='cancel' className='whiteButton' onClick={this.props.hideOverlay.bind(this, 'syncReset')} />
+  get addOverlayFooter () {
+    return <div className={css(
+      commonStyles.modalOverlay__footer,
+      commonStyles.modalOverlay__footerButton
+    )}>
+      <Button className='primaryButton'
+        l10nId='syncCreate'
+        testId='syncCreateButton'
+        onClick={this.onRestore}
+        disabled={this.props.syncRestoreEnabled === false}
+      />
     </div>
   }
 
-  get startOverlayContent () {
-    return <div className='syncOverlay'>
-      <SettingsList>
-        {this.deviceNameInputContent}
-      </SettingsList>
+  get resetOverlayContent () {
+    return <div className={css(styles.syncOverlayBody__wrapper)}>
+      <ul>
+        <li className={css(
+          styles.syncOverlayBody__listItem,
+          commonStyles.noMarginTop
+        )} data-l10n-id='syncResetMessageWhat' />
+        <li className={css(styles.syncOverlayBody__listItem)} data-l10n-id='syncResetMessageWhatNot' />
+        <li className={css(
+          styles.syncOverlayBody__listItem,
+          commonStyles.noMarginBottom
+        )} data-l10n-id='syncResetMessageOtherDevices' />
+      </ul>
     </div>
   }
 
-  get startOverlayFooter () {
-    return <div className='panel'>
-      <Button l10nId='syncCreate' className='primaryButton' onClick={this.onSetup} />
+  get resetOverlayFooter () {
+    return <div className={css(
+      commonStyles.modalOverlay__footer,
+      commonStyles.modalOverlay__footerButton
+    )}>
+      <Button className='whiteButton'
+        l10nId='cancel'
+        testId='cancelButton'
+        onClick={this.props.hideOverlay.bind(this, 'syncReset')}
+      />
+      <Button className={cx({
+        primaryButton: true,
+        [css(styles.marginButton)]: true
+      })}
+        l10nId='syncReset'
+        testId='syncResetButton'
+        onClick={this.onReset}
+      />
     </div>
   }
 
@@ -307,52 +458,99 @@ class SyncTab extends ImmutableComponent {
     return <div className='syncContainer'>
       {
       this.isSetup && this.props.syncNewDeviceOverlayVisible
-        ? <ModalOverlay title={'syncNewDevice'} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'syncNewDevice')} />
+        ? <ModalOverlay
+          title={'syncNewDevice'}
+          customDialogClasses={css(commonStyles.modalOverlay__dialog)}
+          customTitleClasses={css(commonStyles.modalOverlay__title)}
+          content={this.overlayContent}
+          onHide={this.props.hideOverlay.bind(this, 'syncNewDevice')} />
         : null
       }
       {
       !this.isSetup && this.props.syncStartOverlayVisible
-        ? <ModalOverlay title={'syncStart'} content={this.startOverlayContent} footer={this.startOverlayFooter} onHide={this.props.hideOverlay.bind(this, 'syncStart')} />
+        ? <ModalOverlay
+          title={'syncStart'}
+          customDialogClasses={css(commonStyles.modalOverlay__dialog)}
+          customTitleClasses={css(commonStyles.modalOverlay__title)}
+          content={this.startOverlayContent}
+          footer={this.startOverlayFooter}
+          onHide={this.props.hideOverlay.bind(this, 'syncStart')} />
         : null
       }
       {
       !this.isSetup && this.props.syncAddOverlayVisible
-        ? <ModalOverlay title={'syncAdd'} content={this.addOverlayContent} footer={this.addOverlayFooter} onHide={this.props.hideOverlay.bind(this, 'syncAdd')} />
+        ? <ModalOverlay
+          title={'syncAdd'}
+          customDialogClasses={css(commonStyles.modalOverlay__dialog)}
+          customTitleClasses={css(commonStyles.modalOverlay__title)}
+          content={this.addOverlayContent}
+          footer={this.addOverlayFooter}
+          onHide={this.props.hideOverlay.bind(this, 'syncAdd')} />
         : null
       }
       {
       this.isSetup && this.props.syncResetOverlayVisible
-        ? <ModalOverlay title={'syncReset'} content={this.resetOverlayContent} footer={this.resetOverlayFooter} onHide={this.props.hideOverlay.bind(this, 'syncReset')} />
+        ? <ModalOverlay
+          title={'syncReset'}
+          customDialogClasses={css(commonStyles.modalOverlay__dialog)}
+          customTitleClasses={css(commonStyles.modalOverlay__title)}
+          content={this.resetOverlayContent}
+          footer={this.resetOverlayFooter}
+          onHide={this.props.hideOverlay.bind(this, 'syncReset')} />
         : null
       }
-      <SectionTitleLabelWrapper>
-        <AboutPageSectionTitle data-l10n-id='syncTitle' />
-        <SectionLabelTitle>beta</SectionLabelTitle>
-      </SectionTitleLabelWrapper>
-      <div className='settingsListContainer'>
-        <span className='settingsListTitle syncTitleMessage' data-l10n-id='syncTitleMessage' />
-        <a href='https://github.com/brave/sync/wiki/Design' target='_blank'>
-          <span className='fa fa-question-circle' />
-        </a>
-        <div className='settingsListTitle syncBetaMessage' data-l10n-id='syncBetaMessage' />
-        {
-          this.setupError
-          ? this.errorContent
-          : this.isSetup
-            ? this.postSetupContent
-            : this.setupContent
-        }
-      </div>
+      <section className={css(styles.settingsListContainerMargin__bottom)}>
+        <SectionTitleLabelWrapper>
+          <AboutPageSectionTitle data-l10n-id='syncTitle' />
+          <SectionLabelTitle>beta</SectionLabelTitle>
+        </SectionTitleLabelWrapper>
+
+        <div className={css(styles.settingsListContainerMargin__bottom)}>
+          <span className='settingsListTitle' data-l10n-id='syncTitleMessage' />
+          <a href='https://github.com/brave/sync/wiki/Design' target='_blank'>
+            <span className={cx({
+              fa: true,
+              'fa-question-circle': true
+            })} />
+          </a>
+          <div className={cx({
+            settingsListTitle: true,
+            [css(styles.subText)]: true
+          })} data-l10n-id='syncBetaMessage' />
+          {
+            this.setupError
+            ? this.errorContent
+            : this.isSetup
+              ? this.postSetupContent
+              : this.setupContent
+          }
+        </div>
+      </section>
       {
         this.isSetup && this.enabled
-          ? <div id='syncData'>
+          ? <section data-test-id='syncDataSection' className={css(styles.settingsListContainerMargin__bottom)}>
             <DefaultSectionTitle data-l10n-id='syncData' />
             <SettingsList dataL10nId='syncDataMessage'>
-              <SettingCheckbox dataL10nId='syncBookmarks' prefKey={settings.SYNC_TYPE_BOOKMARK} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-              <SettingCheckbox dataL10nId='syncSiteSettings' prefKey={settings.SYNC_TYPE_SITE_SETTING} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-              <SettingCheckbox dataL10nId='syncHistory' prefKey={settings.SYNC_TYPE_HISTORY} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+              <SettingCheckbox
+                dataL10nId='syncBookmarks'
+                prefKey={settings.SYNC_TYPE_BOOKMARK}
+                settings={this.props.settings}
+                onChangeSetting={this.props.onChangeSetting}
+              />
+              <SettingCheckbox
+                dataL10nId='syncSiteSettings'
+                prefKey={settings.SYNC_TYPE_SITE_SETTING}
+                settings={this.props.settings}
+                onChangeSetting={this.props.onChangeSetting}
+              />
+              <SettingCheckbox
+                dataL10nId='syncHistory'
+                prefKey={settings.SYNC_TYPE_HISTORY}
+                settings={this.props.settings}
+                onChangeSetting={this.props.onChangeSetting}
+              />
             </SettingsList>
-          </div>
+          </section>
           : null
       }
       {
@@ -364,4 +562,99 @@ class SyncTab extends ImmutableComponent {
   }
 }
 
+const styles = StyleSheet.create({
+  marginButton: {
+    marginLeft: globalStyles.spacing.overlayButtonMargin
+  },
+  settingsListContainerMargin__top: {
+    marginTop: globalStyles.spacing.settingsListContainerMargin
+  },
+  settingsListContainerMargin__bottom: {
+    marginBottom: globalStyles.spacing.settingsListContainerMargin
+  },
+  passphrase: {
+    font: '18px monospace'
+  },
+  subText: {
+    color: globalStyles.color.gray,
+    fontSize: '.9rem',
+    marginTop: '.5rem'
+  },
+
+  setupContent: {
+    marginTop: globalStyles.spacing.dialogInsideMargin
+  },
+  errorContent__setupError: {
+    color: globalStyles.color.braveDarkOrange,
+    fontWeight: 'bold',
+    margin: `calc(${globalStyles.spacing.panelPadding} / 2) 0 ${globalStyles.spacing.dialogInsideMargin}`
+  },
+
+  device__box: {
+    display: 'flex',
+    alignItems: 'center',
+    background: globalStyles.color.lightGray,
+    borderRadius: globalStyles.radius.borderRadiusUIbox,
+    color: globalStyles.color.mediumGray,
+    margin: `${globalStyles.spacing.panelMargin} 0`,
+    padding: globalStyles.spacing.panelPadding,
+    width: '500px'
+  },
+  device__item: {
+    flex: 1
+  },
+  device__syncDeviceLabel: {
+    fontSize: '.9rem'
+  },
+  device__deviceName: {
+    marginTop: `calc(${globalStyles.spacing.panelPadding} / 2)`
+  },
+
+  devices__devicesList: {
+    // TODO: refactor sortableTable to remove !important
+    marginBottom: `${globalStyles.spacing.dialogInsideMargin} !important`,
+    width: '34em !important'
+  },
+  devices__devicesListCell: {
+    padding: '4px 8px'
+  },
+
+  textArea__passphrase: {
+    width: '80%',
+    height: '100px'
+  },
+
+  listItem__passphrase: {
+    margin: `${globalStyles.spacing.dialogInsideMargin} 0`,
+    color: globalStyles.color.braveDarkOrange
+  },
+
+  syncOverlayBody__wrapper: {
+    padding: `${globalStyles.spacing.dialogInsideMargin} 50px`,
+    background: '#fff'
+  },
+  syncOverlayBody__listWrapper: {
+    listStyle: 'none'
+  },
+  syncOverlayBody__listItem: {
+    margin: globalStyles.spacing.dialogInsideMargin
+  },
+
+  syncOverlayBody__syncQRImg: {
+    position: 'relative',
+    right: globalStyles.spacing.dialogInsideMargin
+  },
+  syncOverlayBody__label: {
+    // TODO: refactor preferences.less
+    // See: .settingsList .settingItem > *:not(.switchControl)
+    marginBottom: `${globalStyles.spacing.modalPanelHeaderMarginBottom} !important`
+  },
+  syncOverlayBody__form: {
+    marginBottom: globalStyles.spacing.settingsListContainerMargin
+  },
+  syncOverlayBody__formBottomMargin: {
+    marginBottom: globalStyles.spacing.dialogInsideMargin
+  }
+})
+
 module.exports = SyncTab
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 2f720accfd8..f8793b5e53f 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -34,6 +34,17 @@ const styles = StyleSheet.create({
       outlineWidth: '1px'
     }
   },
+  textbox__isSettings: {
+    width: '280px'
+  },
+
+  // TextArea -- copied from textbox.js
+  textArea: {
+    padding: '5px'
+  },
+  textArea__isDefault: {
+    fontSize: globalStyles.spacing.textAreaFontSize
+  },
 
   // Dialogs
   flyoutDialog: {
@@ -52,6 +63,29 @@ const styles = StyleSheet.create({
     maxHeight: `calc(80vh - ${globalStyles.spacing.downloadsBarHeight})`
   },
 
+  // modalOverlay
+  // TODO: refactor modalOverlay
+  modalOverlay__dialog: {
+    // TODO: refactor preferences.less to remove !important
+    background: `linear-gradient(${globalStyles.color.modalVeryLightGray}, ${globalStyles.color.modalLightGray}) !important`,
+    borderRadius: `${globalStyles.radius.borderRadiusModal} !important`
+  },
+  modalOverlay__title: {
+    marginBottom: 0,
+
+    // TODO: refactor modalOverlay.less to remove !important
+    padding: '25px 0 !important'
+  },
+
+  modalOverlay__footer: {
+    padding: '20px'
+  },
+  modalOverlay__footerButton: {
+    display: 'flex',
+    flexFlow: 'nowrap',
+    justifyContent: 'flex-end'
+  },
+
   // itemList.less
   listItem: {
     cursor: 'default',
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 4acee7ec816..775073f9af2 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -58,6 +58,8 @@ const globalStyles = {
     gray: 'rgb(153, 153, 153)',
     mediumGray: 'rgb(101, 101, 101)',
     darkGray: 'rgb(68, 68, 68)',
+    modalVeryLightGray: 'rgb(247, 247, 247)',
+    modalLightGray: 'rgb(231, 231, 231)',
     white25: 'rgba(255, 255, 255, 0.25)',
     white50: 'rgba(255, 255, 255, 0.5)',
     white100: 'rgba(255, 255, 255, 1)',
@@ -90,6 +92,7 @@ const globalStyles = {
     borderRadiusTabs: '4px',
     borderRadiusURL: '4px',
     borderRadiusUIbox: '8px',
+    borderRadiusModal: '8px',
     bigBorderRadius: '14px',
     switchRadius: '10px',
     carotRadius: '8px'
@@ -140,9 +143,14 @@ const globalStyles = {
     dialogTopOffset: '30px',
     dialogInsideMargin: '18px',
     paymentsMargin: '20px',
-    modalPanelHeaderMarginBottom: '.5em',
-    paddingHorizontal: '30px',
-    privateTabPadding: '40px'
+    privateTabPaddingHorizontal: '30px',
+    privateTabPadding: '40px',
+    settingsListContainerMargin: '2rem',
+    modalPanelHeaderMarginBottom: '.5rem',
+    overlayButtonMargin: '8px',
+    panelMargin: '15px',
+    panelItemMargin: '12px',
+    panelPadding: '18px'
   },
   shadow: {
     switchShadow: 'inset 0 1px 4px rgba(0, 0, 0, 0.35)',
diff --git a/app/renderer/components/styles/payment.js b/app/renderer/components/styles/payment.js
index 83b54186408..427d4744d6b 100644
--- a/app/renderer/components/styles/payment.js
+++ b/app/renderer/components/styles/payment.js
@@ -9,16 +9,18 @@ const paymentStyles = {
   font: {
     regular: '14.5px'
   },
+  width: {
+    tableRow: '235px',
+    tableCell: '265px' // width.tableRow + 30px
+  },
+
+  // Copied to global.js
   margin: {
     bar: '15px',
     barItem: '12px'
   },
   padding: {
     bar: '18px' // margin.barItem * 1.5
-  },
-  width: {
-    tableRow: '235px',
-    tableCell: '265px' // width.tableRow + 30px
   }
 }
 
@@ -41,13 +43,7 @@ const paymentCommon = StyleSheet.create({
     padding: '20px 20px 20px 50px'
   },
   marginButtons: {
-    marginLeft: '8px'
-  },
-  advanceFooter: {
-    padding: '20px',
-    display: 'flex',
-    flexWrap: 'wrap',
-    justifyContent: 'flex-end'
+    marginLeft: globalStyles.spacing.overlayButtonMargin
   }
 })
 
diff --git a/js/about/newprivatetab.js b/js/about/newprivatetab.js
index fc907af84b7..20878a06609 100644
--- a/js/about/newprivatetab.js
+++ b/js/about/newprivatetab.js
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
     display: 'flex',
     alignSelf: 'center',
     maxWidth: '780px',
-    padding: `${globalStyles.spacing.paddingHorizontal} 0`,
+    padding: `${globalStyles.spacing.privateTabPaddingHorizontal} 0`,
 
     [atBreakpoint]: {
       flexDirection: 'column'
diff --git a/js/components/sortableTable.js b/js/components/sortableTable.js
index 27ad94b1e44..8dd3b32bb9c 100644
--- a/js/components/sortableTable.js
+++ b/js/components/sortableTable.js
@@ -360,7 +360,15 @@ class SortableTable extends React.Component {
         const value = typeof item === 'object' ? item.value : item
         const html = typeof item === 'object' ? item.html : item
         const cell = typeof item === 'object' ? item.cell : item
-        return <td className={this.hasColumnClassNames ? this.props.columnClassNames[j] : undefined} data-sort={value} data-td-index={`${j}`}>
+
+        let hasColumnClassNames = (this.hasColumnClassNames ? this.props.columnClassNames[j] : '')
+        let customCellClassesStr = (this.props.customCellClasses ? this.props.customCellClasses : '')
+
+        return <td className={cx({
+          [hasColumnClassNames]: true,
+          [customCellClassesStr]: true
+        })}
+          data-sort={value} data-td-index={`${j}`}>
           {
             cell || (value === true ? '✕' : html)
           }
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 1c6bbbfb61c..3ede8c061e5 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -56,7 +56,7 @@ a {
 }
 
 .settingsListContainer {
-  margin-bottom: 2em;
+  margin-bottom: @settingsListContainerMargin;
 }
 
 .settingsListTitle,
@@ -286,6 +286,7 @@ table.sortableTable {
   }
 
   // This defines the styling of modal dialogs on "Add funds..." and "Advanced Settings..."
+  // TODO: Use modalOverlay in commonStyles.js
   .modal {
     .dialog {
       background: linear-gradient(@modalVeryLightGray, @modalLightGray);
@@ -565,96 +566,3 @@ table.sortableTable {
     cursor: pointer;
   }
 }
-
-.syncContainer {
-  .modal {
-    textarea {
-      width: 80%;
-      height: 100px;
-      font-size: 18px;
-      font-family: monospace;
-    }
-    li {
-      margin: 1em;
-    }
-    .settingsListContainer {
-      margin-bottom: 1.5em;
-    }
-    .dialog-body, .dialog-footer {
-      padding-left: 50px;
-      padding-right: 50px;
-    }
-    .dialog-footer {
-      margin-top: 1.5em;
-      padding-bottom: 2em;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-    }
-  }
-  .browserButton + .browserButton {
-    margin-left: 0.75em;
-  }
-  .setupContent, .setupError {
-    margin: 1em 0;
-  }
-  .setupError {
-    color: red;
-    font-weight: bold;
-  }
-  .deviceNameInput {
-    width: 50%;
-  }
-  .syncBetaMessage {
-    color: grey;
-    margin-top: 8px;
-  }
-  .device {
-    background-color: @lightGray;
-    border-radius: @borderRadiusUIbox;
-    color: @mediumGray;
-    display: table;
-    line-height: 1.8em;
-    margin: 1em 0;
-    padding: 0.5em 1em;
-    width: 32em;
-    & > div, .settingItem {
-      display: table-cell;
-      vertical-align: middle;
-    }
-    #syncEnableSwitch {
-      width: 50%;
-    }
-    .syncDeviceLabel {
-      font-size: 0.9em;
-      margin: 0;
-    }
-    .deviceName {
-      margin-bottom: 0.5em;
-    }
-  }
-  .devices {
-    margin: 1em 0;
-  }
-  .devicesList {
-    width: 34em;
-    margin-bottom: 1em;
-    td {
-      padding: 4px 8px;
-    }
-  }
-  .settingsListContainer {
-    margin-bottom: 1.5em;
-  }
-}
-
-#syncPassphrase {
-  margin: 1em;
-  color: #ff0400;
-  font-size: 15px;
-  font-family: monospace;
-}
-
-#syncQR {
-  margin: 1em;
-}
diff --git a/less/button.less b/less/button.less
index 694a7af583d..b167aa2ac29 100644
--- a/less/button.less
+++ b/less/button.less
@@ -140,19 +140,6 @@ span.buttonSeparator {
   }
 }
 
-.linkButton {
-  color: @braveOrange;
-  cursor: pointer;
-  font-size: 0.9rem;
-
-  &:not([disabled]):hover {
-    color: black;
-  }
-  &[disabled] {
-    color: @gray;
-  }
-}
-
 // for about:preferences
 .prefBody {
   .settingsList > .settingItem + button,
@@ -177,7 +164,9 @@ span.buttonSeparator {
     margin-top: 5px;
   }
 
-  .paymentsContainer {
+  .paymentsContainer,
+  // TODO: refactor button.less to remove this and apply overlayButtonMargin in global.js
+  .syncContainer {
     .browserButton + .browserButton {
       margin-left: 8px;
     }
diff --git a/less/forms.less b/less/forms.less
index aef79b23eb2..3bf6a0bbece 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -348,19 +348,3 @@ select {
     }
   }
 }
-
-// From commonStyles.js
-.formControl {
-  background: white;
-  border: solid 1px @black10;
-  border-radius: @borderRadius;
-  box-shadow: inset 0 1px 1px @black10;
-  box-sizing: border-box;
-  display: block;
-  color: @darkGray;
-  font-size: 14.5px;
-  height: 2.25em;
-  outline: none;
-  padding: 0.4em;
-  width: 100%;
-}
diff --git a/less/variables.less b/less/variables.less
index 7e0074c006f..dac97f1d620 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -89,6 +89,8 @@
 @bookmarksFileIconSize: 13px;
 @bookmarksFolderIconSize: 15px;
 
+@settingsListContainerMargin: 2rem;
+
 @navbarMenubarMargin: 7px;
 @navbarButtonSpacing: 4px;
 @navbarButtonWidth: 20px;
diff --git a/test/misc-components/syncTest.js b/test/misc-components/syncTest.js
index 2487d5e92c6..e9e9731b0bc 100644
--- a/test/misc-components/syncTest.js
+++ b/test/misc-components/syncTest.js
@@ -12,10 +12,10 @@ const aboutBookmarksUrl = getTargetAboutUrl('about:bookmarks')
 const aboutHistoryUrl = getTargetAboutUrl('about:history')
 
 const prefsUrl = 'about:preferences'
-const startButton = '[data-l10n-id="syncStart"]'
-const addButton = '[data-l10n-id="syncAdd"]'
-const createButton = '[data-l10n-id="syncCreate"]'
-const newDeviceButton = '[data-l10n-id="syncNewDevice"]'
+const startButton = '[data-test-id="syncStartButton"]'
+const addButton = '[data-test-id="syncAddButton"]'
+const createButton = '[data-test-id="syncCreateButton"]'
+const newDeviceButton = '[data-test-id="syncNewDeviceButton"]'
 
 const PANEL_SEED = Immutable.fromJS(Array(32).fill(0))
 
@@ -187,8 +187,8 @@ describe('Sync Panel', function () {
         .click(syncTab)
         .waitForExist(newDeviceButton)
         .click(newDeviceButton)
-        .click('[data-l10n-id="syncShowPassphrase"]')
-        .waitForTextValue('#syncPassphrase', 'idyllic undergrowth sheepman chez\nwishy undergrounder verseman plyer\na a a a\na a a a')
+        .click('[data-test-id="syncShowPassphraseButton"]')
+        .waitForTextValue('[data-test-id="syncPassphrase"]', 'idyllic undergrowth sheepman chez\nwishy undergrounder verseman plyer\na a a a\na a a a')
     })
   })
 
@@ -210,7 +210,7 @@ describe('Sync Panel', function () {
         .waitForVisible(createButton)
         .click(createButton)
         .waitUntil(function () {
-          return this.getText('.setupError').then((val) => {
+          return this.getText('[data-test-id="syncSetupError"]').then((val) => {
             return val.includes('connection failed')
           })
         })
@@ -276,8 +276,8 @@ describe('Sync Panel', function () {
         .click(syncTab)
         .waitForVisible(syncSwitch)
         .click(syncSwitch)
-        .waitForExist('#syncData .switchBackground')
-        .click('#syncData .switchBackground')
+        .waitForExist('[data-test-id="syncDataSection"] .switchBackground')
+        .click('[data-test-id="syncDataSection"] .switchBackground')
         .windowByUrl(Brave.browserWindowUrl)
         .waitUntil(function () {
           return this.getAppState().then((val) => {
@@ -296,11 +296,11 @@ describe('Sync Panel', function () {
         .click(syncSwitch)
         .waitForExist(newDeviceButton)
         .click(newDeviceButton)
-        .click('[data-l10n-id="syncShowPassphrase"]')
-        .waitForTextValue('#syncPassphrase', 'a a a a\na a a a\na a a a\na a a a')
-        .click('[data-l10n-id="syncShowQR"]')
+        .click('[data-test-id="syncShowPassphraseButton"]')
+        .waitForTextValue('[data-test-id="syncPassphrase"]', 'a a a a\na a a a\na a a a\na a a a')
+        .click('[data-test-id="syncShowQRButton"]')
         .waitUntil(function () {
-          return this.getAttribute('#syncQR', 'src').then((text) => {
+          return this.getAttribute('[data-test-id="syncQRImg"]', 'src').then((text) => {
             return text === 'data:image/png;base64,foo'
           })
         })