✨ Inline theme selection at onboarding

Author: imptrx

stories/features/welcome/page/fakeLocale.ts

@@ -25,7 +25,12 @@ const locale = {
   fakeSearchProvider2: 'Google (default)',
   // fourth screen
   chooseYourTheme: 'Choose your color theme',
+  selectTheme: 'Select a theme',
   findToolbarTheme: 'Set the color of your toolbar by selecting the light or dark option from the settings panel.',
+  themeOption1: 'Dark',
+  themeOption2: 'Light',
+  themeOption3: 'Same as MacOS',
+
   // fifth screen
   protectYourPrivacy: 'Manage your shields',
   adjustProtectionLevel: 'Protect against privacy-invading ads and trackers while browsing with Brave Shields. Set Shields to "down" if a site doesn’t seem to be working properly.',

stories/features/welcome/page/screens/themeBox.tsx

@@ -5,7 +5,8 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, Paragraph, PrimaryButton } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph, PrimaryButton, SelectGrid } from '../../../../../src/features/welcome/'
+import { SelectBox } from '../../../../../src/features/welcome'
 
 // Utils
 import locale from '../fakeLocale'
@@ -19,9 +20,30 @@ interface Props {
   onClick: () => void
 }
 
-export default class ThemingBox extends React.PureComponent<Props, {}> {
+interface State {
+  themeSelected: boolean
+}
+
+export default class ThemingBox extends React.PureComponent<Props, State> {
+
+  constructor (props: Props) {
+    super(props)
+    this.state = {
+      themeSelected: false
+    }
+  }
+
+  onClickSelectTheme = () => {
+    this.props.onClick()
+  }
+
+  onChangeThemeOption = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    this.setState({ themeSelected: event.target.value !== '' })
+  }
+
   render () {
-    const { index, currentScreen, onClick } = this.props
+    const { index, currentScreen } = this.props
+    const { themeSelected } = this.state
     return (
       <Content
         zIndex={index}
@@ -32,13 +54,22 @@ export default class ThemingBox extends React.PureComponent<Props, {}> {
         <WelcomeThemeImage />
         <Title>{locale.chooseYourTheme}</Title>
         <Paragraph>{locale.findToolbarTheme}</Paragraph>
-          <PrimaryButton
-            level='primary'
-            type='accent'
-            size='large'
-            text={locale.theme}
-            onClick={onClick}
-          />
+        <SelectGrid>
+            <SelectBox onChange={this.onChangeThemeOption}>
+              <option value=''>{locale.selectTheme}</option>
+              <option value='Dark'>{locale.themeOption1}</option>
+              <option value='Light'>{locale.themeOption2}</option>
+              <option value='System'>{locale.themeOption3}</option>
+            </SelectBox>
+            <PrimaryButton
+              level='primary'
+              type='accent'
+              size='large'
+              text={locale.confirm}
+              disabled={!themeSelected}
+              onClick={this.onClickSelectTheme}
+            />
+        </SelectGrid>
       </Content>
     )
   }