aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/aboutPageLayout.tsx23
-rw-r--r--packages/website/ts/components/animatedChatIcon.tsx5
-rw-r--r--packages/website/ts/components/banner.tsx5
-rw-r--r--packages/website/ts/components/button.tsx5
-rw-r--r--packages/website/ts/components/definition.tsx10
-rw-r--r--packages/website/ts/components/dialogs/blockchain_err_dialog.tsx8
-rw-r--r--packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx27
-rw-r--r--packages/website/ts/components/fill_order.tsx17
-rw-r--r--packages/website/ts/components/fill_warning_dialog.tsx3
-rw-r--r--packages/website/ts/components/hamburger.tsx10
-rw-r--r--packages/website/ts/components/header.tsx49
-rw-r--r--packages/website/ts/components/hero.tsx15
-rw-r--r--packages/website/ts/components/icon.tsx10
-rw-r--r--packages/website/ts/components/image.tsx5
-rw-r--r--packages/website/ts/components/link.tsx5
-rw-r--r--packages/website/ts/components/logo.tsx5
-rw-r--r--packages/website/ts/components/mobileNav.tsx15
-rw-r--r--packages/website/ts/components/modals/input.tsx5
-rw-r--r--packages/website/ts/components/modals/modal_contact.tsx16
-rw-r--r--packages/website/ts/components/nested_sidebar_menu.tsx4
-rw-r--r--packages/website/ts/components/newLayout.tsx30
-rw-r--r--packages/website/ts/components/newsletter_form.tsx26
-rw-r--r--packages/website/ts/components/portal/portal.tsx3
-rw-r--r--packages/website/ts/components/sections/landing/clients.tsx7
-rw-r--r--packages/website/ts/components/siteWrap.tsx5
-rw-r--r--packages/website/ts/components/text.tsx10
-rw-r--r--packages/website/ts/components/token_balances.tsx11
-rw-r--r--packages/website/ts/components/ui/party.tsx50
28 files changed, 141 insertions, 243 deletions
diff --git a/packages/website/ts/components/aboutPageLayout.tsx b/packages/website/ts/components/aboutPageLayout.tsx
index a2fd9dd72..51c1a661e 100644
--- a/packages/website/ts/components/aboutPageLayout.tsx
+++ b/packages/website/ts/components/aboutPageLayout.tsx
@@ -38,18 +38,17 @@ export const AboutPageLayout = (props: Props) => (
{props.description}
</AnimatedParagraph>
- {props.linkLabel &&
- (props.href || props.to) && (
- <AnimatedLink
- to={props.to}
- href={props.href}
- target={!_.isUndefined(props.href) ? '_blank' : undefined}
- isWithArrow={true}
- isAccentColor={true}
- >
- {props.linkLabel}
- </AnimatedLink>
- )}
+ {props.linkLabel && (props.href || props.to) && (
+ <AnimatedLink
+ to={props.to}
+ href={props.href}
+ target={!_.isUndefined(props.href) ? '_blank' : undefined}
+ isWithArrow={true}
+ isAccentColor={true}
+ >
+ {props.linkLabel}
+ </AnimatedLink>
+ )}
</Column>
</Column>
</Section>
diff --git a/packages/website/ts/components/animatedChatIcon.tsx b/packages/website/ts/components/animatedChatIcon.tsx
index 9a86e244c..770536259 100644
--- a/packages/website/ts/components/animatedChatIcon.tsx
+++ b/packages/website/ts/components/animatedChatIcon.tsx
@@ -98,9 +98,6 @@ const Rays = styled.g`
transform-origin: 50% 50%;
`;
-const Dot =
- styled.circle <
- { delay: number } >
- `
+const Dot = styled.circle<{ delay: number }>`
animation: ${fadeInOut} 4s ${props => `${props.delay}s`} infinite;
`;
diff --git a/packages/website/ts/components/banner.tsx b/packages/website/ts/components/banner.tsx
index 76fc1d09e..ce3fd499a 100644
--- a/packages/website/ts/components/banner.tsx
+++ b/packages/website/ts/components/banner.tsx
@@ -123,10 +123,7 @@ const ButtonWrap = styled.div`
// Note let's refactor this
// is it absolutely necessary to have a stateless component
// to pass props down into the styled icon?
-const Border =
- styled.div <
- BorderProps >
- `
+const Border = styled.div<BorderProps>`
position: absolute;
background-image: ${props =>
props.isBottom ? 'url(/images/banner/bottomofcta.png);' : 'url(/images/banner/topofcta.png);'};
diff --git a/packages/website/ts/components/button.tsx b/packages/website/ts/components/button.tsx
index 569038ae0..31a74e599 100644
--- a/packages/website/ts/components/button.tsx
+++ b/packages/website/ts/components/button.tsx
@@ -58,10 +58,7 @@ Button.defaultProps = {
borderColor: 'rgba(255, 255, 255, .4)',
};
-const ButtonBase =
- styled.button <
- ButtonInterface >
- `
+const ButtonBase = styled.button<ButtonInterface>`
appearance: none;
border: 1px solid transparent;
display: inline-block;
diff --git a/packages/website/ts/components/definition.tsx b/packages/website/ts/components/definition.tsx
index 92fe54f38..bd7a40425 100644
--- a/packages/website/ts/components/definition.tsx
+++ b/packages/website/ts/components/definition.tsx
@@ -69,10 +69,7 @@ export const Definition = (props: Props) => (
</Wrap>
);
-const Wrap =
- styled.div <
- Props >
- `
+const Wrap = styled.div<Props>`
max-width: ${props => props.isInline && '354px'};
& + & {
@@ -97,10 +94,7 @@ const Wrap =
}
`;
-const TextWrap =
- styled.div <
- Props >
- `
+const TextWrap = styled.div<Props>`
width: 100%;
max-width: 560px;
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index a0114d898..1c47903db 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -148,15 +148,17 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
If you are using{' '}
<a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
Metamask
- </a>, you can switch networks in the top left corner of the extension popover.
+ </a>
+ , you can switch networks in the top left corner of the extension popover.
</div>
<h4>Parity Signer</h4>
<div>
If using the{' '}
<a href={constants.URL_PARITY_CHROME_STORE} target="_blank">
Parity Signer Chrome extension
- </a>, make sure to start your local Parity node with `parity ui` or `parity --chain Kovan ui` in
- order to connect to mainnet \ or Kovan respectively.
+ </a>
+ , make sure to start your local Parity node with `parity ui` or `parity --chain Kovan ui` in order
+ to connect to mainnet \ or Kovan respectively.
</div>
</div>
);
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
index 9b9421f1a..5ca272b1a 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -111,20 +111,19 @@ export class EthWethConversionDialog extends React.Component<
)}
<div className="pt1" style={{ fontSize: 12 }}>
<div className="left">1 ETH = 1 WETH</div>
- {this.props.direction === Side.Receive &&
- this.state.isEthTokenBalanceLoaded && (
- <div
- className="right"
- onClick={this._onMaxClick.bind(this)}
- style={{
- color: colors.darkBlue,
- textDecoration: 'underline',
- cursor: 'pointer',
- }}
- >
- Max
- </div>
- )}
+ {this.props.direction === Side.Receive && this.state.isEthTokenBalanceLoaded && (
+ <div
+ className="right"
+ onClick={this._onMaxClick.bind(this)}
+ style={{
+ color: colors.darkBlue,
+ textDecoration: 'underline',
+ cursor: 'pointer',
+ }}
+ >
+ Max
+ </div>
+ )}
</div>
</div>
</div>
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 3d0203573..2fa2b94a0 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -173,15 +173,14 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
private _renderOrderJsonNotices(): React.ReactNode {
return (
<div>
- {!_.isUndefined(this.props.initialOrder) &&
- !this.state.didOrderValidationRun && (
- <div className="pt2">
- <span className="pr1">
- <i className="zmdi zmdi-spinner zmdi-hc-spin" />
- </span>
- <span>Validating order...</span>
- </div>
- )}
+ {!_.isUndefined(this.props.initialOrder) && !this.state.didOrderValidationRun && (
+ <div className="pt2">
+ <span className="pr1">
+ <i className="zmdi zmdi-spinner zmdi-hc-spin" />
+ </span>
+ <span>Validating order...</span>
+ </div>
+ )}
{!_.isEmpty(this.state.orderJSONErrMsg) && (
<Alert type={AlertTypes.ERROR} message={this.state.orderJSONErrMsg} />
)}
diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx
index feb72c2ee..5be09e6c2 100644
--- a/packages/website/ts/components/fill_warning_dialog.tsx
+++ b/packages/website/ts/components/fill_warning_dialog.tsx
@@ -37,7 +37,8 @@ export const FillWarningDialog = (props: FillWarningDialogProps) => {
be counterfeit. It is your responsibility to verify the token addresses on Etherscan (
<a href="https://0x.org/wiki#Verifying-Custom-Tokens" target="_blank">
See this how-to guide
- </a>) before filling an order. <b>This action may result in the loss of funds</b>.
+ </a>
+ ) before filling an order. <b>This action may result in the loss of funds</b>.
</div>
</div>
</Dialog>
diff --git a/packages/website/ts/components/hamburger.tsx b/packages/website/ts/components/hamburger.tsx
index 435d206cd..34d4ccc46 100644
--- a/packages/website/ts/components/hamburger.tsx
+++ b/packages/website/ts/components/hamburger.tsx
@@ -16,10 +16,7 @@ export const Hamburger: React.FunctionComponent<Props> = (props: Props) => {
);
};
-const StyledHamburger =
- styled.button <
- Props >
- `
+const StyledHamburger = styled.button<Props>`
background: none;
border: 0;
width: 22px;
@@ -41,9 +38,8 @@ const StyledHamburger =
height: 2px;
margin-bottom: 5px;
transform-origin: 4px 0px;
- transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
- background-color 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
- opacity 0.55s ease;
+ transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
+ background-color 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
&:first-child {
//transform-origin: 0% 0%;
diff --git a/packages/website/ts/components/header.tsx b/packages/website/ts/components/header.tsx
index 90e097070..088f41048 100644
--- a/packages/website/ts/components/header.tsx
+++ b/packages/website/ts/components/header.tsx
@@ -87,7 +87,9 @@ class HeaderBase extends React.Component<HeaderProps> {
</Link>
<NavLinks>
- {_.map(navItems, (link, index) => <NavItem key={`navlink-${index}`} link={link} />)}
+ {_.map(navItems, (link, index) => (
+ <NavItem key={`navlink-${index}`} link={link} />
+ ))}
</NavLinks>
<MediaQuery minWidth={990}>
@@ -130,10 +132,7 @@ const NavItem = (props: { link: NavItemProps; key: string }) => {
);
};
-const StyledHeader =
- styled.header <
- HeaderProps >
- `
+const StyledHeader = styled.header<HeaderProps>`
padding: 30px;
background-color: ${props => props.theme.bgColor};
`;
@@ -200,10 +199,7 @@ const NavLinks = styled.ul`
}
`;
-const DropdownWrap =
- styled.div <
- DropdownWrapInterface >
- `
+const DropdownWrap = styled.div<DropdownWrapInterface>`
width: ${props => props.width || 280}px;
padding: 15px 0;
border: 1px solid transparent;
@@ -219,27 +215,28 @@ const DropdownWrap =
transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s;
z-index: 20;
- &:after, &:before {
- bottom: 100%;
- left: 50%;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
+ &:after,
+ &:before {
+ bottom: 100%;
+ left: 50%;
+ border: solid transparent;
+ content: ' ';
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
}
&:after {
- border-color: rgba(255, 255, 255, 0);
- border-bottom-color: ${props => props.theme.dropdownBg};
- border-width: 10px;
- margin-left: -10px;
+ border-color: rgba(255, 255, 255, 0);
+ border-bottom-color: ${props => props.theme.dropdownBg};
+ border-width: 10px;
+ margin-left: -10px;
}
&:before {
- border-color: rgba(255, 0, 0, 0);
- border-bottom-color: ${props => props.theme.dropdownBorderColor};
- border-width: 11px;
- margin-left: -11px;
+ border-color: rgba(255, 0, 0, 0);
+ border-bottom-color: ${props => props.theme.dropdownBorderColor};
+ border-width: 11px;
+ margin-left: -11px;
}
@media (max-width: 768px) {
diff --git a/packages/website/ts/components/hero.tsx b/packages/website/ts/components/hero.tsx
index a662ee3a5..c326e0292 100644
--- a/packages/website/ts/components/hero.tsx
+++ b/packages/website/ts/components/hero.tsx
@@ -28,10 +28,7 @@ interface WrapProps {
isFullWidth?: boolean;
isCenteredMobile?: boolean;
}
-const Wrap =
- styled.div <
- WrapProps >
- `
+const Wrap = styled.div<WrapProps>`
width: calc(100% - 60px);
margin: 0 auto;
@@ -53,10 +50,7 @@ interface TitleProps {
isLarge?: any;
maxWidth?: string;
}
-const Title =
- styled.h1 <
- TitleProps >
- `
+const Title = styled.h1<TitleProps>`
font-size: ${props => (props.isLarge ? '80px' : '50px')};
font-weight: 300;
line-height: 1.1;
@@ -87,10 +81,7 @@ const Description = styled.p`
}
`;
-const Content =
- styled.div <
- { width: string } >
- `
+const Content = styled.div<{ width: string }>`
width: 100%;
@media (min-width: 768px) {
diff --git a/packages/website/ts/components/icon.tsx b/packages/website/ts/components/icon.tsx
index 165e999b9..60e4d04ee 100644
--- a/packages/website/ts/components/icon.tsx
+++ b/packages/website/ts/components/icon.tsx
@@ -32,10 +32,7 @@ export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => {
return null;
};
-export const InlineIconWrap =
- styled.div <
- PaddingInterface >
- `
+export const InlineIconWrap = styled.div<PaddingInterface>`
margin: ${props => getCSSPadding(props.margin)};
display: flex;
align-items: center;
@@ -54,10 +51,7 @@ const _getSize = (size: string | number = 'small'): string => {
return `${size}px`;
};
-const StyledIcon =
- styled.figure <
- IconProps >
- `
+const StyledIcon = styled.figure<IconProps>`
width: ${props => _getSize(props.size)};
height: ${props => _getSize(props.size)};
margin: ${props => getCSSPadding(props.margin)};
diff --git a/packages/website/ts/components/image.tsx b/packages/website/ts/components/image.tsx
index 65b2a9705..0137cfc97 100644
--- a/packages/website/ts/components/image.tsx
+++ b/packages/website/ts/components/image.tsx
@@ -12,9 +12,6 @@ const ImageClass: React.FunctionComponent<Props> = (props: Props) => {
return <img {...props} />;
};
-export const Image =
- styled(ImageClass) <
- Props >
- `
+export const Image = styled(ImageClass)<Props>`
margin: ${props => props.isCentered && `0 auto`};
`;
diff --git a/packages/website/ts/components/link.tsx b/packages/website/ts/components/link.tsx
index 080a0abcc..a66985acc 100644
--- a/packages/website/ts/components/link.tsx
+++ b/packages/website/ts/components/link.tsx
@@ -44,10 +44,7 @@ export const LinkWrap = styled.div`
}
`;
-const StyledLink =
- styled(SmartLink) <
- LinkInterface >
- `
+const StyledLink = styled(SmartLink)<LinkInterface>`
display: ${props => !props.isBlock && 'inline-flex'};
color: ${props => props.color || props.theme.linkColor};
text-align: center;
diff --git a/packages/website/ts/components/logo.tsx b/packages/website/ts/components/logo.tsx
index 19aeb901e..f89be0711 100644
--- a/packages/website/ts/components/logo.tsx
+++ b/packages/website/ts/components/logo.tsx
@@ -23,10 +23,7 @@ const StyledLogo = styled.div`
}
`;
-const Icon =
- styled(LogoIcon) <
- LogoInterface >
- `
+const Icon = styled(LogoIcon)<LogoInterface>`
flex-shrink: 0;
path {
diff --git a/packages/website/ts/components/mobileNav.tsx b/packages/website/ts/components/mobileNav.tsx
index 573d21596..d43bbe50e 100644
--- a/packages/website/ts/components/mobileNav.tsx
+++ b/packages/website/ts/components/mobileNav.tsx
@@ -55,10 +55,7 @@ export class MobileNav extends React.PureComponent<Props> {
}
}
-const Wrap =
- styled.nav <
- { isToggled: boolean } >
- `
+const Wrap = styled.nav<{ isToggled: boolean }>`
width: 100%;
height: 357px;
background-color: ${props => props.theme.mobileNavBgUpper};
@@ -99,19 +96,13 @@ const Overlay = styled.div`
interface SectionProps {
isDark?: boolean;
}
-const Section =
- styled.div <
- SectionProps >
- `
+const Section = styled.div<SectionProps>`
width: 100%;
padding: 15px 30px;
background-color: ${props => (props.isDark ? props.theme.mobileNavBgLower : 'transparent')};
`;
-const Grid =
- styled(WrapGrid) <
- WrapProps >
- `
+const Grid = styled(WrapGrid)<WrapProps>`
justify-content: flex-start;
li {
diff --git a/packages/website/ts/components/modals/input.tsx b/packages/website/ts/components/modals/input.tsx
index 8cfcc9763..c72e53aa0 100644
--- a/packages/website/ts/components/modals/input.tsx
+++ b/packages/website/ts/components/modals/input.tsx
@@ -60,10 +60,7 @@ const StyledInput = styled.input`
}
`;
-const InputWrapper =
- styled.div <
- InputProps >
- `
+const InputWrapper = styled.div<InputProps>`
position: relative;
flex-grow: ${props => props.width === InputWidth.Full && 1};
width: ${props => props.width === InputWidth.Half && `calc(50% - 15px)`};
diff --git a/packages/website/ts/components/modals/modal_contact.tsx b/packages/website/ts/components/modals/modal_contact.tsx
index 7414df7d9..62c1062a3 100644
--- a/packages/website/ts/components/modals/modal_contact.tsx
+++ b/packages/website/ts/components/modals/modal_contact.tsx
@@ -361,28 +361,22 @@ const StyledDialogContent = styled(DialogContent)`
}
`;
-const Form =
- styled.form <
- FormProps >
- `
+const Form = styled.form<FormProps>`
position: relative;
- transition: opacity 0.30s ease-in-out, visibility 0.30s ease-in-out;
+ transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
opacity: ${props => props.isSuccessful && `0`};
visibility: ${props => props.isSuccessful && `hidden`};
`;
-const Confirmation =
- styled.div <
- FormProps >
- `
+const Confirmation = styled.div<FormProps>`
position: absolute;
top: 50%;
text-align: center;
width: 100%;
left: 0;
- transition: opacity 0.30s ease-in-out, visibility 0.30s ease-in-out;
- transition-delay: 0.40s;
+ transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+ transition-delay: 0.4s;
padding: 60px 60px;
transform: translateY(-50%);
opacity: ${props => (props.isSuccessful ? `1` : `0`)};
diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx
index 4d4bc4617..56df880f3 100644
--- a/packages/website/ts/components/nested_sidebar_menu.tsx
+++ b/packages/website/ts/components/nested_sidebar_menu.tsx
@@ -77,8 +77,8 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
isActive
? colors.lightLinkBlue
: this.props.screenWidth === ScreenWidths.Sm
- ? 'white'
- : colors.grey100
+ ? 'white'
+ : colors.grey100
}
fontSize="14px"
textAlign="left"
diff --git a/packages/website/ts/components/newLayout.tsx b/packages/website/ts/components/newLayout.tsx
index 28e7653c5..07691a02a 100644
--- a/packages/website/ts/components/newLayout.tsx
+++ b/packages/website/ts/components/newLayout.tsx
@@ -54,10 +54,7 @@ export const Section: React.FunctionComponent<SectionProps> = (props: SectionPro
);
};
-export const Column =
- styled.div <
- ColumnProps >
- `
+export const Column = styled.div<ColumnProps>`
width: ${props => props.width};
max-width: ${props => props.maxWidth};
padding: ${props => props.padding};
@@ -71,10 +68,7 @@ export const Column =
}
`;
-export const FlexWrap =
- styled.div <
- FlexProps >
- `
+export const FlexWrap = styled.div<FlexProps>`
max-width: 1500px;
margin: 0 auto;
padding: ${props => props.padding};
@@ -85,18 +79,12 @@ export const FlexWrap =
}
`;
-export const WrapSticky =
- styled.div <
- WrapProps >
- `
+export const WrapSticky = styled.div<WrapProps>`
position: sticky;
top: ${props => props.offsetTop || '60px'};
`;
-const SectionBase =
- styled.section <
- SectionProps >
- `
+const SectionBase = styled.section<SectionProps>`
width: ${props => !props.isFullWidth && 'calc(100% - 60px)'};
max-width: 1500px;
margin: 0 auto;
@@ -110,10 +98,7 @@ const SectionBase =
}
`;
-const Wrap =
- styled(FlexWrap) <
- WrapProps >
- `
+const Wrap = styled(FlexWrap)<WrapProps>`
width: ${props => props.wrapWidth || 'calc(100% - 60px)'};
width: ${props => props.bgColor && 'calc(100% - 60px)'};
max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
@@ -121,10 +106,7 @@ const Wrap =
margin: 0 auto;
`;
-export const WrapGrid =
- styled(Wrap) <
- WrapProps >
- `
+export const WrapGrid = styled(Wrap)<WrapProps>`
display: flex;
flex-wrap: ${props => props.isWrapped && `wrap`};
justify-content: ${props => (props.isCentered ? `center` : 'space-between')};
diff --git a/packages/website/ts/components/newsletter_form.tsx b/packages/website/ts/components/newsletter_form.tsx
index bd61e3f4d..e5fd95646 100644
--- a/packages/website/ts/components/newsletter_form.tsx
+++ b/packages/website/ts/components/newsletter_form.tsx
@@ -117,10 +117,7 @@ const StyledForm = styled.form`
margin-top: 27px;
`;
-const StyledInput =
- styled.input <
- InputProps >
- `
+const StyledInput = styled.input<InputProps>`
appearance: none;
background-color: transparent;
border: 0;
@@ -132,7 +129,7 @@ const StyledInput =
width: 100%;
&::placeholder {
- color: #B1B1B1; // #9D9D9D on light theme
+ color: #b1b1b1; // #9D9D9D on light theme
}
`;
@@ -140,14 +137,11 @@ const InputWrapper = styled.div`
position: relative;
`;
-const InnerInputWrapper =
- styled.div <
- ArrowProps >
- `
+const InnerInputWrapper = styled.div<ArrowProps>`
opacity: ${props => props.isSubmitted && 0};
visibility: ${props => props.isSubmitted && 'hidden'};
transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
- transition-delay: 0.30s;
+ transition-delay: 0.3s;
`;
const SubmitButton = styled.button`
@@ -174,11 +168,8 @@ const Text = styled.p`
margin-top: 15px;
`;
-const SuccessText =
- styled.p <
- ArrowProps >
- `
- color: #B1B1B1;
+const SuccessText = styled.p<ArrowProps>`
+ color: #b1b1b1;
font-size: 1rem;
font-weight: 300;
line-height: 1.2em;
@@ -194,10 +185,7 @@ const SuccessText =
transition-delay: 0.55s;
`;
-const Arrow =
- styled.svg <
- ArrowProps >
- `
+const Arrow = styled.svg<ArrowProps>`
transform: ${props => props.isSubmitted && `translateX(44px)`};
transition: transform 0.25s ease-in-out;
`;
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 94ab63ac6..6d7c90573 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -447,7 +447,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
render={this._renderAccountManagementItem.bind(this, item)}
/>
);
- })}}
+ })}
+ }
<Route render={this._renderNotFoundMessage.bind(this)} />
</Switch>
<PortalDisclaimerDialog
diff --git a/packages/website/ts/components/sections/landing/clients.tsx b/packages/website/ts/components/sections/landing/clients.tsx
index 9a68fbf4c..4d83a1d2f 100644
--- a/packages/website/ts/components/sections/landing/clients.tsx
+++ b/packages/website/ts/components/sections/landing/clients.tsx
@@ -86,10 +86,7 @@ export const SectionLandingClients = () => (
</Section>
);
-const StyledProject =
- styled.div <
- StyledProjectInterface >
- `
+const StyledProject = styled.div<StyledProjectInterface>`
flex-shrink: 0;
img {
@@ -99,7 +96,7 @@ const StyledProject =
}
@media (min-width: 768px) {
- width: auto;
+ width: auto;
height: 50px;
margin: 30px;
}
diff --git a/packages/website/ts/components/siteWrap.tsx b/packages/website/ts/components/siteWrap.tsx
index 316896dbb..1f0902105 100644
--- a/packages/website/ts/components/siteWrap.tsx
+++ b/packages/website/ts/components/siteWrap.tsx
@@ -140,10 +140,7 @@ export class SiteWrap extends React.Component<Props, State> {
}
}
-const Main =
- styled.main <
- MainProps >
- `
+const Main = styled.main<MainProps>`
transition: transform 0.5s, opacity 0.5s;
opacity: ${props => props.isNavToggled && '0.5'};
`;
diff --git a/packages/website/ts/components/text.tsx b/packages/website/ts/components/text.tsx
index 10f272e73..a47e61ef3 100644
--- a/packages/website/ts/components/text.tsx
+++ b/packages/website/ts/components/text.tsx
@@ -27,10 +27,7 @@ interface ParagraphProps extends BaseTextInterface {
fontWeight?: string | number;
}
-const StyledHeading =
- styled.h1 <
- HeadingProps >
- `
+const StyledHeading = styled.h1<HeadingProps>`
max-width: ${props => props.maxWidth};
color: ${props => props.color || props.theme.textColor};
display: ${props => props.isFlex && `inline-flex`};
@@ -64,10 +61,7 @@ Heading.defaultProps = {
// Note: this would be useful to be implemented the same way was "Heading"
// and be more generic. e.g. <Text /> with a props asElement so we can use it
// for literally anything =
-export const Paragraph =
- styled.p <
- ParagraphProps >
- `
+export const Paragraph = styled.p<ParagraphProps>`
font-size: ${props => `var(--${props.size || 'default'}Paragraph)`};
font-weight: ${props => props.fontWeight || 300};
margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')};
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 92aecf046..2ed0229c8 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -354,12 +354,11 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
{tokenState.isLoaded ? (
<span>
{this._renderAmount(tokenState.balance, token.decimals)} {token.symbol}
- {this.state.isZRXSpinnerVisible &&
- token.symbol === ZRX_TOKEN_SYMBOL && (
- <span className="pl1">
- <i className="zmdi zmdi-spinner zmdi-hc-spin" />
- </span>
- )}
+ {this.state.isZRXSpinnerVisible && token.symbol === ZRX_TOKEN_SYMBOL && (
+ <span className="pl1">
+ <i className="zmdi zmdi-spinner zmdi-hc-spin" />
+ </span>
+ )}
</span>
) : (
<i className="zmdi zmdi-spinner zmdi-hc-spin" />
diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx
index f9e0967d4..a14b94d8a 100644
--- a/packages/website/ts/components/ui/party.tsx
+++ b/packages/website/ts/components/ui/party.tsx
@@ -94,14 +94,17 @@ export class Party extends React.Component<PartyProps, PartyState> {
<ReactTooltip id={registeredTooltipId}>
{isRegistered ? (
<div>
- This token address was found in the token registry<br />
+ This token address was found in the token registry
+ <br />
smart contract and is therefore believed to be a<br />
legitimate token.
</div>
) : (
<div>
- This token is not included in the token registry<br />
- smart contract. We cannot guarantee the legitimacy<br />
+ This token is not included in the token registry
+ <br />
+ smart contract. We cannot guarantee the legitimacy
+ <br />
of this token. Make sure to verify its address on Etherscan.
</div>
)}
@@ -109,27 +112,28 @@ export class Party extends React.Component<PartyProps, PartyState> {
</div>
</div>
)}
- {!_.isUndefined(this.props.hasUniqueNameAndSymbol) &&
- !this.props.hasUniqueNameAndSymbol && (
- <div>
- <div
- data-tip={true}
- data-for={uniqueNameAndSymbolTooltipId}
- className="mx-auto"
- style={{ fontSize: 13, width: 127 }}
- >
- <span style={{ color: colors.red500 }}>
- <i className="zmdi zmdi-alert-octagon" />
- </span>{' '}
- <span>Suspicious token</span>
- <ReactTooltip id={uniqueNameAndSymbolTooltipId}>
- This token shares it's name, symbol or both with<br />
- a token in the 0x Token Registry but it has a different<br />
- smart contract address. This is most likely a scam token!
- </ReactTooltip>
- </div>
+ {!_.isUndefined(this.props.hasUniqueNameAndSymbol) && !this.props.hasUniqueNameAndSymbol && (
+ <div>
+ <div
+ data-tip={true}
+ data-for={uniqueNameAndSymbolTooltipId}
+ className="mx-auto"
+ style={{ fontSize: 13, width: 127 }}
+ >
+ <span style={{ color: colors.red500 }}>
+ <i className="zmdi zmdi-alert-octagon" />
+ </span>{' '}
+ <span>Suspicious token</span>
+ <ReactTooltip id={uniqueNameAndSymbolTooltipId}>
+ This token shares it's name, symbol or both with
+ <br />
+ a token in the 0x Token Registry but it has a different
+ <br />
+ smart contract address. This is most likely a scam token!
+ </ReactTooltip>
</div>
- )}
+ </div>
+ )}
</div>
</div>
);