1912909 - Update white text of "Cancel" / dismiss buttons to purple color as defined in translations

Status: NEW

(Firefox for Android :: Design System and Theming, defect)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Set Firefox to use its dark theme (in customize section of settings).
2. Visit https://www.nvidia.com/pl-pl/geforce/drivers/results/165686/ (or another page that Firefox detects as a translation opportunity)
3. Look at the buttons at the bottom-right of the translations prompt that appears (Not now [Translate]).

ACTUAL RESULTS:
In the translations prompt, the "Not now" button is light-purple (really kinda pink), while the Translate button has a darker purple background.

EXPECTED RESULTS:
(1) We probably should be using a consistent shade of purple in the same UI rather than mixing light purple/dark purple in adjacent buttons.
(2) But really, maybe "Not now" should really be white rather than pink, for consistency with other similar UI (like the geolocation prompt UI (screenshot), and the add-on installation confirmation UI) where we show white text for the No/Cancel button.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot showing the translation prompt with lighter-pink "Not now" text on the left button alongside darker purple "Translate" button

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: reference: screenshot of geolocation prompt (with white text for "Don't allow")

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: reference: extension installation confirmation dialog with white "Cancel" text

Comment 4

[Daniel Holbert [:dholbert]]

It looks like bug 1891258 is similar here -- it's got "Never Save" shown in dark-purple text (the same color as the button-background, which looks consistent but makes that text hard to read)

Adding as "see-also".

Ideally all of these prompts should have the same styling (with the "no thank you" button using a consistent text color, whether something purplish vs. something whiteish)

Comment 5

[Daniel Holbert [:dholbert]]

The "Not Now" text in the translation prompt here seems to be Violet20, whereas the button-background is Violet60, as defined in
https://searchfox.org/mozilla-central/rev/b1b87f95ecea00828298d1b3cd3d8718f9fcc3fc/mobile/android/android-components/components/ui/colors/src/main/java/mozilla/components/ui/colors/PhotonColors.kt#164,167

Comment 6

[Daniel Holbert [:dholbert]]

(And to be clear, maybe that combination is fine? But for now, this translation dialog is the only place where we've got that combination of differing lighter/darker purple colors for Cancel/Confirm buttons, as shown in the screenshot that I posted on related bug 1913136. So one way or another, we should make these colors consistent.)

Comment 7

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:boek, could you have a look please?

For more information, please visit BugBot documentation.

Comment 8

[Olivia Hall [:olivia]]

Thanks for reporting this!

If I recall correctly, the divergence is that the translations feature has many inactive states and the traditional white conflicted a little more with this common inactive state. The fuscia "Not Now" is consistant with the design specs.

Button states exploration Figma.

Thank you, Sören, for the link to bug 1891258, where contrast was adjusted on another feature.

I'll pass this on to Dasha for evaluation and UI/UX input.

Comment 9

[Dasha Andriyenko [:Dasha]]

Hey y'all thank you for bringing this up!
I've followed up with our Design Systems Team and they came to a decision that it's better to have the text button styled in the way that we have it here in translations (so the the purple colour), as it gives a differentiation that it's trappable and similar to the look of a text link. They've asked that if possible we actually update some of those other white looking button colours to match the treatment here.

Olivia and Daniel would it be possible to do that on your end? Thank you both!

Comment 10

[Daniel Holbert [:dholbert]]

(In reply to Dasha Andriyenko [:Dasha] from comment #9)

They've asked that if possible we actually update some of those other white looking button colours to match the treatment here.

Olivia and Daniel would it be possible to do that on your end? Thank you both!

Thanks for the update!

I don't work directly on Firefox mobile (other than as an enthusiastic tester) so I'm not the right person to take action on this. Hopefully Olivia can take this or find the right people to take it, though.

Comment 11

[Olivia Hall [:olivia]]

Thanks, Dasha!

I'll move this back to Fenix Design System and Theming component for triage. From there, it'll hopefully find its way to engineers who work on the design system components for evaluation.

Ask for triage:

[:Dasha] from comment #9)

I've followed up with our Design Systems Team and they came to a decision that it's better to have the text button styled in the way that we have it here in translations (so the the purple colour), as it gives a differentiation that it's trappable and similar to the look of a text link. They've asked that if possible we actually update some of those other white looking button colours to match the treatment here.

Daniel has added some references where this is occuring and I suspect there may be more.

Comment 12

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:boek, could you have a look please?

For more information, please visit BugBot documentation.