presenting the Oscar winning welcome page

browser/ui/webui/brave_webui_source.cc

@@ -77,16 +77,6 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
         { "c168145d6bf1abf2c0322636366f7dbe.svg", IDR_BRAVE_PRIVATE_TAB_TOR_IMG },
         { "dbdc336ccc651b8a7c925b3482d6e65a.svg", IDR_BRAVE_PRIVATE_TAB_IMG }
       }
-    }, {
-      std::string("welcome"), {
-      { "ecaefa14dcf65df518730a336430727e.ico", IDR_BRAVE_WELCOME_FAVICON },
-      { "51a13e5e543f312a990d4fd7e741d427.png", IDR_BRAVE_WELCOME_SLIDE_1_IMAGE },
-      { "a6abd363c58f91a260f94f5beb32b172.png", IDR_BRAVE_WELCOME_SLIDE_2_IMAGE },
-      { "fc31b8d3f7f3d32eec78365212f3002b.png", IDR_BRAVE_WELCOME_SLIDE_3_IMAGE },
-      { "59ec9e5cdea1df1630f8c6e2b7a27ede.png", IDR_BRAVE_WELCOME_SLIDE_4_IMAGE },
-      { "c2217e15737be3c82f5fef818d3fd26c.png", IDR_BRAVE_WELCOME_SLIDE_5_IMAGE },
-      { "e9d936c617aad55fe1bc7a001f2defb4.svg", IDR_BRAVE_WELCOME_BACKGROUND_IMAGE }
-      }
     }, {
       std::string("rewards"), {
         { "favicon.ico", IDR_BRAVE_REWARDS_FAVICON },
@@ -182,13 +172,16 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
         { "enableRewards", IDS_BRAVE_WELCOME_PAGE_REWARDS_BUTTON },
         { "importFromAnotherBrowser", IDS_BRAVE_WELCOME_PAGE_IMPORT_TITLE },
         { "setupImport", IDS_BRAVE_WELCOME_PAGE_IMPORT_DESC },
-        { "importNow", IDS_BRAVE_WELCOME_PAGE_IMPORT_BUTTON },
+        { "import", IDS_BRAVE_WELCOME_PAGE_IMPORT_BUTTON },
         { "manageShields", IDS_BRAVE_WELCOME_PAGE_SHIELDS_TITLE },
         { "adjustProtectionLevel", IDS_BRAVE_WELCOME_PAGE_SHIELDS_DESC },
         { "shieldSettings", IDS_BRAVE_WELCOME_PAGE_SHIELDS_BUTTON },
-        { "customizePreferences", IDS_BRAVE_WELCOME_PAGE_PREFERENCES_TITLE },
-        { "configure", IDS_BRAVE_WELCOME_PAGE_PREFERENCES_DESC },
-        { "preferences", IDS_BRAVE_WELCOME_PAGE_PREFERENCES_BUTTON },
+        { "setDefaultSearchEngine", IDS_BRAVE_WELCOME_PAGE_SEARCH_TITLE },
+        { "chooseSearchEngine", IDS_BRAVE_WELCOME_PAGE_SEARCH_DESC },
+        { "search", IDS_BRAVE_WELCOME_PAGE_SEARCH_BUTTON },
+        { "findToolbarTheme", IDS_BRAVE_WELCOME_PAGE_THEME_TITLE },
+        { "chooseTheme", IDS_BRAVE_WELCOME_PAGE_THEME_DESC },
+        { "theme", IDS_BRAVE_WELCOME_PAGE_THEME_BUTTON },
         { "skipWelcomeTour", IDS_BRAVE_WELCOME_PAGE_SKIP_BUTTON },
         { "next", IDS_BRAVE_WELCOME_PAGE_NEXT_BUTTON },
         { "done", IDS_BRAVE_WELCOME_PAGE_DONE_BUTTON }

components/brave_welcome_ui/BUILD.gn

@@ -8,12 +8,13 @@ transpile_web_ui("brave_welcome_ui") {
     "store.ts",
     "actions/welcome_actions.ts",
     "components/app.tsx",
-    "components/braveScreen.tsx",
-    "components/featuresScreen.tsx",
-    "components/footer.tsx",
-    "components/importScreen.tsx",
-    "components/rewardsScreen.tsx",
-    "components/shieldsScreen.tsx",
+    "components/screens/footerBox.tsx",
+    "components/screens/importBox.tsx",
+    "components/screens/rewardsBox.tsx",
+    "components/screens/searchBox.tsx",
+    "components/screens/shieldsBox.tsx",
+    "components/screens/themeBox.tsx",
+    "components/screens/welcomeBox.tsx",
     "constants/theme.ts",
     "constants/welcome_types.ts",
     "reducers/index.ts",

components/brave_welcome_ui/actions/welcome_actions.ts

@@ -9,6 +9,9 @@ import { types } from '../constants/welcome_types'
 
 export const importNowRequested = () => action(types.IMPORT_NOW_REQUESTED)
 
-export const goToPageRequested = (pageIndex: number) => action(types.GO_TO_PAGE_REQUESTED, {
-  pageIndex
+export const goToTabRequested = (url: URL, target: string) => action(types.GO_TO_TAB_REQUESTED, {
+  url,
+  target
 })
+
+export const closeTabRequested = () => action(types.CLOSE_TAB_REQUESTED)

components/brave_welcome_ui/brave_welcome.html

@@ -14,7 +14,7 @@
 <script src="/brave_welcome.bundle.js"></script>
 <script src="/strings.js"></script>
 <style>
-  #root { height: 100%; }
+  #root { height: -webkit-fill-available; width: -webkit-fill-available; }
 </style>
 </head>
 <body>

components/brave_welcome_ui/brave_welcome.tsx

@@ -6,6 +6,9 @@ import * as React from 'react'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 
+import Theme from 'brave-ui/theme/brave-default'
+import { ThemeProvider } from 'brave-ui/theme'
+
 // Components
 import App from './components/app'
 
@@ -18,7 +21,9 @@ window.cr.define('brave_welcome', function () {
   function initialize () {
     render(
       <Provider store={store}>
-        <App />
+        <ThemeProvider theme={Theme}>
+          <App />
+        </ThemeProvider>
       </Provider>,
       document.getElementById('root'))
     window.i18nTemplate.process(window.document, window.loadTimeData)

components/brave_welcome_ui/components/app.tsx

@@ -5,149 +5,119 @@
 import * as React from 'react'
 import { bindActionCreators, Dispatch } from 'redux'
 import { connect } from 'react-redux'
-import { UnstyledButton } from 'brave-ui/old'
-import Panel from 'brave-ui/old/v1/panel'
 
-// Components
-import BraveScreen from './braveScreen'
-import RewardsScreen from './rewardsScreen'
-import ImportScreen from './importScreen'
-import ShieldsScreen from './shieldsScreen'
-import FeaturesScreen from './featuresScreen'
-import Footer from './footer'
+// Feature-specific components
+import { Page, Panel, SlideContent } from 'brave-ui/features/welcome'
 
-// Constants
-import { theme } from '../constants/theme'
+// Component groups
+import WelcomeBox from './screens/welcomeBox'
+import ImportBox from './screens/importBox'
+import RewardsBox from './screens/rewardsBox'
+import SearchBox from './screens/searchBox'
+import ShieldsBox from './screens/shieldsBox'
+import ThemeBox from './screens/themeBox'
+import FooterBox from './screens/footerBox'
+
+// Images
+import { Background, BackgroundContainer } from 'brave-ui/features/welcome/images'
 
 // Utils
 import * as welcomeActions from '../actions/welcome_actions'
 
 // Assets
-const background = require('../../img/welcome/welcomebg.svg')
-require('../../fonts/muli.css')
-require('../../fonts/poppins.css')
+import '../../fonts/muli.css'
+import '../../fonts/poppins.css'
+import 'emptykit.css'
 
 interface Props {
   welcomeData: Welcome.State
   actions: any
 }
 
-export class WelcomePage extends React.Component<Props, {}> {
-  get pageIndex () {
-    return this.props.welcomeData.pageIndex
-  }
+export interface State {
+  currentScreen: number
+}
 
-  get actions () {
-    return this.props.actions
+const totalScreensSize = 6
+
+export class WelcomePage extends React.Component<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = {
+      currentScreen: 1
+    }
   }
 
-  get totalSecondaryScreensSize () {
-    return [
-      BraveScreen,
-      RewardsScreen,
-      ImportScreen,
-      ShieldsScreen,
-      FeaturesScreen
-    ].length
+  get currentScreen () {
+    return this.state.currentScreen
   }
 
-  get activeScreen () {
-    switch (this.pageIndex) {
-      case 0:
-        return <BraveScreen onGoToFirstSlide={this.onGoToFirstSlide} />
-      case 1:
-        return <RewardsScreen />
-      case 2:
-        return <ImportScreen onImportNowClicked={this.onImportNowClicked} />
-      case 3:
-        return <ShieldsScreen />
-      case 4:
-        return <FeaturesScreen />
-      default:
-        return <BraveScreen onGoToFirstSlide={this.onGoToFirstSlide} />
-    }
+  onClickLetsGo = () => {
+    this.setState({ currentScreen: this.state.currentScreen + 1 })
   }
 
-  get slideBullets () {
-    return Array.from({ length: this.totalSecondaryScreensSize }, (v, k) => {
-      return (
-        <UnstyledButton
-          customStyle={
-            this.pageIndex === k
-              ? theme.bulletActive
-              : theme.bullet
-          }
-          text='•'
-          key={k}
-          onClick={this.onGoToSlide.bind(this, k)}
-        />
-      )
-    })
+  onClickImport = () => {
+    // clicking this button executes functionality and then auto proceed to next screen
+    this.props.actions.importNowRequested()
+    this.setState({ currentScreen: this.state.currentScreen + 1 })
   }
 
-  get backgroundStyle () {
-    return {
-      fontFamily: '"Poppins", sans-serif',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: '-webkit-fill-available',
-      width: '-webkit-fill-available',
-      transition: 'background-position-x 0.6s ease-out',
-      backgroundRepeat: 'repeat-x',
-      backgroundImage: `url('${background}')`,
-      backgroundPositionX: this.backgroundPosition
-    }
+  onClickConfirmDefaultSearchEngine = () => {
+    this.props.actions.goToTabRequested('brave://settings/search', '_blank')
   }
 
-  get backgroundPosition () {
-    const { welcomeData } = this.props
-    switch (welcomeData.pageIndex) {
-      case 0:
-        return '0%'
-      case 1:
-        return '100%'
-      case 2:
-        return '200%'
-      case 3:
-        return '300%'
-      case 4:
-        return '400%'
-      default:
-        return '0%'
-    }
+  onClickChooseYourTheme = () => {
+    this.props.actions.goToTabRequested('brave://settings/appearance', '_blank')
   }
 
-  onGoToFirstSlide = () => {
-    this.onGoToSlide(1)
+  onClickRewardsGetStarted = () => {
+    this.props.actions.goToTabRequested('brave://rewards', '_blank')
   }
 
-  onGoToSlide = (nextPage: number) => {
-    this.actions.goToPageRequested(nextPage)
+  onClickSlideBullet = (nextScreen: number) => {
+    this.setState({ currentScreen: nextScreen })
   }
 
   onClickNext = () => {
-    this.actions.goToPageRequested(this.pageIndex + 1)
+    this.setState({ currentScreen: this.state.currentScreen + 1 })
+  }
+
+  onClickDone = () => {
+    this.props.actions.goToTabRequested('brave://newtab', '_self')
   }
 
-  onImportNowClicked = () => {
-    this.actions.importNowRequested()
+  onClickSkip = () => {
+    this.props.actions.goToTabRequested('brave://newtab', '_self')
   }
 
   render () {
+    const { currentScreen } = this.state
     return (
-      <div id='welcomePage' style={this.backgroundStyle}>
-        <Panel customStyle={theme.panel}>
-          {this.activeScreen}
-          <Footer
-            pageIndex={this.pageIndex}
-            totalSecondaryScreensSize={this.totalSecondaryScreensSize}
-            onClickNext={this.onClickNext}
-          >
-            {this.slideBullets}
-          </Footer>
-        </Panel>
-      </div>
+      <>
+        <BackgroundContainer>
+          <Background position={`-${currentScreen}0%`} style={{ backfaceVisibility: 'hidden' }} />
+        </BackgroundContainer>
+        <Page id='welcomePage'>
+          <Panel>
+            <SlideContent>
+              <WelcomeBox index={1} currentScreen={this.currentScreen} onClick={this.onClickLetsGo} />
+              <ImportBox index={2} currentScreen={this.currentScreen} onClick={this.onClickImport} />
+              <SearchBox index={3} currentScreen={this.currentScreen} onClick={this.onClickConfirmDefaultSearchEngine} />
+              <ThemeBox index={4} currentScreen={this.currentScreen} onClick={this.onClickChooseYourTheme} />
+              <ShieldsBox index={5} currentScreen={this.currentScreen} />
+              <RewardsBox index={6} currentScreen={this.currentScreen} onClick={this.onClickRewardsGetStarted} />
+            </SlideContent>
+            <FooterBox
+              totalScreensSize={totalScreensSize}
+              currentScreen={this.currentScreen}
+              onClickSkip={this.onClickSkip}
+              onClickSlideBullet={this.onClickSlideBullet}
+              onClickNext={this.onClickNext}
+              onClickDone={this.onClickDone}
+            />
+          </Panel>
+        </Page>
+      </>
     )
   }
 }