Merge pull request #827 from 0xProject/feature/website/landing-page-cta

Landing page CTA for portal

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: