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

1 files changed, 6 insertions, 16 deletions

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>
         );
     }