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

Commits

Commits on May 1, 2017

Refactor syncTab.js with Aphrodite