Remove style prop from Link

8 files changed, 20 insertions, 32 deletions

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}`}