Merge pull request #3088 from brave/theme-fix

Theme fix
brave · Aug 5, 2019 · 75b002f · 75b002f
2 parents 2530b47 + 935e07a
commit 75b002f
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 40 deletions.
diff --git a/components/brave_welcome_ui/components/select/index.ts b/components/brave_welcome_ui/components/select/index.ts
@@ -39,6 +39,7 @@ export const SelectBox = styled<SelectBoxProps, 'select'>('select')`
   outline-width: 2px;
   outline-color: ${p => p.theme.color.brandBrave};
   cursor: pointer;
+  margin: 0 16px;
 
   > option {
     /* see https://github.com/brave/brave-browser/issues/4213 for info */

diff --git a/components/brave_welcome_ui/components/wrapper/index.ts b/components/brave_welcome_ui/components/wrapper/index.ts
@@ -26,13 +26,11 @@ const BaseColumn = styled<{}, 'div'>('div')`
 `
 
 export const SelectGrid = styled(BaseGrid)`
-  display: grid;
+  display: flex;
   height: 100%;
-  grid-template-columns: 2fr 1fr;
-  grid-template-rows: 1fr;
   padding: 0 30px;
-  grid-gap: 30px;
   align-items: center;
+  width: 80%;
 `
 
 export const Footer = styled(BaseGrid.withComponent('footer'))`
@@ -94,6 +92,7 @@ export const Page = styled<{}, 'div'>('div')`
   justify-content: center;
   background: ${p => p.theme.color.panelBackground};
   overflow: hidden;
+  transition: background 0.3s linear;
 `
 
 export const Panel = styled('div')`

diff --git a/components/brave_welcome_ui/containers/app.tsx b/components/brave_welcome_ui/containers/app.tsx
@@ -108,7 +108,6 @@ export class WelcomePage extends React.Component<Props, State> {
               <ThemeBox
                 index={4}
                 currentScreen={this.currentScreen}
-                onClick={this.onClickNext}
                 onChangeTheme={actions.setTheme}
                 browserThemes={welcomeData.browserThemes}
               />

diff --git a/components/brave_welcome_ui/containers/screens/themeBox.tsx b/components/brave_welcome_ui/containers/screens/themeBox.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, Paragraph, PrimaryButton, SelectGrid, SelectBox } from '../../components'
+import { Content, Title, Paragraph, SelectGrid, SelectBox } from '../../components'
 
 // Images
 import { WelcomeThemeImage } from '../../components/images'
@@ -16,7 +16,6 @@ import { getLocale } from '../../../common/locale'
 export interface Props {
   index: number
   currentScreen: number
-  onClick: () => void
   onChangeTheme: (theme: string) => void
   browserThemes: Array<Welcome.BrowserTheme>
 }
@@ -43,8 +42,7 @@ export default class ThemingBox extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { index, currentScreen, onClick, browserThemes } = this.props
-    const { themeSelected } = this.state
+    const { index, currentScreen, browserThemes } = this.props
     // Light, Dark, System
     const showSystemThemeOption = (browserThemes.length === 3)
     return (
@@ -66,14 +64,6 @@ export default class ThemingBox extends React.PureComponent<Props, State> {
               <option value='Dark'>{getLocale('dark')}</option>
               {showSystemThemeOption && <option value='System'>{getLocale('systemTheme')}</option>}
             </SelectBox>
-          <PrimaryButton
-            level='primary'
-            type='accent'
-            size='large'
-            text={getLocale('confirmTheme')}
-            disabled={!themeSelected}
-            onClick={onClick}
-          />
         </SelectGrid>
       </Content>
     )

diff --git a/components/brave_welcome_ui/stories/page/fakeLocale.ts b/components/brave_welcome_ui/stories/page/fakeLocale.ts
@@ -30,7 +30,6 @@ const locale = {
   themeOption1: 'Light',
   themeOption2: 'Dark',
   themeOption3: 'System theme (default)',
-
   // 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.',

diff --git a/components/brave_welcome_ui/stories/page/index.tsx b/components/brave_welcome_ui/stories/page/index.tsx
@@ -85,12 +85,6 @@ export default class WelcomePage extends React.PureComponent<Props, State> {
     console.log('CONFIRMED DEFAULT SEARCH ENGINE!')
   }
 
-  onClickChooseYourTheme = () => {
-    this.setState({ fakeChangedDefaultTheme: !this.state.fakeChangedDefaultTheme })
-    this.setState({ currentScreen: this.state.currentScreen + 1 })
-    console.log('NEW THEME CHOOSED')
-  }
-
   onClickRewardsGetStarted = () => {
     console.log('SENT TO REWARDS PAGE')
   }
@@ -128,7 +122,7 @@ export default class WelcomePage extends React.PureComponent<Props, State> {
               <WelcomeBox index={1} currentScreen={currentScreen} onClick={this.onClickLetsGo} />
               <ImportBox index={2} currentScreen={currentScreen} onClick={this.onClickImport} />
               <SearchBox index={3} currentScreen={currentScreen} onClick={this.onClickConfirmDefaultSearchEngine} fakeOnChange={this.onChangeDefaultSearchEngine} isDefaultSearchGoogle={isDefaultSearchGoogle}/>
-              <ThemeBox index={4} currentScreen={currentScreen} onClick={this.onClickChooseYourTheme} />
+              <ThemeBox index={4} currentScreen={currentScreen} />
               <ShieldsBox index={5} currentScreen={currentScreen} />
               <RewardsBox index={6} currentScreen={currentScreen} onClick={this.onClickRewardsGetStarted} />
             </SlideContent>

diff --git a/components/brave_welcome_ui/stories/page/screens/themeBox.tsx b/components/brave_welcome_ui/stories/page/screens/themeBox.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, Paragraph, PrimaryButton, SelectGrid, SelectBox } from '../../../components'
+import { Content, Title, Paragraph, SelectGrid, SelectBox } from '../../../components'
 
 // Utils
 import locale from '../fakeLocale'
@@ -16,7 +16,6 @@ import { WelcomeThemeImage } from '../../../components/images'
 interface Props {
   index: number
   currentScreen: number
-  onClick: () => void
 }
 
 interface State {
@@ -32,17 +31,12 @@ export default class ThemingBox extends React.PureComponent<Props, State> {
     }
   }
 
-  onClickSelectTheme = () => {
-    this.props.onClick()
-  }
-
   onChangeThemeOption = (event: React.ChangeEvent<HTMLSelectElement>) => {
     this.setState({ themeSelected: event.target.value !== '' })
   }
 
   render () {
     const { index, currentScreen } = this.props
-    const { themeSelected } = this.state
     return (
       <Content
         zIndex={index}
@@ -60,14 +54,6 @@ export default class ThemingBox extends React.PureComponent<Props, State> {
               <option value='Dark'>{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>
     )