1 files changed, 38 insertions, 39 deletions
diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx
index 5c018f5dd..412b99b9d 100644
--- a/packages/react-docs/src/components/type.tsx
+++ b/packages/react-docs/src/components/type.tsx
@@ -1,6 +1,6 @@
-import { colors, constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared';
-import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '@0xproject/types';
-import { errorUtils } from '@0xproject/utils';
+import { colors, constants as sharedConstants, Link, utils as sharedUtils } from '@0x/react-shared';
+import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '@0x/types';
+import { errorUtils } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Link as ScrollLink } from 'react-scroll';
@@ -204,15 +204,12 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => {
     const isExportedClassReference = !!props.type.isExportedClassReference;
     const typeNameUrlIfExists = !_.isUndefined(props.type.externalLink) ? props.type.externalLink : undefined;
     if (!_.isUndefined(typeNameUrlIfExists)) {
-        typeName = (
-            <a
-                href={typeNameUrlIfExists}
-                target="_blank"
-                className="text-decoration-none"
-                style={{ color: colors.lightBlueA700 }}
-            >
+        typeName = props.isInPopover ? (
+            <span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span>
+        ) : (
+            <Link to={typeNameUrlIfExists} shouldOpenInNewTab={true} fontColor={colors.lightBlueA700}>
                 {typeName}
-            </a>
+            </Link>
         );
     } else if (
         (isReference || isArray) &&
@@ -223,39 +220,41 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => {
             ? props.type.name
             : `${props.docsInfo.typeSectionName}-${typeName}`;
         typeName = (
-            <ScrollLink
-                to={typeDefinitionAnchorId}
-                offset={0}
-                hashSpy={true}
-                duration={sharedConstants.DOCS_SCROLL_DURATION_MS}
-                containerId={sharedConstants.DOCS_CONTAINER_ID}
-            >
+            <span>
                 {sharedUtils.isUserOnMobile() || props.isInPopover || isExportedClassReference ? (
                     <span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span>
                 ) : (
-                    <span
-                        data-tip={true}
-                        data-for={id}
-                        style={{
-                            color: colors.lightBlueA700,
-                            cursor: 'pointer',
-                            display: 'inline-block',
-                        }}
+                    <ScrollLink
+                        to={typeDefinitionAnchorId}
+                        offset={0}
+                        hashSpy={true}
+                        duration={sharedConstants.DOCS_SCROLL_DURATION_MS}
+                        containerId={sharedConstants.SCROLL_CONTAINER_ID}
                     >
-                        {typeName}
-                        <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip">
-                            <TypeDefinition
-                                sectionName={props.sectionName}
-                                customType={props.typeDefinitionByName[typeName as string]}
-                                shouldAddId={false}
-                                docsInfo={props.docsInfo}
-                                typeDefinitionByName={props.typeDefinitionByName}
-                                isInPopover={true}
-                            />
-                        </ReactTooltip>
-                    </span>
+                        <span
+                            data-tip={true}
+                            data-for={id}
+                            style={{
+                                color: colors.lightBlueA700,
+                                cursor: 'pointer',
+                                display: 'inline-block',
+                            }}
+                        >
+                            {typeName}
+                            <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip">
+                                <TypeDefinition
+                                    sectionName={props.sectionName}
+                                    customType={props.typeDefinitionByName[typeName as string]}
+                                    shouldAddId={false}
+                                    docsInfo={props.docsInfo}
+                                    typeDefinitionByName={props.typeDefinitionByName}
+                                    isInPopover={true}
+                                />
+                            </ReactTooltip>
+                        </span>
+                    </ScrollLink>
                 )}
-            </ScrollLink>
+            </span>
         );
     }
     return (