[Onboarding] PBM colors need updating

[apbitner]

PBM onboarding should match the spec found here: https://share.goabstract.com/e818c20f-6e49-4290-b7cd-a2c77adc9585?mode=design&sha=4e5f44342a4bd8185ae5ddeb4f14888784d9193c

Please use the Inspect tab in the link above for correct color values.

Changes include:

• Update search bar color
• Update background gradient of Sign In card
• Update background color of all other cards
• Update color of card icons in the upper-left of most cards
• For 'Choose your theme' and 'Take a position' cards, update selected and unselected border colors for the radio button illustrations
• Update selected radio button colors
• Update button colors for 'Open settings', 'Read our privacy notice' and 'Start browsing'

Specs

┆Issue is synchronized with this Jira Task

[BranescuMihai]

It seems there is already a task on the toolbar colour (#8491 ), @ValentinTimisica is working on that

[BranescuMihai]

@apbitner @AmyYLee could you please add the abstracts for dark/light mode for this screen? All colours in our code are connected and I want to check if any of the other two should also be modified.

[AmyYLee]

@apbitner @AmyYLee could you please add the abstracts for dark/light mode for this screen? All colours in our code are connected and I want to check if any of the other two should also be modified.

Hi @BranescuMihai

An issue was filed for Light/Dark themes here #7606
and this is the Abstract file

https://share.goabstract.com/8feabb36-05ef-4ec0-a05a-e56582a05c5f?mode=design&sha=ffec9de54b80fae6a128c4a6663149c2f6f235ca

[BranescuMihai]

Thanks @AmyYLee ! Here are the screenshots for all 3 versions:

Private Theme Screenshot

Dark Theme Screenshot

Light Theme Screenshot

I also added the drop-shadow to the cards, as specified here

@apbitner About the theme/toolbar borders, I noticed you added grey assets for light/dark here.
We would also need the selected(purple version) for the toolbar illustrations (since for theme we already have them)
Also, is it possible to get the SVG versions instead of the PNGs? It would be easier to add them like that

[apbitner]

@BranescuMihai Here are the purple, selected states for the Toolbar card for both light and dark. Let me know if you need anything else.

SVG.zip

[AmyYLee]

@BranescuMihai Hi, these look great!

As you mentioned above the 2 outstanding things are ensuring that the purple frame matches the radio button colour when it's selected and ensuring it turns grey when in deselected state.

Deselect state should be grey for frame and radio button (@apbitner has provided assets)

Frame should be the same purple as selected radio button - lighter purple (@apbitner has provided assets)

Other than that, everything else looks good!

[BranescuMihai]

@apbitner thanks for the Toolbar assets! I noticed that for the selected state there are 2 shades of purple stroke, so we would need the same from the Theme illustration (in the app we use only one shade). I prefer SVG for these as well

[apbitner]

Yes, the purple stroke is different for light vs dark/PBM. Here are SVG's for Theme selected states.

Theme Selected.zip

[BranescuMihai]

@apbitner I realised that the size of all these images was around 3mb(and it doubles with rtl), which is way bigger than we should include for such as small usecase. Luckily, I see the diff between light/dark themes is only the border colour, which can be modified in code, thus using only one resource.

Can I get the grey ones again, but in SVG format?
Also, the rtl ones need to be updated to SVG as well to follow this optimisation. Can I get those as well? (both grey and purple - for both toolbar and theme)

Thanks a bunch!

[apbitner]

I am working with @shorlander to see if we can get SVG versions of these assets, including the logos in SVG format

[shorlander]

onboarding-illustrations.zip

@BranescuMihai

[BranescuMihai]

@shorlander @apbitner thanks! please add also the RTL versions for the toolbar top/bottom, those are the last assets needed

[ekager]

cc @shorlander @apbitner could we get the remaining svg assets: "RTL versions for the toolbar top/bottom"?

[sblatz]

@AmyYLee & @apbitner why does the onboarding "start browsing" button have a different accent color than every other button in the app? Can we please consolidate these colors?

[AmyYLee]

@AmyYLee & @apbitner why does the onboarding "start browsing" button have a different accent color than every other button in the app? Can we please consolidate these colors?

@sblatz Hi, all the buttons, toggles, switches in dark theme should have the same colour. See below.

[sblatz]

@AmyYLee So then you'd expect it to look like this?

[AmyYLee]

@AmyYLee So then you'd expect it to look like this?

Yes :-)

[BranescuMihai]

Thanks for the addition @sblatz ! I was also wondering why the finish button is different

[Diana-Rus]

Hi, verified the color scheme in Firefox Nightly Preview 200513 (Build #21340609) 5/13 with Google Pixel 3 XL (Android 9) and Samsung Galaxy S9 (Android 8):
Scenarios PBM- Onboarding:
1.Verify that the "Sign In" gradient background gradient look as intended - ❓
2.The background color for all of the other cards look as intended - ✔️
3.The color of each of the cards icon look as intended - ✔️
4.Selected 'Choose your theme' and 'Take a position' cards the border color looks as intended - ✔️
5.When unselected 'Choose your theme' and 'Take a position' cards the border color looks as intended✔️
6.The selected radio buttons colors look as intended - ✔️
7.The colors for 'Open settings', 'Read our privacy notice' look as intended - ✔️ (as per #8643 (comment) )
8.The color for 'Start browsing' button look as intended (Comment #8643 (comment) ✔️

Scenarios Light theme - Onboarding:
As per: #8643 (comment)

9.Selected 'Choose your theme' and 'Take a position' cards the border color looks as intended - ✔️
10.When unselected 'Choose your theme' and 'Take a position' cards the border color looks as intended - ✔️

Scenarios Dark theme - Onboarding:
11.Selected 'Choose your theme' and 'Take a position' cards the border color looks as intended - ✔️
12.When unselected 'Choose your theme' and 'Take a position' cards the border color looks as intended - ✔️
13. Dark theme, buttons "Open Settings" and "Read our privacy"have the same background fill as the "Start browsing" button ❓
14.The color for 'Start browsing' button look as intended same accent (Comment #8643 (comment) ✔️

Google Pixel 3 XL - Android 9 - PBM Screens

Note:

• @AmyYLee - For scenario 1 - the gradient is applied differently as from the provided specs the lighter shade is in the opposite corner of the card. In specs the #B733E1 starts from bottom left corner of the card and in app it is in the top right corner. Should it remain the same as in screen for RTl language?

• @AmyYLee - For dark theme, buttons "Open Settings" and "Read our privacy" should they have the same background fill as the "Start browsing" button ?

• The color for "New Tab" button from apps Homescreen is not #9059FF - (comment [Onboarding] PBM colors need updating #8643 (comment)) in dark mode

I will remove the qa-needed label until further notice.

[AmyYLee]

Hi, verified the color scheme in Firefox Nightly Preview 200513 (Build #21340609) 5/13 with Google Pixel 3 XL (Android 9) and Samsung Galaxy S9 (Android 8):
Scenarios PBM- Onboarding:
1.Verify that the "Sign In" gradient background gradient look as intended - ❓
2.The background color for all of the other cards look as intended - ✔️
3.The color of each of the cards icon look as intended - ✔️
4.Selected 'Choose your theme' and 'Take a position' cards the border color looks as intended - ✔️
5.When unselected 'Choose your theme' and 'Take a position' cards the border color looks as intended✔️
6.The selected radio buttons colors look as intended - ✔️
7.The colors for 'Open settings', 'Read our privacy notice' look as intended - ✔️ (as per #8643 (comment) )
8.The color for 'Start browsing' button look as intended (Comment #8643 (comment) ✔️

Scenarios Light theme - Onboarding:
As per: #8643 (comment)

9.Selected 'Choose your theme' and 'Take a position' cards the border color looks as intended - ✔️
10.When unselected 'Choose your theme' and 'Take a position' cards the border color looks as intended - ✔️

Scenarios Dark theme - Onboarding:
11.Selected 'Choose your theme' and 'Take a position' cards the border color looks as intended - ✔️
12.When unselected 'Choose your theme' and 'Take a position' cards the border color looks as intended - ✔️
13. Dark theme, buttons "Open Settings" and "Read our privacy"have the same background fill as the "Start browsing" button ❓
14.The color for 'Start browsing' button look as intended same accent (Comment #8643 (comment) ✔️
Google Pixel 3 XL - Android 9 - PBM Screens

Note:

* @AmyYLee  - For scenario 1 - the gradient is applied differently as from the provided specs the lighter shade is in the opposite corner of the card. In specs the #B733E1 starts from bottom left corner of the card and in app it is in the top right corner. Should it remain the same as in screen for RTl language? 

@Diana-Rus We had issues with having the search bar gradient seamlessly blending with the gradient background of the screen when the search bar is at the top. We decided to keep the gradient unchanged (bottom left corner with #B733E1) for bottom/top search bar location. The search bar background gradient direction should follow the direction as the background gradient for private mode in RTI.

* @AmyYLee - For dark theme, buttons "Open Settings" and "Read our privacy" should they have the same background fill as the "Start browsing" button ? 

@Diana-Rus No, it should follow the spec.

* The color for "New Tab" button from apps Homescreen is not #9059FF - (comment [#8643 (comment)](https://github.com/mozilla-mobile/fenix/issues/8643#issuecomment-625421654)) in dark mode 

@Diana-Rus I'm not sure what you are referencing for "New Tab" button from apps homescreen. Can you share a screenshot?

I will remove the qa-needed label until further notice.

[Diana-Rus]

Thank you for your reply ,

• I understand about the toolbar.

• For the "Sign In" card remain as it is now(see screenshot)?
  Screenshot
  

• @Diana-Rus - Please leave as-is.

• For the dark theme should we take in consideration this specs -> that all the buttons, toggles, switches in dark theme should have the same colour (#9059FF)

@AmyYLee & @apbitner why does the onboarding "start browsing" button have a different accent color than every other button in the app? Can we please consolidate these colors?

@sblatz Hi, all the buttons, toggles, switches in dark theme should have the same colour. See below.

• Or should it match with the specs mentioned in the description from here: [Onboarding] Colours need updating #7606 ?

• For "New Tab" it was an observation that it does not matches the color from comment [Onboarding] PBM colors need updating #8643 (comment)
  Screenshot
  

[AmyYLee]

Thank you for your reply ,

* I understand about the toolbar.

* For the "Sign In" card remain as it is now(see screenshot)?
  **Screenshot**
  ![Screenshot_20200521-172900-edited](https://user-images.githubusercontent.com/49859863/82575415-1e5a0280-9b91-11ea-92e3-f7ecd8dc0a7a.png)

Keep as is.

* For the dark theme should we take in consideration this specs -> that all the buttons, toggles, switches in dark theme should have the same colour (#9059FF)

@Diana-Rus Yes - majority of buttons will have this colour in dark theme (#9059FF). There are a few exceptions for secondary buttons that will be grey (mostly found in settings pages and delete buttons).

@AmyYLee & @apbitner why does the onboarding "start browsing" button have a different accent color than every other button in the app? Can we please consolidate these colors?

@sblatz Hi, all the buttons, toggles, switches in dark theme should have the same colour. See below.

* Or should it match with the specs mentioned in the description from here: #7606 ?

* For "New Tab" it was an observation that it does not matches the color from comment [#8643 (comment)](https://github.com/mozilla-mobile/fenix/issues/8643#issuecomment-625421654)
  **Screenshot**
  ![Screenshot_20200521-182403-edited](https://user-images.githubusercontent.com/49859863/82575400-19954e80-9b91-11ea-99b3-b32094a26299.png)

@Diana-Rus New tab button should be #9059FF in Dark theme

[BranescuMihai]

Since the last bug on this is no longer relevant, I'll close this