From efffbf346fca14408270c15fd74af7fe0a192071 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Wed, 10 Jul 2019 15:16:50 -0300 Subject: [PATCH 01/41] Welcome WebUI: Reclassify existing components as containers --- components/brave_welcome_ui/brave_welcome.tsx | 2 +- components/brave_welcome_ui/{components => containers}/app.tsx | 0 .../{components => containers}/screens/footerBox.tsx | 0 .../{components => containers}/screens/importBox.tsx | 0 .../{components => containers}/screens/rewardsBox.tsx | 0 .../{components => containers}/screens/searchBox.tsx | 0 .../{components => containers}/screens/shieldsBox.tsx | 0 .../{components => containers}/screens/themeBox.tsx | 0 .../{components => containers}/screens/welcomeBox.tsx | 0 9 files changed, 1 insertion(+), 1 deletion(-) rename components/brave_welcome_ui/{components => containers}/app.tsx (100%) rename components/brave_welcome_ui/{components => containers}/screens/footerBox.tsx (100%) rename components/brave_welcome_ui/{components => containers}/screens/importBox.tsx (100%) rename components/brave_welcome_ui/{components => containers}/screens/rewardsBox.tsx (100%) rename components/brave_welcome_ui/{components => containers}/screens/searchBox.tsx (100%) rename components/brave_welcome_ui/{components => containers}/screens/shieldsBox.tsx (100%) rename components/brave_welcome_ui/{components => containers}/screens/themeBox.tsx (100%) rename components/brave_welcome_ui/{components => containers}/screens/welcomeBox.tsx (100%) diff --git a/components/brave_welcome_ui/brave_welcome.tsx b/components/brave_welcome_ui/brave_welcome.tsx index 1ef991faa57e..ae28433d5a41 100644 --- a/components/brave_welcome_ui/brave_welcome.tsx +++ b/components/brave_welcome_ui/brave_welcome.tsx @@ -11,7 +11,7 @@ import Theme from 'brave-ui/theme/brave-default' import { ThemeProvider } from 'brave-ui/theme' // Components -import App from './components/app' +import App from './containers/app' // Utils import store from './store' diff --git a/components/brave_welcome_ui/components/app.tsx b/components/brave_welcome_ui/containers/app.tsx similarity index 100% rename from components/brave_welcome_ui/components/app.tsx rename to components/brave_welcome_ui/containers/app.tsx diff --git a/components/brave_welcome_ui/components/screens/footerBox.tsx b/components/brave_welcome_ui/containers/screens/footerBox.tsx similarity index 100% rename from components/brave_welcome_ui/components/screens/footerBox.tsx rename to components/brave_welcome_ui/containers/screens/footerBox.tsx diff --git a/components/brave_welcome_ui/components/screens/importBox.tsx b/components/brave_welcome_ui/containers/screens/importBox.tsx similarity index 100% rename from components/brave_welcome_ui/components/screens/importBox.tsx rename to components/brave_welcome_ui/containers/screens/importBox.tsx diff --git a/components/brave_welcome_ui/components/screens/rewardsBox.tsx b/components/brave_welcome_ui/containers/screens/rewardsBox.tsx similarity index 100% rename from components/brave_welcome_ui/components/screens/rewardsBox.tsx rename to components/brave_welcome_ui/containers/screens/rewardsBox.tsx diff --git a/components/brave_welcome_ui/components/screens/searchBox.tsx b/components/brave_welcome_ui/containers/screens/searchBox.tsx similarity index 100% rename from components/brave_welcome_ui/components/screens/searchBox.tsx rename to components/brave_welcome_ui/containers/screens/searchBox.tsx diff --git a/components/brave_welcome_ui/components/screens/shieldsBox.tsx b/components/brave_welcome_ui/containers/screens/shieldsBox.tsx similarity index 100% rename from components/brave_welcome_ui/components/screens/shieldsBox.tsx rename to components/brave_welcome_ui/containers/screens/shieldsBox.tsx diff --git a/components/brave_welcome_ui/components/screens/themeBox.tsx b/components/brave_welcome_ui/containers/screens/themeBox.tsx similarity index 100% rename from components/brave_welcome_ui/components/screens/themeBox.tsx rename to components/brave_welcome_ui/containers/screens/themeBox.tsx diff --git a/components/brave_welcome_ui/components/screens/welcomeBox.tsx b/components/brave_welcome_ui/containers/screens/welcomeBox.tsx similarity index 100% rename from components/brave_welcome_ui/components/screens/welcomeBox.tsx rename to components/brave_welcome_ui/containers/screens/welcomeBox.tsx From 6962a8b4ec10b969c9cb23590628b3da913072ed Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Tue, 24 Jul 2018 14:43:41 +0200 Subject: [PATCH 02/41] Imported from brave-ui: Welcome - Changes structure of the project --- stories/features/welcome/page/fakeLocale.ts | 32 +++ stories/features/welcome/page/index.tsx | 239 ++++++++++++++++++++ stories/features/welcome/page/theme.ts | 106 +++++++++ stories/features/welcome/story.tsx | 19 ++ 4 files changed, 396 insertions(+) create mode 100644 stories/features/welcome/page/fakeLocale.ts create mode 100644 stories/features/welcome/page/index.tsx create mode 100644 stories/features/welcome/page/theme.ts create mode 100644 stories/features/welcome/story.tsx diff --git a/stories/features/welcome/page/fakeLocale.ts b/stories/features/welcome/page/fakeLocale.ts new file mode 100644 index 000000000000..dbb41b02d384 --- /dev/null +++ b/stories/features/welcome/page/fakeLocale.ts @@ -0,0 +1,32 @@ +/* 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/. */ + +const locale = { + // first screen + welcome: 'Welcome to Brave', + whatIsBrave: 'Brave is so much more than a browser. Let\'s show you how to make the most of it.', + letsGo: 'Let\'s go', + // second screen + enableBraveRewards: 'Enable Brave Rewards', + setupBraveRewards: 'Setting up Brave Rewards is easy and you start earning blockchain-based tokens which can be used to reward your favorite content creators.', + enableRewards: 'Enable Rewards', + // third screen + importFromAnotherBrowser: 'Import from another browser', + setupImport: 'Brave makes it easy to setup your usual environment by importing bookmarks and settings from other browsers installed on your computer.', + importNow: 'Import Now', + // fourth screen + manageShields: 'Manage your shield settings', + adjustProtectionLevel: 'Adjust and monitor your level of protection by clicking the Brave logo in the toolbar. Manage your global shield settings in the preferences panel.', + shieldSettings: 'Shield Settings', + // fifth screen + customizePreferences: 'Customize your preferences', + configure: 'Tabs, appearance, extensions and history setting can be configured in the preferences panel. You might even find a dark theme in there.', + preferences: 'Preferences', + // footer + skipWelcomeTour: 'Skip welcome tour', + next: 'Next', + done: 'Done' +} + +export default locale diff --git a/stories/features/welcome/page/index.tsx b/stories/features/welcome/page/index.tsx new file mode 100644 index 000000000000..4e27f414adf6 --- /dev/null +++ b/stories/features/welcome/page/index.tsx @@ -0,0 +1,239 @@ +/* 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 * as React from 'react' + +import Page from '../../../../src/old/page/index' +import { Heading } from '../../../../src/old/headings/index' +import Paragraph from '../../../../src/old/paragraph/index' +import { Grid, Column } from '../../../../src/components/layout/gridList/index' +import Panel from '../../../../src/old/v1/panel/index' +import UnstyledButton from '../../../../src/old/unstyledButton/index' +import { PushButton } from '../../../../src/old/v1/pushButton/index' +import Image from '../../../../src/old/v1/image/index' +import ArrowRight from '../../../../src/old/v1/icons/arrowRight' + +import theme from './theme' +import locale from './fakeLocale' + +// Images +const braveLogo = require('../../../assets/img/brave_logo.png') +const paymentsImage = require('../../../assets/img/payments.png') +const importImage = require('../../../assets/img/import.png') +const shieldsImage = require('../../../assets/img/shields.png') +const featuresImage = require('../../../assets/img/features.png') +const background = require('../../../assets/img/welcomebg.svg') + +// Fonts +import '../../../assets/fonts/muli.css' +import '../../../assets/fonts/poppins.css' + +export interface WelcomePageState { + currentScreen: number +} + +class WelcomePage extends React.PureComponent<{}, WelcomePageState> { + constructor (props: {}) { + super(props) + this.onClickNext = this.onClickNext.bind(this) + this.onSkipWelcomeTour = this.onSkipWelcomeTour.bind(this) + this.onClickDone = this.onClickDone.bind(this) + this.state = { currentScreen: 1 } + } + + get totalScreensSize () { + return 5 + } + + get firstScreen () { + return ( +
+ + + + {locale.letsGo} +
+ ) + } + + get secondScreen () { + return ( +
+ + + + {locale.enableRewards} +
+ ) + } + + get thirdScreen () { + return ( +
+ + + + {locale.importNow} +
+ ) + } + + get fourthScreen () { + return ( +
+ + + + {locale.shieldSettings} +
+ ) + } + + get fifthScreen () { + return ( +
+ + + + {locale.preferences} +
+ ) + } + + get currentScreen () { + switch (this.state.currentScreen) { + case 1: + return this.firstScreen + case 2: + return this.secondScreen + case 3: + return this.thirdScreen + case 4: + return this.fourthScreen + case 5: + return this.fifthScreen + default: + return this.firstScreen + } + } + + get footer () { + return ( +
+ + + + + + { + Array.from({length: this.totalScreensSize}, (v: undefined, k: number) => { + return ( + + ) + }) + } + + + { + this.state.currentScreen !== this.totalScreensSize + ? ( + + + {locale.next} + + + ) + : ( + + {locale.done} + + ) + } + + +
+ ) + } + + onClickSlideBullet (nextScreen: number) { + this.setState({ currentScreen: nextScreen }) + } + + onClickNext () { + this.setState({ currentScreen:this.state.currentScreen + 1 }) + } + + onClickDone () { + // fades out + // fades in to new tab page + } + + onSkipWelcomeTour () { + // fades out + // fades in to new tab page + } + + get backgroundPosition () { + switch (this.state.currentScreen) { + case 1: + return '0%' + case 2: + return '100%' + case 3: + return '200%' + case 4: + return '300%' + case 5: + return '400%' + default: + return '0%' + } + } + + render () { + return ( +
+ + + { this.currentScreen } + { this.footer } + + +
+ ) + } +} + +export default WelcomePage diff --git a/stories/features/welcome/page/theme.ts b/stories/features/welcome/page/theme.ts new file mode 100644 index 000000000000..5ced130af18e --- /dev/null +++ b/stories/features/welcome/page/theme.ts @@ -0,0 +1,106 @@ +/* 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/. */ + +const theme = { + welcomePage: { + fontFamily: '"Poppins", sans-serif', + alignItems: 'center', + justifyContent: 'center' + }, + waveBackground: { + height: '-webkit-fill-available', + width: '-webkit-fill-available' + }, + panel: { + backgroundColor: 'rgba(255,255,255,0.95)', + maxWidth: '600px', + height: '660px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + padding: '60px' + }, + braveLogo: { + width: '120px' + }, + paymentsImage: { + width: '230px' + }, + importImage: { + width: '215px' + }, + shieldsImage: { + width: '170px' + }, + featuresImage: { + width: '300px' + }, + title: { + fontFamily: '"Poppins", sans-serif', + fontSize: '32px', + color: '#212121', + margin: '40px 0 0' + }, + text: { + fontFamily: '"Muli", sans-serif', + fontSize: '18px', + color: '#76777A', + lineHeight: '34px', + textAlign: 'center', + margin: '20px 0' + }, + mainButton: { + textTransform: 'uppercase' + }, + sideButton: { + textTransform: 'uppercase', + fontWeight: '500' + }, + arrow: { + display: 'inline-block', + verticalAlign: 'middle' + }, + content: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + flex: '1', + marginBottom: '40px' + }, + skip: { + color: '#76777A', + textDecoration: 'underline' + }, + footer: { + gridGap: '0', + padding: '0' + }, + footerColumnLeft: { + alignItems: 'center', + justifyContent: 'flex-start' + }, + footerColumnCenter: { + alignItems: 'center', + justifyContent: 'center' + }, + footerColumnRight: { + alignItems: 'center', + justifyContent: 'flex-end' + }, + bulletActive: { + color: '#FB542B', + hoverColor: '#FB542B', + padding: '0 7px', + fontSize: '40px' + }, + bullet: { + color: '#7D7D7D', + hoverColor: '#FB542B', + padding: '0 7px', + fontSize: '40px' + } +} as any + +export default theme diff --git a/stories/features/welcome/story.tsx b/stories/features/welcome/story.tsx new file mode 100644 index 000000000000..d1cf253424ff --- /dev/null +++ b/stories/features/welcome/story.tsx @@ -0,0 +1,19 @@ +/* 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 * as React from 'react' +import { storiesOf, addDecorator } from '@storybook/react' +import { withKnobs } from '@storybook/addon-knobs' +import { BetterPageVisualizer } from '../../storyUtil' + +// Components +import WelcomePage from './page/index' + +addDecorator(withKnobs) + +// Globally adapt the story visualizer for this story +addDecorator(BetterPageVisualizer) + +storiesOf('Feature Components/Welcome', module) + .add('Page', () => ) From 2115e09092a2628d523416404ae2815351083a9d Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Tue, 24 Jul 2018 16:57:53 +0200 Subject: [PATCH 03/41] Imported from brave-ui: Welcome - Adds TS lint for storybook --- stories/features/welcome/page/index.tsx | 49 ++++++++++++++----------- 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/stories/features/welcome/page/index.tsx b/stories/features/welcome/page/index.tsx index 4e27f414adf6..77e35e4c5674 100644 --- a/stories/features/welcome/page/index.tsx +++ b/stories/features/welcome/page/index.tsx @@ -131,7 +131,7 @@ class WelcomePage extends React.PureComponent<{}, WelcomePageState> { { - Array.from({length: this.totalScreensSize}, (v: undefined, k: number) => { + Array.from({ length: this.totalScreensSize }, (v: undefined, k: number) => { return ( { onClick={this.onClickSlideBullet.bind(this, k + 1)} /> ) - }) - } + })} { @@ -154,12 +153,15 @@ class WelcomePage extends React.PureComponent<{}, WelcomePageState> { - + onClick={this.onClickNext} + > + {locale.next} @@ -168,7 +170,8 @@ class WelcomePage extends React.PureComponent<{}, WelcomePageState> { + onClick={this.onClickDone} + > {locale.done} ) @@ -184,7 +187,7 @@ class WelcomePage extends React.PureComponent<{}, WelcomePageState> { } onClickNext () { - this.setState({ currentScreen:this.state.currentScreen + 1 }) + this.setState({ currentScreen: this.state.currentScreen + 1 }) } onClickDone () { @@ -216,19 +219,21 @@ class WelcomePage extends React.PureComponent<{}, WelcomePageState> { render () { return ( -
+
- { this.currentScreen } - { this.footer } + {this.currentScreen} + {this.footer}
From 4153094b3bbfbb94dd2af2766072dfe8a048d6e9 Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Thu, 26 Jul 2018 19:25:54 +0200 Subject: [PATCH 04/41] Imported from brave-ui: Welcome - Fixes center problem and lagging when switching --- stories/features/welcome/story.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/stories/features/welcome/story.tsx b/stories/features/welcome/story.tsx index d1cf253424ff..16fab5fa9f65 100644 --- a/stories/features/welcome/story.tsx +++ b/stories/features/welcome/story.tsx @@ -3,17 +3,10 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ import * as React from 'react' -import { storiesOf, addDecorator } from '@storybook/react' -import { withKnobs } from '@storybook/addon-knobs' -import { BetterPageVisualizer } from '../../storyUtil' +import { storiesOf } from '@storybook/react' // Components import WelcomePage from './page/index' -addDecorator(withKnobs) - -// Globally adapt the story visualizer for this story -addDecorator(BetterPageVisualizer) - storiesOf('Feature Components/Welcome', module) .add('Page', () => ) From c56a5e3f049f7421ff37bdffc9e5c948c17cc007 Mon Sep 17 00:00:00 2001 From: Ross Moody Date: Mon, 20 Aug 2018 19:40:51 -0400 Subject: [PATCH 05/41] Imported from brave-ui: Welcome - overall welcome page improvements --- stories/features/welcome/page/index.tsx | 4 ++-- stories/features/welcome/page/theme.ts | 28 +++++++++++++++---------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/stories/features/welcome/page/index.tsx b/stories/features/welcome/page/index.tsx index 77e35e4c5674..c8a4c0562512 100644 --- a/stories/features/welcome/page/index.tsx +++ b/stories/features/welcome/page/index.tsx @@ -18,7 +18,7 @@ import theme from './theme' import locale from './fakeLocale' // Images -const braveLogo = require('../../../assets/img/brave_logo.png') +const braveLogo = require('../../../assets/img/lion_logo.svg') const paymentsImage = require('../../../assets/img/payments.png') const importImage = require('../../../assets/img/import.png') const shieldsImage = require('../../../assets/img/shields.png') @@ -226,7 +226,7 @@ class WelcomePage extends React.PureComponent<{}, WelcomePageState> { backgroundImage: `url('${background}')`, backgroundRepeat: 'repeat-x', backgroundSize: 'contain', - transition: 'background-position-x 0.6s ease-out', + transition: 'background-position-x 1.5s ease-in-out', backgroundPositionX: this.backgroundPosition }} > diff --git a/stories/features/welcome/page/theme.ts b/stories/features/welcome/page/theme.ts index 5ced130af18e..ca9727525c86 100644 --- a/stories/features/welcome/page/theme.ts +++ b/stories/features/welcome/page/theme.ts @@ -6,7 +6,8 @@ const theme = { welcomePage: { fontFamily: '"Poppins", sans-serif', alignItems: 'center', - justifyContent: 'center' + justifyContent: 'center', + height: '-webkit-fill-available' }, waveBackground: { height: '-webkit-fill-available', @@ -15,14 +16,14 @@ const theme = { panel: { backgroundColor: 'rgba(255,255,255,0.95)', maxWidth: '600px', - height: '660px', + minHeight: '580px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', - padding: '60px' + padding: '50px 60px' }, braveLogo: { - width: '120px' + width: '90px' }, paymentsImage: { width: '230px' @@ -31,7 +32,7 @@ const theme = { width: '215px' }, shieldsImage: { - width: '170px' + width: '185px' }, featuresImage: { width: '300px' @@ -40,7 +41,9 @@ const theme = { fontFamily: '"Poppins", sans-serif', fontSize: '32px', color: '#212121', - margin: '40px 0 0' + margin: '30px 0 0', + textAlign: 'center', + lineHeight: '44px' }, text: { fontFamily: '"Muli", sans-serif', @@ -67,15 +70,18 @@ const theme = { justifyContent: 'center', alignItems: 'center', flex: '1', - marginBottom: '40px' + marginBottom: '50px' }, skip: { color: '#76777A', - textDecoration: 'underline' + hoverColor: '#8B8A8E', + textDecoration: 'underline', + fontWeight: '300' }, footer: { gridGap: '0', - padding: '0' + padding: '0', + alignItems: 'center' }, footerColumnLeft: { alignItems: 'center', @@ -96,8 +102,8 @@ const theme = { fontSize: '40px' }, bullet: { - color: '#7D7D7D', - hoverColor: '#FB542B', + color: '#76777A', + hoverColor: '#8B8A8E', padding: '0 7px', fontSize: '40px' } From e2a2b63ab9ea8fd989ca36108f234094466e413e Mon Sep 17 00:00:00 2001 From: petemill Date: Mon, 20 Aug 2018 21:10:41 -0700 Subject: [PATCH 06/41] Imported from brave-ui: Welcome - Update all previous non-theme `theme` props to `customStyle` --- stories/features/welcome/page/index.tsx | 76 ++++++++++++------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/stories/features/welcome/page/index.tsx b/stories/features/welcome/page/index.tsx index c8a4c0562512..c67e20f71086 100644 --- a/stories/features/welcome/page/index.tsx +++ b/stories/features/welcome/page/index.tsx @@ -14,7 +14,7 @@ import { PushButton } from '../../../../src/old/v1/pushButton/index' import Image from '../../../../src/old/v1/image/index' import ArrowRight from '../../../../src/old/v1/icons/arrowRight' -import theme from './theme' +import customStyle from './theme' import locale from './fakeLocale' // Images @@ -48,55 +48,55 @@ class WelcomePage extends React.PureComponent<{}, WelcomePageState> { get firstScreen () { return ( -
- - - - {locale.letsGo} +
+ + + + {locale.letsGo}
) } get secondScreen () { return ( -
- - - - {locale.enableRewards} +
+ + + + {locale.enableRewards}
) } get thirdScreen () { return ( -
- - - - {locale.importNow} +
+ + + + {locale.importNow}
) } get fourthScreen () { return ( -
- - - - {locale.shieldSettings} +
+ + + + {locale.shieldSettings}
) } get fifthScreen () { return ( -
- - - - {locale.preferences} +
+ + + + {locale.preferences}
) } @@ -121,23 +121,23 @@ class WelcomePage extends React.PureComponent<{}, WelcomePageState> { get footer () { return (
- - + + - + { Array.from({ length: this.totalScreensSize }, (v: undefined, k: number) => { return ( { ) })} - + { this.state.currentScreen !== this.totalScreensSize ? ( @@ -168,7 +168,7 @@ class WelcomePage extends React.PureComponent<{}, WelcomePageState> { ) : ( @@ -230,8 +230,8 @@ class WelcomePage extends React.PureComponent<{}, WelcomePageState> { backgroundPositionX: this.backgroundPosition }} > - - + + {this.currentScreen} {this.footer} From 08779c88819b1947e517c9674553bd2e50f29d99 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Thu, 9 Aug 2018 21:51:46 -0300 Subject: [PATCH 07/41] Imported from brave-ui: Welcome - make welcome page use the new card component --- stories/features/welcome/page/index.tsx | 5 ++--- stories/features/welcome/page/theme.ts | 2 ++ 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/stories/features/welcome/page/index.tsx b/stories/features/welcome/page/index.tsx index c67e20f71086..e685532410d8 100644 --- a/stories/features/welcome/page/index.tsx +++ b/stories/features/welcome/page/index.tsx @@ -8,7 +8,6 @@ import Page from '../../../../src/old/page/index' import { Heading } from '../../../../src/old/headings/index' import Paragraph from '../../../../src/old/paragraph/index' import { Grid, Column } from '../../../../src/components/layout/gridList/index' -import Panel from '../../../../src/old/v1/panel/index' import UnstyledButton from '../../../../src/old/unstyledButton/index' import { PushButton } from '../../../../src/old/v1/pushButton/index' import Image from '../../../../src/old/v1/image/index' @@ -231,10 +230,10 @@ class WelcomePage extends React.PureComponent<{}, WelcomePageState> { }} > - +
{this.currentScreen} {this.footer} - +
) diff --git a/stories/features/welcome/page/theme.ts b/stories/features/welcome/page/theme.ts index ca9727525c86..091203858815 100644 --- a/stories/features/welcome/page/theme.ts +++ b/stories/features/welcome/page/theme.ts @@ -15,6 +15,8 @@ const theme = { }, panel: { backgroundColor: 'rgba(255,255,255,0.95)', + borderRadius: '20px', + boxShadow: '0 6px 12px 0 rgba(39, 46, 64, 0.2)', maxWidth: '600px', minHeight: '580px', display: 'flex', From e0fa12fd1b90107e1038ba95d009776a7065bcad Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Mon, 20 Aug 2018 17:05:44 -0300 Subject: [PATCH 08/41] Imported from brave-ui: Welcome - propless card component --- stories/features/welcome/page/theme.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/stories/features/welcome/page/theme.ts b/stories/features/welcome/page/theme.ts index 091203858815..9c1d18c69fe6 100644 --- a/stories/features/welcome/page/theme.ts +++ b/stories/features/welcome/page/theme.ts @@ -14,6 +14,11 @@ const theme = { width: '-webkit-fill-available' }, panel: { + width: '-webkit-fill-available', + margin: '0', + fontSize: 'inherit', + boxSizing: 'border-box', + position: 'relative', backgroundColor: 'rgba(255,255,255,0.95)', borderRadius: '20px', boxShadow: '0 6px 12px 0 rgba(39, 46, 64, 0.2)', From 08bcbdc199b9c9b95f229ee558b4005cfdf2a52f Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Mon, 10 Sep 2018 20:32:51 -0300 Subject: [PATCH 09/41] Imported from brave-ui: Welcome - update welcome screen with new code spec - this removes legacy theme file and other goodies --- src/features/welcome/button/index.ts | 61 +++++ src/features/welcome/image/index.ts | 31 +++ src/features/welcome/page/index.ts | 39 ++++ src/features/welcome/text/index.ts | 24 ++ src/features/welcome/wrappers/index.ts | 46 ++++ stories/features/welcome/page/fakeLocale.ts | 14 +- stories/features/welcome/page/index.tsx | 238 ++++++++++---------- stories/features/welcome/page/theme.ts | 119 ---------- 8 files changed, 330 insertions(+), 242 deletions(-) create mode 100644 src/features/welcome/button/index.ts create mode 100644 src/features/welcome/image/index.ts create mode 100644 src/features/welcome/page/index.ts create mode 100644 src/features/welcome/text/index.ts create mode 100644 src/features/welcome/wrappers/index.ts delete mode 100644 stories/features/welcome/page/theme.ts diff --git a/src/features/welcome/button/index.ts b/src/features/welcome/button/index.ts new file mode 100644 index 000000000000..bb878baa66de --- /dev/null +++ b/src/features/welcome/button/index.ts @@ -0,0 +1,61 @@ +/* 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, { css } from 'styled-components' +import { Button } from '../../../index' + +interface BaseButtonProps { + active?: boolean +} + +const BaseButton = styled('button')` + box-sizing: border-box; + padding: 0; + margin: 0; + display: block; + line-height: 1; + background: none; + border: none; + cursor: pointer; + outline: inherit; +` + +export const SkipButton = styled(BaseButton)` + color: #76777A; + text-decoration: underline; + font-weight: 300; + + &:hover { + color: #8B8A8E; + } +` + +export const Bullet = styled(BaseButton)` + padding: 0 7px; + font-size: 40px; + color: #76777A; + + &:hover { + color: #8B8A8E; + } + + ${p => p.active && css` + color: #FB542B; + + &:hover { + color: #FB542B; + } + `} +` + +export const MainButton = styled(Button)` + /* TODO: extended styles are being overriden by default styles */ + text-transform: uppercase !important; +` + +export const SideButton = styled(Button)` + /* TODO: extended styles are being overriden by default styles */ + text-transform: uppercase !important; + font-weight: 500 !important; +` diff --git a/src/features/welcome/image/index.ts b/src/features/welcome/image/index.ts new file mode 100644 index 000000000000..e7519ddf46e7 --- /dev/null +++ b/src/features/welcome/image/index.ts @@ -0,0 +1,31 @@ +/* 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 from 'styled-components' + +const baseImage = styled<{}, 'img'>('img')` + box-sizing: border-box; + display: block; + max-width: 100%; +` + +export const Brave = styled(baseImage)` + width: 90px; +` + +export const Payments = styled(baseImage)` + width: 230px; +` + +export const Import = styled(baseImage)` + width: 215px; +` + +export const Shields = styled(baseImage)` + width: 185px; +` + +export const Features = styled(baseImage)` + width: 300px; +` diff --git a/src/features/welcome/page/index.ts b/src/features/welcome/page/index.ts new file mode 100644 index 000000000000..fa0ce03e3659 --- /dev/null +++ b/src/features/welcome/page/index.ts @@ -0,0 +1,39 @@ +/* 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 from 'styled-components' +import { Card } from '../../../index' + +interface WaveBackgroundProps { + background: { + image: string + position: string + } +} + +export const WaveBackground = styled('div')` + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + font-family: ${p => p.theme.fontFamily.heading}; + height: 100%; + width: 100%; + background-repeat: repeat-x; + background-image: url('${p => p.background.image}'); + background-position-x: ${p => p.background.position}; + transition: 1.5s ease-in-out; +` + +export const WelcomePanel = styled(Card)` + background-color: rgba(255,255,255,0.95); + border-radius: 20px; + box-shadow: 0 6px 12px 0 rgba(39, 46, 64, 0.2); + max-width: 600px; + min-height: 580px; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 50px 60px +` diff --git a/src/features/welcome/text/index.ts b/src/features/welcome/text/index.ts new file mode 100644 index 000000000000..1f9d1d2dec23 --- /dev/null +++ b/src/features/welcome/text/index.ts @@ -0,0 +1,24 @@ +/* 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 from 'styled-components' +import { Heading } from '../../../index' + +export const Title = styled(Heading)` + font-size: 32px; + color: #212121; + margin: 30px 0 0; + text-align: center; + line-height: 44px; +` + +export const Text = styled<{}, 'p'>('p')` + display: block; + -webkit-font-smoothing: antialiased; + font-size: 18px; + color: #76777A; + line-height: 34px; + text-align: center; + margin: 20px 0; +` diff --git a/src/features/welcome/wrappers/index.ts b/src/features/welcome/wrappers/index.ts new file mode 100644 index 000000000000..43538749c81b --- /dev/null +++ b/src/features/welcome/wrappers/index.ts @@ -0,0 +1,46 @@ +/* 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 from 'styled-components' + +const BaseGrid = styled<{}, 'div'>('div')` + box-sizing: border-box; + display: grid; + height: 100%; +` + +const BaseColumn = styled<{}, 'div'>('div')` + box-sizing: border-box; + position: relative; + display: flex; +` + +export const Footer = styled(BaseGrid.withComponent('footer'))` + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr; +` + +export const FooterLeftColumn = styled(BaseColumn)` + align-items: center; + justify-content: flex-start; +` + +export const FooterMiddleColumn = styled(BaseColumn)` + align-items: center; + justify-content: center; +` + +export const FooterRightColumn = styled(BaseColumn)` + align-items: center; + justify-content: flex-end; +` + +export const Content = styled<{}, 'section'>('section')` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1; + margin-bottom: 50px; +` diff --git a/stories/features/welcome/page/fakeLocale.ts b/stories/features/welcome/page/fakeLocale.ts index dbb41b02d384..e4295a2f2ba6 100644 --- a/stories/features/welcome/page/fakeLocale.ts +++ b/stories/features/welcome/page/fakeLocale.ts @@ -6,27 +6,27 @@ const locale = { // first screen welcome: 'Welcome to Brave', whatIsBrave: 'Brave is so much more than a browser. Let\'s show you how to make the most of it.', - letsGo: 'Let\'s go', + letsGo: 'LET\'S GO', // second screen enableBraveRewards: 'Enable Brave Rewards', setupBraveRewards: 'Setting up Brave Rewards is easy and you start earning blockchain-based tokens which can be used to reward your favorite content creators.', - enableRewards: 'Enable Rewards', + enableRewards: 'ENABLE REWARDS', // third screen importFromAnotherBrowser: 'Import from another browser', setupImport: 'Brave makes it easy to setup your usual environment by importing bookmarks and settings from other browsers installed on your computer.', - importNow: 'Import Now', + importNow: 'IMPORT NOW', // fourth screen manageShields: 'Manage your shield settings', adjustProtectionLevel: 'Adjust and monitor your level of protection by clicking the Brave logo in the toolbar. Manage your global shield settings in the preferences panel.', - shieldSettings: 'Shield Settings', + shieldSettings: 'SHIELD SETTINGS', // fifth screen customizePreferences: 'Customize your preferences', configure: 'Tabs, appearance, extensions and history setting can be configured in the preferences panel. You might even find a dark theme in there.', - preferences: 'Preferences', + preferences: 'PREFERENCES', // footer skipWelcomeTour: 'Skip welcome tour', - next: 'Next', - done: 'Done' + next: 'NEXT', + done: 'DONE' } export default locale diff --git a/stories/features/welcome/page/index.tsx b/stories/features/welcome/page/index.tsx index e685532410d8..fc1d258a4895 100644 --- a/stories/features/welcome/page/index.tsx +++ b/stories/features/welcome/page/index.tsx @@ -4,16 +4,23 @@ import * as React from 'react' -import Page from '../../../../src/old/page/index' -import { Heading } from '../../../../src/old/headings/index' -import Paragraph from '../../../../src/old/paragraph/index' -import { Grid, Column } from '../../../../src/components/layout/gridList/index' -import UnstyledButton from '../../../../src/old/unstyledButton/index' -import { PushButton } from '../../../../src/old/v1/pushButton/index' -import Image from '../../../../src/old/v1/image/index' -import ArrowRight from '../../../../src/old/v1/icons/arrowRight' - -import customStyle from './theme' +import Button from '../../../../src/components/buttonsIndicators/button' + +import { Title, Text } from '../../../../src/features/welcome/text' +import * as Image from '../../../../src/features/welcome/image' +import { SkipButton, Bullet } from '../../../../src/features/welcome/button' +import { WelcomePanel, WaveBackground } from '../../../../src/features/welcome/page' + +import { + Content, + Footer, + FooterLeftColumn, + FooterMiddleColumn, + FooterRightColumn +} from '../../../../src/features/welcome/wrappers' + +import { ArrowRightIcon } from '../../../../src/components/icons' + import locale from './fakeLocale' // Images @@ -35,9 +42,6 @@ export interface WelcomePageState { class WelcomePage extends React.PureComponent<{}, WelcomePageState> { constructor (props: {}) { super(props) - this.onClickNext = this.onClickNext.bind(this) - this.onSkipWelcomeTour = this.onSkipWelcomeTour.bind(this) - this.onClickDone = this.onClickDone.bind(this) this.state = { currentScreen: 1 } } @@ -47,56 +51,81 @@ class WelcomePage extends React.PureComponent<{}, WelcomePageState> { get firstScreen () { return ( -
- - - - {locale.letsGo} -
+ + + {locale.welcome} + {locale.whatIsBrave} +