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

Type fixes

Browse Source
This commit is contained in:
Fred Carlsen
2018-12-14 20:20:27 +01:00
parent 1955c846f2
commit ceddc01985
8 changed files with 53 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,7 @@ interface Props {
} }
export const Hero = (props: Props) => ( export const Hero = (props: Props) => (
<Section maxWidth="1170px"> <Section>
<Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth}> <Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth}>
{props.figure && {props.figure &&
<Content width="400px"> <Content width="400px">

6
packages/website/ts/@next/components/mobileNav.tsx
View File

@@ -4,7 +4,7 @@ import styled from 'styled-components';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import {WrapGrid} from 'ts/@next/components/newLayout'; import {WrapGrid, WrapProps} from 'ts/@next/components/newLayout';
interface Props { interface Props {
isToggled: boolean; isToggled: boolean;
@@ -36,7 +36,7 @@ export class MobileNav extends React.PureComponent<Props> {
</Section> </Section>
<Section isDark={true}> <Section isDark={true}>
<Grid as="ul" width="100%" isWrapped={true}> <Grid as="ul" isFullWidth={true} isWrapped={true}>
<li> <li>
<Link to="/next/why"> <Link to="/next/why">
Why 0x Why 0x
@@ -112,7 +112,7 @@ const Section = styled.div<{ isDark?: boolean }>`
background-color: ${props => props.isDark && props.theme.mobileNavBgLower}; background-color: ${props => props.isDark && props.theme.mobileNavBgLower};
`; `;
const Grid = styled(WrapGrid)` const Grid = styled(WrapGrid)<WrapProps>`
li { li {
width: 50%; width: 50%;
flex-shrink: 0; flex-shrink: 0;

1
packages/website/ts/@next/components/newLayout.tsx
View File

@@ -25,6 +25,7 @@ export interface SectionProps extends WrapProps {
isPadded?: boolean; isPadded?: boolean;
isFullWidth?: boolean; isFullWidth?: boolean;
isFlex?: boolean; isFlex?: boolean;
padding?: string;
paddingMobile?: string; paddingMobile?: string;
flexBreakpoint?: string; flexBreakpoint?: string;
maxWidth?: string; maxWidth?: string;

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

@@ -33,7 +33,7 @@ const StyledHeading = styled.h1<HeadingProps>`
display: ${props => props.isFlex && `inline-flex`}; display: ${props => props.isFlex && `inline-flex`};
align-items: center; align-items: center;
justify-content: ${props => props.isFlex && `space-between`}; justify-content: ${props => props.isFlex && `space-between`};
font-size: ${props => isNaN(props.size) ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`}; font-size: ${props => typeof props.size === 'string' ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`};
line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`}; line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`};
text-align: ${props => props.isCentered && 'center'}; text-align: ${props => props.isCentered && 'center'};
padding: ${props => props.padding && getCSSPadding(props.padding)}; padding: ${props => props.padding && getCSSPadding(props.padding)};
@@ -49,7 +49,7 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => {
const { const {
asElement = 'h1', asElement = 'h1',
children, children,
...style, ...style
} = props; } = props;
const Component = StyledHeading.withComponent(asElement); const Component = StyledHeading.withComponent(asElement);

39
packages/website/ts/@next/pages/about/jobs.tsx
View File

@@ -7,13 +7,17 @@ import { Link } from 'ts/@next/components/link';
import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout'; import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
import { Heading, Paragraph } from 'ts/@next/components/text'; import { Heading, Paragraph } from 'ts/@next/components/text';
interface PositionInterface { interface PositionProps {
title: string; title: string;
location: string; location: string;
href: string; href: string;
} }
const positions: PositionInterface[] = [ interface PositionItemProps {
position: PositionProps;
}
const positions: PositionProps[] = [
{ {
title: 'Product Designer', title: 'Product Designer',
location: 'San Francisco, Remote', location: 'San Francisco, Remote',
@@ -62,7 +66,7 @@ export const NextAboutJobs = () => (
</Section> </Section>
<Section isFlex={true} maxWidth="1170px" wrapWidth="100%"> <Section isFlex={true} maxWidth="1170px" wrapWidth="100%">
<Column colWidth="1/3"> <Column>
<Heading size="medium">Benefits</Heading> <Heading size="medium">Benefits</Heading>
</Column> </Column>
@@ -97,21 +101,24 @@ export const NextAboutJobs = () => (
</AboutPageLayout> </AboutPageLayout>
); );
const Position = ({ position }) => ( export const Position: React.FunctionComponent<PositionItemProps> = (props: PositionItemProps) => {
<PositionWrap> const { position } = props;
<StyledColumn width="30%"> return (
<Heading asElement="h3" size="small" fontWeight="400" marginBottom="0"><a href={position.href}>{position.title}</a></Heading> <PositionWrap>
</StyledColumn> <StyledColumn width="30%">
<Heading asElement="h3" size="small" fontWeight="400" marginBottom="0"><a href={position.href}>{position.title}</a></Heading>
</StyledColumn>
<StyledColumn width="50%" padding="0 40px 0 0"> <StyledColumn width="50%" padding="0 40px 0 0">
<Paragraph isMuted={true} marginBottom="0">{position.location}</Paragraph> <Paragraph isMuted={true} marginBottom="0">{position.location}</Paragraph>
</StyledColumn> </StyledColumn>
<StyledColumn width="20%"> <StyledColumn width="20%">
<Paragraph marginBottom="0" textAlign="right"><Link href={position.href}>Apply</Link></Paragraph> <Paragraph marginBottom="0" textAlign="right"><Link href={position.href}>Apply</Link></Paragraph>
</StyledColumn> </StyledColumn>
</PositionWrap> </PositionWrap>
); );
};
const BenefitsList = styled.ul` const BenefitsList = styled.ul`
color: #000; color: #000;

33
packages/website/ts/@next/pages/about/press.tsx
View File

@@ -7,14 +7,18 @@ import { Button } from 'ts/@next/components/button';
import { Column, FlexWrap } from 'ts/@next/components/newLayout'; import { Column, FlexWrap } from 'ts/@next/components/newLayout';
import { Paragraph } from 'ts/@next/components/text'; import { Paragraph } from 'ts/@next/components/text';
interface HighlightInterface { interface HighlightProps {
logo: string; logo: string;
title?: string; title?: string;
text: string; text: string;
href: string; href: string;
} }
const highlights: HighlightInterface[] = [ interface HighlightItemProps {
highlight: HighlightProps;
}
const highlights: HighlightProps[] = [
{ {
logo: '/images/@next/press/logo-forbes.png', logo: '/images/@next/press/logo-forbes.png',
title: 'Forbes', title: 'Forbes',
@@ -58,18 +62,21 @@ export const NextAboutPress = () => (
/> />
); );
const Highlight = ({ highlight }) => ( export const Highlight: React.FunctionComponent<HighlightItemProps> = (props: HighlightItemProps) => {
<HighlightWrap> const { highlight } = props;
<Column> return (
<img src={highlight.logo} alt={highlight.title} /> <HighlightWrap>
</Column> <Column>
<img src={highlight.logo} alt={highlight.title} />
</Column>
<Column width="60%" maxWidth="560px"> <Column width="60%" maxWidth="560px">
<Paragraph isMuted={false}>{highlight.text}</Paragraph> <Paragraph isMuted={false}>{highlight.text}</Paragraph>
<Button href={highlight.href} isWithArrow={true} isNoBorder={true}>Read Article</Button> <Button href={highlight.href} isWithArrow={true} isNoBorder={true}>Read Article</Button>
</Column> </Column>
</HighlightWrap> </HighlightWrap>
); );
};
const HighlightWrap = styled(FlexWrap)` const HighlightWrap = styled(FlexWrap)`
border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea;

4
packages/website/ts/@next/pages/about/team.tsx
View File

@@ -196,7 +196,7 @@ export const NextAboutTeam = () => (
width="70%" width="70%"
maxWidth="800px" maxWidth="800px"
> >
<StyledGrid isWrapped={true} isCentered={false}> <StyledGrid>
{_.map(team, (info: TeamMember, index: number) => ( {_.map(team, (info: TeamMember, index: number) => (
<Member key={`team-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} /> <Member key={`team-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
))} ))}
@@ -219,7 +219,7 @@ export const NextAboutTeam = () => (
width="70%" width="70%"
maxWidth="800px" maxWidth="800px"
> >
<StyledGrid isWrapped={true} isCentered={false}> <StyledGrid>
{_.map(advisors, (info: TeamMember, index: number) => ( {_.map(advisors, (info: TeamMember, index: number) => (
<Member key={`advisor-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} /> <Member key={`advisor-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
))} ))}

4
packages/website/ts/@next/pages/instant.tsx
View File

@@ -14,8 +14,6 @@ import {SiteWrap} from 'ts/@next/components/siteWrap';
import {Heading, Paragraph} from 'ts/@next/components/text'; import {Heading, Paragraph} from 'ts/@next/components/text';
import { Configurator } from 'ts/@next/pages/instant/configurator'; import { Configurator } from 'ts/@next/pages/instant/configurator';
const CONFIGURATOR_HASH = 'configure';
const featuresData = [ const featuresData = [
{ {
title: 'Support ERC-20 and ERC-721 tokens', title: 'Support ERC-20 and ERC-721 tokens',
@@ -96,7 +94,7 @@ export const Next0xInstant = () => (
<ConfiguratorSection maxWidth="1386px" padding="0 58px 70px" bgColor={colors.backgroundDark}> <ConfiguratorSection maxWidth="1386px" padding="0 58px 70px" bgColor={colors.backgroundDark}>
<Heading>0x Instant Configurator</Heading> <Heading>0x Instant Configurator</Heading>
<Configurator hash={CONFIGURATOR_HASH} /> <Configurator />
</ConfiguratorSection> </ConfiguratorSection>
<Banner <Banner