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

Added select theme UI to the new onboarding flow #16326

Merged
merged 3 commits into from
Dec 15, 2022

Conversation

nullhook
Copy link
Contributor

@nullhook nullhook commented Dec 12, 2022

Resolves brave/brave-browser#27170

This PR adds a new UI screen when there are no browser profiles. The screen allows a user to select a browser theme.

image

Submitter Checklist:

  • I confirm that no security/privacy review is needed, or that I have requested one
  • There is a ticket for my issue
  • Used Github auto-closing keywords in the PR description above
  • Wrote a good PR/commit description
  • Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
  • Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
  • Checked the PR locally:
    • npm run test -- brave_browser_tests, npm run test -- brave_unit_tests wiki
    • npm run lint, npm run presubmit wiki, npm run gn_check, npm run tslint
  • Ran git rebase master (if needed)

Reviewer Checklist:

  • A security review is not needed, or a link to one is included in the PR description
  • New files have MPL-2.0 license header
  • Adequate test coverage exists to prevent regressions
  • Major classes, functions and non-trivial code blocks are well-commented
  • Changes in component dependencies are properly reflected in gn
  • Code follows the style guide
  • Test plan is specified in PR before merging

After-merge Checklist:

Test Plan:

@github-actions github-actions bot added the CI/storybook-url Deploy storybook and provide a unique URL for each build label Dec 12, 2022
@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@nullhook nullhook force-pushed the onboarding/select-theme branch 2 times, most recently from 89e9368 to 308220c Compare December 12, 2022 07:50
@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@nullhook nullhook force-pushed the onboarding/select-theme branch 2 times, most recently from c9b58b6 to 35819de Compare December 12, 2022 08:24
@nullhook nullhook requested a review from petemill December 12, 2022 08:27
@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

Copy link
Member

@petemill petemill left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the design, the icon for each of the 3 theme options is vertically aligned at the same point. Obviously we have to account for different languages to have different string lengths, but it seems we could do better in this implementation to ensure they are aligned most of the time. For example, aligning the icon to the same vertical position and allowing the string to grow downwards, increasing the height of its own box (and the 2 others, via a flex parent).
image
image

Comment on lines 164 to 167
web_ui()->RegisterMessageCallback(
"setBraveThemeType",
base::BindRepeating(&WelcomeDOMHandler::SetBraveThemeType,
base::Unretained(this)));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think you need to add a new message type since this page already has access to the chrome.braveTheme.setBraveThemeType('Light' | 'Dark' | '') API

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

@nullhook
Copy link
Contributor Author

Should be vertical aligned now.

image

@nullhook nullhook requested a review from petemill December 13, 2022 07:04
@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@nullhook nullhook force-pushed the onboarding/select-theme branch from f64010c to 8262f16 Compare December 14, 2022 06:58
@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@nullhook nullhook force-pushed the onboarding/select-theme branch from 8262f16 to ffa42de Compare December 14, 2022 07:50
@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@nullhook nullhook force-pushed the onboarding/select-theme branch from ffa42de to 195ba7b Compare December 14, 2022 09:48
@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@nullhook nullhook force-pushed the onboarding/select-theme branch from 195ba7b to 5e49055 Compare December 14, 2022 23:06
@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@nullhook nullhook force-pushed the onboarding/select-theme branch from 5e49055 to 09cab4f Compare December 15, 2022 02:04
@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@nullhook nullhook merged commit 79c48ce into master Dec 15, 2022
@nullhook nullhook deleted the onboarding/select-theme branch December 15, 2022 07:31
@github-actions github-actions bot added this to the 1.48.x - Nightly milestone Dec 15, 2022
@kjozwiak
Copy link
Member

Verification PASSED on macOS 13.1 Ventura x64 using the following build(s):

Brave | 1.48.96 Chromium: 109.0.5414.46 (Official Build) nightly (x86_64)
--- | ---
Revision | 6e36b77363ef3febbe792af680fa1367993ddcf0-refs/branch-heads/5414@{#709}
OS | macOS Version 13.1 (Build 22C65)

brave://welcome when several browsers installed

Example Example Example
Screenshot 2022-12-29 at 1 51 43 AM Screenshot 2022-12-29 at 1 51 52 AM Screenshot 2022-12-29 at 1 51 59 AM

brave://welcome when nothing but Safari installed

Example Example Example Example Example Example
Screenshot 2022-12-29 at 2 20 21 AM Screenshot 2022-12-29 at 2 20 31 AM Screenshot 2022-12-29 at 2 20 50 AM Screenshot 2022-12-29 at 2 20 59 AM Screenshot 2022-12-29 at 2 21 10 AM Screenshot 2022-12-29 at 2 21 28 AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CI/storybook-url Deploy storybook and provide a unique URL for each build
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add flow for no browser detected when onboarding
4 participants