[Settings] Improve layout consistency across settings screens

[AmyYLee]

Looking at our settings screens there are some inconsistency with alignments (mostly how we left align body copy).

Layout edits: https://share.goabstract.com/54f2c91a-46b3-4658-bd81-91c73a5c3ca4?mode=design&sha=db55e95ad5e27dbb1a5ad787a091fb7b60b5b416

┆Issue is synchronized with this Jira Task

[liuche]

Ask @brampitoyo for UI review (since Bram will be taking over for Settings)

[brampitoyo]

@liuche Just to be aware that we’re also improving layout consistency of Add-ons Manager and its sub-pages in #8520.

[hkaancaliskan]

@brampitoyo could you please share settings -> search ux mock. I can't see widths and margins etc with this one.
Actually let's share all of them that needs changes.

Edit: I mean like this ones that I can see the margins etc.
https://share.goabstract.com/d1d0bb78-03c9-4822-aea1-a553d2fd4944?mode=build&sha=72ed314cb3b094e510d264a18e99870147787fa0

[brampitoyo]

@hakkikaancaliskan I completed the layout edits for all sub-pages under the sections “Account” and “General”.

https://share.goabstract.com/2e7f2625-24e4-41e9-bb9b-5e78c31dbbbe?mode=design&sha=62825ec262f4d071a8acae25bec9180f84bf4d3d

I will finish the rest of the pages under the sections “Privacy and security”, “Advanced” and “About”. But note that all my fixes follow practically the same guideline: all list items have a keyline value of 72dp.

At the moment, you’ll note that our list items sometimes follow the keyline, and they sometimes don’t. Ideally, they all should.

Demonstration:

For further information, follow this link https://material.io/design/layout/spacing-methods.html#spacing and search for "keylines".

[hkaancaliskan]

@brampitoyo There is just #12691 left. I think we can close this issue after you check everything again.

[hkaancaliskan]

@brampitoyo Everything done.

[brampitoyo]

@hakkikaancaliskan I just finished reviewing #12691. Looks like our settings alignment work is all complete!

[hkaancaliskan]

@NotWoods this issue is done