Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add theme setting as an inline option to onboarding process #4992

Closed
rebron opened this issue Jun 19, 2019 · 6 comments · Fixed by brave/brave-core#2909
Closed

add theme setting as an inline option to onboarding process #4992

rebron opened this issue Jun 19, 2019 · 6 comments · Fixed by brave/brave-core#2909
Assignees
Labels
about-pages/welcome onboarding Front-end related to helping a new user learn about features within the browser. priority/P3 The next thing for us to work on. It'll ride the trains. QA Pass-Linux QA Pass-macOS QA Pass-Win64 QA/Test-Plan-Specified QA/Yes release-notes/exclude

Comments

@rebron
Copy link
Collaborator

rebron commented Jun 19, 2019

Description

Currently, when users get to the 'Choose your color theme' during our onboarding process, selecting Choose Your Theme sends them to brave://settings in a new tab.

We should offer the same drop down list from settings (instead of the 'Choose your theme button'):
same as [OS]
Light
Dark

and let the user make this choice inline during the onboarding process.

Current Screen

Screen Shot 2019-06-19 at 12 14 43 PM

@rebron rebron added the onboarding Front-end related to helping a new user learn about features within the browser. label Jun 19, 2019
@rebron
Copy link
Collaborator Author

rebron commented Jun 19, 2019

cc: @rossmoody

@imptrx imptrx self-assigned this Jun 19, 2019
@imptrx
Copy link

imptrx commented Jun 25, 2019

@rossmoody Do we have an updated visual spec on how the new screen should look? Aside from the the text and the dropdown options - I am assuming we want to actually set the theme when the user clicks the button rather than change from drop down?

@rossmoody
Copy link
Contributor

Yeah, that would be amazing if we could have the theme change like it does in settings. The behavior would follow the same pattern as import and search. Disabled button to start, placeholder read "Select a theme" and then any available options, if an option is selected then the button auto proceeds to the next screen.

Welcome Light

@bsclifton bsclifton self-assigned this Jun 25, 2019
@bsclifton
Copy link
Member

@imptrx I can help with the C++ side of this change 😄

@rebron rebron added the priority/P3 The next thing for us to work on. It'll ride the trains. label Jul 1, 2019
@petemill
Copy link
Member

@rebron @rossmoody when reviewing the PR I had some notes about the UX / spec for this and maybe simplifying. I'm semi-concerned about getting in the state where a percentage of users have unnecessarily overridden the 'Same as xyzOS' feature.

brave/brave-ui#512 (comment)

One concern I have with this UX @rossmoody is that the user may feel that they have to pick a theme, and not know that 'Same as {macOS,Windows}' is the default. Therefore they may explicitly choose Light / Dark, and not know that they could have it follow the OS when they changed it.

To be honest, I think having this choice on the welcome screen had high value, before we matched system theme, especially if it wasn't a drop-down but was a visual choice, but now it seems confusing perhaps.

I don't know if there's a way we can offer this tri-state in a way that doesn't prompt users to override the default unnecessarily?

image

Edit: Perhaps the choices in this welcome screen could be different to what's offered in the Settings page, in that we offer 2 choices: Dark or Light (ideally graphically). The choice is pre-selected to whatever the system theme is (or Light if not on an OS which supports dark mode). Only if the user changes to a theme that the OS is not currently on, do we save a setting as specificall 'Light' or 'Dark'. Otherwise, we leave it at 'System'. WDYT @rossmoody ?

@GeetaSarvadnya
Copy link

GeetaSarvadnya commented Sep 24, 2019

Verification passed on

Brave 0.69.128 Chromium: 77.0.3865.75 (Official Build) (64-bit)
Revision 201e747d032611c5f2785cae06e894cf85be7f8a-refs/branch-heads/3865@{#776}
OS Windows 10 OS Version 1803 (Build 17134.1006)

Verification passed on

Brave 0.69.128 Chromium: 77.0.3865.75 (Official Build) (64-bit)
Revision 201e747d032611c5f2785cae06e894cf85be7f8a-refs/branch-heads/3865@{#776}
OS Ubuntu 18.04 LTS

Verification PASSED on macOS 10.14.6 x64 using the following build:

Brave 0.69.129 Chromium: 77.0.3865.90 (Official Build) (64-bit)
Revision 58c425ba843df2918d9d4b409331972646c393dd-refs/branch-heads/3865@{#830}
OS macOS Version 10.14.6 (Build 18G95)

Screen Shot 2019-09-26 at 2 18 46 PM

Screen Shot 2019-09-26 at 2 16 48 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
about-pages/welcome onboarding Front-end related to helping a new user learn about features within the browser. priority/P3 The next thing for us to work on. It'll ride the trains. QA Pass-Linux QA Pass-macOS QA Pass-Win64 QA/Test-Plan-Specified QA/Yes release-notes/exclude
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants