Merge pull request #309 from brave/welcome_img

tweak animations and make welcome page images exportable

src/features/welcome/images/index.ts

@@ -0,0 +1,81 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License. v. 2.0. If a copy of the MPL was not distributed with this file.
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled, { keyframes } from 'styled-components'
+
+import LionImage from './lion_logo.svg'
+import ImportImage from './welcome_import.svg'
+import RewardsImage from './welcome_rewards.svg'
+import SearchImage from './welcome_search.svg'
+import ShieldsImage from './welcome_shields.svg'
+import ThemeImage from './welcome_theme.svg'
+import WelcomeImage from './welcome_bg.svg'
+
+const BaseImage = styled<{}, 'img'>('img')`
+  box-sizing: border-box;
+  display: block;
+  max-width: 100%;
+`
+
+export const WelcomeLionImage = styled(BaseImage).attrs({ src: LionImage })`
+  height: 140px;
+`
+
+export const WelcomeImportImage = styled(BaseImage).attrs({ src: ImportImage })`
+  height: 190px;
+`
+
+export const WelcomeRewardsImage = styled(BaseImage).attrs({ src: RewardsImage })`
+  height: 190px;
+`
+
+export const WelcomeSearchImage = styled(BaseImage).attrs({ src: SearchImage })`
+  height: 190px;
+`
+
+export const WelcomeShieldsImage = styled(BaseImage).attrs({ src: ShieldsImage })`
+  height: 190px;
+`
+
+export const WelcomeThemeImage = styled(BaseImage).attrs({ src: ThemeImage })`
+  height: 190px;
+`
+
+interface BackgroundProps {
+  position: string
+}
+
+export const topToBottom = keyframes`
+  from {
+    transform: translateY(-100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+`
+
+export const BackgroundContainer = styled<{}, 'div'>('div')`
+  box-sizing: border-box;
+  width: inherit;
+  height: inherit;
+  position: absolute;
+  animation-delay: 0s;
+  animation-name: ${topToBottom};
+  animation-duration: 2000ms;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  overflow: hidden;
+`
+
+export const Background = styled<BackgroundProps, 'div'>('div')`
+  box-sizing: border-box;
+  background: url('${WelcomeImage}') repeat-x;
+  width: 500%;
+  height: inherit;
+  will-change: transform;
+  transform: translateX(${p => p.position});
+  transition: transform ease-in-out 1200ms;
+`

src/features/welcome/index.ts

@@ -2,16 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { Background, BackgroundContainer } from './background'
 import { SkipButton, Bullet } from './button'
-import {
-  BraveImage,
-  PaymentsImage,
-  ImportImage,
-  ShieldsImage,
-  SearchImage,
-  ThemeImage
-} from './image'
 import { Title, Paragraph } from './text'
 import {
   Footer,
@@ -26,16 +17,8 @@ import {
 } from './wrapper'
 
 export {
-  Background,
-  BackgroundContainer,
   SkipButton,
   Bullet,
-  BraveImage,
-  PaymentsImage,
-  ImportImage,
-  ShieldsImage,
-  SearchImage,
-  ThemeImage,
   Title,
   Paragraph,
   Footer,

src/features/welcome/wrapper/index.ts

@@ -68,7 +68,7 @@ export const Content = styled<ContentProps, 'section'>('section')`
   opacity: 0;
   will-change: transform;
   transform: translateX(${p => p.isPrevious ? '-' + p.screenPosition : p.screenPosition}) scale(0.8);
-  transition: opacity 1.5s, transform 1.5s ease-out;
+  transition: opacity 700ms, transform 700ms ease-in-out;
   position: absolute;
   z-index: ${p => p.zIndex};
   display: flex;
@@ -99,7 +99,7 @@ export const Panel = styled(Card)`
   /* animation stuff courtesy of ross */
   animation-delay: 1s;
   animation-name: ${fadeIn};
-  animation-duration: 2.5s;
+  animation-duration: 1200ms;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
   /* end of animation stuff */

stories/features/welcome/page/index.tsx

@@ -6,10 +6,8 @@ import * as React from 'react'
 
 // Feature-specific components
 import {
-  Background,
   Page,
   Panel,
-  BackgroundContainer,
   SlideContent
 } from '../../../../src/features/welcome/'
 
@@ -23,7 +21,7 @@ import ThemeBox from './screens/themeBox'
 import FooterBox from './screens/footerBox'
 
 // Images
-const background = require('../../../assets/img/welcome_bg.svg')
+import { Background, BackgroundContainer } from '../../../../src/features/welcome/images'
 
 // Fonts
 import '../../../assets/fonts/muli.css'
@@ -121,7 +119,7 @@ export default class WelcomePage extends React.PureComponent<{}, State> {
     return (
       <>
         <BackgroundContainer>
-          <Background background={{ image: background, position: `-${currentScreen}0%` }} />
+          <Background position={`-${currentScreen}0%`} />
         </BackgroundContainer>
         <Page>
           <Panel>

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

@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, ImportImage, Paragraph } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph } from '../../../../../src/features/welcome/'
 
 // Shared components
 import { Button } from '../../../../../src/components'
@@ -14,7 +14,7 @@ import { Button } from '../../../../../src/components'
 import locale from '../fakeLocale'
 
 // Images
-const importImage = require('../../../../assets/img/welcome_import.svg')
+import { WelcomeImportImage } from '../../../../../src/features/welcome/images'
 
 interface Props {
   index: number
@@ -46,7 +46,7 @@ export default class ImportBox extends React.PureComponent<Props, State> {
         screenPosition={'1' + (index + 1) + '0%'}
         isPrevious={index <= currentScreen}
       >
-        <ImportImage src={importImage} />
+        <WelcomeImportImage />
         <Title>{locale.importFromAnotherBrowser}</Title>
         <Paragraph>{locale.setupImport}</Paragraph>
           <Button

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

@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, PaymentsImage, Paragraph } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph } from '../../../../../src/features/welcome/'
 
 // Shared components
 import { Button } from '../../../../../src/components'
@@ -14,7 +14,7 @@ import { Button } from '../../../../../src/components'
 import locale from '../fakeLocale'
 
 // Images
-const paymentsImage = require('../../../../assets/img/welcome_rewards.svg')
+import { WelcomeRewardsImage } from '../../../../../src/features/welcome/images'
 
 interface Props {
   index: number
@@ -32,7 +32,7 @@ export default class PaymentsBox extends React.PureComponent<Props, {}> {
         screenPosition={'1' + (index + 1) + '0%'}
         isPrevious={index <= currentScreen}
       >
-        <PaymentsImage src={paymentsImage} />
+        <WelcomeRewardsImage />
         <Title>{locale.enableBraveRewards}</Title>
         <Paragraph>{locale.setupBraveRewards}</Paragraph>
         <Button

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

@@ -6,7 +6,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, SearchImage, Paragraph } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph } from '../../../../../src/features/welcome/'
 
 // Shared components
 import { Button } from '../../../../../src/components'
@@ -15,7 +15,7 @@ import { Button } from '../../../../../src/components'
 import locale from '../fakeLocale'
 
 // Images
-const searchImage = require('../../../../assets/img/welcome_search.svg')
+import { WelcomeSearchImage } from '../../../../../src/features/welcome/images'
 
 interface Props {
   index: number
@@ -33,7 +33,7 @@ export default class SearchEngineBox extends React.PureComponent<Props, {}> {
         screenPosition={'1' + (index + 1) + '0%'}
         isPrevious={index <= currentScreen}
       >
-        <SearchImage src={searchImage} />
+        <WelcomeSearchImage />
         <Title>{locale.setDefaultSearchEngine}</Title>
         <Paragraph>{locale.chooseSearchEngine}</Paragraph>
           <Button

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

@@ -5,13 +5,13 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, ShieldsImage, Paragraph } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph } from '../../../../../src/features/welcome/'
 
 // Utils
 import locale from '../fakeLocale'
 
 // Images
-const shieldsImage = require('../../../../assets/img/welcome_shields.svg')
+import { WelcomeShieldsImage } from '../../../../../src/features/welcome/images'
 
 interface Props {
   index: number
@@ -28,7 +28,7 @@ export default class ShieldsBox extends React.PureComponent<Props> {
         screenPosition={'1' + (index + 1) + '0%'}
         isPrevious={index <= currentScreen}
       >
-        <ShieldsImage src={shieldsImage} />
+        <WelcomeShieldsImage />
         <Title>{locale.protectYourPrivacy}</Title>
         <Paragraph>{locale.adjustProtectionLevel}</Paragraph>
       </Content>

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

@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, ThemeImage, Paragraph } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph } from '../../../../../src/features/welcome/'
 
 // Shared components
 import { Button } from '../../../../../src/components'
@@ -14,7 +14,7 @@ import { Button } from '../../../../../src/components'
 import locale from '../fakeLocale'
 
 // Images
-const themeImage = require('../../../../assets/img/welcome_theme.svg')
+import { WelcomeThemeImage } from '../../../../../src/features/welcome/images'
 
 interface Props {
   index: number
@@ -32,7 +32,7 @@ export default class ThemingBox extends React.PureComponent<Props, {}> {
         screenPosition={'1' + (index + 1) + '0%'}
         isPrevious={index <= currentScreen}
       >
-        <ThemeImage src={themeImage} />
+        <WelcomeThemeImage />
         <Title>{locale.chooseYourTheme}</Title>
         <Paragraph>{locale.findToolbarTheme}</Paragraph>
           <Button