crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates margins in why, change link component

Browse Source
This commit is contained in:
Ezekiel Aquino
2018-12-10 17:55:51 +01:00
parent 4138c580bc
commit 7aee687e6b
5 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/website/ts/@next/components/button.tsx
View File

@@ -52,7 +52,7 @@ export const Link = (props: ButtonInterface) => {
const Component = Button.withComponent(ReactRouterLink);
return (
<Component to={href} {...props}>
<Component to={href} isTransparent={true} {...props}>
{children}
{ isWithArrow &&

3
packages/website/ts/@next/components/header.tsx
View File

@@ -58,7 +58,9 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
<ReactRouterLink to="/next">
<Logo/>
</ReactRouterLink>
<Hamburger isOpen={this.state.isOpen} onClick={this._onMenuButtonClick.bind(this)}/>
<Nav>
<MobileProductLinksWrap>
<Paragraph isNoMargin={true} isMuted={0.5} size="small">Products</Paragraph>
@@ -73,6 +75,7 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
</StyledLink>
))}
</MobileProductLinksWrap>
<StyledButtonWrap>
{_.map(navItems, (link, index) => this._getNavItem(link, index))}
</StyledButtonWrap>

3
packages/website/ts/@next/components/text.tsx
View File

@@ -17,6 +17,7 @@ interface HeadingProps extends BaseTextInterface {
interface ParagraphProps extends BaseTextInterface {
isNoMargin?: boolean;
marginBottom?: string; // maybe we should remove isNoMargin
isMuted?: boolean | number;
}
@@ -56,7 +57,7 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => {
// for literally anything =
export const Paragraph = styled.p<ParagraphProps>`
font-size: ${props => `var(--${props.size || 'default'}Paragraph)`};
margin-bottom: ${props => !props.isNoMargin && '30px'};
margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')};
padding: ${props => props.padding && getCSSPadding(props.padding)};
color: ${props => props.color || props.theme.textColor};
opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted};

2
packages/website/ts/@next/constants/globalStyle.tsx
View File

@@ -53,7 +53,7 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
@media (max-width: 768px) {
:root {
--smallHeading: 16px;
--smallHeading: 18px;
--defaultHeading: 18px;
--mediumHeading: 40px;
--largeHeading: 46px;

19
packages/website/ts/@next/pages/why.tsx
View File

@@ -6,9 +6,9 @@ import styled from 'styled-components';
import { colors } from 'ts/style/colors';
import { Banner } from 'ts/@next/components/banner';
import { Link } from 'ts/@next/components/button';
import { Icon } from 'ts/@next/components/icon';
import { BREAKPOINTS, Column, Section, Wrap, WrapCentered, WrapSticky } from 'ts/@next/components/layout';
import { Link } from 'ts/@next/components/link';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Heading, Paragraph } from 'ts/@next/components/text';
@@ -73,18 +73,25 @@ export class NextWhy extends React.PureComponent {
size="medium"
isCentered={true}
>
The exchange layer for the crypto economy
The exchange layer for<br />
the crypto economy
</Heading>
<Paragraph
size="medium"
isMuted={true}
isCentered={true}
marginBottom="60px"
>
The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens.
</Paragraph>
<Link href="/docs" isCentered={true}>
<Link
href="/docs"
isCentered={true}
isWithArrow={true}
isAccentColor={true}
>
Build on 0x
</Link>
</Column>
@@ -95,19 +102,19 @@ export class NextWhy extends React.PureComponent {
<Wrap>
<Column colWidth="1/3">
<Icon name="coin" size="large" margin={[0, 0, 32, 0]} />
<Heading size="small">Support for all Ethereum Standards</Heading>
<Heading size="small" marginBottom="15px">Support for all Ethereum Standards</Heading>
<Paragraph isMuted={true}>0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol...</Paragraph>
</Column>
<Column colWidth="1/3">
<Icon name="coin" size="large" margin={[0, 0, 32, 0]} />
<Heading size="small">Shared Networked Liquidity</Heading>
<Heading size="small" marginBottom="15px">Shared Networked Liquidity</Heading>
<Paragraph isMuted={true}>0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system.</Paragraph>
</Column>
<Column colWidth="1/3">
<Icon name="coin" size="large" margin={[0, 0, 32, 0]} />
<Heading size="small">Customize the User Experience</Heading>
<Heading size="small" marginBottom="15px">Customize the User Experience</Heading>
<Paragraph isMuted={true}>Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces.</Paragraph>
</Column>
</Wrap>