1731101 - PopupNotification doorhanger design polish: font, width should match the design of other notification-style panels

Status: RESOLVED FIXED

(Firefox :: Messaging System, enhancement, P1)

Description

[Victoria Wang [:victoria]]

The current PopupNotification appears to have larger font and a smaller width than other panels (such as the remove extension confirmation and update dialogs). This should match the "Notifications" spec in Figma.

Also, when we use the cfr-doorhanger-large-icon, we should have more spacing (12px) between the icon and text.

Related to https://bugzilla.mozilla.org/show_bug.cgi?id=1731035

Comment 1

[Dan Mosedale (:dmosedale, :dmose)]

Attachment: Bug 1731101 - Polish CFR doorhanger & fix PanelTestProvider to help debug, r?Mardak!

Make the width and font sizes match the extensions removal dialog. Fix the
test and PERSONALIZED_CFR_MESSAGE doorhanger and update it with
a large size icon to make it possible to test and debug.

Comment 2

[Dan Mosedale (:dmosedale, :dmose)]

The description of this bug says:

The current PopupNotification appears to have larger font and a smaller width than other panels (such as the remove extension confirmation and update dialogs). This should match the "Notifications" spec in Figma.

The font size in the "remove extension confirmation" (12px) currently doesn't match the Notifications spec (13px). The existing doorhanger notifications do.

The width of the "remove extension confirmation" (408px) also doesn't match the Notifications spec (400px); the CFR doorhanger is different from both (343px).

I'm guessing that the correct source of truth here is the spec; can you confirm that that's what you want?

Comment 3

[Victoria Wang [:victoria]]

Good catch! Yes, let's stick to the spec.

Reasoning: I realized the remove extension panel was a bad example as it's incorrect on font size - all the other permission panels, launched using https://permission.site/, do use 13px. As for width, I see some a bit of variation between panels in product that is probably incorrect as well. The design system has a strong 400px pattern for many surfaces so it's worth realigning to it.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a83511601780
Polish CFR doorhanger & fix PanelTestProvider to help debug, r=Mardak

Comment 5

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/a83511601780