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