aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2019-01-07 13:35:05 +0800
committerBrandon Millman <brandon.millman@gmail.com>2019-01-07 13:40:14 +0800
commit59ec243c2678cca2d2170e49a235f00102b14f96 (patch)
tree8458a3ec990b2a85b10921aa4aa1c5da284bb2b2
parent5e8da70eae3aab86f194a28ee2ecca3368918db2 (diff)
downloaddexon-sol-tools-59ec243c2678cca2d2170e49a235f00102b14f96.tar
dexon-sol-tools-59ec243c2678cca2d2170e49a235f00102b14f96.tar.gz
dexon-sol-tools-59ec243c2678cca2d2170e49a235f00102b14f96.tar.bz2
dexon-sol-tools-59ec243c2678cca2d2170e49a235f00102b14f96.tar.lz
dexon-sol-tools-59ec243c2678cca2d2170e49a235f00102b14f96.tar.xz
dexon-sol-tools-59ec243c2678cca2d2170e49a235f00102b14f96.tar.zst
dexon-sol-tools-59ec243c2678cca2d2170e49a235f00102b14f96.zip
feat(website): add contact us hero action to market maker page
-rw-r--r--packages/website/ts/components/button.tsx9
-rw-r--r--packages/website/ts/pages/market_maker.tsx36
2 files changed, 30 insertions, 15 deletions
diff --git a/packages/website/ts/components/button.tsx b/packages/website/ts/components/button.tsx
index c9785e48c..569038ae0 100644
--- a/packages/website/ts/components/button.tsx
+++ b/packages/website/ts/components/button.tsx
@@ -8,6 +8,7 @@ import { colors } from 'ts/style/colors';
interface ButtonInterface {
bgColor?: string;
+ borderColor?: string;
color?: string;
children?: React.ReactNode | string;
isTransparent?: boolean;
@@ -26,7 +27,7 @@ interface ButtonInterface {
shouldUseAnchorTag?: boolean;
}
-export const Button = (props: ButtonInterface) => {
+export const Button: React.StatelessComponent<ButtonInterface> = (props: ButtonInterface) => {
const { children, href, isWithArrow, to, shouldUseAnchorTag, target } = props;
let linkElem;
@@ -53,6 +54,10 @@ export const Button = (props: ButtonInterface) => {
);
};
+Button.defaultProps = {
+ borderColor: 'rgba(255, 255, 255, .4)',
+};
+
const ButtonBase =
styled.button <
ButtonInterface >
@@ -62,7 +67,7 @@ const ButtonBase =
display: inline-block;
background-color: ${props => props.bgColor || colors.brandLight};
background-color: ${props => (props.isTransparent || props.isWithArrow) && 'transparent'};
- border-color: ${props => props.isTransparent && !props.isWithArrow && 'rgba(255, 255, 255, .4)'};
+ border-color: ${props => props.isTransparent && !props.isWithArrow && props.borderColor};
color: ${props => (props.isAccentColor ? props.theme.linkColor : props.color || props.theme.textColor)};
padding: ${props => !props.isNoPadding && !props.isWithArrow && '18px 30px'};
white-space: ${props => props.isWithArrow && 'nowrap'};
diff --git a/packages/website/ts/pages/market_maker.tsx b/packages/website/ts/pages/market_maker.tsx
index 5c0820f61..6e0a5c320 100644
--- a/packages/website/ts/pages/market_maker.tsx
+++ b/packages/website/ts/pages/market_maker.tsx
@@ -1,4 +1,5 @@
import * as _ from 'lodash';
+import { opacify } from 'polished';
import * as React from 'react';
import { Banner } from 'ts/components/banner';
@@ -8,6 +9,7 @@ import { Hero } from 'ts/components/hero';
import { ModalContact, ModalContactType } from 'ts/components/modals/modal_contact';
import { Section } from 'ts/components/newLayout';
import { SiteWrap } from 'ts/components/siteWrap';
+import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
interface OfferData {
@@ -53,7 +55,7 @@ export class NextMarketMaker extends React.Component<NextMarketMakerProps> {
links: [
{
label: 'Contact Us',
- onClick: this._onOpenContactModal.bind(this),
+ onClick: this._onOpenContactModal,
shouldUseAnchorTag: true,
},
],
@@ -72,7 +74,7 @@ export class NextMarketMaker extends React.Component<NextMarketMakerProps> {
isCenteredMobile={false}
title="Bring liquidity to the exchanges of the future"
description="Market makers (MMs) are important stakeholders in the 0x ecosystem. The Market Making Program provides a set of resources that help onboard MMs to bring liquidity to the 0x network. The Program includes tutorials, monetary incentives, and 1:1 support from the 0x team."
- actions={<HeroActions />}
+ actions={this._renderHeroActions()}
/>
<Section bgColor="light" isFlex={true} maxWidth="1170px">
@@ -123,7 +125,7 @@ export class NextMarketMaker extends React.Component<NextMarketMakerProps> {
heading="Start trading today."
subline="Dive into our docs, or contact us if needed"
mainCta={{ text: 'Explore the Docs', href: `${WebsitePaths.Wiki}#Market-Making-on-0x` }}
- secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }}
+ secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal }}
/>
<ModalContact
isOpen={this.state.isContactModalOpen}
@@ -134,19 +136,27 @@ export class NextMarketMaker extends React.Component<NextMarketMakerProps> {
);
}
- public _onOpenContactModal = (): void => {
+ private readonly _onOpenContactModal = (): void => {
this.setState({ isContactModalOpen: true });
};
- public _onDismissContactModal = (): void => {
+ private readonly _onDismissContactModal = (): void => {
this.setState({ isContactModalOpen: false });
};
-}
-const HeroActions = () => (
- <>
- <Button href={`${WebsitePaths.Wiki}#Market-Making-on-0x`} bgColor="dark" isInline={true}>
- Get Started
- </Button>
- </>
-);
+ private readonly _renderHeroActions = () => (
+ <>
+ <Button href={`${WebsitePaths.Wiki}#Market-Making-on-0x`} bgColor="dark" isInline={true}>
+ Get Started
+ </Button>
+ <Button
+ onClick={this._onOpenContactModal}
+ borderColor={opacify(0.4)(colors.brandDark)}
+ isTransparent={true}
+ isInline={true}
+ >
+ Contact Us
+ </Button>
+ </>
+ );
+}