aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/hero.tsx2
-rw-r--r--packages/website/ts/@next/components/mobileNav.tsx6
-rw-r--r--packages/website/ts/@next/components/newLayout.tsx1
-rw-r--r--packages/website/ts/@next/components/text.tsx4
-rw-r--r--packages/website/ts/@next/pages/about/jobs.tsx43
-rw-r--r--packages/website/ts/@next/pages/about/press.tsx33
-rw-r--r--packages/website/ts/@next/pages/about/team.tsx4
-rw-r--r--packages/website/ts/@next/pages/instant.tsx4
8 files changed, 55 insertions, 42 deletions
diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx
index cb17071fc..46e2ca6d9 100644
--- a/packages/website/ts/@next/components/hero.tsx
+++ b/packages/website/ts/@next/components/hero.tsx
@@ -13,7 +13,7 @@ interface Props {
}
export const Hero = (props: Props) => (
- <Section maxWidth="1170px">
+ <Section>
<Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth}>
{props.figure &&
<Content width="400px">
diff --git a/packages/website/ts/@next/components/mobileNav.tsx b/packages/website/ts/@next/components/mobileNav.tsx
index 4ae604c3f..2b8c10ea6 100644
--- a/packages/website/ts/@next/components/mobileNav.tsx
+++ b/packages/website/ts/@next/components/mobileNav.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
import {Link} from 'react-router-dom';
-import {WrapGrid} from 'ts/@next/components/newLayout';
+import {WrapGrid, WrapProps} from 'ts/@next/components/newLayout';
interface Props {
isToggled: boolean;
@@ -36,7 +36,7 @@ export class MobileNav extends React.PureComponent<Props> {
</Section>
<Section isDark={true}>
- <Grid as="ul" width="100%" isWrapped={true}>
+ <Grid as="ul" isFullWidth={true} isWrapped={true}>
<li>
<Link to="/next/why">
Why 0x
@@ -112,7 +112,7 @@ const Section = styled.div<{ isDark?: boolean }>`
background-color: ${props => props.isDark && props.theme.mobileNavBgLower};
`;
-const Grid = styled(WrapGrid)`
+const Grid = styled(WrapGrid)<WrapProps>`
li {
width: 50%;
flex-shrink: 0;
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index 3285ff877..7b89e7420 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -25,6 +25,7 @@ export interface SectionProps extends WrapProps {
isPadded?: boolean;
isFullWidth?: boolean;
isFlex?: boolean;
+ padding?: string;
paddingMobile?: string;
flexBreakpoint?: string;
maxWidth?: string;
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index eb20c16e6..7236a5a37 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -33,7 +33,7 @@ const StyledHeading = styled.h1<HeadingProps>`
display: ${props => props.isFlex && `inline-flex`};
align-items: center;
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)`};
text-align: ${props => props.isCentered && 'center'};
padding: ${props => props.padding && getCSSPadding(props.padding)};
@@ -49,7 +49,7 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => {
const {
asElement = 'h1',
children,
- ...style,
+ ...style
} = props;
const Component = StyledHeading.withComponent(asElement);
diff --git a/packages/website/ts/@next/pages/about/jobs.tsx b/packages/website/ts/@next/pages/about/jobs.tsx
index 5bcb0b855..d707c8d39 100644
--- a/packages/website/ts/@next/pages/about/jobs.tsx
+++ b/packages/website/ts/@next/pages/about/jobs.tsx
@@ -7,13 +7,17 @@ import { Link } from 'ts/@next/components/link';
import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
import { Heading, Paragraph } from 'ts/@next/components/text';
-interface PositionInterface {
+interface PositionProps {
title: string;
location: string;
href: string;
}
-const positions: PositionInterface[] = [
+interface PositionItemProps {
+ position: PositionProps;
+}
+
+const positions: PositionProps[] = [
{
title: 'Product Designer',
location: 'San Francisco, Remote',
@@ -62,7 +66,7 @@ export const NextAboutJobs = () => (
</Section>
<Section isFlex={true} maxWidth="1170px" wrapWidth="100%">
- <Column colWidth="1/3">
+ <Column>
<Heading size="medium">Benefits</Heading>
</Column>
@@ -97,21 +101,24 @@ export const NextAboutJobs = () => (
</AboutPageLayout>
);
-const Position = ({ position }) => (
- <PositionWrap>
- <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">
- <Paragraph isMuted={true} marginBottom="0">{position.location}</Paragraph>
- </StyledColumn>
-
- <StyledColumn width="20%">
- <Paragraph marginBottom="0" textAlign="right"><Link href={position.href}>Apply</Link></Paragraph>
- </StyledColumn>
- </PositionWrap>
-);
+export const Position: React.FunctionComponent<PositionItemProps> = (props: PositionItemProps) => {
+ const { position } = props;
+ return (
+ <PositionWrap>
+ <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">
+ <Paragraph isMuted={true} marginBottom="0">{position.location}</Paragraph>
+ </StyledColumn>
+
+ <StyledColumn width="20%">
+ <Paragraph marginBottom="0" textAlign="right"><Link href={position.href}>Apply</Link></Paragraph>
+ </StyledColumn>
+ </PositionWrap>
+ );
+};
const BenefitsList = styled.ul`
color: #000;
diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx
index 8cb6080a9..4ef043e80 100644
--- a/packages/website/ts/@next/pages/about/press.tsx
+++ b/packages/website/ts/@next/pages/about/press.tsx
@@ -7,14 +7,18 @@ import { Button } from 'ts/@next/components/button';
import { Column, FlexWrap } from 'ts/@next/components/newLayout';
import { Paragraph } from 'ts/@next/components/text';
-interface HighlightInterface {
+interface HighlightProps {
logo: string;
title?: string;
text: string;
href: string;
}
-const highlights: HighlightInterface[] = [
+interface HighlightItemProps {
+ highlight: HighlightProps;
+}
+
+const highlights: HighlightProps[] = [
{
logo: '/images/@next/press/logo-forbes.png',
title: 'Forbes',
@@ -58,18 +62,21 @@ export const NextAboutPress = () => (
/>
);
-const Highlight = ({ highlight }) => (
- <HighlightWrap>
- <Column>
- <img src={highlight.logo} alt={highlight.title} />
- </Column>
+export const Highlight: React.FunctionComponent<HighlightItemProps> = (props: HighlightItemProps) => {
+ const { highlight } = props;
+ return (
+ <HighlightWrap>
+ <Column>
+ <img src={highlight.logo} alt={highlight.title} />
+ </Column>
- <Column width="60%" maxWidth="560px">
- <Paragraph isMuted={false}>{highlight.text}</Paragraph>
- <Button href={highlight.href} isWithArrow={true} isNoBorder={true}>Read Article</Button>
- </Column>
- </HighlightWrap>
-);
+ <Column width="60%" maxWidth="560px">
+ <Paragraph isMuted={false}>{highlight.text}</Paragraph>
+ <Button href={highlight.href} isWithArrow={true} isNoBorder={true}>Read Article</Button>
+ </Column>
+ </HighlightWrap>
+ );
+};
const HighlightWrap = styled(FlexWrap)`
border-top: 1px solid #eaeaea;
diff --git a/packages/website/ts/@next/pages/about/team.tsx b/packages/website/ts/@next/pages/about/team.tsx
index 5ed534593..05bfc6a85 100644
--- a/packages/website/ts/@next/pages/about/team.tsx
+++ b/packages/website/ts/@next/pages/about/team.tsx
@@ -196,7 +196,7 @@ export const NextAboutTeam = () => (
width="70%"
maxWidth="800px"
>
- <StyledGrid isWrapped={true} isCentered={false}>
+ <StyledGrid>
{_.map(team, (info: TeamMember, index: number) => (
<Member key={`team-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
))}
@@ -219,7 +219,7 @@ export const NextAboutTeam = () => (
width="70%"
maxWidth="800px"
>
- <StyledGrid isWrapped={true} isCentered={false}>
+ <StyledGrid>
{_.map(advisors, (info: TeamMember, index: number) => (
<Member key={`advisor-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
))}
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index e8d9e0154..6f78c9bd3 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -14,8 +14,6 @@ import {SiteWrap} from 'ts/@next/components/siteWrap';
import {Heading, Paragraph} from 'ts/@next/components/text';
import { Configurator } from 'ts/@next/pages/instant/configurator';
-const CONFIGURATOR_HASH = 'configure';
-
const featuresData = [
{
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}>
<Heading>0x Instant Configurator</Heading>
- <Configurator hash={CONFIGURATOR_HASH} />
+ <Configurator />
</ConfiguratorSection>
<Banner
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-06 10:53:22 +0800