[Onboarding] Colours need updating

[AmyYLee]

Hi,

Please reference mock below for updated colours. Thanks

┆Issue is synchronized with this Jira Task

[ekager]

@apbitner mentioned a different color for the light theme cards here: #7471 (comment)

Could we confirm which color we are going with for these cards?

[apbitner]

@ekager Sorry for any confusion, Amy's spec above is correct

[joshvocal]

Could I take this one?

[ekager]

Sure @joshvocal !

[joshvocal]

If anyone else reading this wants to take this issue, you can take it instead of me.

[ghost]

I would like to work on this. Can you assign this task to me @ekager?

[ghost]

@AmyYLee Do you have drawable assets for the unselected theme images like the one shown below (light and dark theme variants)?

[AmyYLee]

@AmyYLee Do you have drawable assets for the unselected theme images like the one shown below (light and dark theme variants)?

@tvenissat Hi, can you be more specific? Which asset do you need and in what format? Thanks

[apbitner]

@tvenissat I provided these assets for another contributor on #6980, please let me know if you need anything different

Illustration - Toolbar Positions.zip

[ghost]

@AmyYLee @apbitner Sorry for taking so long. The assets in that zip file are not the assets needed. To be clear, I need this asset recolored with a grey border and this asset recolored with a grey border. The two assets I linked are currently used to represent the active theme since they have colored borders. I need two more assets with grey borders to represent the inactive theme.

[mcarare]

@tvenissat The assets do not contain the radio button. You do not need to change the image, just the radio button colour for selected.

[ghost]

@mcarare

The assets do not contain the radio button.

I never mentioned the radio button. The radio button is just shown in the design document and I didn't remove it (I'm not too familiar with image editing). The border color in the image is not done programmatically but is a part of the image itself. I can change the radio button color programmatically but I cannot change the border of the image without being provided with the asset.

You are correct regarding this image. Changing the enabled radio button color to match the image border color, which appears to be #5A30C5, is all that needs when the light theme is enabled by the user. I need the same asset with a grey border to represent the light theme not being enabled by the user, as the image below demonstrates.

The problem is that this asset is not in the repository as far as I can tell. I need the theme image with a grey border to represent the disabled state. I need this for both light and dark theme images as specified in the design document.

I may be misunderstanding the design document but I think these 2 assets are necessary.

[apbitner]

@tvenissat I believe you are correct, however, it appears the gray border was never implemented for the Theme onboarding card illustrations so let's not worry about it for now. I would rather just be consistent with the other card which appears to only use purple borders.

[ghost]

@apbitner Sounds good.

[ghost]

@AmyYLee What is the radio button color used here?

[lobontiumira]

Verified on the latest Nightly build from 5/8 with Sony Xperia Z5 Premium (Android 7.1.1), and OnePlus 5T (Android 9).

The colors are updated on the following:

• the selected/unselected radio button matches the border outlines, both on RTL languages, and LTR languages,
• the background of all cards matches the collection's background, both on RTL languages, and LTR languages. Please see the screenshots below:

• @AmyYLee the "Read our privacy notice" button still has a background color, as it can be seen in the screenshot below:

I'll remove the qa:needed label, but not close the issue yet.

[BranescuMihai]

@softvision-miralobontiu I used this abstract to guide myself, there the background is still included. Also there's a comment from Amy above that specifies the new button backgrounds.

@AmyYLee should the card buttons have backgrounds?

[AmyYLee]

@softvision-miralobontiu I used this abstract to guide myself, there the background is still included. Also there's a comment from Amy above that specifies the new button backgrounds.

@AmyYLee should the card buttons have backgrounds?

Hi @BranescuMihai

Please follow the abstract document for reference for colours of buttons and backgrounds.
I had mentioned to remove the button background colour earlier because our card colour wasn't white at the time but this is no longer the case. Thanks.

[lobontiumira]

Considering AmyLee's comment from above, I will close this issue as verified as fixed.