aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorBrandon Millman <brandon@0xproject.com>2018-07-06 13:03:13 +0800
committerGitHub <noreply@github.com>2018-07-06 13:03:13 +0800
commitd975c0cef34d126ce30202610671a6f8dca6b6c0 (patch)
tree3c4ad472a6dc52b19eedd32ca06eddcb2464c883 /packages/website
parent51b86742d10a9e73fd017a0d052e0e423685eb69 (diff)
parent9f870b3d4ee1ce1ca4ddbac1efeabcb39cceebe8 (diff)
downloaddexon-sol-tools-d975c0cef34d126ce30202610671a6f8dca6b6c0.tar
dexon-sol-tools-d975c0cef34d126ce30202610671a6f8dca6b6c0.tar.gz
dexon-sol-tools-d975c0cef34d126ce30202610671a6f8dca6b6c0.tar.bz2
dexon-sol-tools-d975c0cef34d126ce30202610671a6f8dca6b6c0.tar.lz
dexon-sol-tools-d975c0cef34d126ce30202610671a6f8dca6b6c0.tar.xz
dexon-sol-tools-d975c0cef34d126ce30202610671a6f8dca6b6c0.tar.zst
dexon-sol-tools-d975c0cef34d126ce30202610671a6f8dca6b6c0.zip
Merge pull request #827 from 0xProject/feature/website/landing-page-cta
Landing page CTA for portal
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/translations/english.json3
-rw-r--r--packages/website/ts/components/portal/portal.tsx21
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx4
-rw-r--r--packages/website/ts/components/top_bar/top_bar_menu_item.tsx25
-rw-r--r--packages/website/ts/components/ui/button.tsx21
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx2
-rw-r--r--packages/website/ts/pages/landing/landing.tsx12
-rw-r--r--packages/website/ts/types.ts1
-rw-r--r--packages/website/ts/utils/translate.ts13
9 files changed, 54 insertions, 48 deletions
diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json
index 04fb0507a..d94dbb29e 100644
--- a/packages/website/translations/english.json
+++ b/packages/website/translations/english.json
@@ -76,5 +76,6 @@
"WEBSITE": "website",
"DEVELOPERS": "developers",
"HOME": "home",
- "ROCKETCHAT": "rocket.chat"
+ "ROCKETCHAT": "rocket.chat",
+ "TRADE_CALL_TO_ACTION": "trade on 0x"
}
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index d31de02bc..f983241fa 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -106,8 +106,7 @@ const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded);
const LEFT_COLUMN_WIDTH = 346;
const MENU_PADDING_LEFT = 185;
const LARGE_LAYOUT_MAX_WIDTH = 1200;
-const LARGE_LAYOUT_SIDE_PADDING = 30;
-const SMALL_LAYOUT_SIDE_PADDING = 20;
+const SIDE_PADDING = 20;
export class Portal extends React.Component<PortalProps, PortalState> {
private _blockchain: Blockchain;
@@ -226,7 +225,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
: TokenVisibility.TRACKED;
return (
<Container>
- <DocumentTitle title="0x Portal DApp" />
+ <DocumentTitle title="0x Portal" />
<TopBar
userAddress={this.props.userAddress}
networkId={this.props.networkId}
@@ -244,9 +243,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
position: 'fixed',
zIndex: zIndex.topBar,
}}
- maxWidth={!this._isSmallScreen() ? LARGE_LAYOUT_MAX_WIDTH : undefined}
- paddingLeft={!this._isSmallScreen() ? LARGE_LAYOUT_SIDE_PADDING : SMALL_LAYOUT_SIDE_PADDING}
- paddingRight={!this._isSmallScreen() ? LARGE_LAYOUT_SIDE_PADDING : SMALL_LAYOUT_SIDE_PADDING}
+ maxWidth={LARGE_LAYOUT_MAX_WIDTH}
/>
<Container marginTop={TOP_BAR_HEIGHT} minHeight="100vh" backgroundColor={colors.lightestGrey}>
<Switch>
@@ -701,8 +698,8 @@ const LargeLayout = (props: LargeLayoutProps) => {
<Container
className="mx-auto flex flex-center"
maxWidth={LARGE_LAYOUT_MAX_WIDTH}
- paddingLeft={LARGE_LAYOUT_SIDE_PADDING}
- paddingRight={LARGE_LAYOUT_SIDE_PADDING}
+ paddingLeft={SIDE_PADDING}
+ paddingRight={SIDE_PADDING}
>
<div className="flex-last">
<Container width={LEFT_COLUMN_WIDTH} position="fixed" zIndex={zIndex.aboveTopBar}>
@@ -710,7 +707,7 @@ const LargeLayout = (props: LargeLayoutProps) => {
</Container>
</div>
<Container className="flex-auto" marginLeft={LEFT_COLUMN_WIDTH}>
- <Container className="flex-auto" marginLeft={LARGE_LAYOUT_SIDE_PADDING}>
+ <Container className="flex-auto" marginLeft={SIDE_PADDING}>
{props.right}
</Container>
</Container>
@@ -724,11 +721,7 @@ interface SmallLayoutProps {
const SmallLayout = (props: SmallLayoutProps) => {
return (
<div className="flex flex-center">
- <Container
- className="flex-auto"
- paddingLeft={SMALL_LAYOUT_SIDE_PADDING}
- paddingRight={SMALL_LAYOUT_SIDE_PADDING}
- >
+ <Container className="flex-auto" paddingLeft={SIDE_PADDING} paddingRight={SIDE_PADDING}>
{props.content}
</Container>
</div>
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index dd3de7950..960e5a824 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -233,7 +233,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<div className="flex-auto" />
{!this._isViewingPortal() && (
<div className={menuClasses}>
- <div className="flex justify-between">
+ <div className="flex items-center justify-between">
<DropDown
activeNode={activeNode}
popoverContent={popoverContent}
@@ -263,7 +263,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
isExternal={false}
/>
<TopBarMenuItem
- title={this.props.translate.get(Key.PortalDApp, Deco.CapWords)}
+ title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
path={`${WebsitePaths.Portal}`}
isPrimary={true}
style={styles.menuItem}
diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
index e96d27c3f..25fab2868 100644
--- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
@@ -3,6 +3,8 @@ import * as _ from 'lodash';
import * as React from 'react';
import { Link } from 'react-router-dom';
+import { CallToAction } from 'ts/components/ui/button';
+
const DEFAULT_STYLE = {
color: colors.darkestGrey,
};
@@ -27,22 +29,15 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
isNightVersion: false,
};
public render(): React.ReactNode {
- const primaryStyles = this.props.isPrimary
- ? {
- borderRadius: 4,
- border: `1px solid ${this.props.isNightVersion ? colors.grey : colors.greyishPink}`,
- paddingLeft: 9,
- paddingRight: 9,
- minWidth: 77,
- }
- : {};
const menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color;
const linkColor = _.isUndefined(menuItemColor) ? colors.darkestGrey : menuItemColor;
+ const itemContent = this.props.isPrimary ? (
+ <CallToAction padding="0.8em 1.5em">{this.props.title}</CallToAction>
+ ) : (
+ this.props.title
+ );
return (
- <div
- className={`center ${this.props.className}`}
- style={{ ...this.props.style, ...primaryStyles, color: menuItemColor }}
- >
+ <div className={`center ${this.props.className}`} style={{ ...this.props.style, color: menuItemColor }}>
{this.props.isExternal ? (
<a
className="text-decoration-none"
@@ -50,11 +45,11 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
target="_blank"
href={this.props.path}
>
- {this.props.title}
+ {itemContent}
</a>
) : (
<Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}>
- {this.props.title}
+ {itemContent}
</Link>
)}
</div>
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 1489a74a6..2952c8859 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -11,6 +11,7 @@ export interface ButtonProps {
backgroundColor?: string;
borderColor?: string;
width?: string;
+ padding?: string;
type?: string;
isDisabled?: boolean;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
@@ -27,9 +28,8 @@ export const Button = styled(PlainButton)`
font-size: ${props => props.fontSize};
color: ${props => props.fontColor};
transition: background-color, opacity 0.5s ease;
- padding: 0.8em 2.2em;
+ padding: ${props => props.padding};
border-radius: 6px;
- box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
font-weight: 500;
outline: none;
font-family: ${props => props.fontFamily};
@@ -44,7 +44,6 @@ export const Button = styled(PlainButton)`
}
&:disabled {
opacity: 0.5;
- box-shadow: none;
}
&:focus {
background-color: ${props => saturate(0.2, props.backgroundColor)};
@@ -57,6 +56,7 @@ Button.defaultProps = {
width: 'auto',
fontFamily: 'Roboto',
isDisabled: false,
+ padding: '0.8em 2.2em',
};
Button.displayName = 'Button';
@@ -67,20 +67,26 @@ export interface CallToActionProps {
type?: CallToActionType;
fontSize?: string;
width?: string;
+ padding?: string;
}
-export const CallToAction: React.StatelessComponent<CallToActionProps> = ({ children, type, fontSize, width }) => {
+export const CallToAction: React.StatelessComponent<CallToActionProps> = ({
+ children,
+ type,
+ fontSize,
+ padding,
+ width,
+}) => {
const isLight = type === 'light';
- const backgroundColor = isLight ? colors.white : colors.heroGrey;
+ const backgroundColor = isLight ? colors.white : colors.mediumBlue;
const fontColor = isLight ? colors.heroGrey : colors.white;
- const borderColor = isLight ? undefined : colors.white;
return (
<Button
fontSize={fontSize}
+ padding={padding}
backgroundColor={backgroundColor}
fontColor={fontColor}
width={width}
- borderColor={borderColor}
>
{children}
</Button>
@@ -89,4 +95,5 @@ export const CallToAction: React.StatelessComponent<CallToActionProps> = ({ chil
CallToAction.defaultProps = {
type: 'dark',
+ fontSize: '14px',
};
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 1d7be5dbc..de3b91ad0 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -234,7 +234,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
targetOrigin={{ horizontal: 'right', vertical: 'top' }}
zDepth={1}
activateEvent={DropdownMouseEvent.Click}
- closeEvent={isMobile ? DropdownMouseEvent.Click : DropdownMouseEvent.Hover}
+ closeEvent={DropdownMouseEvent.Click}
/>
);
return (
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index f091778f4..b2cf4d979 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -268,15 +268,11 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</Link>
</div>
<div className="lg-col lg-col-6 sm-center sm-col sm-col-12">
- <a
- href={constants.URL_ZEROEX_CHAT}
- target="_blank"
- className="text-decoration-none"
- >
+ <Link to={WebsitePaths.Portal} className="text-decoration-none">
<CallToAction width="175px">
- {this.props.translate.get(Key.CommunityCallToAction, Deco.Cap)}
+ {this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
</CallToAction>
- </a>
+ </Link>
</div>
</Container>
</div>
@@ -295,7 +291,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
<div
className="mr1 px1"
style={{
- backgroundColor: colors.lightTurquois,
+ backgroundColor: colors.white,
borderRadius: 3,
color: colors.heroGrey,
height: 23,
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 93d029325..f7324e87a 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -456,6 +456,7 @@ export enum Key {
Developers = 'DEVELOPERS',
Home = 'HOME',
RocketChat = 'ROCKETCHAT',
+ TradeCallToAction = 'TRADE_CALL_TO_ACTION',
}
export enum SmartContractDocSections {
diff --git a/packages/website/ts/utils/translate.ts b/packages/website/ts/utils/translate.ts
index 39924b6f7..1ee1a59c5 100644
--- a/packages/website/ts/utils/translate.ts
+++ b/packages/website/ts/utils/translate.ts
@@ -55,6 +55,19 @@ export class Translate {
}
public get(key: Key, decoration?: Deco): string {
let text = this._translation[key];
+ // if a translation does not exist for a certain language, fallback to english
+ // if it still doesn't exist in english, throw an error
+ if (_.isUndefined(text)) {
+ const englishTranslation: Translation = languageToTranslations[Language.English];
+ const englishText = englishTranslation[key];
+ if (!_.isUndefined(englishText)) {
+ text = englishText;
+ } else {
+ throw new Error(
+ `Translation key not available in ${this._selectedLanguage} or ${Language.English}: ${key}`,
+ );
+ }
+ }
if (!_.isUndefined(decoration) && !_.includes(languagesWithoutCaps, this._selectedLanguage)) {
switch (decoration) {
case Deco.Cap: