1608899 - Improve styling of data collection erasure notification box in preferences and adjust addon notification bar font size

Status: NEW

(Firefox :: Settings UI, defect, P3)

Description

[Itiel]

Attachment: Screenshot

STR:

1. Set ui.systemUsesDarkTheme to 1
2. Open about:preferences#privacy
3. Untick the "Allow Firefox to send technical and interaction data to Mozilla" checkbox
4. See the notification box

AR:

1. The notification box is not suited for in-content dark mode
2. The "Learn More" text is not horizontally centered
3. The text size is not the consistent with the very-similar notification box from about:addons

Comment 1

[:Gijs (he/him)]

(In reply to Itiel from comment #0)

the very-similar notification box from about:addons

Which one? Can you attach a screenshot?

Comment 2

[Itiel]

(In reply to :Gijs (he/him) from comment #1)

(In reply to Itiel from comment #0)

the very-similar notification box from about:addons

Which one? Can you attach a screenshot?

Ah sorry, I thought this was obvious.
I was going to post a screenshot here but it seems like I dismissed it. See bug 1564518 if that helps.

Thanks for the summary rename, much better :-)

Comment 3

[:Gijs (he/him)]

(In reply to Itiel from comment #0)

1. The notification box is not suited for in-content dark mode

I agree we can and should fix this.

2. The "Learn More" text is not horizontally centered

And this.

3. The text size is not the consistent with the very-similar notification box from about:addons

But this is per spec right now - the spec is at https://mozilla.invisionapp.com/share/AYV0K21B3PQ#/screens/395230198_Telemetry_Opt_Out and definitely uses smaller-than-default text; the about:addons one uses the same text as the rest of the content, which is 15px ( https://searchfox.org/mozilla-central/rev/9e45d74b956be046e5021a746b0c8912f1c27318/toolkit/themes/shared/in-content/common.inc.css#161 ).

Aaron, does the font size here need changing? Or the one in about:addons? Or neither?

Comment 4

[Aaron Benson]

I followed the Design System guidelines for the alert bar here so it looks like the alert bar in about:addons needs changing. See: https://design.firefox.com/photon/components/message-bars.html