Remove style prop from Link

13 files changed, 56 insertions, 64 deletions

diff --git a/packages/react-docs/src/components/source_link.tsx b/packages/react-docs/src/components/source_link.tsx
index 3096ad8d5..c6dd09adb 100644
--- a/packages/react-docs/src/components/source_link.tsx
+++ b/packages/react-docs/src/components/source_link.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
 import { Source } from '@0xproject/types';
 import * as React from 'react';
 
@@ -13,9 +13,9 @@ export const SourceLink = (props: SourceLinkProps) => {
     const sourceCodeUrl = `${props.sourceUrl}/${src.fileName}#L${src.line}`;
     return (
         <div className="pt2" style={{ fontSize: 14 }}>
-            <a href={sourceCodeUrl} target="_blank" className="underline" style={{ color: colors.grey }}>
-                Source
-            </a>
+            <Link to={sourceCodeUrl} shouldOpenInNewTab={true} textDecoration="underline" fontColor={colors.grey}>
+                {'Source'}
+            </Link>
         </div>
     );
 };
diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx
index 51ffa1e1d..60891dd7a 100644
--- a/packages/react-shared/src/components/link.tsx
+++ b/packages/react-shared/src/components/link.tsx
@@ -10,11 +10,12 @@ interface LinkProps {
     to: string;
     type?: LinkType;
     shouldOpenInNewTab?: boolean;
-    style?: React.CSSProperties;
     className?: string;
     onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
     onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
     onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
+    textDecoration?: string;
+    fontColor?: string;
 }
 
 export interface LinkState {}
@@ -29,11 +30,12 @@ export class Link extends React.Component<LinkProps, LinkState> {
     public static defaultProps: Partial<LinkProps> = {
         type: LinkType.ReactRoute,
         shouldOpenInNewTab: false,
-        style: {},
         className: '',
         onMouseOver: _.noop.bind(_),
         onMouseLeave: _.noop.bind(_),
         onMouseEnter: _.noop.bind(_),
+        textDecoration: 'none',
+        fontColor: 'inherit',
     };
     private _outerReactScrollSpan: HTMLSpanElement | null;
     constructor(props: LinkProps) {
@@ -46,11 +48,13 @@ export class Link extends React.Component<LinkProps, LinkState> {
         }
 
         const styleWithDefault = {
-            textDecoration: 'none',
+            textDecoration: this.props.textDecoration,
             cursor: 'pointer',
-            ...this.props.style,
+            color: this.props.fontColor,
         };
 
+        console.log('styleWithDefault', styleWithDefault);
+
         switch (this.props.type) {
             case LinkType.External:
                 return (
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
index 6f3c3c6e8..b727fea36 100644
--- a/packages/website/ts/components/documentation/docs_logo.tsx
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -9,11 +9,9 @@ export interface DocsLogoProps {
 
 export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => {
     return (
-        <div style={props.containerStyle}>
-            <Link to={WebsitePaths.Docs}>
-                <img src="/images/docs_logo.svg" height={props.height} />
-            </Link>
-        </div>
+        <Link to={WebsitePaths.Docs}>
+            <img src="/images/docs_logo.svg" height={props.height} />
+        </Link>
     );
 };
 
diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx
index 3fea1c714..0b563a76b 100644
--- a/packages/website/ts/components/documentation/docs_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_top_bar.tsx
@@ -68,7 +68,7 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
                     <Container className="col col-2 sm-hide xs-hide">
                         <Link
                             to={WebsitePaths.Home}
-                            style={{ color: colors.linkSectionGrey }}
+                            fontColor={colors.linkSectionGrey}
                             className="flex items-center text-decoration-none"
                         >
                             <i className="zmdi zmdi-chevron-left bold" style={{ fontSize: 16 }} />
@@ -86,7 +86,9 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
                         </Container>
                     </Container>
                     <Container className="lg-hide md-hide">
-                        <DocsLogo height={30} containerStyle={{ paddingTop: 6, paddingLeft: 18 }} />
+                        <Container paddingTop="6px" paddingLeft="18px">
+                            <DocsLogo height={30} />
+                        </Container>
                     </Container>
                     <Container className="md-hide lg-hide absolute" right="18px" top="12px">
                         <i
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
index ac1d82c75..e3039420e 100644
--- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -119,14 +119,7 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
                         <div>{this._renderLinkSection(usefulLinksToLinkInfo)}</div>
                     </div>
                 </div>
-                <Link
-                    to={WebsitePaths.Docs}
-                    style={{
-                        color: colors.lightBlueA700,
-                        fontWeight: 'bold',
-                        fontSize: 14,
-                    }}
-                >
+                <Link to={WebsitePaths.Docs} fontColor={colors.lightBlueA700}>
                     <div
                         style={{
                             padding: '0.9rem',
@@ -134,6 +127,8 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
                             backgroundColor: colors.lightBgGrey,
                             borderBottomLeftRadius: 4,
                             borderBottomRightRadius: 4,
+                            fontWeight: 'bold',
+                            fontSize: 14,
                         }}
                     >
                         {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)}
@@ -159,10 +154,6 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
         );
     }
     private _renderLinkSection(links: ALink[]): React.ReactNode {
-        const linkStyle: React.CSSProperties = {
-            color: colors.lightBlueA700,
-            fontFamily: 'Roboto, Roboto Mono',
-        };
         const numLinks = links.length;
         let i = 0;
         const renderLinks = _.map(links, (link: ALink) => {
@@ -179,8 +170,10 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
             const linkText = this.props.translate.get(link.title as Key, Deco.Cap);
             return (
                 <div className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${link.title}`}>
-                    <Link to={to} type={type} shouldOpenInNewTab={!!link.shouldOpenInNewTab} style={linkStyle}>
-                        {linkText}
+                    <Link to={to} type={type} shouldOpenInNewTab={!!link.shouldOpenInNewTab}>
+                        <Text fontFamily="Roboto, Roboto Mono" fontColor={colors.lightBlueA700}>
+                            {linkText}
+                        </Text>
                     </Link>
                 </div>
             );
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 99939ce43..c1bbadfde 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -323,7 +323,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         return (
             <div>
                 Order successfully filled. See the trade details in your{' '}
-                <Link to={`${WebsitePaths.Portal}/trades`} style={{ color: colors.white }}>
+                <Link to={`${WebsitePaths.Portal}/trades`} fontColor={colors.white}>
                     trade history
                 </Link>
             </div>
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 02770c073..d90f2f708 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -12,11 +12,6 @@ import { Translate } from 'ts/utils/translate';
 
 const ICON_DIMENSION = 16;
 
-const linkStyle = {
-    color: colors.white,
-    cursor: 'pointer',
-};
-
 const languageToMenuTitle = {
     [Language.English]: 'English',
     [Language.Russian]: 'Русский',
@@ -187,7 +182,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
         const iconIfExists = titleToIcon[link.title];
         return (
             <div key={link.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
-                <Link to={link.to} type={link.type} style={linkStyle} className="text-decoration-none">
+                <Link to={link.to} type={link.type} fontColor={colors.white} className="text-decoration-none">
                     <div>
                         {!_.isUndefined(iconIfExists) ? (
                             <div className="inline-block">
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 562f670e2..134d1cc76 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -111,7 +111,8 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
                     Insufficient allowance.{' '}
                     <Link
                         to={`${WebsitePaths.Portal}/account`}
-                        style={{ cursor: 'pointer', color: colors.darkestGrey, textDecoration: 'underline' }}
+                        textDecoration="underline"
+                        fontColor={colors.darkestGrey}
                     >
                         Set allowance
                     </Link>
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 d5ee96850..c88db95fa 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
@@ -37,7 +37,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
         );
         return (
             <div className={`center ${this.props.className}`} style={{ ...this.props.style, color: menuItemColor }}>
-                <Link to={this.props.path} type={this.props.linkType} style={{ color: linkColor }}>
+                <Link to={this.props.path} type={this.props.linkType} fontColor={linkColor}>
                     {itemContent}
                 </Link>
             </div>
diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx
index 11f61b336..c25da6be6 100644
--- a/packages/website/ts/components/ui/custom_menu_item.tsx
+++ b/packages/website/ts/components/ui/custom_menu_item.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 
 interface CustomMenuItemProps {
     to: string;
-    style?: React.CSSProperties;
     onClick?: () => void;
     className?: string;
 }
@@ -30,7 +29,7 @@ export class CustomMenuItem extends React.Component<CustomMenuItemProps, CustomM
             opacity: this.state.isHovering ? 0.5 : 1,
         };
         return (
-            <Link to={this.props.to} style={this.props.style}>
+            <Link to={this.props.to}>
                 <div
                     onClick={this.props.onClick.bind(this)}
                     className={`mx-auto ${this.props.className}`}
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index f9d7456c1..2fbd946ae 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -376,7 +376,7 @@ export class About extends React.Component<AboutProps, AboutState> {
                             }}
                         >
                             We are seeking outstanding candidates to{' '}
-                            <Link to={WebsitePaths.Careers} style={{ color: 'black', textDecoration: 'underline' }}>
+                            <Link to={WebsitePaths.Careers} textDecoration="underline" fontColor="black">
                                 join our team
                             </Link>
                             . We value passion, diversity and unique perspectives.
diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx
index 7e34136a8..abe0ae6af 100644
--- a/packages/website/ts/pages/documentation/home.tsx
+++ b/packages/website/ts/pages/documentation/home.tsx
@@ -446,12 +446,14 @@ export class Home extends React.Component<HomeProps, HomeState> {
                         <Container
                             borderBottom={this.state.isSidebarScrolling ? `1px solid ${colors.grey300}` : 'none'}
                         >
-                            <DocsLogo height={36} containerStyle={{ paddingTop: 30, paddingBottom: 10 }} />
+                            <Container paddingTop="30px" paddingLeft="10px" paddingBottom="8px">
+                                <DocsLogo height={36} />
+                            </Container>
                         </Container>
                         <div
                             style={{
                                 ...scrollableContainerStyles,
-                                paddingTop: 35,
+                                paddingTop: 27,
                                 overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
                             }}
                             onMouseEnter={this._onSidebarHover.bind(this, true)}
@@ -557,7 +559,7 @@ export class Home extends React.Component<HomeProps, HomeState> {
                         <Container className="md-col lg-col md-col-4 lg-col-4">
                             <Link
                                 to={pkg.link.to}
-                                style={{ color: colors.lightLinkBlue }}
+                                fontColor={colors.lightLinkBlue}
                                 type={pkg.link.type}
                                 shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab}
                             >
@@ -578,23 +580,24 @@ export class Home extends React.Component<HomeProps, HomeState> {
                             </Text>
                         </Container>
                         <Container className="md-col lg-col md-col-2 lg-col-2 sm-pb2 relative">
-                            <Link
-                                to={pkg.link.to}
-                                className="absolute"
-                                style={{ right: 0, color: colors.lightLinkBlue }}
-                                type={pkg.link.type}
-                                shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab}
-                            >
-                                <Container className="flex">
-                                    <Container>{this.props.translate.get(Key.More, Deco.Cap)}</Container>
-                                    <Container paddingTop="1px" paddingLeft="6px">
-                                        <i
-                                            className="zmdi zmdi-chevron-right bold"
-                                            style={{ fontSize: 18, color: colors.lightLinkBlue }}
-                                        />
+                            <Container position="absolute" right="0px">
+                                <Link
+                                    to={pkg.link.to}
+                                    fontColor={colors.lightLinkBlue}
+                                    type={pkg.link.type}
+                                    shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab}
+                                >
+                                    <Container className="flex">
+                                        <Container>{this.props.translate.get(Key.More, Deco.Cap)}</Container>
+                                        <Container paddingTop="1px" paddingLeft="6px">
+                                            <i
+                                                className="zmdi zmdi-chevron-right bold"
+                                                style={{ fontSize: 18, color: colors.lightLinkBlue }}
+                                            />
+                                        </Container>
                                     </Container>
-                                </Container>
-                            </Link>
+                                </Link>
+                            </Container>
                         </Container>
                     </Container>
                 </Container>
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index c819cd8a1..395cdabf8 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -317,10 +317,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                         }}
                     >
                         {this.props.translate.get(Key.FullListPrompt)}{' '}
-                        <Link
-                            to={WebsitePaths.Portal}
-                            style={{ color: colors.landingLinkGrey, textDecoration: 'underline' }}
-                        >
+                        <Link to={WebsitePaths.Portal} textDecoration="underline" fontColor={colors.landingLinkGrey}>
                             {this.props.translate.get(Key.FullListLink)}
                         </Link>
                     </div>