aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-05 20:54:37 +0800
committerFabio Berger <me@fabioberger.com>2018-10-05 20:54:37 +0800
commit5f2cd33da07a7acc65f2e05acb35755f74af75a4 (patch)
tree13a3453c5104357568b70f4fec6f124dcbb492b9
parente0355a2e395fc056fd1d5c5e1780784853546acd (diff)
downloaddexon-0x-contracts-5f2cd33da07a7acc65f2e05acb35755f74af75a4.tar
dexon-0x-contracts-5f2cd33da07a7acc65f2e05acb35755f74af75a4.tar.gz
dexon-0x-contracts-5f2cd33da07a7acc65f2e05acb35755f74af75a4.tar.bz2
dexon-0x-contracts-5f2cd33da07a7acc65f2e05acb35755f74af75a4.tar.lz
dexon-0x-contracts-5f2cd33da07a7acc65f2e05acb35755f74af75a4.tar.xz
dexon-0x-contracts-5f2cd33da07a7acc65f2e05acb35755f74af75a4.tar.zst
dexon-0x-contracts-5f2cd33da07a7acc65f2e05acb35755f74af75a4.zip
Remove style prop from Link
-rw-r--r--packages/react-docs/src/components/source_link.tsx8
-rw-r--r--packages/react-shared/src/components/link.tsx12
-rw-r--r--packages/website/ts/components/documentation/docs_logo.tsx8
-rw-r--r--packages/website/ts/components/documentation/docs_top_bar.tsx6
-rw-r--r--packages/website/ts/components/dropdowns/developers_drop_down.tsx21
-rw-r--r--packages/website/ts/components/fill_order.tsx2
-rw-r--r--packages/website/ts/components/footer.tsx7
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx3
-rw-r--r--packages/website/ts/components/top_bar/top_bar_menu_item.tsx2
-rw-r--r--packages/website/ts/components/ui/custom_menu_item.tsx3
-rw-r--r--packages/website/ts/pages/about/about.tsx2
-rw-r--r--packages/website/ts/pages/documentation/home.tsx41
-rw-r--r--packages/website/ts/pages/landing/landing.tsx5
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>