From 365890291f80a0580c8306c8aa498e64da7f86be Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 29 Aug 2018 15:02:58 -0700 Subject: Add generic title changes --- packages/website/ts/pages/landing/landing.tsx | 24 +++++++----------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 0aa9693a4..72f6bdc9c 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -173,26 +173,16 @@ export class Landing extends React.Component { lineHeight: '36px', }} > -
{this.props.translate.get(Key.TopHeader, Deco.Cap)} -
-
- {this.props.translate.get(Key.TopTagline)} -
+
-- cgit v1.2.3 From 74d5af34ebf1e4d46a3cb13573d0793579454933 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 29 Aug 2018 16:33:08 -0700 Subject: Add TypedText component and use it on landing page --- .../types/react-typist/index.d.ts | 1 + packages/website/package.json | 1 + packages/website/ts/components/ui/text.tsx | 2 + packages/website/ts/components/ui/typed_text.tsx | 75 ++++++++++++++++++++++ packages/website/ts/index.tsx | 1 + packages/website/ts/pages/landing/landing.tsx | 32 +++++++++ yarn.lock | 8 ++- 7 files changed, 119 insertions(+), 1 deletion(-) create mode 100644 packages/typescript-typings/types/react-typist/index.d.ts create mode 100644 packages/website/ts/components/ui/typed_text.tsx diff --git a/packages/typescript-typings/types/react-typist/index.d.ts b/packages/typescript-typings/types/react-typist/index.d.ts new file mode 100644 index 000000000..692c596a5 --- /dev/null +++ b/packages/typescript-typings/types/react-typist/index.d.ts @@ -0,0 +1 @@ +declare module 'react-typist'; diff --git a/packages/website/package.json b/packages/website/package.json index 3b6754fb3..a7da19c9e 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -52,6 +52,7 @@ "react-router-dom": "^4.1.1", "react-scroll": "0xproject/react-scroll#similar-to-pr-330", "react-tooltip": "^3.2.7", + "react-typist": "^2.0.4", "redux": "^3.6.0", "redux-devtools-extension": "^2.13.2", "semver-sort": "0.0.4", diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 734483564..cd8f290e3 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -20,6 +20,7 @@ export interface TextProps { onClick?: (event: React.MouseEvent) => void; hoverColor?: string; noWrap?: boolean; + display?: string; } const PlainText: React.StatelessComponent = ({ children, className, onClick, Tag }) => ( @@ -41,6 +42,7 @@ export const Text = styled(PlainText)` ${props => (props.onClick ? 'cursor: pointer' : '')}; transition: color 0.5s ease; ${props => (props.noWrap ? 'white-space: nowrap' : '')}; + ${props => (props.display ? `display: ${props.display}` : '')}; &:hover { ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')}; } diff --git a/packages/website/ts/components/ui/typed_text.tsx b/packages/website/ts/components/ui/typed_text.tsx new file mode 100644 index 000000000..a59309139 --- /dev/null +++ b/packages/website/ts/components/ui/typed_text.tsx @@ -0,0 +1,75 @@ +import * as _ from 'lodash'; +import { darken } from 'polished'; +import * as React from 'react'; +import Typist from 'react-typist'; + +import { Text, TextProps } from 'ts/components/ui/text'; + +import 'react-typist/dist/Typist.css'; + +export interface TypedTextProps extends TextProps { + textList: string[]; + shouldRepeat?: boolean; + wordDelayMs?: number; + avgKeystrokeDelayMs?: number; + stdKeystrokeDelay?: number; +} + +export interface TypedTextState { + cycleCount: number; +} + +export class TypedText extends React.Component { + public static defaultProps = { + shouldRepeat: false, + avgKeystrokeDelayMs: 90, + wordDelayMs: 1000, + }; + public state = { + cycleCount: 0, + }; + public render(): React.ReactNode { + const { + textList, + shouldRepeat, + wordDelayMs, + avgKeystrokeDelayMs, + stdKeystrokeDelay, + ...textProps + } = this.props; + const { cycleCount } = this.state; + if (_.isEmpty(textList)) { + return null; + } + const typistChildren: React.ReactNode[] = []; + _.forEach(textList, text => { + typistChildren.push( + + {text} + , + ); + if (wordDelayMs) { + typistChildren.push(); + } + typistChildren.push(); + }); + return ( + + {typistChildren} + + ); + } + private _onTypingDone(): void { + if (this.props.shouldRepeat) { + this.setState({ + cycleCount: this.state.cycleCount + 1, + }); + } + } +} diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 9e59b00ac..6b709df6a 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -23,6 +23,7 @@ trackedTokenStorage.clearIfRequired(); import 'basscss/css/basscss.css'; import 'less/all.less'; +import 'react-typist/dist/Typist.css'; // We pass modulePromise returning lambda instead of module promise, // cause we only want to import the module when the user navigates to the page. diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 72f6bdc9c..fc4194849 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -10,6 +10,7 @@ import { CallToAction } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; import { Text } from 'ts/components/ui/text'; +import { TypedText } from 'ts/components/ui/typed_text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -43,12 +44,26 @@ const THROTTLE_TIMEOUT = 100; const WHATS_NEW_TITLE = 'V2 of the 0x Protocol is now live!'; // TODO: Update this url const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f'; +<<<<<<< HEAD const TITLE_STYLE: React.CSSProperties = { fontFamily: 'Roboto Mono', color: colors.grey, fontWeight: 300, letterSpacing: 3, }; +======= +const ROTATING_LIST = [ + 'tokens', + 'game items', + 'digital art', + 'outcomes', + 'stocks', + 'derivatives', + 'loans', + 'cats', + 'Everything.', +]; +>>>>>>> Add TypedText component and use it on landing page const relayerProjects: Project[] = [ { @@ -176,12 +191,29 @@ export class Landing extends React.Component { {this.props.translate.get(Key.TopHeader, Deco.Cap)} + {this.props.translate.getLanguage() === Language.English && ( + + {' '} + for{' '} + + + )}
diff --git a/yarn.lock b/yarn.lock index fb79e4a15..c5adc7814 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10991,7 +10991,7 @@ promzard@^0.3.0: dependencies: read "1" -prop-types@^15.5.0, prop-types@^15.6.2: +prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.2: version "15.6.2" resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" dependencies: @@ -11459,6 +11459,12 @@ react-transition-group@^2.2.1: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" +react-typist@^2.0.4: + version "2.0.4" + resolved "https://registry.npmjs.org/react-typist/-/react-typist-2.0.4.tgz#e7ee4de53ead913d363d38f07b700c00ce271be0" + dependencies: + prop-types "^15.5.10" + react@^16.3.2, react@^16.4.2: version "16.4.2" resolved "https://registry.npmjs.org/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f" -- cgit v1.2.3 From febddcb356de32c29ff45e885a0c202a03e064cf Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 29 Aug 2018 16:39:03 -0700 Subject: Remove redundant import --- packages/website/ts/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 6b709df6a..9e59b00ac 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -23,7 +23,6 @@ trackedTokenStorage.clearIfRequired(); import 'basscss/css/basscss.css'; import 'less/all.less'; -import 'react-typist/dist/Typist.css'; // We pass modulePromise returning lambda instead of module promise, // cause we only want to import the module when the user navigates to the page. -- cgit v1.2.3 From b1f97a27f3b0114ee1d9e648e0365932217c8dc8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 30 Aug 2018 11:37:58 -0700 Subject: Final tweaks --- packages/website/ts/components/ui/button.tsx | 1 + packages/website/ts/components/ui/typed_text.tsx | 1 + packages/website/ts/pages/landing/landing.tsx | 26 ++++++++++++++---------- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 2952c8859..75ba7bcff 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -96,4 +96,5 @@ export const CallToAction: React.StatelessComponent = ({ CallToAction.defaultProps = { type: 'dark', fontSize: '14px', + padding: '0.9em 1.6em', }; diff --git a/packages/website/ts/components/ui/typed_text.tsx b/packages/website/ts/components/ui/typed_text.tsx index a59309139..2bb2d40b0 100644 --- a/packages/website/ts/components/ui/typed_text.tsx +++ b/packages/website/ts/components/ui/typed_text.tsx @@ -35,6 +35,7 @@ export class TypedText extends React.Component { wordDelayMs, avgKeystrokeDelayMs, stdKeystrokeDelay, + // tslint:disable-next-line ...textProps } = this.props; const { cycleCount } = this.state; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index fc4194849..5a82576a1 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -61,7 +61,7 @@ const ROTATING_LIST = [ 'derivatives', 'loans', 'cats', - 'Everything.', + 'everything', ]; >>>>>>> Add TypedText component and use it on landing page @@ -170,8 +170,10 @@ export class Landing extends React.Component { } private _renderHero(): React.ReactNode { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const left = 'col lg-col-7 md-col-7 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center'; - const flexClassName = isSmallScreen ? 'flex items-center flex-column' : 'flex items-center'; + const left = 'col lg-col-6 md-col-6 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center'; + const flexClassName = isSmallScreen + ? 'flex items-center flex-column justify-center' + : 'flex items-center justify-center'; return (
@@ -194,7 +196,7 @@ export class Landing extends React.Component { display="inline-block" fontColor={colors.grey300} fontWeight={500} - lineHeight="1.2em" + lineHeight="1.3em" fontSize={isSmallScreen ? '28px' : '36px'} > {this.props.translate.get(Key.TopHeader, Deco.Cap)} @@ -207,7 +209,7 @@ export class Landing extends React.Component { display="inline-block" fontColor={colors.white} fontWeight={700} - lineHeight="1.2em" + lineHeight="1.3em" fontSize={isSmallScreen ? '28px' : '36px'} textList={ROTATING_LIST} shouldRepeat={true} @@ -215,17 +217,19 @@ export class Landing extends React.Component { )} - -
+ + - + {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} -
-
+ +
- + {this.props.translate.get(Key.TradeCallToAction, Deco.Cap)} -- cgit v1.2.3 From fd5ad69c268ef5411901d8ff24e429a7e0b4f888 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 30 Aug 2018 11:47:55 -0700 Subject: Add careers page to top bar --- packages/website/ts/components/top_bar/top_bar.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 8580c3a6e..1841d890b 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -238,7 +238,7 @@ export class TopBar extends React.Component { const fullWidthClasses = isExpandedDisplayType ? 'pr4' : ''; const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png'; const menuClasses = `col col-${ - isExpandedDisplayType ? '4' : '5' + isExpandedDisplayType ? '4' : '6' } ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`; const menuIconStyle = { fontSize: 25, @@ -301,6 +301,13 @@ export class TopBar extends React.Component { isNightVersion={isNightVersion} isExternal={false} /> + { {this.props.translate.get(Key.About, Deco.Cap)} + + {this.props.translate.get(Key.Careers, Deco.Cap)} + {this.props.translate.get(Key.Blog, Deco.Cap)} -- cgit v1.2.3 From c3361bb86e4b022c65b7dc657827b78efca9be41 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 30 Aug 2018 11:52:08 -0700 Subject: Remove conflict strings --- packages/website/ts/pages/landing/landing.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 5a82576a1..c8dc2fc74 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -44,14 +44,12 @@ const THROTTLE_TIMEOUT = 100; const WHATS_NEW_TITLE = 'V2 of the 0x Protocol is now live!'; // TODO: Update this url const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f'; -<<<<<<< HEAD const TITLE_STYLE: React.CSSProperties = { fontFamily: 'Roboto Mono', color: colors.grey, fontWeight: 300, letterSpacing: 3, }; -======= const ROTATING_LIST = [ 'tokens', 'game items', @@ -63,7 +61,6 @@ const ROTATING_LIST = [ 'cats', 'everything', ]; ->>>>>>> Add TypedText component and use it on landing page const relayerProjects: Project[] = [ { -- cgit v1.2.3