aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFrancesco Agosti <francesco.agosti93@gmail.com>2018-08-31 02:55:28 +0800
committerGitHub <noreply@github.com>2018-08-31 02:55:28 +0800
commit50781bd77a1f700036034aa6e081456533b4ad02 (patch)
tree0d14f731440f9e7f0fc83f64b566d1e0464d631b
parent0368de701fa2443a2537d5ea6cb35bdce1ade638 (diff)
parentc3361bb86e4b022c65b7dc657827b78efca9be41 (diff)
downloaddexon-sol-tools-50781bd77a1f700036034aa6e081456533b4ad02.tar
dexon-sol-tools-50781bd77a1f700036034aa6e081456533b4ad02.tar.gz
dexon-sol-tools-50781bd77a1f700036034aa6e081456533b4ad02.tar.bz2
dexon-sol-tools-50781bd77a1f700036034aa6e081456533b4ad02.tar.lz
dexon-sol-tools-50781bd77a1f700036034aa6e081456533b4ad02.tar.xz
dexon-sol-tools-50781bd77a1f700036034aa6e081456533b4ad02.tar.zst
dexon-sol-tools-50781bd77a1f700036034aa6e081456533b4ad02.zip
Merge pull request #1042 from 0xProject/feature/website/v2-tweaks-fra
[website] Add rotating text to landing header and careers button to topbar
-rw-r--r--packages/typescript-typings/types/react-typist/index.d.ts1
-rw-r--r--packages/website/package.json1
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx12
-rw-r--r--packages/website/ts/components/ui/button.tsx1
-rw-r--r--packages/website/ts/components/ui/text.tsx2
-rw-r--r--packages/website/ts/components/ui/typed_text.tsx76
-rw-r--r--packages/website/ts/pages/landing/landing.tsx71
-rw-r--r--yarn.lock8
8 files changed, 146 insertions, 26 deletions
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/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<TopBarProps, TopBarState> {
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,
@@ -302,6 +302,13 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
isExternal={false}
/>
<TopBarMenuItem
+ title={this.props.translate.get(Key.Careers, Deco.Cap)}
+ path={`${WebsitePaths.Careers}`}
+ style={styles.menuItem}
+ isNightVersion={isNightVersion}
+ isExternal={false}
+ />
+ <TopBarMenuItem
title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
path={`${WebsitePaths.Portal}`}
isPrimary={true}
@@ -406,6 +413,9 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<Link to={`${WebsitePaths.About}`} className="text-decoration-none">
<MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem>
</Link>
+ <Link to={`${WebsitePaths.Careers}`} className="text-decoration-none">
+ <MenuItem className="py2">{this.props.translate.get(Key.Careers, Deco.Cap)}</MenuItem>
+ </Link>
<a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}>
<MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem>
</a>
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<CallToActionProps> = ({
CallToAction.defaultProps = {
type: 'dark',
fontSize: '14px',
+ padding: '0.9em 1.6em',
};
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<HTMLElement>) => void;
hoverColor?: string;
noWrap?: boolean;
+ display?: string;
}
const PlainText: React.StatelessComponent<TextProps> = ({ 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..2bb2d40b0
--- /dev/null
+++ b/packages/website/ts/components/ui/typed_text.tsx
@@ -0,0 +1,76 @@
+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<TypedTextProps, TypedTextState> {
+ public static defaultProps = {
+ shouldRepeat: false,
+ avgKeystrokeDelayMs: 90,
+ wordDelayMs: 1000,
+ };
+ public state = {
+ cycleCount: 0,
+ };
+ public render(): React.ReactNode {
+ const {
+ textList,
+ shouldRepeat,
+ wordDelayMs,
+ avgKeystrokeDelayMs,
+ stdKeystrokeDelay,
+ // tslint:disable-next-line
+ ...textProps
+ } = this.props;
+ const { cycleCount } = this.state;
+ if (_.isEmpty(textList)) {
+ return null;
+ }
+ const typistChildren: React.ReactNode[] = [];
+ _.forEach(textList, text => {
+ typistChildren.push(
+ <Text key={`text-${text}-${cycleCount}`} {...textProps}>
+ {text}
+ </Text>,
+ );
+ if (wordDelayMs) {
+ typistChildren.push(<Typist.Delay key={`delay-${text}-${cycleCount}`} ms={wordDelayMs} />);
+ }
+ typistChildren.push(<Typist.Backspace key={`backspace-${text}-${cycleCount}`} count={text.length} />);
+ });
+ return (
+ <Typist
+ avgTypingDelay={avgKeystrokeDelayMs}
+ stdTypingDelay={stdKeystrokeDelay}
+ className="inline"
+ key={`typist-key-${cycleCount}`}
+ onTypingDone={this._onTypingDone.bind(this)}
+ >
+ {typistChildren}
+ </Typist>
+ );
+ }
+ private _onTypingDone(): void {
+ if (this.props.shouldRepeat) {
+ this.setState({
+ cycleCount: this.state.cycleCount + 1,
+ });
+ }
+ }
+}
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 0aa9693a4..c8dc2fc74 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';
@@ -49,6 +50,17 @@ const TITLE_STYLE: React.CSSProperties = {
fontWeight: 300,
letterSpacing: 3,
};
+const ROTATING_LIST = [
+ 'tokens',
+ 'game items',
+ 'digital art',
+ 'outcomes',
+ 'stocks',
+ 'derivatives',
+ 'loans',
+ 'cats',
+ 'everything',
+];
const relayerProjects: Project[] = [
{
@@ -155,8 +167,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
}
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 (
<div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}>
<div className="mx-auto max-width-4 clearfix">
@@ -173,37 +187,46 @@ export class Landing extends React.Component<LandingProps, LandingState> {
lineHeight: '36px',
}}
>
- <div
+ <Text
className="sm-pb2"
- style={{
- fontFamily: 'Roboto Mono',
- fontSize: isSmallScreen ? 26 : 34,
- }}
+ fontFamily="Roboto"
+ display="inline-block"
+ fontColor={colors.grey300}
+ fontWeight={500}
+ lineHeight="1.3em"
+ fontSize={isSmallScreen ? '28px' : '36px'}
>
{this.props.translate.get(Key.TopHeader, Deco.Cap)}
- </div>
- <div
- className="pt2 h5 sm-mx-auto"
- style={{
- maxWidth: 446,
- fontFamily: 'Roboto Mono',
- lineHeight: 1.7,
- fontWeight: 300,
- }}
+ {this.props.translate.getLanguage() === Language.English && (
+ <React.Fragment>
+ {' '}
+ for{' '}
+ <TypedText
+ fontFamily="Roboto"
+ display="inline-block"
+ fontColor={colors.white}
+ fontWeight={700}
+ lineHeight="1.3em"
+ fontSize={isSmallScreen ? '28px' : '36px'}
+ textList={ROTATING_LIST}
+ shouldRepeat={true}
+ />
+ </React.Fragment>
+ )}
+ </Text>
+ <Container
+ className={`pt3 flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`}
>
- {this.props.translate.get(Key.TopTagline)}
- </div>
- <Container className="pt3 clearfix sm-mx-auto" maxWidth="390px">
- <div className="lg-pr2 md-pr2 lg-col lg-col-6 sm-center sm-col sm-col-12 mb2">
+ <Container paddingRight="20px">
<Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
- <CallToAction width="175px" type="light">
+ <CallToAction type="light">
{this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
</CallToAction>
</Link>
- </div>
- <div className="lg-col lg-col-6 sm-center sm-col sm-col-12">
+ </Container>
+ <div>
<Link to={WebsitePaths.Portal} className="text-decoration-none">
- <CallToAction width="175px">
+ <CallToAction>
{this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
</CallToAction>
</Link>
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"