Added inline code / link to mapped mdx components. Changed font size for search input in docs.

packages/website/md/new-docs/usage.mdx

@@ -25,6 +25,8 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
 If your project is using [Truffle](https://truffleframework.com/), we've written a `TruffleArtifactsAdapter`for you.
 
 ```
+/// @param salt Arbitrary number to ensure uniqueness of transaction hash.
+/// @param signerAddress Address of transaction signer.
 import { TruffleArtifactAdapter } from '@0x/sol-coverage';
 const projectRoot = '.';
 const solcVersion = '0.5.0';
@@ -70,6 +72,7 @@ provider.start();
 | Syntax    | Description |
 | --------- | ----------- |
 | Header    | Title       |
+| Code      | Text `Code` |
 | Paragraph | Text        |
 
 After your test suite is complete (e.g in the Mocha global `after` hook), you'll need to call:

packages/website/ts/components/docs/code.tsx

@@ -4,6 +4,7 @@ import SyntaxHighlighter from 'react-syntax-highlighter';
 
 import { Button } from 'ts/components/button';
 import { CodeRun } from 'ts/components/docs/code_run';
+import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/tabs';
 
 import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
@@ -34,6 +35,8 @@ export const Code: React.FC<ICodeProps> = ({ children, className = 'language-typ
 
     return (
         <>
+            <Tab>{language}</Tab>
+
             <CopyToClipboard text={children} onCopy={handleCopyClick}>
                 <CopyButton>{copyButtonText}</CopyButton>
             </CopyToClipboard>

packages/website/ts/components/docs/inline_code.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+export const InlineCode = styled.code`
+    background-color: ${colors.backgroundLight};
+    color: ${colors.brandDark};
+    border: none;
+    font-weight: 500;
+    padding: 0px 6px;
+`;

packages/website/ts/components/docs/inline_link.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Link } from '@0x/react-shared';
+
+interface IInlineLinkProps {
+    children: React.ReactNode;
+    href: string;
+}
+
+export const InlineLink: React.FC<IInlineLinkProps> = ({ children, href }) => {
+    return (
+        <Link to={href} textDecoration="underline">
+            {children}
+        </Link>
+    );
+};

packages/website/ts/components/docs/search/autocomplete.tsx

@@ -199,7 +199,7 @@ const Wrapper = styled.div<Props>`
             border-bottom: 0;
             padding: 13px 21px 15px 52px;
             background-position: left 21px center;
-            font-size: 1.125rem;
+            font-size: 1rem;
         `};
 
         &:before {

packages/website/ts/pages/docs/page_template.tsx

@@ -159,6 +159,7 @@ export const DocsPageTemplate: React.FC = () => {
                                 <Code>{codeSample}</Code>
                             </TabPanel>
                         </Tabs>
+
                         <H3>Subheading</H3>
                         <Paragraph>
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl

packages/website/ts/pages/docs/view.tsx

@@ -10,6 +10,8 @@ import { Code } from 'ts/components/docs/code';
 import { HelpCallout } from 'ts/components/docs/help_callout';
 import { HelpfulCta } from 'ts/components/docs/helpful_cta';
 import { Hero } from 'ts/components/docs/hero';
+import { InlineCode } from 'ts/components/docs/inline_code';
+import { InlineLink } from 'ts/components/docs/inline_link';
 import { Notification } from 'ts/components/docs/notification';
 import { SiteWrap } from 'ts/components/docs/siteWrap';
 import { Table } from 'ts/components/docs/table';
@@ -129,15 +131,17 @@ const H3 = styled(Heading).attrs({
 })``;
 
 const mdxComponents = {
-    p: Paragraph,
+    code: Code,
     h1: LargeHeading,
     h2: H2,
     h3: H3,
-    ol: TutorialSteps,
-    ul: UnorderedList,
-    code: Code,
-    table: Table,
     hr: Separator,
+    inlineCode: InlineCode,
+    a: InlineLink,
+    ol: TutorialSteps,
+    p: Paragraph,
+    table: Table,
+    ul: UnorderedList,
     Notification,
     Tabs,
     TabList,