In addition to updating the design of the main menu selector of Preferences we also want to update the submenus.
=== User Story
As a mobile-first Wikimedia contributor, I want to change my account preferences from my mobile device, so that I can customise my editing experience.
=== Design specs
**Full image (PDF) detailing changes and specifications https://commons.wikimedia.org/wiki/File:Desing-specs-mobile-web-preferences.pdf. ** Note that some changes in this document are beyond the scope of this task, particularly specific-setting modals and the on/off toggle.
==== Section titles get a border bottom for stronger separation
In order to enable editors to easily scan the content of a page a solid black border will signify the beginning of each settings section.
{F35271192}
==== Labels loose the colon “:” at the end
The colon is needed as a separator when the content is displayed on the same line. In this instance, we're going to rely on the line break to create a clear distinction between the label and the call to action (or text) below.
{F35271193}
==== Buttons become links
In order to simplify the visual design of the page, all call to actions will share the same visual style. If we would use buttons for some instance, and links for some other, the instances set as buttons will be visually prioritized. While with this approach all instances share the same priority.
{F35271198}
==== Links stay as links
As above.
{F35271199}
==== Information (non-interactive) texts are set to grey
For content and is non-interactive, and only informational, we can de-prioritize it by setting the text color to grey.
{F35271194}
This should be done for the following information:
- Username
- Registration time
- Email confirmation (when confirmed)
==== Options are separated by a grey line
To emphasize the distinction between an option and another we will add a grey separator line. These separators, together with the section separators, will give a stronger structure to the content of the page, hence improving the scannability of the content.
{F35271215}
==== Sections are more distant from each other
To improve the scannability, and to enable editors to quickly scroll the page, and find the section that they need, we will increase the space between each main section.
{F35271220}
=== Technical information
`TBD`
=== Testing and QA steps
- Log in to a Wikipedia account
- Navigate to the sidebar and select Settings
- Turn on Advanced mode
- Click 'Open preferences' in Settings
- Select each menu item and check that the designs above have been met for each
- Please also verify that the desktop (non-mobile) experience remains unchanged.
=== Acceptance Criteria
[] All design elements above have been met in every preferences section used in production MediaWiki
[] The functionality of Preferences on mobile and desktop have not changed