1699426 - Polish modal design for MR1

Status: RESOLVED FIXED

(Toolkit Graveyard :: Notifications and Alerts, enhancement, P1)

Description

Per experience review the following items were identified as blocking MR1:

• Adjust title (bold text when not there yet) (happening in bug 1693008)
• Font size needs to be 1.25em (* message-box / Menu native styles - this will probably need to move where we set the font property to an ancestor element, so that we can rely on em being the right thing for the #infoBody and the title.
• Vertical gaps between elements should be 16px, not 20px
• When there is no message text, the message text container should be hidden (to avoid creating an extra-large gap between the title at the top and the buttons/checkbox below)
• Check the vertical gap between labels and their input fields match the spec and fix if necessary.

The following checkbox work should happen in bug 1700141:

• Adjust color of the checkboxes text
• The space between the checkboxes and the label is too much. It should 4 pixel
• Checkboxes element should have a lighter color like in the specs

Comment 1

[:Gijs (he/him)]

I've updated comment #0 to clarify what needs to happen in this bug. I've moved the checkboxes to a separate bug for engineering reasons. The title is already in r+'d patches on bug 1693008.

Comment 2

[:Gijs (he/him)]

:masterwayz, I was wondering if you would be interested in picking this up?

Comment 3

[Michelle Goossens [:masterwayz]]

Sure!

Comment 4

[:Gijs (he/him)]

(In reply to Romain Testard [:RT] from comment #0)

One More Thing:

Let's add a 1px border to the dialog at https://searchfox.org/mozilla-central/rev/be906232eedb22c064b78f3806b38964c04f1fbc/browser/base/content/browser.css#1513-1517 using similar colours to the app menu separators - you can use the CSS variable --panel-separator-color for this.

Comment 5

[Michelle Goossens [:masterwayz]]

Talked about it with Gijs, I feel like it's better if someone else takes this bug for now.

Comment 7

[Alex Thayer [:alexical] (she/her)]

Attachment: Bug 1699426 - Polish modal design for MR1 r?Gijs

Comment 8

[Alex Thayer [:alexical] (she/her)]

Attachment: Bug 1699426 - Bold the title for the refresh profile dialog r?Gijs

Depends on D109948

Comment 9

[Alex Thayer [:alexical] (she/her)]

Attachment: Bug 1699426 - Ensure input labels don't wrap r?Gijs

This is kind of specific to the fxa signout dialog, which has a checkbox, the
label of which wraps in a visually unsatisfying way without this change (and
doesn't match the figma) - when we stop wrapping these, SubDialog.jsm will make
an appropriate width for us which will allow the label's text to not wrap. It
seems appropriate enough to apply broadly - I don't think we want labels that
look paragraphy.

Depends on D109980

Comment 10

[Alex Thayer [:alexical] (she/her)]

Attachment: Bug 1699426 - Remove margin-block for resetProfile learn more r?Gijs

Chatted with Emanuela about this and she noted that this shouldn't be such a
large gap here. Note: there should be a larger gap here between the text and
the buttons, but I think that applies to all modals. That should be a separate
patch, if you agree.

Depends on D109980

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3460d521268f
Polish modal design for MR1 r=Gijs
https://hg.mozilla.org/integration/autoland/rev/a1ca0559a938
Bold the title for the refresh profile dialog r=Gijs
https://hg.mozilla.org/integration/autoland/rev/fa4e36721341
Remove margin-block for resetProfile learn more r=Gijs

Comment 12

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/3460d521268f
https://hg.mozilla.org/mozilla-central/rev/a1ca0559a938
https://hg.mozilla.org/mozilla-central/rev/fa4e36721341