Use new Link UI component everywhere, and add complementary ALink type

2 files changed, 25 insertions, 43 deletions

diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index c2d753e31..3da2307e0 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -10,15 +10,15 @@ import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
 import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
 import { Blockchain } from 'ts/blockchain';
 import { DevelopersDropDown } from 'ts/components/dropdowns/developers_drop_down';
 import { DrawerMenu } from 'ts/components/portal/drawer_menu';
 import { ProviderDisplay } from 'ts/components/top_bar/provider_display';
 import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
 import { Container } from 'ts/components/ui/container';
+import { Link } from 'ts/components/ui/link';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types';
+import { Deco, Key, LinkType, ProviderType, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
@@ -151,7 +151,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     paddingLeft={this.props.paddingLeft}
                     paddingRight={this.props.paddingRight}
                 >
-                    <Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
+                    <Link to={WebsitePaths.Home}>
                         <img src={logoUrl} height="30" />
                     </Link>
                     <div className="flex-auto" />
@@ -165,40 +165,36 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                                 />
                                 <TopBarMenuItem
                                     title={this.props.translate.get(Key.Wiki, Deco.Cap)}
-                                    path={`${WebsitePaths.Wiki}`}
+                                    path={WebsitePaths.Wiki}
                                     style={styles.menuItem}
                                     isNightVersion={isNightVersion}
-                                    isExternal={false}
                                 />
                                 <TopBarMenuItem
                                     title={this.props.translate.get(Key.Blog, Deco.Cap)}
                                     path={constants.URL_BLOG}
                                     style={styles.menuItem}
                                     isNightVersion={isNightVersion}
-                                    isExternal={true}
+                                    linkType={LinkType.External}
                                 />
                                 <TopBarMenuItem
                                     title={this.props.translate.get(Key.About, Deco.Cap)}
-                                    path={`${WebsitePaths.About}`}
+                                    path={WebsitePaths.About}
                                     style={styles.menuItem}
                                     isNightVersion={isNightVersion}
-                                    isExternal={false}
                                 />
                                 <TopBarMenuItem
                                     title={this.props.translate.get(Key.Careers, Deco.Cap)}
-                                    path={`${WebsitePaths.Careers}`}
+                                    path={WebsitePaths.Careers}
                                     style={styles.menuItem}
                                     isNightVersion={isNightVersion}
-                                    isExternal={false}
                                 />
                                 <TopBarMenuItem
                                     title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
-                                    path={`${WebsitePaths.Portal}`}
+                                    path={WebsitePaths.Portal}
                                     isPrimary={true}
                                     style={styles.menuItem}
                                     className={`${isExpandedDisplayType && 'md-hide'}`}
                                     isNightVersion={isNightVersion}
-                                    isExternal={false}
                                 />
                             </div>
                         </div>
@@ -260,20 +256,16 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}>
                         {this.props.translate.get(Key.Website, Deco.Cap)}
                     </div>
-                    <Link to={WebsitePaths.Home} className="text-decoration-none">
+                    <Link to={WebsitePaths.Home}>
                         <MenuItem className="py2">{this.props.translate.get(Key.Home, Deco.Cap)}</MenuItem>
                     </Link>
-                    <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none">
+                    <Link to={WebsitePaths.Wiki}>
                         <MenuItem className="py2">{this.props.translate.get(Key.Wiki, Deco.Cap)}</MenuItem>
                     </Link>
                     {_.map(DOC_WEBSITE_PATHS_TO_KEY, (key, websitePath) => {
                         if (!this._doesUrlInclude(websitePath)) {
                             return (
-                                <Link
-                                    key={`drawer-menu-item-${websitePath}`}
-                                    to={websitePath}
-                                    className="text-decoration-none"
-                                >
+                                <Link key={`drawer-menu-item-${websitePath}`} to={websitePath}>
                                     <MenuItem className="py2">
                                         {this.props.translate.get(key, Deco.Cap)}{' '}
                                         {this.props.translate.get(Key.Docs, Deco.Cap)}
@@ -284,25 +276,25 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                         return null;
                     })}
                     {!this._isViewingPortal() && (
-                        <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none">
+                        <Link to={WebsitePaths.Portal}>
                             <MenuItem className="py2">
                                 {this.props.translate.get(Key.PortalDApp, Deco.CapWords)}
                             </MenuItem>
                         </Link>
                     )}
-                    <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}>
+                    <Link to={WebsitePaths.Whitepaper} type={LinkType.External} shouldOpenInNewTab={true}>
                         <MenuItem className="py2">{this.props.translate.get(Key.Whitepaper, Deco.Cap)}</MenuItem>
-                    </a>
-                    <Link to={`${WebsitePaths.About}`} className="text-decoration-none">
+                    </Link>
+                    <Link to={WebsitePaths.About}>
                         <MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem>
                     </Link>
-                    <Link to={`${WebsitePaths.Careers}`} className="text-decoration-none">
+                    <Link to={WebsitePaths.Careers}>
                         <MenuItem className="py2">{this.props.translate.get(Key.Careers, Deco.Cap)}</MenuItem>
                     </Link>
-                    <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}>
+                    <Link to={constants.URL_BLOG} type={LinkType.External} shouldOpenInNewTab={true}>
                         <MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem>
-                    </a>
-                    <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
+                    </Link>
+                    <Link to={WebsitePaths.FAQ}>
                         <MenuItem className="py2" onClick={this._onMenuButtonClick.bind(this)}>
                             {this.props.translate.get(Key.Faq, Deco.Cap)}
                         </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 25fab2868..89fd9e8a8 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
@@ -1,7 +1,8 @@
 import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'ts/components/ui/link';
+import { LinkType } from 'ts/types';
 
 import { CallToAction } from 'ts/components/ui/button';
 
@@ -13,7 +14,7 @@ interface TopBarMenuItemProps {
     title: string;
     path?: string;
     isPrimary?: boolean;
-    isExternal: boolean;
+    linkType: LinkType;
     style?: React.CSSProperties;
     className?: string;
     isNightVersion?: boolean;
@@ -38,20 +39,9 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
         );
         return (
             <div className={`center ${this.props.className}`} style={{ ...this.props.style, color: menuItemColor }}>
-                {this.props.isExternal ? (
-                    <a
-                        className="text-decoration-none"
-                        style={{ color: linkColor }}
-                        target="_blank"
-                        href={this.props.path}
-                    >
-                        {itemContent}
-                    </a>
-                ) : (
-                    <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}>
-                        {itemContent}
-                    </Link>
-                )}
+                <Link to={this.props.path} type={this.props.linkType} style={{ color: linkColor }}>
+                    {itemContent}
+                </Link>
             </div>
         );
     }