Update the copy and visuals for the Account Settings: Notifications page

[daniellekirkwood]

Tasks

Preview Give feedback

1. Update and change the wording of the toggles in Notifications (top section). Most of the toggles stay the same action, some are moved to a different section.
2. Change Global section to have a new heading and subtext copy
3. Create default radio buttons in the "global' section which maps to current global options. We're removing "Noisy" as that will be replaced by Sound.
4. Play a sound for (noisy checkboxes) section - adding call invitation from the previous "Other" section
5. "Other" as a section to be checkboxes instead of radio buttons
6. Mentions and Keywords: Remove Noisy update Visuals and copy
7. Create email section & add emails that are available as checkboxes
8. "Mark as unread" change visuals and copy to "Clear notifications"
9. Reset to defaults: Introduce button (if possible)
10. Add a banner to the top to tell existing users that their settings have changed
11. Where an existing user has settings that do not map to this new layout, add "Custom" radio buttons. Once the user moves away from 'custom' it is no longer available to select. If the user changes their settings on a different client or device, 'custom' would appear if those new settings do not map to these new global settings

Figma file is here

[daniellekirkwood]

@justjanne : Updated the task list here based on the new changes to the design. Let me know if there's any questions

Also, feel free to add or create new tasks and issues as you see fit! I just took a crack at it

[kerryarchibald]

@justjanne What is your approach for Notify when someone mentions using @DisplayName or @mxid when .m.rule.contains_display_name, .m.rule.contains_user_name have different actions?
Asking because for intentional mentions rollout these rules will be kept in sync with new intentional mentions rules, but I'm not sure what to do when they are out of sync (from another client)

[justjanne]

@kerryarchibald So, my current approach is to have an internal model for the notifications page and a way to map to and from it.

When loading the notifications page, I map from the push rules to the internal model, and back to the push rules.

If this doesn't result in the same actions as the current existing push rules, I show the "your push rules have been modified by a different or old client, if you edit them in element you may lose some custom settings" banner.