diff --git a/packages/website/ts/components/aboutPageLayout.tsx b/packages/website/ts/components/aboutPageLayout.tsx index 51c1a661eb..bf1ede6fc0 100644 --- a/packages/website/ts/components/aboutPageLayout.tsx +++ b/packages/website/ts/components/aboutPageLayout.tsx @@ -6,7 +6,7 @@ import { Button } from 'ts/components/button'; import { ChapterLink } from 'ts/components/chapter_link'; import { Column, Section } from 'ts/components/newLayout'; import { SiteWrap } from 'ts/components/siteWrap'; -import { Heading, Paragraph } from 'ts/components/text'; +import { Heading } from 'ts/components/text'; import { addFadeInAnimation } from 'ts/constants/animations'; import { WebsitePaths } from 'ts/types'; @@ -34,9 +34,7 @@ export const AboutPageLayout = (props: Props) => ( {props.title} - - {props.description} - + {props.description} {props.linkLabel && (props.href || props.to) && ( = (props: Props) => { const { heading, subline, mainCta, secondaryCta } = props; return ( - + - + {heading} {subline && ( @@ -44,7 +50,7 @@ export const Banner: React.StatelessComponent = (props: Props) => { )} - + {mainCta && ( )} - + ); }; @@ -77,8 +83,12 @@ export const Banner: React.StatelessComponent = (props: Props) => { const CustomSection = styled(Section)` color: ${colors.white}; margin-top: 30px; + margin-top: 0; @media (max-width: 900px) { + align-items: center; + display: flex; + flex-direction: column; text-align: center; p { @@ -91,10 +101,17 @@ const CustomSection = styled(Section)` } `; +const ColumnCta = styled(Column)` + flex-shrink: 0; +`; + const CustomHeading = styled.h2` font-size: 34px; + line-height: normal; font-weight: 400; - margin-bottom: 10px @media (max-width: 768px) { + margin-bottom: 10px; + + @media (max-width: 768px) { font-size: 30px; } `; diff --git a/packages/website/ts/components/button.tsx b/packages/website/ts/components/button.tsx index 4bb7351123..5c766906b4 100644 --- a/packages/website/ts/components/button.tsx +++ b/packages/website/ts/components/button.tsx @@ -5,8 +5,11 @@ import styled from 'styled-components'; import { ThemeInterface } from 'ts/components/siteWrap'; import { colors } from 'ts/style/colors'; +import { withFilteredProps } from 'ts/utils/filter_props'; export interface ButtonInterface { + isDisabled?: boolean; + className?: string; bgColor?: string; borderColor?: string; color?: string; @@ -22,27 +25,29 @@ export interface ButtonInterface { type?: string; target?: string; to?: string; - onClick?: (e: Event) => any; + onClick?: (e: any) => any; theme?: ThemeInterface; shouldUseAnchorTag?: boolean; } export const Button: React.StatelessComponent = (props: ButtonInterface) => { - const { children, href, isWithArrow, to, shouldUseAnchorTag, target } = props; + const { children, href, isWithArrow, to, shouldUseAnchorTag, target, isDisabled, className } = props; + const isButton = !href && !to; let linkElem; if (href || shouldUseAnchorTag) { linkElem = 'a'; } if (to) { - linkElem = ReactRouterLink; + linkElem = withFilteredProps(ReactRouterLink, ['className', 'href', 'to', 'onClick', 'target']); } const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase; const targetProp = href && target ? { target } : {}; + const buttonProps = isButton ? { disabled: isDisabled } : {}; return ( - + {children} {isWithArrow && ( diff --git a/packages/website/ts/components/card.tsx b/packages/website/ts/components/card.tsx new file mode 100644 index 0000000000..ff3577c235 --- /dev/null +++ b/packages/website/ts/components/card.tsx @@ -0,0 +1,96 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import { Button } from 'ts/components/button'; +import { Icon } from 'ts/components/icon'; +import { Heading, Paragraph } from 'ts/components/text'; + +export interface LinkProps { + text: string; + url: string; +} + +interface CardProps { + icon: string; + heading: string; + description: string; + href?: string; + links?: LinkProps[]; +} + +export const Card: React.StatelessComponent = (props: CardProps) => { + const { heading, description, icon, links } = props; + + return ( + + + + + + + {heading} + + {description} + + {_.map(links, (link, index) => ( + + ))} + + + + ); +}; + +const StyledCard = styled.div` + background-color: ${colors.backgroundDark}; + display: flex; + flex-direction: column; + width: 100%; + min-height: 520px; + flex: 0 0 auto; + transition: opacity 0.4s ease-in-out; + + @media (max-width: 500px) { + min-height: 450px; + } +`; + +const CardHead = styled.div` + background-color: ${colors.brandDark}; + height: 240px; + display: flex; + justify-content: center; + align-items: center; + padding: 40px 0; + + @media (max-width: 500px) { + height: 180px; + padding: 30px 0; + } +`; + +const CardContent = styled.div` + display: flex; + flex-direction: column; + padding: 30px; + flex-grow: 1; + + @media (max-width: 500px) { + padding: 20px; + } +`; + +const Links = styled.div` + margin-top: auto; +`; diff --git a/packages/website/ts/components/dropdowns/dropdown_products.tsx b/packages/website/ts/components/dropdowns/dropdown_products.tsx index 6cb94f14ca..790d30bef7 100644 --- a/packages/website/ts/components/dropdowns/dropdown_products.tsx +++ b/packages/website/ts/components/dropdowns/dropdown_products.tsx @@ -17,6 +17,11 @@ const navData = [ description: 'Build on the 0x protocol', url: WebsitePaths.LaunchKit, }, + { + title: 'Extensions', + description: 'Support new types of trading on your relayer with 0x Extensions', + url: WebsitePaths.Extensions, + }, { title: 'Governance', description: 'Vote on changes to the 0x protocol', diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 261db63b56..0cc6449922 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -33,6 +33,7 @@ const linkRows: LinkRows[] = [ links: [ { url: WebsitePaths.Instant, text: '0x Instant' }, { url: WebsitePaths.LaunchKit, text: '0x Launch Kit' }, + { url: WebsitePaths.Extensions, text: 'Extensions' }, { url: WebsitePaths.Vote, text: 'Governance' }, ], }, diff --git a/packages/website/ts/components/heroAnimation.tsx b/packages/website/ts/components/heroAnimation.tsx index 42956fb6a3..463b5bea0b 100644 --- a/packages/website/ts/components/heroAnimation.tsx +++ b/packages/website/ts/components/heroAnimation.tsx @@ -26,7 +26,7 @@ export const HeroAnimation = () => ( /> ` margin: ${props => getCSSPadding(props.margin)}; display: inline-block; flex-shrink: 0; + max-height: 100%; + max-width: 100%; svg { width: 100%; diff --git a/packages/website/ts/components/image.tsx b/packages/website/ts/components/image.tsx index 0137cfc97f..ac73646b7d 100644 --- a/packages/website/ts/components/image.tsx +++ b/packages/website/ts/components/image.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; +import { withFilteredProps } from 'ts/utils/filter_props'; interface Props { alt?: string; @@ -12,6 +13,6 @@ const ImageClass: React.FunctionComponent = (props: Props) => { return ; }; -export const Image = styled(ImageClass)` +export const Image = styled(withFilteredProps(ImageClass, ['alt', 'src']))` margin: ${props => props.isCentered && `0 auto`}; `; diff --git a/packages/website/ts/components/newLayout.tsx b/packages/website/ts/components/newLayout.tsx index 07691a02a3..49e22e3390 100644 --- a/packages/website/ts/components/newLayout.tsx +++ b/packages/website/ts/components/newLayout.tsx @@ -32,12 +32,14 @@ export interface SectionProps extends WrapProps { maxWidth?: string; bgColor?: 'dark' | 'light' | string; children: any; + alignItems?: string; } export interface FlexProps { padding?: string; isFlex?: boolean; flexBreakpoint?: string; + alignItems?: string; } export interface ColumnProps { @@ -76,6 +78,7 @@ export const FlexWrap = styled.div` @media (min-width: ${props => props.flexBreakpoint || '768px'}) { display: ${props => props.isFlex && 'flex'}; justify-content: ${props => props.isFlex && 'space-between'}; + align-items: ${props => props.alignItems}; } `; diff --git a/packages/website/ts/components/siteWrap.tsx b/packages/website/ts/components/siteWrap.tsx index 1f0902105c..fe5218f820 100644 --- a/packages/website/ts/components/siteWrap.tsx +++ b/packages/website/ts/components/siteWrap.tsx @@ -9,6 +9,7 @@ import { GlobalStyles } from 'ts/constants/globalStyle'; interface Props { theme?: 'dark' | 'light' | 'gray'; + isFullScreen?: boolean; children: any; } @@ -18,6 +19,7 @@ interface State { interface MainProps { isNavToggled: boolean; + isFullScreen?: boolean; } export interface ThemeValuesInterface { @@ -118,7 +120,7 @@ export class SiteWrap extends React.Component { }; public render(): React.ReactNode { - const { children, theme = 'dark' } = this.props; + const { children, theme = 'dark', isFullScreen } = this.props; const { isMobileNavOpen } = this.state; const currentTheme = GLOBAL_THEMES[theme]; @@ -130,7 +132,9 @@ export class SiteWrap extends React.Component {
-
{children}
+
+ {children} +