diff options
Diffstat (limited to 'packages/website/ts/components')
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> ); |