Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update Settings: Update sub-screens (#5334)
Task/Issue URL: https://app.asana.com/0/1207908166761516/1208785622935234/f ### Description Makes design changes to all the settings sub-screens, including: - Copy changes - Padding/Margin changes - Adding/Updating new header images - Rearranging items (Data clearing screen only) ### Steps to test this PR Prerequisites: `newSettings` flag is on Designs: ### _Private Search_ - [Designs](https://www.figma.com/design/BOHDESHODUXK7wSRNBOHdu/%F0%9F%A4%96-Android-Components?node-id=12993-10537&m=dev) - [x] Open Private Search screen - [x] Screen should default to device transition and no longer crossfade - [x] Check new header image is visible - [x] Check Status Indicator is visible and "Always On" - [x] Check copy has been updated - [x] Check against designs #### UI changes | Before | After | | - | - | <img src="https://github.com/user-attachments/assets/adab34f4-e03f-4b81-a066-2b1b5b80fbd6" alt="Alt Text" width="300">|<img src="https://github.com/user-attachments/assets/355bc950-c7d0-4a90-9289-2f05182c66c2" alt="Alt Text" width="300"> ### _Web Tracking Protection_ - [Designs](https://www.figma.com/design/BOHDESHODUXK7wSRNBOHdu/%F0%9F%A4%96-Android-Components?node-id=12993-10580&m=dev) - [x] Open Web Tracking Protection screen - [x] Screen should default to device transition and no longer crossfade - [x] Check new header image is visible - [x] Check Status Indicator is visible and "Always On" - [x] Check copy has been updated - [x] Check against designs #### UI changes | Before | After | | - | - | <img src="https://github.com/user-attachments/assets/7550238e-cc4e-429f-9d6f-12360f6c77b7" alt="Alt Text" width="300">|<img src="https://github.com/user-attachments/assets/6b0ec787-f8f3-477e-bed3-c7e6deb27291" alt="Alt Text" width="300"> ### _Cookie Pop-Up Protection_ - [Designs](https://www.figma.com/design/BOHDESHODUXK7wSRNBOHdu/%F0%9F%A4%96-Android-Components?node-id=13010-29805&m=dev) - [x] Open Cookie Pop-Up Protection screen - [x] Screen should default to device transition and no longer crossfade - [x] Check new header image is visible - [x] Check Status Indicator is visible and is "On" or "Off" depending on the toggle - [x] Turn toggle on/off - [x] Check header image changes to either on/off version - [x] Check Status Indicator turns to on/off - [x] Check copy - [x] Press "Learn More" - [x] Tracking Protections website should open - [x] Press back - [x] Check against designs #### UI changes | Before | After | | - | - | <img src="https://github.com/user-attachments/assets/3cb8424e-c1a7-4f93-a494-01f5d5b2852e" width="300">|<img src="https://github.com/user-attachments/assets/104f2f29-d3dd-4646-a429-89f1efaa4131" width="300"> ### _App Tracking Protection_ - [x] Open App Tracking Protection screen - [x] Screen should default to device transition and no longer crossfade - No other changes made to this screen ### _Email Protection_ - [x] Open Email Protection screen - [x] Screen should default to device transition and no longer crossfade - No other changes made to this screen ### _General_ - [x] Open General screen - [x] Screen should default to device transition and no longer crossfade - No other changes made to this screen ### _Sync & Backup_ - [Designs](https://www.figma.com/design/BOHDESHODUXK7wSRNBOHdu/%F0%9F%A4%96-Android-Components?node-id=13280-39196&m=dev) - [x] Open Sync & Backup screen - [x] Screen should default to device transition and no longer crossfade - [x] Check "Single Device Setup" heading is now "Other Options" - [x] Check against designs #### UI changes | Before | After | | - | - | <img src="https://github.com/user-attachments/assets/cb5a57b3-0355-4da4-bc48-6daf9d6a767e" width="300">|<img src="https://github.com/user-attachments/assets/5f742629-3b64-4b92-8b1f-6769bcc29f85" width="300"> ### _Appearance_ - [Designs](https://www.figma.com/design/BOHDESHODUXK7wSRNBOHdu/%F0%9F%A4%96-Android-Components?node-id=12441-20931&m=dev) - [x] Open Appearance screen - [x] Screen should default to device transition and no longer crossfade - [x] The App Icon should now be aligned to the right of the screen #### UI changes | Before | After | | - | - | <img src="https://github.com/user-attachments/assets/c005bc33-ebc2-47a4-9fff-7dfe086b055a" width="300">|<img src="https://github.com/user-attachments/assets/10b1593b-3b3a-411d-939f-af4165497b3f" width="300"> ### _Passwords & Autofill_ - [x] Open Passwords & Autofill screen - [x] Screen should default to device transition and no longer crossfade - [x] The toolbar title should be "Passwords & Autofill" #### UI changes | Before | After | | - | - | <img src="https://github.com/user-attachments/assets/6d8ca108-529a-478d-96ca-83be998ca296" width="300">|<img src="https://github.com/user-attachments/assets/ebbc844d-99a9-4b47-bffa-c626a6d7ff5a" width="300"> ### _Accessibility_ - [Designs](https://www.figma.com/design/BOHDESHODUXK7wSRNBOHdu/%F0%9F%A4%96-Android-Components?node-id=11073-14078&m=dev) - [x] Open Accessibility screen - [x] Screen should default to device transition and no longer crossfade - [x] Check screen top padding has been increased #### UI changes | Before | After | | - | - | <img src="https://github.com/user-attachments/assets/40d78b41-35dc-4e04-9634-cf239943a077" width="300">|<img src="https://github.com/user-attachments/assets/d42670de-a6e2-4829-a777-3898fd1772d8" width="300"> ### _Permissions_ - [x] Open Permissions screen - [x] Screen should default to device transition and no longer crossfade - No other changes made to this screen ### _Data Clearing_ - [Designs](https://www.figma.com/design/BOHDESHODUXK7wSRNBOHdu/%F0%9F%A4%96-Android-Components?node-id=12993-12784&m=dev) - [x] Open Data Clearing screen - [x] Screen should default to device transition and no longer crossfade - [x] Order of items should be 1. "Fire Button Animation" 2. Divider 3. "Fireproof Sites" 4. "Automatically Clear Data..." 5. "Clear On..." - [x] Check against designs #### UI changes | Before | After | | - | - | <img src="https://github.com/user-attachments/assets/c0e6fd1e-a221-48c8-bc51-39cc22ce475b" width="300">|<img src="https://github.com/user-attachments/assets/59ac1832-4ab9-4e77-a6af-15ddfba843e4" width="300"> ### _Duck Player_ - [ ] Open Duck Player screen - [ ] Screen should default to device transition and no longer crossfade - No other changes made to this screen ### _About_ - [Designs](https://www.figma.com/design/BOHDESHODUXK7wSRNBOHdu/%F0%9F%A4%96-Android-Components?node-id=12993-10920&m=dev) - [ ] Open About screen - [ ] Screen should default to device transition and no longer crossfade - [ ] Title in toolbar should be "About" - [ ] Check about copy matches designs - [ ] Check against designs #### UI changes | Before | After | | - | - | <img src="https://github.com/user-attachments/assets/367f4768-4e9e-4395-b44f-e7c082bab1b8" width="300">|<img src="https://github.com/user-attachments/assets/434ccb4f-ab8a-4f56-a9fa-8d5d1ff557fc" width="300"> _LegacySettings Screen_ Prerequisites: `newSettings` flag is off - [ ] Smoke test, run through each item an ensure there are no major visual changes e.g. two header images instead of 1 ## Demo https://github.com/user-attachments/assets/8c256538-816c-4ef5-a01b-d31260f6cb41
- Loading branch information