diff options
Diffstat (limited to 'packages/website/ts')
56 files changed, 268 insertions, 365 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> ); diff --git a/packages/website/ts/constants/globalStyle.tsx b/packages/website/ts/constants/globalStyle.tsx index 5abb758c5..ef7ec9426 100644 --- a/packages/website/ts/constants/globalStyle.tsx +++ b/packages/website/ts/constants/globalStyle.tsx @@ -11,9 +11,7 @@ export interface GlobalStyle { } const GlobalStyles = withTheme( - createGlobalStyle < - GlobalStyle > - ` + createGlobalStyle<GlobalStyle>` ${cssReset}; html { diff --git a/packages/website/ts/containers/asset_buyer_documentation.ts b/packages/website/ts/containers/asset_buyer_documentation.ts index 815176e47..a75c6d861 100644 --- a/packages/website/ts/containers/asset_buyer_documentation.ts +++ b/packages/website/ts/containers/asset_buyer_documentation.ts @@ -40,6 +40,7 @@ const docsInfoConfig: DocsInfoConfig = { }; const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/connect_documentation.ts b/packages/website/ts/containers/connect_documentation.ts index 19fd0ee56..1cfc0702e 100644 --- a/packages/website/ts/containers/connect_documentation.ts +++ b/packages/website/ts/containers/connect_documentation.ts @@ -45,6 +45,7 @@ const docsInfoConfig: DocsInfoConfig = { }; const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/contract_wrappers_documentation.ts b/packages/website/ts/containers/contract_wrappers_documentation.ts index dec95ae62..bbabce7a7 100644 --- a/packages/website/ts/containers/contract_wrappers_documentation.ts +++ b/packages/website/ts/containers/contract_wrappers_documentation.ts @@ -40,6 +40,7 @@ const docsInfoConfig: DocsInfoConfig = { }; const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/docs_home.ts b/packages/website/ts/containers/docs_home.ts index e0ca439a6..2a6dac0e2 100644 --- a/packages/website/ts/containers/docs_home.ts +++ b/packages/website/ts/containers/docs_home.ts @@ -26,6 +26,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const DocsHome: React.ComponentClass<DocsHomeProps> = connect(mapStateToProps, mapDispatchToProps)( - DocsHomeComponent, -); +export const DocsHome: React.ComponentClass<DocsHomeProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocsHomeComponent); diff --git a/packages/website/ts/containers/ethereum_types_documentation.ts b/packages/website/ts/containers/ethereum_types_documentation.ts index 9b668d515..e6e4d4067 100644 --- a/packages/website/ts/containers/ethereum_types_documentation.ts +++ b/packages/website/ts/containers/ethereum_types_documentation.ts @@ -36,6 +36,7 @@ const docsInfoConfig: DocsInfoConfig = { }; const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/faq.ts b/packages/website/ts/containers/faq.ts index a2b5735f6..da5b71bdd 100644 --- a/packages/website/ts/containers/faq.ts +++ b/packages/website/ts/containers/faq.ts @@ -22,4 +22,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const FAQ: React.ComponentClass<FAQProps> = connect(mapStateToProps, mapDispatchToProps)(FAQComponent); +export const FAQ: React.ComponentClass<FAQProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(FAQComponent); diff --git a/packages/website/ts/containers/json_schemas_documentation.ts b/packages/website/ts/containers/json_schemas_documentation.ts index 3862ba878..1090265e7 100644 --- a/packages/website/ts/containers/json_schemas_documentation.ts +++ b/packages/website/ts/containers/json_schemas_documentation.ts @@ -65,6 +65,7 @@ const docsInfoConfig: DocsInfoConfig = { }; const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/migrations_documentation.ts b/packages/website/ts/containers/migrations_documentation.ts index dd5db3ac6..bae84dfea 100644 --- a/packages/website/ts/containers/migrations_documentation.ts +++ b/packages/website/ts/containers/migrations_documentation.ts @@ -61,6 +61,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/not_found.ts b/packages/website/ts/containers/not_found.ts index f384dab89..825c021ec 100644 --- a/packages/website/ts/containers/not_found.ts +++ b/packages/website/ts/containers/not_found.ts @@ -22,6 +22,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const NotFound: React.ComponentClass<NotFoundProps> = connect(mapStateToProps, mapDispatchToProps)( - NotFoundComponent, -); +export const NotFound: React.ComponentClass<NotFoundProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(NotFoundComponent); diff --git a/packages/website/ts/containers/order_utils_documentation.ts b/packages/website/ts/containers/order_utils_documentation.ts index 4996c329a..8d83357ca 100644 --- a/packages/website/ts/containers/order_utils_documentation.ts +++ b/packages/website/ts/containers/order_utils_documentation.ts @@ -41,6 +41,7 @@ const docsInfoConfig: DocsInfoConfig = { }; const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/order_watcher_documentation.ts b/packages/website/ts/containers/order_watcher_documentation.ts index f3d3bada8..149ffdd2a 100644 --- a/packages/website/ts/containers/order_watcher_documentation.ts +++ b/packages/website/ts/containers/order_watcher_documentation.ts @@ -41,6 +41,7 @@ const docsInfoConfig: DocsInfoConfig = { }; const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/portal.ts b/packages/website/ts/containers/portal.ts index 5661e0a97..db41a3ec3 100644 --- a/packages/website/ts/containers/portal.ts +++ b/packages/website/ts/containers/portal.ts @@ -87,6 +87,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const Portal: React.ComponentClass<PortalComponentProps> = connect(mapStateToProps, mapDispatchToProps)( - PortalComponent, -); +export const Portal: React.ComponentClass<PortalComponentProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(PortalComponent); diff --git a/packages/website/ts/containers/smart_contracts_documentation.ts b/packages/website/ts/containers/smart_contracts_documentation.ts index 7c0de5515..d94e285a7 100644 --- a/packages/website/ts/containers/smart_contracts_documentation.ts +++ b/packages/website/ts/containers/smart_contracts_documentation.ts @@ -91,6 +91,7 @@ const docsInfoConfig: DocsInfoConfig = { }; const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/sol_compiler_documentation.ts b/packages/website/ts/containers/sol_compiler_documentation.ts index e899e9627..31117372b 100644 --- a/packages/website/ts/containers/sol_compiler_documentation.ts +++ b/packages/website/ts/containers/sol_compiler_documentation.ts @@ -45,6 +45,7 @@ const docsInfoConfig: DocsInfoConfig = { }; const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/sol_coverage_documentation.ts b/packages/website/ts/containers/sol_coverage_documentation.ts index 25d67e2d0..a9073b720 100644 --- a/packages/website/ts/containers/sol_coverage_documentation.ts +++ b/packages/website/ts/containers/sol_coverage_documentation.ts @@ -38,6 +38,7 @@ const docsInfoConfig: DocsInfoConfig = { }; const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/sol_profiler_documentation.ts b/packages/website/ts/containers/sol_profiler_documentation.ts index 14839831e..2f3936cae 100644 --- a/packages/website/ts/containers/sol_profiler_documentation.ts +++ b/packages/website/ts/containers/sol_profiler_documentation.ts @@ -38,6 +38,7 @@ const docsInfoConfig: DocsInfoConfig = { }; const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/sol_trace_documentation.ts b/packages/website/ts/containers/sol_trace_documentation.ts index c5286f1ff..9c2552438 100644 --- a/packages/website/ts/containers/sol_trace_documentation.ts +++ b/packages/website/ts/containers/sol_trace_documentation.ts @@ -38,6 +38,7 @@ const docsInfoConfig: DocsInfoConfig = { }; const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts index c7fb807a6..2ac0360ab 100644 --- a/packages/website/ts/containers/subproviders_documentation.ts +++ b/packages/website/ts/containers/subproviders_documentation.ts @@ -44,6 +44,7 @@ const docsInfoConfig: DocsInfoConfig = { }; const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/web3_wrapper_documentation.ts b/packages/website/ts/containers/web3_wrapper_documentation.ts index ad286da1a..73fea90ed 100644 --- a/packages/website/ts/containers/web3_wrapper_documentation.ts +++ b/packages/website/ts/containers/web3_wrapper_documentation.ts @@ -40,6 +40,7 @@ const docsInfoConfig: DocsInfoConfig = { }; const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/wiki.ts b/packages/website/ts/containers/wiki.ts index 069b0ae54..f4f2f6ec6 100644 --- a/packages/website/ts/containers/wiki.ts +++ b/packages/website/ts/containers/wiki.ts @@ -25,4 +25,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const Wiki: React.ComponentClass<WikiProps> = connect(mapStateToProps, mapDispatchToProps)(WikiComponent); +export const Wiki: React.ComponentClass<WikiProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(WikiComponent); diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts index 5da8d5e52..0e4765656 100644 --- a/packages/website/ts/containers/zero_ex_js_documentation.ts +++ b/packages/website/ts/containers/zero_ex_js_documentation.ts @@ -72,6 +72,7 @@ const docsInfoConfig: DocsInfoConfig = { }; const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/pages/about/jobs.tsx b/packages/website/ts/pages/about/jobs.tsx index ee1aa6cef..85c25a75f 100644 --- a/packages/website/ts/pages/about/jobs.tsx +++ b/packages/website/ts/pages/about/jobs.tsx @@ -151,7 +151,9 @@ export class NextAboutJobs extends React.Component<NextAboutJobsProps, NextAbout <Section id={OPEN_POSITIONS_HASH} isFlex={true} maxWidth="1170px" wrapWidth="100%"> <Column> <Heading size="medium"> - Current<br />Openings + Current + <br /> + Openings </Heading> </Column> diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 78376a0f2..0b725c514 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -68,10 +68,7 @@ interface SidebarContainerProps { className?: string; } -const SidebarContainer = - styled.div < - SidebarContainerProps > - ` +const SidebarContainer = styled.div<SidebarContainerProps>` ${scrollableContainerStyles} padding-top: 27px; padding-left: ${SIDEBAR_PADDING}px; @@ -87,10 +84,7 @@ interface MainContentContainerProps { className?: string; } -const MainContentContainer = - styled.div < - MainContentContainerProps > - ` +const MainContentContainer = styled.div<MainContentContainerProps>` ${scrollableContainerStyles} padding-top: 0px; padding-left: 50px; diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx index 8cde7224e..548db1d1d 100644 --- a/packages/website/ts/pages/faq/faq.tsx +++ b/packages/website/ts/pages/faq/faq.tsx @@ -36,17 +36,16 @@ const sections: FAQSection[] = [ <div> At its core, 0x is an open and non-rent seeking protocol that facilitates trustless, low friction exchange of Ethereum-based assets. Developers can use 0x as a platform to build - exchange applications on top of (<a - href={`${configs.BASE_URL}${WebsitePaths.ZeroExJs}#introduction`} - target="blank" - > + exchange applications on top of ( + <a href={`${configs.BASE_URL}${WebsitePaths.ZeroExJs}#introduction`} target="blank"> 0x.js </a>{' '} is a Javascript library for interacting with the 0x protocol). For end users, 0x will be the infrastructure of a wide variety of user-facing applications i.e.{' '} <a href={`${configs.BASE_URL}${WebsitePaths.Portal}`} target="blank"> 0x Portal - </a>, a decentralized application that facilitates trustless trading of Ethereum-based tokens + </a> + , a decentralized application that facilitates trustless trading of Ethereum-based tokens between known counterparties. </div> ), @@ -253,7 +252,8 @@ const sections: FAQSection[] = [ target="_blank" > development roadmap - </a>. + </a> + . </div> ), }, @@ -360,7 +360,8 @@ const sections: FAQSection[] = [ target="_blank" > here - </a>. + </a> + . </div> ), }, @@ -380,8 +381,9 @@ const sections: FAQSection[] = [ Join our{' '} <a href={constants.URL_ZEROEX_CHAT} target="_blank"> Discord - </a>! As an open source project, 0x will rely on a worldwide community of passionate developers - to contribute proposals, ideas and code. + </a> + ! As an open source project, 0x will rely on a worldwide community of passionate developers to + contribute proposals, ideas and code. </div> ), }, diff --git a/packages/website/ts/pages/instant.tsx b/packages/website/ts/pages/instant.tsx index b97bb35a4..586665d5b 100644 --- a/packages/website/ts/pages/instant.tsx +++ b/packages/website/ts/pages/instant.tsx @@ -100,7 +100,7 @@ export class Next0xInstant extends React.Component<Props> { <div> {[...Array(18)].map((item, index) => ( <Card key={`card-${index}`} index={index}> - <img src={`/images/0x-instant/widget-${index % 6 + 1}.png`} /> + <img src={`/images/0x-instant/widget-${(index % 6) + 1}.png`} /> </Card> ))} </div> @@ -189,13 +189,10 @@ const fadeUp = keyframes` } `; -const ConfiguratorSection = - styled(Section) < - SectionProps > - ` - @media (max-width: ${CONFIGURATOR_MIN_WIDTH_PX}px) { - display: none; - } +const ConfiguratorSection = styled(Section)<SectionProps>` + @media (max-width: ${CONFIGURATOR_MIN_WIDTH_PX}px) { + display: none; + } `; // width = 370 * 12 @@ -233,29 +230,26 @@ const MarqueeWrap = styled.div` } `; -const Card = - styled.div < - { index: number } > - ` - opacity: 0; - flex-shrink: 0; - transform: translateY(10px); - will-change: opacity, transform; - animation: ${fadeUp} 0.75s ${props => `${props.index * 0.05}s`} forwards; - - img { - height: auto; - } +const Card = styled.div<{ index: number }>` + opacity: 0; + flex-shrink: 0; + transform: translateY(10px); + will-change: opacity, transform; + animation: ${fadeUp} 0.75s ${props => `${props.index * 0.05}s`} forwards; - @media (min-width: 768px) { img { - width: 370px; + height: auto; } - } - @media (max-width: 768px) { - img { - width: 300px; + @media (min-width: 768px) { + img { + width: 370px; + } + } + + @media (max-width: 768px) { + img { + width: 300px; + } } - } `; diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index e43d47119..29fce85db 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -318,13 +318,10 @@ interface CheckboxTextProps { isSelected?: boolean; } -const CheckboxText = - styled.span < - CheckboxTextProps > - ` +const CheckboxText = styled.span<CheckboxTextProps>` font-size: 14px; line-height: 18px; - color: ${props => (props.isSelected ? colors.brandDark : '#666666')} + color: ${props => (props.isSelected ? colors.brandDark : '#666666')}; `; const OptionalAction = styled(OptionalText)` diff --git a/packages/website/ts/pages/why.tsx b/packages/website/ts/pages/why.tsx index 197ce5fc9..a0ed5f95a 100644 --- a/packages/website/ts/pages/why.tsx +++ b/packages/website/ts/pages/why.tsx @@ -229,10 +229,7 @@ interface SectionProps { isNotRelative?: boolean; } -const SectionWrap = - styled.div < - SectionProps > - ` +const SectionWrap = styled.div<SectionProps>` position: ${props => !props.isNotRelative && 'relative'}; & + & { @@ -258,10 +255,7 @@ const SectionWrap = interface SectionTitleProps { isNoBorder?: boolean; } -const SectionTitle = - styled(Heading) < - SectionTitleProps > - ` +const SectionTitle = styled(Heading)<SectionTitleProps>` position: relative; ${props => @@ -278,7 +272,6 @@ const SectionTitle = } `} - @media (max-width: 768px) { &:before { width: calc(100vw - 60px); |