crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove style prop from Link

Browse Source
This commit is contained in:
Fabio Berger
2018-10-05 13:54:37 +01:00
parent e0355a2e39
commit 5f2cd33da0
13 changed files with 56 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/react-docs/src/components/source_link.tsx
View File

@@ -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>
);
};

12
packages/react-shared/src/components/link.tsx
View File

@@ -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 (

8
packages/website/ts/components/documentation/docs_logo.tsx
View File

@@ -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>
);
};

6
packages/website/ts/components/documentation/docs_top_bar.tsx
View File

@@ -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

21
packages/website/ts/components/dropdowns/developers_drop_down.tsx
View File

@@ -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>
);

2
packages/website/ts/components/fill_order.tsx
View File

@@ -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>

7
packages/website/ts/components/footer.tsx
View File

@@ -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">

3
packages/website/ts/components/inputs/token_amount_input.tsx
View File

@@ -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>

2
packages/website/ts/components/top_bar/top_bar_menu_item.tsx
View File

@@ -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>

3
packages/website/ts/components/ui/custom_menu_item.tsx
View File

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

2
packages/website/ts/pages/about/about.tsx
View File

@@ -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.

41
packages/website/ts/pages/documentation/home.tsx
View File

@@ -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>

5
packages/website/ts/pages/landing/landing.tsx
View File

@@ -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>