aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/pages/jobs/benefits.tsx184
-rw-r--r--packages/website/ts/pages/jobs/jobs.tsx2
-rw-r--r--packages/website/ts/pages/jobs/list/header_item.tsx26
-rw-r--r--packages/website/ts/pages/jobs/list/list_item.tsx15
-rw-r--r--packages/website/ts/pages/jobs/mission.tsx4
-rw-r--r--packages/website/ts/pages/jobs/open_positions.tsx18
-rw-r--r--packages/website/ts/pages/jobs/teams.tsx90
-rw-r--r--packages/website/ts/pages/jobs/values.tsx60
-rw-r--r--packages/website/ts/utils/constants.ts1
9 files changed, 116 insertions, 284 deletions
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx
index 006facc83..c8024068f 100644
--- a/packages/website/ts/pages/jobs/benefits.tsx
+++ b/packages/website/ts/pages/jobs/benefits.tsx
@@ -1,109 +1,139 @@
import * as _ from 'lodash';
import * as React from 'react';
+import { Circle } from 'ts/components/ui/circle';
+import { Container } from 'ts/components/ui/container';
import { FilledImage } from 'ts/components/ui/filled_image';
-import { HeaderItem } from 'ts/pages/jobs/list/header_item';
-import { ListItem } from 'ts/pages/jobs/list/list_item';
+import { Image } from 'ts/components/ui/image';
+import { Text } from 'ts/components/ui/Text';
import { colors } from 'ts/style/colors';
import { ScreenWidths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
-const IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png'];
-const BENEFIT_ITEM_PROPS_LIST: BenefitItemProps[] = [
- {
- bulletColor: '#6FCF97',
- description:
- 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
- },
- {
- bulletColor: '#56CCF2',
- description:
- 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
- },
+const BENEFITS = [
+ 'Comprehensive insurance. Medical, dental, and vision coverage for you and your family.',
+ 'Unlimited vacation. Three weeks per year minimum.',
+ 'Flexible hours and libteral work-from-home-policy.',
+ 'Relocation Assistance.',
+ 'Whole team offsites and community / hackathon events (often international).',
+ 'Monthly transportation and phone reimbursement.',
+ 'Meals and snacks prvided in-office daily',
+];
+
+interface Value {
+ iconSrc: string;
+ text: string;
+}
+const VALUES: Value[] = [
{
- bulletColor: '#EB5757',
- description:
- 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
+ iconSrc: 'images/jobs/heart-icon.svg',
+ text: 'Do the right thing',
},
{
- bulletColor: '#6FCF97',
- description:
- 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
+ iconSrc: 'images/jobs/ship-icon.svg',
+ text: 'Consistently ship',
},
{
- bulletColor: '#56CCF2',
- description:
- 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
+ iconSrc: 'images/jobs/calendar-icon.svg',
+ text: 'Focus on long term impact',
},
];
-const LARGE_LAYOUT_HEIGHT = 937;
-const LARGE_LAYOUT_BENEFITS_LIST_PADDING_LEFT = 205;
-const HEADER_TEXT = 'Benefits';
-const BENEFIT_ITEM_MIN_HEIGHT = 150;
export interface BenefitsProps {
screenWidth: ScreenWidths;
}
-export const Benefits = (props: BenefitsProps) => (
- <div style={{ backgroundColor: colors.jobsPageBackground }}>
- {props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />}
- </div>
-);
-
-const LargeLayout = () => (
- <div className="flex" style={{ height: LARGE_LAYOUT_HEIGHT }}>
- <div style={{ width: '43%', height: '100%' }}>
- <ImageGrid />
- </div>
- <div
- className="pr4"
- style={{ paddingLeft: LARGE_LAYOUT_BENEFITS_LIST_PADDING_LEFT, width: '57%', height: '100%' }}
- >
- <BenefitsList />
- </div>
- </div>
-);
+export const Benefits = (props: BenefitsProps) => {
+ const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
+ return (
+ <Container className="flex flex-column items-center py4" backgroundColor={colors.white}>
+ {!isSmallScreen ? (
+ <Container className="flex" maxWidth="800px">
+ <BenefitsList />
+ <Container marginLeft="200px">
+ <ValuesList />
+ </Container>
+ </Container>
+ ) : (
+ <Container className="flex-column pl3">
+ <BenefitsList />
+ <Container marginTop="50px">
+ <ValuesList />
+ </Container>
+ </Container>
+ )}
+ </Container>
+ );
+};
-const SmallLayout = () => (
- <div>
- <FilledImage src={_.head(IMAGE_PATHS)} />
- <BenefitsList />
- </div>
+const Header: React.StatelessComponent = ({ children }) => (
+ <Container marginBottom="51px">
+ <Text fontFamily="Roboto Mono" fontSize="24px" fontColor={colors.black}>
+ {children}
+ </Text>
+ </Container>
);
-export const BenefitsList = () => {
+const BenefitsList = () => {
return (
- <div>
- <HeaderItem headerText={HEADER_TEXT} />
- {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => <BenefitItem {...valueItemProps} />)}
- </div>
+ <Container maxWidth="360px">
+ <Header>Benefits</Header>
+ {_.map(BENEFITS, benefit => <BenefitItem description={benefit} />)}
+ </Container>
);
};
interface BenefitItemProps {
- bulletColor: string;
description: string;
}
-const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ bulletColor, description }) => (
- <div style={{ minHeight: BENEFIT_ITEM_MIN_HEIGHT }}>
- <ListItem bulletColor={bulletColor}>
- <div style={{ fontSize: 16, lineHeight: 1.5 }}>{description}</div>
- </ListItem>
- </div>
-);
-
-const ImageGrid = () => (
- <div style={{ width: '100%', height: '100%' }}>
- <div className="flex" style={{ height: '67%' }}>
- <FilledImage src={IMAGE_PATHS[0]} />
- </div>
- <div className="clearfix" style={{ height: '33%' }}>
- <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}>
- <FilledImage src={IMAGE_PATHS[1]} />
- </div>
- <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}>
- <FilledImage src={IMAGE_PATHS[2]} />
+const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ description }) => (
+ <Container marginBottom="30px">
+ <div className="flex">
+ <Circle className="flex-none pr2 pt1" diameter={8} fillColor={colors.black} />
+ <div className="flex-auto">
+ <Text fontSize="14px" lineHeight="24px">
+ {description}
+ </Text>
</div>
</div>
- </div>
+ </Container>
);
+
+const openMissionAndValuesBlogPost = () => {
+ utils.openUrl(constants.URL_MISSION_AND_VALUES_BLOG_POST);
+};
+const ValuesList = () => {
+ return (
+ <Container maxWidth="360px">
+ <Header>Our Values</Header>
+ {_.map(VALUES, value => <ValueItem {...value} />)}
+ <Text fontSize="14px" lineHeight="26px">
+ We care deeply about our mission and encourage you to{' '}
+ <a
+ style={{ color: colors.mediumBlue }}
+ target="_blank"
+ href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
+ >
+ read more here
+ </a>.
+ </Text>
+ </Container>
+ );
+};
+
+type ValueItemProps = Value;
+const ValueItem: React.StatelessComponent<ValueItemProps> = ({ iconSrc, text }) => {
+ return (
+ <Container marginBottom="45px">
+ <div className="flex items-center">
+ <Image className="flex-none pr2" width="20px" src={iconSrc} />
+ <div className="flex-auto">
+ <Text fontSize="14px" lineHeight="24px" fontWeight="bold">
+ {text}
+ </Text>
+ </div>
+ </div>
+ </Container>
+ );
+};
diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index 9cd7a08eb..49d6422f5 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -11,8 +11,6 @@ import { Join0x } from 'ts/pages/jobs/join_0x';
import { Mission } from 'ts/pages/jobs/mission';
import { OpenPositions } from 'ts/pages/jobs/open_positions';
import { PhotoRail } from 'ts/pages/jobs/photo_rail';
-import { Teams } from 'ts/pages/jobs/teams';
-import { Values } from 'ts/pages/jobs/values';
import { Dispatcher } from 'ts/redux/dispatcher';
import { ScreenWidths } from 'ts/types';
import { Translate } from 'ts/utils/translate';
diff --git a/packages/website/ts/pages/jobs/list/header_item.tsx b/packages/website/ts/pages/jobs/list/header_item.tsx
deleted file mode 100644
index ac214904c..000000000
--- a/packages/website/ts/pages/jobs/list/header_item.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-
-import { Text } from 'ts/components/ui/text';
-import { ListItem } from 'ts/pages/jobs/list/list_item';
-import { colors } from 'ts/style/colors';
-
-export interface HeaderItemProps {
- headerText?: string;
-}
-export const HeaderItem: React.StatelessComponent<HeaderItemProps> = ({ headerText }) => {
- return (
- <div className="h2 lg-py4 md-py4 sm-py3">
- <ListItem>
- <Text
- fontFamily="Roboto Mono"
- fontSize="24px"
- lineHeight="1.25"
- minHeight="1.25em"
- fontColor={colors.black}
- >
- {headerText}
- </Text>
- </ListItem>
- </div>
- );
-};
diff --git a/packages/website/ts/pages/jobs/list/list_item.tsx b/packages/website/ts/pages/jobs/list/list_item.tsx
deleted file mode 100644
index 192433d39..000000000
--- a/packages/website/ts/pages/jobs/list/list_item.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-import { Circle } from 'ts/components/ui/circle';
-
-export interface ListItemProps {
- bulletColor?: string;
-}
-export const ListItem: React.StatelessComponent<ListItemProps> = ({ bulletColor, children }) => {
- return (
- <div className="flex items-center">
- <Circle className="flex-none lg-px2 md-px2 sm-pl2" diameter={26} fillColor={bulletColor || 'transparent'} />
- <div className="flex-auto px2">{children}</div>
- </div>
- );
-};
diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx
index a1e6881c9..68e095436 100644
--- a/packages/website/ts/pages/jobs/mission.tsx
+++ b/packages/website/ts/pages/jobs/mission.tsx
@@ -10,7 +10,7 @@ export interface MissionProps {
}
export const Mission = (props: MissionProps) => {
const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
- const image = <img src="/images/jobs/map.png" style={{ width: 500, height: 280 }} />;
+ const image = <img src="/images/jobs/world-map.svg" style={{ maxWidth: 500, maxHeight: 280 }} />;
const missionStatementClassName = isSmallScreen ? 'center' : undefined;
const missionStatement = (
<Container className={missionStatementClassName} maxWidth="388px">
@@ -38,7 +38,7 @@ export const Mission = (props: MissionProps) => {
<Container marginLeft="115px">{missionStatement}</Container>
</Container>
) : (
- <Container className="flex flex-column items-center" maxWidth="1200px">
+ <Container className="flex flex-column items-center">
{missionStatement}
<Container marginTop="40px">{image}</Container>
</Container>
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
index e789795c1..c9fe987e4 100644
--- a/packages/website/ts/pages/jobs/open_positions.tsx
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -5,8 +5,6 @@ import * as React from 'react';
import { Retry } from 'ts/components/ui/retry';
import { Text } from 'ts/components/ui/text';
-import { HeaderItem } from 'ts/pages/jobs/list/header_item';
-import { ListItem } from 'ts/pages/jobs/list/list_item';
import { colors } from 'ts/style/colors';
import { styled } from 'ts/style/theme';
import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types';
@@ -71,7 +69,6 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit
private _renderList(): React.ReactNode {
return (
<div style={{ backgroundColor: colors.jobsPageBackground }}>
- <HeaderItem headerText={HEADER_TEXT} />
{_.map(this.state.jobInfos, jobInfo => (
<JobInfoListItem
key={jobInfo.id}
@@ -86,7 +83,6 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit
private _renderTable(): React.ReactNode {
return (
<div>
- <HeaderItem headerText={HEADER_TEXT} />
<Table selectable={false} onCellClick={this._onCellClick.bind(this)}>
<TableHeader displaySelectAll={false} adjustForCheckbox={false}>
<TableRow>
@@ -174,14 +170,12 @@ export interface JobInfoListItemProps {
const PlainJobInfoListItem: React.StatelessComponent<JobInfoListItemProps> = ({ title, description, onClick }) => (
<div className="mb3" onClick={onClick}>
- <ListItem>
- <Text fontWeight="bold" fontSize="16px" fontColor={colors.mediumBlue}>
- {title + ' ›'}
- </Text>
- <Text className="pt1" fontSize="16px" fontColor={colors.darkGrey}>
- {description}
- </Text>
- </ListItem>
+ <Text fontWeight="bold" fontSize="16px" fontColor={colors.mediumBlue}>
+ {title + ' ›'}
+ </Text>
+ <Text className="pt1" fontSize="16px" fontColor={colors.darkGrey}>
+ {description}
+ </Text>
</div>
);
diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx
deleted file mode 100644
index 80b036396..000000000
--- a/packages/website/ts/pages/jobs/teams.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Text } from 'ts/components/ui/text';
-import { HeaderItem } from 'ts/pages/jobs/list/header_item';
-import { ListItem } from 'ts/pages/jobs/list/list_item';
-import { colors } from 'ts/style/colors';
-import { ScreenWidths } from 'ts/types';
-
-const TEAM_ITEM_PROPS_COLUMN1: TeamItemProps[] = [
- {
- bulletColor: '#EB5757',
- title: 'User Growth',
- description:
- 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
- },
- {
- bulletColor: '#EB5757',
- title: 'Governance',
- description:
- 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
- },
-];
-const TEAM_ITEM_PROPS_COLUMN2: TeamItemProps[] = [
- {
- bulletColor: '#EB5757',
- title: 'Developer Tools',
- description:
- 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
- },
- {
- bulletColor: '#EB5757',
- title: 'Marketing',
- description:
- 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
- },
-];
-const HEADER_TEXT = 'Our Teams';
-const MINIMUM_ITEM_HEIGHT = 240;
-
-export interface TeamsProps {
- screenWidth: ScreenWidths;
-}
-
-export const Teams = (props: TeamsProps) => (props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />);
-
-const LargeLayout = () => (
- <div className="mx-auto max-width-4 clearfix pb4">
- <div className="col lg-col-6 md-col-6 col-12">
- <HeaderItem headerText={HEADER_TEXT} />
- {_.map(TEAM_ITEM_PROPS_COLUMN1, teamItemProps => <TeamItem {...teamItemProps} />)}
- </div>
- <div className="col lg-col-6 md-col-6 col-12">
- <HeaderItem headerText=" " />
- {_.map(TEAM_ITEM_PROPS_COLUMN2, teamItemProps => <TeamItem {...teamItemProps} />)}
- </div>
- </div>
-);
-
-const SmallLayout = () => (
- <div>
- <HeaderItem headerText={HEADER_TEXT} />
- {_.map(_.concat(TEAM_ITEM_PROPS_COLUMN1, TEAM_ITEM_PROPS_COLUMN2), teamItemProps => (
- <TeamItem {...teamItemProps} />
- ))}
- </div>
-);
-
-interface TeamItemProps {
- bulletColor: string;
- title: string;
- description: string;
-}
-
-export const TeamItem: React.StatelessComponent<TeamItemProps> = ({ bulletColor, title, description }) => {
- return (
- <div style={{ minHeight: MINIMUM_ITEM_HEIGHT }}>
- <ListItem bulletColor={bulletColor}>
- <Text fontWeight="bold" fontSize="16px" fontColor={colors.black}>
- {title}
- </Text>
- </ListItem>
- <ListItem>
- <Text className="pt1" fontSize="16px" lineHeight="2em" fontColor={colors.black}>
- {description}
- </Text>
- </ListItem>
- </div>
- );
-};
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx
deleted file mode 100644
index c7c4d5726..000000000
--- a/packages/website/ts/pages/jobs/values.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Text } from 'ts/components/ui/text';
-import { HeaderItem } from 'ts/pages/jobs/list/header_item';
-import { ListItem } from 'ts/pages/jobs/list/list_item';
-import { colors } from 'ts/style/colors';
-
-const VALUE_ITEM_PROPS_LIST: ValueItemProps[] = [
- {
- bulletColor: '#6FCF97',
- title: 'Ethics/Doing the right thing',
- description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
- },
- {
- bulletColor: '#56CCF2',
- title: 'Consistently ship',
- description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
- },
- {
- bulletColor: '#EB5757',
- title: 'Focus on long term impact',
- description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
- },
-];
-
-const HEADER_TEXT = 'Our Values';
-const VALUE_ITEM_MIN_HEIGHT = 150;
-
-export const Values = () => {
- return (
- <div className="mx-auto max-width-4">
- <HeaderItem headerText={HEADER_TEXT} />
- {_.map(VALUE_ITEM_PROPS_LIST, valueItemProps => <ValueItem {...valueItemProps} />)}
- </div>
- );
-};
-
-interface ValueItemProps {
- bulletColor: string;
- title: string;
- description: string;
-}
-
-export const ValueItem: React.StatelessComponent<ValueItemProps> = ({ bulletColor, title, description }) => {
- return (
- <div style={{ minHeight: VALUE_ITEM_MIN_HEIGHT }}>
- <ListItem bulletColor={bulletColor}>
- <Text fontWeight="bold" fontSize="16x" fontColor={colors.black}>
- {title}
- </Text>
- </ListItem>
- <ListItem>
- <Text className="pt1" fontSize="16x" lineHeight="2em" fontColor={colors.black}>
- {description}
- </Text>
- </ListItem>
- </div>
- );
-};
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 20441cd75..c708c9c5b 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -92,4 +92,5 @@ export const constants = {
URL_WEB3_LOG_ENTRY_EVENT: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L127',
URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150',
URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js',
+ URL_MISSION_AND_VALUES_BLOG_POST: 'https://blog.0xproject.com/the-0x-mission-and-values-181a58706f9f',
};
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-17 07:16:57 +0800