aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--packages/website/ts/pages/jobs/benefits.tsx7
-rw-r--r--packages/website/ts/pages/jobs/bulleted_item.tsx22
-rw-r--r--packages/website/ts/pages/jobs/bulleted_item_list.tsx47
-rw-r--r--packages/website/ts/pages/jobs/jobs.tsx2
-rw-r--r--packages/website/ts/pages/jobs/teams.tsx60
-rw-r--r--packages/website/ts/pages/jobs/values.tsx7
6 files changed, 70 insertions, 75 deletions
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx
index 03a906a10..ce261592f 100644
--- a/packages/website/ts/pages/jobs/benefits.tsx
+++ b/packages/website/ts/pages/jobs/benefits.tsx
@@ -1,15 +1,14 @@
import * as _ from 'lodash';
import * as React from 'react';
-import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
-import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
+import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
import { FilledImage } from 'ts/pages/jobs/filled_image';
import { FloatingImage } from 'ts/pages/jobs/floating_image';
import { colors } from 'ts/style/colors';
import { ScreenWidths } from 'ts/types';
const IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png'];
-const BULLETED_ITEMS: BulletedItemProps[] = [
+const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [
{
bulletColor: '#6FCF97',
title: 'Ethics/Doing the right thing',
@@ -65,7 +64,7 @@ const SmallLayout = () => (
</div>
);
-const BenefitsList = () => <BulletedItemList headerText="Benefits" bulletedItems={BULLETED_ITEMS} />;
+const BenefitsList = () => <BulletedItemList headerText="Benefits" bulletedItemInfos={BULLETED_ITEM_INFOS} />;
const ImageGrid = () => (
<div style={{ width: '100%', height: '100%' }}>
diff --git a/packages/website/ts/pages/jobs/bulleted_item.tsx b/packages/website/ts/pages/jobs/bulleted_item.tsx
deleted file mode 100644
index 9dc4fe4a3..000000000
--- a/packages/website/ts/pages/jobs/bulleted_item.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-
-export interface BulletedItemProps {
- bulletColor: string;
- title: string;
- description: string;
- height?: number;
-}
-export const BulletedItem = (props: BulletedItemProps) => {
- const minHeight = props.height || 150;
- return (
- <div className="flex" style={{ minHeight }}>
- <svg className="flex-none px2" height="26" width="26">
- <circle cx="13" cy="13" r="13" fill={props.bulletColor} />
- </svg>
- <div className="flex-auto px2">
- <div style={{ paddingTop: 3, fontWeight: 'bold', fontSize: 16 }}>{props.title}</div>
- <div style={{ paddingTop: 12, fontSize: 16, lineHeight: 2 }}>{props.description}</div>
- </div>
- </div>
- );
-};
diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx
index 30dd126d1..a00290418 100644
--- a/packages/website/ts/pages/jobs/bulleted_item_list.tsx
+++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx
@@ -2,20 +2,30 @@ import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
-
+export type BulletedItemInfo = BulletedItemProps;
export interface BulletedItemListProps {
- headerText: string;
- bulletedItems: BulletedItemProps[];
+ headerText?: string;
+ bulletedItemInfos: BulletedItemInfo[];
}
export const BulletedItemList = (props: BulletedItemListProps) => {
return (
<div className="mx-auto max-width-4">
- <div className="h2 lg-py4 md-py4 sm-py3" style={{ paddingLeft: 90, fontFamily: 'Roboto Mono' }}>
- {props.headerText}
- </div>
+ {!_.isUndefined(props.headerText) && (
+ <div
+ className="h2 lg-py4 md-py4 sm-py3"
+ style={{
+ paddingLeft: 90,
+ fontFamily: 'Roboto Mono',
+ minHeight: '1.25em',
+ lineHeight: 1.25,
+ }}
+ >
+ {props.headerText}
+ </div>
+ )}
+
<div className="px2">
- {_.map(props.bulletedItems, bulletedItemProps => {
+ {_.map(props.bulletedItemInfos, bulletedItemProps => {
return (
<BulletedItem
key={bulletedItemProps.title}
@@ -29,3 +39,24 @@ export const BulletedItemList = (props: BulletedItemListProps) => {
</div>
);
};
+
+interface BulletedItemProps {
+ bulletColor: string;
+ title: string;
+ description: string;
+ height?: number;
+}
+const BulletedItem = (props: BulletedItemProps) => {
+ const minHeight = props.height || 150;
+ return (
+ <div className="flex" style={{ minHeight }}>
+ <svg className="flex-none px2" height="26" width="26">
+ <circle cx="13" cy="13" r="13" fill={props.bulletColor} />
+ </svg>
+ <div className="flex-auto px2">
+ <div style={{ paddingTop: 3, fontWeight: 'bold', fontSize: 16 }}>{props.title}</div>
+ <div style={{ paddingTop: 12, fontSize: 16, lineHeight: 2 }}>{props.description}</div>
+ </div>
+ </div>
+ );
+};
diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index 9cce594fc..f3b455379 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -62,7 +62,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
)}
<Values />
<Benefits screenWidth={this.props.screenWidth} />
- <Teams />
+ <Teams screenWidth={this.props.screenWidth} />
<OpenPositions hash={OPEN_POSITIONS_HASH} />
<Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
</div>
diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx
index b00170877..3d953c993 100644
--- a/packages/website/ts/pages/jobs/teams.tsx
+++ b/packages/website/ts/pages/jobs/teams.tsx
@@ -2,9 +2,10 @@ import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
+import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
+import { ScreenWidths } from 'ts/types';
-const ITEMS_COLUMN1: BulletedItemProps[] = [
+const ITEMS_COLUMN1: BulletedItemInfo[] = [
{
bulletColor: '#EB5757',
title: 'User Growth',
@@ -18,7 +19,7 @@ const ITEMS_COLUMN1: BulletedItemProps[] = [
'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 ITEMS_COLUMN2: BulletedItemProps[] = [
+const ITEMS_COLUMN2: BulletedItemInfo[] = [
{
bulletColor: '#EB5757',
title: 'Developer Tools',
@@ -32,38 +33,25 @@ const ITEMS_COLUMN2: BulletedItemProps[] = [
'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';
-export const Teams = () => {
- const isSmallScreen = false;
- const teamHeight = 220;
- return (
- <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.white }}>
- <div className="mx-auto max-width-4 clearfix">
- <div className="col lg-col-6 md-col-6 col-12 p2">
- {_.map(ITEMS_COLUMN1, bulletedItemProps => {
- return (
- <BulletedItem
- bulletColor={bulletedItemProps.bulletColor}
- title={bulletedItemProps.title}
- description={bulletedItemProps.description}
- height={teamHeight}
- />
- );
- })}
- </div>
- <div className="col lg-col-6 md-col-6 col-12 p2">
- {_.map(ITEMS_COLUMN2, bulletedItemProps => {
- return (
- <BulletedItem
- bulletColor={bulletedItemProps.bulletColor}
- title={bulletedItemProps.title}
- description={bulletedItemProps.description}
- height={teamHeight}
- />
- );
- })}
- </div>
- </div>
+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">
+ <div className="col lg-col-6 md-col-6 col-12">
+ <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={ITEMS_COLUMN1} />
</div>
- );
-};
+ <div className="col lg-col-6 md-col-6 col-12">
+ <BulletedItemList headerText=" " bulletedItemInfos={ITEMS_COLUMN2} />
+ </div>
+ </div>
+);
+
+const SmallLayout = () => (
+ <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={_.concat(ITEMS_COLUMN1, ITEMS_COLUMN2)} />
+);
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx
index 37e62d23b..45bbf950f 100644
--- a/packages/website/ts/pages/jobs/values.tsx
+++ b/packages/website/ts/pages/jobs/values.tsx
@@ -2,10 +2,9 @@ import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
-import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
+import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
-const BULLETED_ITEMS: BulletedItemProps[] = [
+const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [
{
bulletColor: '#6FCF97',
title: 'Ethics/Doing the right thing',
@@ -23,4 +22,4 @@ const BULLETED_ITEMS: BulletedItemProps[] = [
},
];
-export const Values = () => <BulletedItemList headerText="Our Values" bulletedItems={BULLETED_ITEMS} />;
+export const Values = () => <BulletedItemList headerText="Our Values" bulletedItemInfos={BULLETED_ITEM_INFOS} />;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-10 22:13:44 +0800