From 3d76d83a39ca61641f3efd7ed5cc6f7a214835ca Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 1 May 2018 10:17:27 -0700 Subject: Skeleton for jobs page and initial implementation --- packages/order-utils/order-utils | 1 + packages/types/types | 1 + packages/website/public/images/jobs/location1.png | Bin 0 -> 659608 bytes packages/website/public/images/jobs/location2.png | Bin 0 -> 223872 bytes packages/website/public/images/jobs/location3.png | Bin 0 -> 288733 bytes packages/website/public/images/jobs/map.png | Bin 0 -> 271102 bytes packages/website/public/images/jobs/office1.png | Bin 0 -> 482657 bytes packages/website/public/images/jobs/office2.png | Bin 0 -> 479918 bytes packages/website/public/images/jobs/office3.png | Bin 0 -> 480055 bytes packages/website/ts/components/redirecter.tsx | 9 --- packages/website/ts/containers/jobs.ts | 26 ++++++++ packages/website/ts/index.tsx | 6 +- packages/website/ts/pages/jobs/benefits.tsx | 22 ++++++ packages/website/ts/pages/jobs/bulleted_item.tsx | 22 ++++++ packages/website/ts/pages/jobs/filled_image.tsx | 18 +++++ packages/website/ts/pages/jobs/jobs.tsx | 44 ++++++++++++ packages/website/ts/pages/jobs/join_0x.tsx | 35 ++++++++++ packages/website/ts/pages/jobs/mission.tsx | 43 ++++++++++++ packages/website/ts/pages/jobs/open_positions.tsx | 76 +++++++++++++++++++++ packages/website/ts/pages/jobs/photo_rail.tsx | 19 ++++++ packages/website/ts/pages/jobs/teams.tsx | 69 +++++++++++++++++++ packages/website/ts/pages/jobs/values.tsx | 78 ++++++++++++++++++++++ 22 files changed, 457 insertions(+), 12 deletions(-) create mode 120000 packages/order-utils/order-utils create mode 120000 packages/types/types create mode 100644 packages/website/public/images/jobs/location1.png create mode 100644 packages/website/public/images/jobs/location2.png create mode 100644 packages/website/public/images/jobs/location3.png create mode 100644 packages/website/public/images/jobs/map.png create mode 100644 packages/website/public/images/jobs/office1.png create mode 100644 packages/website/public/images/jobs/office2.png create mode 100644 packages/website/public/images/jobs/office3.png delete mode 100644 packages/website/ts/components/redirecter.tsx create mode 100644 packages/website/ts/containers/jobs.ts create mode 100644 packages/website/ts/pages/jobs/benefits.tsx create mode 100644 packages/website/ts/pages/jobs/bulleted_item.tsx create mode 100644 packages/website/ts/pages/jobs/filled_image.tsx create mode 100644 packages/website/ts/pages/jobs/jobs.tsx create mode 100644 packages/website/ts/pages/jobs/join_0x.tsx create mode 100644 packages/website/ts/pages/jobs/mission.tsx create mode 100644 packages/website/ts/pages/jobs/open_positions.tsx create mode 100644 packages/website/ts/pages/jobs/photo_rail.tsx create mode 100644 packages/website/ts/pages/jobs/teams.tsx create mode 100644 packages/website/ts/pages/jobs/values.tsx diff --git a/packages/order-utils/order-utils b/packages/order-utils/order-utils new file mode 120000 index 000000000..f27c264ed --- /dev/null +++ b/packages/order-utils/order-utils @@ -0,0 +1 @@ +/Users/bmillman/workspace/0x-monorepo/packages/order-utils \ No newline at end of file diff --git a/packages/types/types b/packages/types/types new file mode 120000 index 000000000..69f5a8cce --- /dev/null +++ b/packages/types/types @@ -0,0 +1 @@ +/Users/bmillman/workspace/0x-monorepo/packages/types \ No newline at end of file diff --git a/packages/website/public/images/jobs/location1.png b/packages/website/public/images/jobs/location1.png new file mode 100644 index 000000000..bfda47576 Binary files /dev/null and b/packages/website/public/images/jobs/location1.png differ diff --git a/packages/website/public/images/jobs/location2.png b/packages/website/public/images/jobs/location2.png new file mode 100644 index 000000000..c05f9403f Binary files /dev/null and b/packages/website/public/images/jobs/location2.png differ diff --git a/packages/website/public/images/jobs/location3.png b/packages/website/public/images/jobs/location3.png new file mode 100644 index 000000000..34b2e5380 Binary files /dev/null and b/packages/website/public/images/jobs/location3.png differ diff --git a/packages/website/public/images/jobs/map.png b/packages/website/public/images/jobs/map.png new file mode 100644 index 000000000..7b85ff66e Binary files /dev/null and b/packages/website/public/images/jobs/map.png differ diff --git a/packages/website/public/images/jobs/office1.png b/packages/website/public/images/jobs/office1.png new file mode 100644 index 000000000..f6e6d9163 Binary files /dev/null and b/packages/website/public/images/jobs/office1.png differ diff --git a/packages/website/public/images/jobs/office2.png b/packages/website/public/images/jobs/office2.png new file mode 100644 index 000000000..65f97dcad Binary files /dev/null and b/packages/website/public/images/jobs/office2.png differ diff --git a/packages/website/public/images/jobs/office3.png b/packages/website/public/images/jobs/office3.png new file mode 100644 index 000000000..1dfcb9c58 Binary files /dev/null and b/packages/website/public/images/jobs/office3.png differ diff --git a/packages/website/ts/components/redirecter.tsx b/packages/website/ts/components/redirecter.tsx deleted file mode 100644 index 477aecb77..000000000 --- a/packages/website/ts/components/redirecter.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { constants } from 'ts/utils/constants'; - -interface RedirecterProps { - location: string; -} - -export function Redirecter(_props: RedirecterProps): void { - window.location.href = constants.URL_ANGELLIST; -} diff --git a/packages/website/ts/containers/jobs.ts b/packages/website/ts/containers/jobs.ts new file mode 100644 index 000000000..0f57c431d --- /dev/null +++ b/packages/website/ts/containers/jobs.ts @@ -0,0 +1,26 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { Jobs as JobsComponent, JobsProps } from 'ts/pages/jobs/jobs'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { Translate } from 'ts/utils/translate'; + +interface ConnectedState { + translate: Translate; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, ownProps: JobsProps): ConnectedState => ({ + translate: state.translate, +}); + +const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const Jobs: React.ComponentClass = connect(mapStateToProps, mapDispatchToProps)(JobsComponent); diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 719604c02..a8749d8bf 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -4,9 +4,10 @@ import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'; import * as injectTapEventPlugin from 'react-tap-event-plugin'; -import { Redirecter } from 'ts/components/redirecter'; +import { createStore, Store as ReduxStore } from 'redux'; import { About } from 'ts/containers/about'; import { FAQ } from 'ts/containers/faq'; +import { Jobs } from 'ts/containers/jobs'; import { Landing } from 'ts/containers/landing'; import { NotFound } from 'ts/containers/not_found'; import { Wiki } from 'ts/containers/wiki'; @@ -86,8 +87,7 @@ render( - - + diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx new file mode 100644 index 000000000..fa4edb240 --- /dev/null +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; + +import { FilledImage } from 'ts/pages/jobs/filled_image'; + +export const Benefits = () => ( +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+); diff --git a/packages/website/ts/pages/jobs/bulleted_item.tsx b/packages/website/ts/pages/jobs/bulleted_item.tsx new file mode 100644 index 000000000..ae7385b90 --- /dev/null +++ b/packages/website/ts/pages/jobs/bulleted_item.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; + +export interface BulletedItemProps { + bulletColor: string; + title: string; + description: string; + height?: number; +} +export const BulletedItem = (props: BulletedItemProps) => { + const height = props.height || 150; + return ( +
+ + + +
+
{props.title}
+
{props.description}
+
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/filled_image.tsx b/packages/website/ts/pages/jobs/filled_image.tsx new file mode 100644 index 000000000..7f58ee5b9 --- /dev/null +++ b/packages/website/ts/pages/jobs/filled_image.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; + +export interface FilledImageProps { + src: string; +} +export const FilledImage = (props: FilledImageProps) => ( +
+); diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx new file mode 100644 index 000000000..e49b40a2f --- /dev/null +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -0,0 +1,44 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import * as DocumentTitle from 'react-document-title'; + +import { Footer } from 'ts/components/footer'; +import { TopBar } from 'ts/components/top_bar/top_bar'; +import { Benefits } from 'ts/pages/jobs/benefits'; +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 { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +export interface JobsProps { + location: Location; + translate: Translate; + dispatcher: Dispatcher; +} + +export const Jobs: React.StatelessComponent = props => { + return ( +
+ + + + + + + + + +
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx new file mode 100644 index 000000000..f4dbf31a3 --- /dev/null +++ b/packages/website/ts/pages/jobs/join_0x.tsx @@ -0,0 +1,35 @@ +import { colors } from '@0xproject/react-shared'; + +import FlatButton from 'material-ui/FlatButton'; +import * as React from 'react'; + +export const Join0x = () => ( +
+
+
+ Join 0x +
+
+ 0x is transforming the way that value is exchanged on a global scale. Come join us in San Francisco or + work remotely anywhere in the world to help create the infrastructure of a new tokenized economy. +
+
+ +
+
+
+); diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx new file mode 100644 index 000000000..a1d0dc927 --- /dev/null +++ b/packages/website/ts/pages/jobs/mission.tsx @@ -0,0 +1,43 @@ +import { colors } from '@0xproject/react-shared'; + +import * as React from 'react'; + +export const Mission = () => { + const isSmallScreen = false; + return ( +
+
+ {!isSmallScreen && } +
+
+
+ Our Mission +
+
+ We believe a system can exist in which all world value is accessible to anyone, anywhere, + regardless of where you happen to be born. +
+
+
+
+
+ ); +}; + +const WorldImage = () => { + const isSmallScreen = false; + return ( +
+ +
+ ); +}; diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx new file mode 100644 index 000000000..e79bc920b --- /dev/null +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -0,0 +1,76 @@ +import * as _ from 'lodash'; +import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table'; +import * as React from 'react'; + +const POSITIONS = [ + { + name: 'Community Director', + department: 'Marketing', + office: 'Remote / San Francisco', + }, + { + name: 'Data Scientist / Data Engineer', + department: 'Engineering', + office: 'Remote / San Francisco', + }, + { + name: 'Executive Assitant / Office Manager', + department: 'Operations', + office: 'Remote / San Francisco', + }, + { + name: 'Research Fellow - Economics / Governance', + department: 'Engineering', + office: 'Remote / San Francisco', + }, + { + name: 'Software Engineer - Blockchain', + department: 'Engineer', + office: 'Remote / San Francisco', + }, + { + name: 'Software Engineer - Full-stack', + department: 'Marketing', + office: 'Remote / San Francisco', + }, +]; + +export const OpenPositions = () => { + const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; + return ( +
+ + + + + Position + + + Department + + + Office + + + + + {_.map(POSITIONS, position => { + return ( + + + {position.name} + + + {position.department} + + + {position.office} + + + ); + })} + +
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx new file mode 100644 index 000000000..a5ccfb25f --- /dev/null +++ b/packages/website/ts/pages/jobs/photo_rail.tsx @@ -0,0 +1,19 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { FilledImage } from 'ts/pages/jobs/filled_image'; + +export const PhotoRail = () => { + const images = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png']; + return ( +
+ {_.map(images, (image: string) => { + return ( +
+ +
+ ); + })} +
+ ); +}; diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx new file mode 100644 index 000000000..b00170877 --- /dev/null +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -0,0 +1,69 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; + +const ITEMS_COLUMN1: BulletedItemProps[] = [ + { + 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 ITEMS_COLUMN2: BulletedItemProps[] = [ + { + 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', + }, +]; + +export const Teams = () => { + const isSmallScreen = false; + const teamHeight = 220; + return ( +
+
+
+ {_.map(ITEMS_COLUMN1, bulletedItemProps => { + return ( + + ); + })} +
+
+ {_.map(ITEMS_COLUMN2, bulletedItemProps => { + return ( + + ); + })} +
+
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx new file mode 100644 index 000000000..805400583 --- /dev/null +++ b/packages/website/ts/pages/jobs/values.tsx @@ -0,0 +1,78 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; + +const ITEMS_COLUMN1: BulletedItemProps[] = [ + { + bulletColor: '#6FCF97', + title: 'Ethics/Doing the right thing', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, + { + bulletColor: '#56CCF2', + title: 'Clear communication', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, + { + bulletColor: '#EB5757', + title: 'Grow the whole pie', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, +]; +const ITEMS_COLUMN2: BulletedItemProps[] = [ + { + bulletColor: '#F2994A', + title: 'Crypto-Economic Technology', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, + { + bulletColor: '#E0E0E0', + title: 'Transparency', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, + { + bulletColor: '#F2C94C', + title: 'Positive Energy', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, +]; + +export const Values = () => { + const isSmallScreen = false; + return ( +
+
+
+ {_.map(ITEMS_COLUMN1, bulletedItemProps => { + return ( + + ); + })} +
+
+ {_.map(ITEMS_COLUMN2, bulletedItemProps => { + return ( + + ); + })} +
+
+
+ ); +}; -- cgit v1.2.3 From 0c2f002a7d854026f1710ab92255f73e17597e2d Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 8 Jun 2018 11:29:56 -0700 Subject: Add scroll to top for jobs page --- packages/website/ts/pages/jobs/jobs.tsx | 49 +++++++++++++++++++-------------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index e49b40a2f..c7c667da1 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -21,24 +21,31 @@ export interface JobsProps { dispatcher: Dispatcher; } -export const Jobs: React.StatelessComponent = props => { - return ( -
- - - - - - - - - -
-
- ); -}; +export interface JobsState {} + +export class Jobs extends React.Component { + public componentDidMount(): void { + window.scrollTo(0, 0); + } + public render(): React.ReactNode { + return ( +
+ + + + + + + + + +
+
+ ); + } +} -- cgit v1.2.3 From 474b93a22f9545fe9bcabe5a80e6a057e66ab286 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 8 Jun 2018 13:27:41 -0700 Subject: Add link to open positions section --- packages/website/ts/pages/jobs/jobs.tsx | 11 ++++++++--- packages/website/ts/pages/jobs/join_0x.tsx | 7 ++++++- packages/website/ts/pages/jobs/open_positions.tsx | 8 ++++++-- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index c7c667da1..466926af0 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, utils as sharedUtils } from '@0xproject/react-shared'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; @@ -23,6 +23,8 @@ export interface JobsProps { export interface JobsState {} +const OPEN_POSITIONS_HASH = 'positions'; + export class Jobs extends React.Component { public componentDidMount(): void { window.scrollTo(0, 0); @@ -37,15 +39,18 @@ export class Jobs extends React.Component { style={{ backgroundColor: colors.white, position: 'relative' }} translate={this.props.translate} /> - + - +
); } + private _onJoin0xCallToActionClick(): void { + sharedUtils.setUrlHash(OPEN_POSITIONS_HASH); + } } diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx index f4dbf31a3..fb811cbc4 100644 --- a/packages/website/ts/pages/jobs/join_0x.tsx +++ b/packages/website/ts/pages/jobs/join_0x.tsx @@ -3,7 +3,11 @@ import { colors } from '@0xproject/react-shared'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; -export const Join0x = () => ( +export interface Join0xProps { + onCallToActionClick: () => void; +} + +export const Join0x = (props: Join0xProps) => (
@@ -28,6 +32,7 @@ export const Join0x = () => ( textTransform: 'lowercase', }} style={{ width: 280, height: 62, borderRadius: 5 }} + onClick={props.onCallToActionClick} />
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index e79bc920b..f9c37d36f 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -35,10 +35,14 @@ const POSITIONS = [ }, ]; -export const OpenPositions = () => { +export interface OpenPositionsProps { + hash: string; +} + +export const OpenPositions = (props: OpenPositionsProps) => { const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; return ( -
+
-- cgit v1.2.3 From 087aaa2f948391da70a4d5b53b8e7e301288ab5f Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 8 Jun 2018 15:27:11 -0700 Subject: Polish mission section and photo section --- packages/website/ts/containers/jobs.ts | 3 + packages/website/ts/pages/jobs/floating_image.tsx | 8 +++ packages/website/ts/pages/jobs/jobs.tsx | 34 +++++++++-- packages/website/ts/pages/jobs/join_0x.tsx | 2 +- packages/website/ts/pages/jobs/mission.tsx | 73 +++++++++++++---------- packages/website/ts/pages/jobs/photo_rail.tsx | 14 +++-- packages/website/ts/style/colors.ts | 1 + 7 files changed, 95 insertions(+), 40 deletions(-) create mode 100644 packages/website/ts/pages/jobs/floating_image.tsx diff --git a/packages/website/ts/containers/jobs.ts b/packages/website/ts/containers/jobs.ts index 0f57c431d..63ef59221 100644 --- a/packages/website/ts/containers/jobs.ts +++ b/packages/website/ts/containers/jobs.ts @@ -5,10 +5,12 @@ import { Dispatch } from 'redux'; import { Jobs as JobsComponent, JobsProps } from 'ts/pages/jobs/jobs'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; +import { ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; interface ConnectedState { translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -17,6 +19,7 @@ interface ConnectedDispatch { const mapStateToProps = (state: State, ownProps: JobsProps): ConnectedState => ({ translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ diff --git a/packages/website/ts/pages/jobs/floating_image.tsx b/packages/website/ts/pages/jobs/floating_image.tsx new file mode 100644 index 000000000..4719a9596 --- /dev/null +++ b/packages/website/ts/pages/jobs/floating_image.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; + +export interface FloatingImageProps { + src: string; +} +export const FloatingImage = (props: FloatingImageProps) => { + return ; +}; diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index 466926af0..70a11c8a4 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -1,10 +1,12 @@ import { colors, utils as sharedUtils } from '@0xproject/react-shared'; +import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Benefits } from 'ts/pages/jobs/benefits'; +import { FloatingImage } from 'ts/pages/jobs/floating_image'; import { Join0x } from 'ts/pages/jobs/join_0x'; import { Mission } from 'ts/pages/jobs/mission'; import { OpenPositions } from 'ts/pages/jobs/open_positions'; @@ -12,21 +14,33 @@ 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 { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; +import { utils } from 'ts/utils/utils'; + +const OPEN_POSITIONS_HASH = 'positions'; +const THROTTLE_TIMEOUT = 100; +const PHOTO_RAIL_IMAGES = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png']; export interface JobsProps { location: Location; translate: Translate; dispatcher: Dispatcher; + screenWidth: ScreenWidths; } export interface JobsState {} -const OPEN_POSITIONS_HASH = 'positions'; - export class Jobs extends React.Component { + // TODO: consolidate this small screen scaffolding into one place (its being used in portal and docs as well) + private _throttledScreenWidthUpdate: () => void; + public constructor(props: JobsProps) { + super(props); + this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + } public componentDidMount(): void { + window.addEventListener('resize', this._throttledScreenWidthUpdate); window.scrollTo(0, 0); } public render(): React.ReactNode { @@ -40,8 +54,12 @@ export class Jobs extends React.Component { translate={this.props.translate} /> - - + + {this._isSmallScreen() ? ( + + ) : ( + + )} @@ -53,4 +71,12 @@ export class Jobs extends React.Component { private _onJoin0xCallToActionClick(): void { sharedUtils.setUrlHash(OPEN_POSITIONS_HASH); } + private _updateScreenWidth(): void { + const newScreenWidth = utils.getScreenWidth(); + this.props.dispatcher.updateScreenWidth(newScreenWidth); + } + private _isSmallScreen(): boolean { + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + return isSmallScreen; + } } diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx index fb811cbc4..e7fdf3ce1 100644 --- a/packages/website/ts/pages/jobs/join_0x.tsx +++ b/packages/website/ts/pages/jobs/join_0x.tsx @@ -8,7 +8,7 @@ export interface Join0xProps { } export const Join0x = (props: Join0xProps) => ( -
+
Join 0x diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx index a1d0dc927..a3584e5f6 100644 --- a/packages/website/ts/pages/jobs/mission.tsx +++ b/packages/website/ts/pages/jobs/mission.tsx @@ -1,43 +1,54 @@ -import { colors } from '@0xproject/react-shared'; - import * as React from 'react'; -export const Mission = () => { - const isSmallScreen = false; - return ( -
-
- {!isSmallScreen && } +import { FilledImage } from 'ts/pages/jobs/filled_image'; +import { colors } from 'ts/style/colors'; +import { ScreenWidths } from 'ts/types'; + +export interface MissionProps { + screenWidth: ScreenWidths; +} +export const Mission = (props: MissionProps) => { + const isSmallScreen = props.screenWidth === ScreenWidths.Sm; + const image = ( +
+ +
+ ); + const missionStatementStyle = !isSmallScreen ? { height: 364, lineHeight: '364px' } : undefined; + const missionStatement = ( +
+
+
+ Our Mission +
-
-
- Our Mission -
-
- We believe a system can exist in which all world value is accessible to anyone, anywhere, - regardless of where you happen to be born. -
-
+ We believe a system can exist in which all world value is accessible to anyone, anywhere, regardless + of where you happen to be born.
); -}; - -const WorldImage = () => { - const isSmallScreen = false; return ( -
- +
+
+ {isSmallScreen ? ( +
+ {missionStatement} + {image} +
+ ) : ( +
+ {image} + {missionStatement} +
+ )} +
); }; diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx index a5ccfb25f..bcc3444ec 100644 --- a/packages/website/ts/pages/jobs/photo_rail.tsx +++ b/packages/website/ts/pages/jobs/photo_rail.tsx @@ -2,12 +2,18 @@ import * as _ from 'lodash'; import * as React from 'react'; import { FilledImage } from 'ts/pages/jobs/filled_image'; +import { ScreenWidths } from 'ts/types'; -export const PhotoRail = () => { - const images = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png']; +const IMAGE_PATHS = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png']; + +export interface PhotoRailProps { + images: string[]; +} + +export const PhotoRail = (props: PhotoRailProps) => { return ( -
- {_.map(images, (image: string) => { +
+ {_.map(props.images, (image: string) => { return (
diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index 5ffdd6ba7..002318e14 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -11,6 +11,7 @@ const appColors = { wrapEtherConfirmationButton: sharedColors.mediumBlue, drawerMenuBackground: '#4a4a4a', menuItemDefaultSelectedBackground: '#424242', + jobsPageGrey: '#fafafa', }; export const colors = { -- cgit v1.2.3 From b7bb27fa2135aa87a91667639920eb0c2db4cb85 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sun, 10 Jun 2018 19:35:30 -0700 Subject: Rework values section --- packages/website/ts/pages/jobs/bulleted_item.tsx | 4 +- packages/website/ts/pages/jobs/values.tsx | 53 +++++------------------- 2 files changed, 13 insertions(+), 44 deletions(-) diff --git a/packages/website/ts/pages/jobs/bulleted_item.tsx b/packages/website/ts/pages/jobs/bulleted_item.tsx index ae7385b90..9dc4fe4a3 100644 --- a/packages/website/ts/pages/jobs/bulleted_item.tsx +++ b/packages/website/ts/pages/jobs/bulleted_item.tsx @@ -7,9 +7,9 @@ export interface BulletedItemProps { height?: number; } export const BulletedItem = (props: BulletedItemProps) => { - const height = props.height || 150; + const minHeight = props.height || 150; return ( -
+
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index 805400583..9bb98d016 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -4,65 +4,34 @@ import * as React from 'react'; import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; -const ITEMS_COLUMN1: BulletedItemProps[] = [ +const BULLETED_ITEMS: BulletedItemProps[] = [ { bulletColor: '#6FCF97', title: 'Ethics/Doing the right thing', - description: - 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', }, { bulletColor: '#56CCF2', - title: 'Clear communication', - description: - 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + title: 'Consistently ship', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', }, { bulletColor: '#EB5757', - title: 'Grow the whole pie', - description: - 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', - }, -]; -const ITEMS_COLUMN2: BulletedItemProps[] = [ - { - bulletColor: '#F2994A', - title: 'Crypto-Economic Technology', - description: - 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', - }, - { - bulletColor: '#E0E0E0', - title: 'Transparency', - description: - 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', - }, - { - bulletColor: '#F2C94C', - title: 'Positive Energy', - description: - 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + title: 'Focus on long term impact', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', }, ]; export const Values = () => { const isSmallScreen = false; return ( -
+
-
- {_.map(ITEMS_COLUMN1, bulletedItemProps => { - return ( - - ); - })} +
+ Our Values
-
- {_.map(ITEMS_COLUMN2, bulletedItemProps => { +
+ {_.map(BULLETED_ITEMS, bulletedItemProps => { return ( Date: Sun, 10 Jun 2018 19:49:40 -0700 Subject: Refactor into BulletedItemList component --- .../website/ts/pages/jobs/bulleted_item_list.tsx | 30 ++++++++++++++++++++++ packages/website/ts/pages/jobs/values.tsx | 27 +++---------------- 2 files changed, 33 insertions(+), 24 deletions(-) create mode 100644 packages/website/ts/pages/jobs/bulleted_item_list.tsx diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx new file mode 100644 index 000000000..108f31e00 --- /dev/null +++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx @@ -0,0 +1,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 interface BulletedItemListProps { + headerText: string; + bulletedItems: BulletedItemProps[]; +} +export const BulletedItemList = (props: BulletedItemListProps) => { + return ( +
+
+ {props.headerText} +
+
+ {_.map(props.bulletedItems, bulletedItemProps => { + return ( + + ); + })} +
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index 9bb98d016..37e62d23b 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -2,7 +2,8 @@ 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 { BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; +import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; const BULLETED_ITEMS: BulletedItemProps[] = [ { @@ -22,26 +23,4 @@ const BULLETED_ITEMS: BulletedItemProps[] = [ }, ]; -export const Values = () => { - const isSmallScreen = false; - return ( -
-
-
- Our Values -
-
- {_.map(BULLETED_ITEMS, bulletedItemProps => { - return ( - - ); - })} -
-
-
- ); -}; +export const Values = () => ; -- cgit v1.2.3 From 3c073bc360f88129bd59e7e3d0d7fbcf69828da4 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sun, 10 Jun 2018 20:45:18 -0700 Subject: Benefits section --- packages/website/ts/pages/jobs/benefits.tsx | 84 +++++++++++++++++++--- .../website/ts/pages/jobs/bulleted_item_list.tsx | 1 + packages/website/ts/pages/jobs/jobs.tsx | 2 +- 3 files changed, 75 insertions(+), 12 deletions(-) diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index fa4edb240..03a906a10 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -1,22 +1,84 @@ +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 { 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'; -export const Benefits = () => ( +const IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png']; +const BULLETED_ITEMS: BulletedItemProps[] = [ + { + 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.', + }, + { + bulletColor: '#6FCF97', + title: 'Test test yo', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + }, + { + bulletColor: '#56CCF2', + title: 'Waddle Waddle', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + }, +]; + +export interface BenefitsProps { + screenWidth: ScreenWidths; +} + +export const Benefits = (props: BenefitsProps) => ( +
+ {props.screenWidth === ScreenWidths.Sm ? : } +
+); + +const LargeLayout = () => (
-
- + +
+
+ +
+
+); + +const SmallLayout = () => ( +
+ + +
+); + +const BenefitsList = () => ; + +const ImageGrid = () => ( +
+
+ +
+
+
+
-
-
- -
-
- -
+
+
-
); diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx index 108f31e00..30dd126d1 100644 --- a/packages/website/ts/pages/jobs/bulleted_item_list.tsx +++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx @@ -18,6 +18,7 @@ export const BulletedItemList = (props: BulletedItemListProps) => { {_.map(props.bulletedItems, bulletedItemProps => { return ( { )} - +
-- cgit v1.2.3 From bc36c0faed11d61164027efad5b2ad9d07f0573f Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sun, 10 Jun 2018 21:29:15 -0700 Subject: Teams section --- packages/website/ts/pages/jobs/benefits.tsx | 7 ++- packages/website/ts/pages/jobs/bulleted_item.tsx | 22 -------- .../website/ts/pages/jobs/bulleted_item_list.tsx | 47 ++++++++++++++--- packages/website/ts/pages/jobs/jobs.tsx | 2 +- packages/website/ts/pages/jobs/teams.tsx | 60 +++++++++------------- packages/website/ts/pages/jobs/values.tsx | 7 ++- 6 files changed, 70 insertions(+), 75 deletions(-) delete mode 100644 packages/website/ts/pages/jobs/bulleted_item.tsx 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 = () => (
); -const BenefitsList = () => ; +const BenefitsList = () => ; const ImageGrid = () => (
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 ( -
- - - -
-
{props.title}
-
{props.description}
-
-
- ); -}; 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 (
-
- {props.headerText} -
+ {!_.isUndefined(props.headerText) && ( +
+ {props.headerText} +
+ )} +
- {_.map(props.bulletedItems, bulletedItemProps => { + {_.map(props.bulletedItemInfos, bulletedItemProps => { return ( {
); }; + +interface BulletedItemProps { + bulletColor: string; + title: string; + description: string; + height?: number; +} +const BulletedItem = (props: BulletedItemProps) => { + const minHeight = props.height || 150; + return ( +
+ + + +
+
{props.title}
+
{props.description}
+
+
+ ); +}; 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 { )} - +
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 ( -
-
-
- {_.map(ITEMS_COLUMN1, bulletedItemProps => { - return ( - - ); - })} -
-
- {_.map(ITEMS_COLUMN2, bulletedItemProps => { - return ( - - ); - })} -
-
+export interface TeamsProps { + screenWidth: ScreenWidths; +} + +export const Teams = (props: TeamsProps) => (props.screenWidth === ScreenWidths.Sm ? : ); + +const LargeLayout = () => ( +
+
+
- ); -}; +
+ +
+
+); + +const SmallLayout = () => ( + +); 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 = () => ; +export const Values = () => ; -- cgit v1.2.3 From 679d60cd5a5debcacff42c38967c1f8b7d972882 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 11 Jun 2018 12:38:25 -0700 Subject: Implement large screen open positions --- .../ts/components/relayer_index/relayer_index.tsx | 32 +--- packages/website/ts/components/ui/retry.tsx | 33 ++++ packages/website/ts/pages/jobs/benefits.tsx | 2 +- packages/website/ts/pages/jobs/mission.tsx | 2 +- packages/website/ts/pages/jobs/open_positions.tsx | 196 +++++++++++++-------- packages/website/ts/pages/jobs/teams.tsx | 2 +- packages/website/ts/style/colors.ts | 3 +- packages/website/ts/types.ts | 8 + packages/website/ts/utils/backend_client.ts | 13 +- 9 files changed, 187 insertions(+), 104 deletions(-) create mode 100644 packages/website/ts/components/ui/retry.tsx diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 683f7084b..69a7cada1 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -6,6 +6,7 @@ import { GridList } from 'material-ui/GridList'; import * as React from 'react'; import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile'; +import { Retry } from 'ts/components/ui/retry'; import { colors } from 'ts/style/colors'; import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; @@ -63,7 +64,8 @@ export class RelayerIndex extends React.Component {_.isUndefined(this.state.error) ? ( @@ -124,31 +126,3 @@ export class RelayerIndex extends React.Component void; -} -const Retry = (props: RetryProps) => ( -
-
-
- Something went wrong. -
-
- -
-
-
-); diff --git a/packages/website/ts/components/ui/retry.tsx b/packages/website/ts/components/ui/retry.tsx new file mode 100644 index 000000000..f18b5abac --- /dev/null +++ b/packages/website/ts/components/ui/retry.tsx @@ -0,0 +1,33 @@ +import FlatButton from 'material-ui/FlatButton'; +import { GridList } from 'material-ui/GridList'; +import * as React from 'react'; + +import { colors } from 'ts/style/colors'; + +export interface RetryProps { + onRetry: () => void; +} +export const Retry = (props: RetryProps) => ( +
+
+
+ Something went wrong. +
+
+ +
+
+
+); diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index ce261592f..a7cc23503 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -41,7 +41,7 @@ export interface BenefitsProps { } export const Benefits = (props: BenefitsProps) => ( -
+
{props.screenWidth === ScreenWidths.Sm ? : }
); diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx index a3584e5f6..b4d294623 100644 --- a/packages/website/ts/pages/jobs/mission.tsx +++ b/packages/website/ts/pages/jobs/mission.tsx @@ -35,7 +35,7 @@ export const Mission = (props: MissionProps) => {
); return ( -
+
{isSmallScreen ? (
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index f9c37d36f..5eb8e429d 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -1,80 +1,136 @@ import * as _ from 'lodash'; +import CircularProgress from 'material-ui/CircularProgress'; import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table'; import * as React from 'react'; -const POSITIONS = [ - { - name: 'Community Director', - department: 'Marketing', - office: 'Remote / San Francisco', - }, - { - name: 'Data Scientist / Data Engineer', - department: 'Engineering', - office: 'Remote / San Francisco', - }, - { - name: 'Executive Assitant / Office Manager', - department: 'Operations', - office: 'Remote / San Francisco', - }, - { - name: 'Research Fellow - Economics / Governance', - department: 'Engineering', - office: 'Remote / San Francisco', - }, - { - name: 'Software Engineer - Blockchain', - department: 'Engineer', - office: 'Remote / San Francisco', - }, - { - name: 'Software Engineer - Full-stack', - department: 'Marketing', - office: 'Remote / San Francisco', - }, -]; +import { Retry } from 'ts/components/ui/retry'; +import { colors } from 'ts/style/colors'; +import { WebsiteBackendJobInfo } from 'ts/types'; +import { backendClient } from 'ts/utils/backend_client'; + +const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; export interface OpenPositionsProps { hash: string; } +export interface OpenPositionsState { + jobInfos?: WebsiteBackendJobInfo[]; + error?: Error; +} -export const OpenPositions = (props: OpenPositionsProps) => { - const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; - return ( -
-
- - - - Position - - - Department - - - Office - - - - - {_.map(POSITIONS, position => { - return ( - - - {position.name} - - - {position.department} - - - {position.office} - +export class OpenPositions extends React.Component { + private _isUnmounted: boolean; + constructor(props: OpenPositionsProps) { + super(props); + this._isUnmounted = false; + this.state = { + jobInfos: undefined, + error: undefined, + }; + } + public componentWillMount(): void { + // tslint:disable-next-line:no-floating-promises + this._fetchJobInfosAsync(); + } + public componentWillUnmount(): void { + this._isUnmounted = true; + } + public render(): React.ReactNode { + const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.jobInfos); + if (!isReadyToRender) { + return ( + // TODO: consolidate this loading component with the one in portal and RelayerIndex + // TODO: possibly refactor into a generic loading container with spinner and retry UI +
+ {_.isUndefined(this.state.error) ? ( + + ) : ( + + )} +
+ ); + } else { + return ( +
+ + <Table selectable={false} onCellClick={this._onCellClick.bind(this)}> + <TableHeader displaySelectAll={false} adjustForCheckbox={false}> + <TableRow> + <TableHeaderColumn colSpan={5} style={labelStyle}> + Position + </TableHeaderColumn> + <TableHeaderColumn colSpan={3} style={labelStyle}> + Department + </TableHeaderColumn> + <TableHeaderColumn colSpan={4} style={labelStyle}> + Office + </TableHeaderColumn> </TableRow> - ); - })} - </TableBody> - </Table> - </div> - ); -}; + </TableHeader> + <TableBody displayRowCheckbox={false} showRowHover={true}> + {_.map(this.state.jobInfos, jobInfo => { + return this._renderJobInfo(jobInfo); + })} + </TableBody> + </Table> + </div> + ); + } + } + private _renderJobInfo(jobInfo: WebsiteBackendJobInfo): React.ReactNode { + return ( + <TableRow key={jobInfo.id} hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}> + <TableRowColumn colSpan={5} style={labelStyle}> + {jobInfo.title} + </TableRowColumn> + <TableRowColumn colSpan={3} style={labelStyle}> + {jobInfo.department} + </TableRowColumn> + <TableRowColumn colSpan={4} style={labelStyle}> + {jobInfo.office} + </TableRowColumn> + </TableRow> + ); + } + private async _fetchJobInfosAsync(): Promise<void> { + try { + if (!this._isUnmounted) { + this.setState({ + jobInfos: undefined, + error: undefined, + }); + } + const jobInfos = await backendClient.getJobInfosAsync(); + if (!this._isUnmounted) { + this.setState({ + jobInfos, + }); + } + } catch (error) { + if (!this._isUnmounted) { + this.setState({ + error, + }); + } + } + } + private _onCellClick(rowNumber: number): void { + if (_.isUndefined(this.state.jobInfos)) { + return; + } + const url = this.state.jobInfos[rowNumber].url; + window.open(url, '_blank'); + } +} + +const Title = () => ( + <div + className="h2 lg-py4 md-py4 sm-py3" + style={{ + paddingLeft: 90, + fontFamily: 'Roboto Mono', + }} + > + {'Open Positions'} + </div> +); diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx index 3d953c993..465bae7f4 100644 --- a/packages/website/ts/pages/jobs/teams.tsx +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -42,7 +42,7 @@ export interface TeamsProps { export const Teams = (props: TeamsProps) => (props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />); const LargeLayout = () => ( - <div className="mx-auto max-width-4 clearfix"> + <div className="mx-auto max-width-4 clearfix pb4"> <div className="col lg-col-6 md-col-6 col-12"> <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={ITEMS_COLUMN1} /> </div> diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index 002318e14..539f3e125 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -11,7 +11,8 @@ const appColors = { wrapEtherConfirmationButton: sharedColors.mediumBlue, drawerMenuBackground: '#4a4a4a', menuItemDefaultSelectedBackground: '#424242', - jobsPageGrey: '#fafafa', + jobsPageBackground: '#fafafa', + jobsPageOpenPositionRow: '#f5f5f5', }; export const colors = { diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 15444e517..24e86a901 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -536,4 +536,12 @@ export interface WebsiteBackendTokenInfo { export interface WebsiteBackendGasInfo { average: number; } + +export interface WebsiteBackendJobInfo { + id: number; + title: string; + department: string; + office: string; + url: string; +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/utils/backend_client.ts b/packages/website/ts/utils/backend_client.ts index 6b16aea6b..835a6ef4d 100644 --- a/packages/website/ts/utils/backend_client.ts +++ b/packages/website/ts/utils/backend_client.ts @@ -1,10 +1,17 @@ import * as _ from 'lodash'; -import { ArticlesBySection, WebsiteBackendGasInfo, WebsiteBackendPriceInfo, WebsiteBackendRelayerInfo } from 'ts/types'; +import { + ArticlesBySection, + WebsiteBackendGasInfo, + WebsiteBackendJobInfo, + WebsiteBackendPriceInfo, + WebsiteBackendRelayerInfo, +} from 'ts/types'; import { fetchUtils } from 'ts/utils/fetch_utils'; import { utils } from 'ts/utils/utils'; const ETH_GAS_STATION_ENDPOINT = '/eth_gas_station'; +const JOBS_ENDPOINT = '/jobs'; const PRICES_ENDPOINT = '/prices'; const RELAYERS_ENDPOINT = '/relayers'; const WIKI_ENDPOINT = '/wiki'; @@ -15,6 +22,10 @@ export const backendClient = { const result = await fetchUtils.requestAsync(utils.getBackendBaseUrl(), ETH_GAS_STATION_ENDPOINT); return result; }, + async getJobInfosAsync(): Promise<WebsiteBackendJobInfo[]> { + const result = await fetchUtils.requestAsync(utils.getBackendBaseUrl(), JOBS_ENDPOINT); + return result; + }, async getPriceInfoAsync(tokenSymbols: string[]): Promise<WebsiteBackendPriceInfo> { if (_.isEmpty(tokenSymbols)) { return {}; -- cgit v1.2.3 From 7080f0c35a3e5c84fa2907c6feb0610c699c2823 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 10:38:41 -0700 Subject: Implement small open positions --- packages/website/ts/pages/jobs/benefits.tsx | 57 ++++++++--- .../website/ts/pages/jobs/bulleted_item_list.tsx | 62 ------------ packages/website/ts/pages/jobs/jobs.tsx | 2 +- .../website/ts/pages/jobs/list/header_item.tsx | 24 +++++ packages/website/ts/pages/jobs/list/list_item.tsx | 15 +++ packages/website/ts/pages/jobs/open_positions.tsx | 112 +++++++++++++++------ packages/website/ts/pages/jobs/teams.tsx | 42 ++++++-- packages/website/ts/pages/jobs/values.tsx | 38 ++++++- 8 files changed, 232 insertions(+), 120 deletions(-) delete mode 100644 packages/website/ts/pages/jobs/bulleted_item_list.tsx create mode 100644 packages/website/ts/pages/jobs/list/header_item.tsx create mode 100644 packages/website/ts/pages/jobs/list/list_item.tsx diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index a7cc23503..b27c68a5b 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -1,40 +1,45 @@ import * as _ from 'lodash'; import * as React from 'react'; -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 { 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 IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png']; -const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ +const BENEFIT_ITEM_PROPS_LIST: BenefitItemProps[] = [ { bulletColor: '#6FCF97', - title: 'Ethics/Doing the right thing', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + 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', - title: 'Consistently ship', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + 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: 'Focus on long term impact', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + 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: '#6FCF97', - title: 'Test test yo', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + 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', - title: 'Waddle Waddle', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + 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 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; @@ -47,11 +52,14 @@ export const Benefits = (props: BenefitsProps) => ( ); const LargeLayout = () => ( - <div className="flex" style={{ height: 937 }}> + <div className="flex" style={{ height: LARGE_LAYOUT_HEIGHT }}> <div style={{ width: '43%', height: '100%' }}> <ImageGrid /> </div> - <div style={{ paddingLeft: 205, width: '57%', height: '100%' }}> + <div + className="pr4" + style={{ paddingLeft: LARGE_LAYOUT_BENEFITS_LIST_PADDING_LEFT, width: '57%', height: '100%' }} + > <BenefitsList /> </div> </div> @@ -64,7 +72,26 @@ const SmallLayout = () => ( </div> ); -const BenefitsList = () => <BulletedItemList headerText="Benefits" bulletedItemInfos={BULLETED_ITEM_INFOS} />; +export const BenefitsList = () => { + return ( + <div> + <HeaderItem headerText={HEADER_TEXT} /> + {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => React.createElement(BenefitItem, valueItemProps))} + </div> + ); +}; +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%' }}> diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx deleted file mode 100644 index a00290418..000000000 --- a/packages/website/ts/pages/jobs/bulleted_item_list.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { colors } from '@0xproject/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; - -export type BulletedItemInfo = BulletedItemProps; -export interface BulletedItemListProps { - headerText?: string; - bulletedItemInfos: BulletedItemInfo[]; -} -export const BulletedItemList = (props: BulletedItemListProps) => { - return ( - <div className="mx-auto max-width-4"> - {!_.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.bulletedItemInfos, bulletedItemProps => { - return ( - <BulletedItem - key={bulletedItemProps.title} - bulletColor={bulletedItemProps.bulletColor} - title={bulletedItemProps.title} - description={bulletedItemProps.description} - /> - ); - })} - </div> - </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 f3b455379..9fd305972 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -63,7 +63,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> { <Values /> <Benefits screenWidth={this.props.screenWidth} /> <Teams screenWidth={this.props.screenWidth} /> - <OpenPositions hash={OPEN_POSITIONS_HASH} /> + <OpenPositions hash={OPEN_POSITIONS_HASH} screenWidth={this.props.screenWidth} /> <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> </div> ); diff --git a/packages/website/ts/pages/jobs/list/header_item.tsx b/packages/website/ts/pages/jobs/list/header_item.tsx new file mode 100644 index 000000000..b130cb0c4 --- /dev/null +++ b/packages/website/ts/pages/jobs/list/header_item.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; + +import { ListItem } from 'ts/pages/jobs/list/list_item'; + +export interface HeaderItemProps { + headerText?: string; +} +export const HeaderItem: React.StatelessComponent<HeaderItemProps> = ({ headerText }) => { + return ( + <div className="h2 lg-py4 md-py4 sm-py3"> + <ListItem> + <div + style={{ + fontFamily: 'Roboto Mono', + minHeight: '1.25em', + lineHeight: 1.25, + }} + > + {headerText} + </div> + </ListItem> + </div> + ); +}; diff --git a/packages/website/ts/pages/jobs/list/list_item.tsx b/packages/website/ts/pages/jobs/list/list_item.tsx new file mode 100644 index 000000000..d7838bc01 --- /dev/null +++ b/packages/website/ts/pages/jobs/list/list_item.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +export interface ListItemProps { + bulletColor?: string; +} +export const ListItem: React.StatelessComponent<ListItemProps> = ({ bulletColor, children }) => { + return ( + <div className="flex items-center"> + <svg className="flex-none lg-px2 md-px2 sm-pl2" height="26" width="26"> + <circle cx="13" cy="13" r="13" fill={bulletColor || 'transparent'} /> + </svg> + <div className="flex-auto px2">{children}</div> + </div> + ); +}; diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index 5eb8e429d..f6dbc38a0 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -4,14 +4,20 @@ import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowCol import * as React from 'react'; import { Retry } from 'ts/components/ui/retry'; +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 { WebsiteBackendJobInfo } from 'ts/types'; +import { styled } from 'ts/style/theme'; +import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; +const HEADER_TEXT = 'Open Positions'; +const LIST_ITEM_MIN_HEIGHT = 80; export interface OpenPositionsProps { hash: string; + screenWidth: ScreenWidths; } export interface OpenPositionsState { jobInfos?: WebsiteBackendJobInfo[]; @@ -37,6 +43,7 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit } public render(): React.ReactNode { const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.jobInfos); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; if (!isReadyToRender) { return ( // TODO: consolidate this loading component with the one in portal and RelayerIndex @@ -52,32 +59,54 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit } else { return ( <div id={this.props.hash} className="mx-auto max-width-4"> - <Title /> - <Table selectable={false} onCellClick={this._onCellClick.bind(this)}> - <TableHeader displaySelectAll={false} adjustForCheckbox={false}> - <TableRow> - <TableHeaderColumn colSpan={5} style={labelStyle}> - Position - </TableHeaderColumn> - <TableHeaderColumn colSpan={3} style={labelStyle}> - Department - </TableHeaderColumn> - <TableHeaderColumn colSpan={4} style={labelStyle}> - Office - </TableHeaderColumn> - </TableRow> - </TableHeader> - <TableBody displayRowCheckbox={false} showRowHover={true}> - {_.map(this.state.jobInfos, jobInfo => { - return this._renderJobInfo(jobInfo); - })} - </TableBody> - </Table> + {isSmallScreen ? this._renderList() : this._renderTable()} </div> ); } } - private _renderJobInfo(jobInfo: WebsiteBackendJobInfo): React.ReactNode { + private _renderList(): React.ReactNode { + return ( + <div style={{ backgroundColor: colors.jobsPageBackground }}> + <HeaderItem headerText={HEADER_TEXT} /> + {_.map(this.state.jobInfos, jobInfo => ( + <JobInfoListItem + key={jobInfo.id} + title={jobInfo.title} + description={jobInfo.department} + onClick={this._openJobInfoUrl.bind(this, jobInfo)} + /> + ))} + </div> + ); + } + private _renderTable(): React.ReactNode { + return ( + <div> + <HeaderItem headerText={HEADER_TEXT} /> + <Table selectable={false} onCellClick={this._onCellClick.bind(this)}> + <TableHeader displaySelectAll={false} adjustForCheckbox={false}> + <TableRow> + <TableHeaderColumn colSpan={5} style={labelStyle}> + Position + </TableHeaderColumn> + <TableHeaderColumn colSpan={3} style={labelStyle}> + Department + </TableHeaderColumn> + <TableHeaderColumn colSpan={4} style={labelStyle}> + Office + </TableHeaderColumn> + </TableRow> + </TableHeader> + <TableBody displayRowCheckbox={false} showRowHover={true}> + {_.map(this.state.jobInfos, jobInfo => { + return this._renderJobInfoTableRow(jobInfo); + })} + </TableBody> + </Table> + </div> + ); + } + private _renderJobInfoTableRow(jobInfo: WebsiteBackendJobInfo): React.ReactNode { return ( <TableRow key={jobInfo.id} hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}> <TableRowColumn colSpan={5} style={labelStyle}> @@ -118,19 +147,36 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit if (_.isUndefined(this.state.jobInfos)) { return; } - const url = this.state.jobInfos[rowNumber].url; + const jobInfo = this.state.jobInfos[rowNumber]; + this._openJobInfoUrl(jobInfo); + } + + private _openJobInfoUrl(jobInfo: WebsiteBackendJobInfo): void { + const url = jobInfo.url; window.open(url, '_blank'); } } -const Title = () => ( - <div - className="h2 lg-py4 md-py4 sm-py3" - style={{ - paddingLeft: 90, - fontFamily: 'Roboto Mono', - }} - > - {'Open Positions'} +export interface JobInfoListItemProps { + title?: string; + description?: string; + onClick?: (event: React.MouseEvent<HTMLElement>) => void; +} + +const PlainJobInfoListItem: React.StatelessComponent<JobInfoListItemProps> = ({ title, description, onClick }) => ( + <div className="mb3" onClick={onClick}> + <ListItem> + <div style={{ fontWeight: 'bold', fontSize: 16, color: colors.mediumBlue }}>{title + ' ›'}</div> + <div className="pt1" style={{ fontSize: 16, color: colors.darkGrey }}> + {description} + </div> + </ListItem> </div> ); + +export const JobInfoListItem = styled(PlainJobInfoListItem)` + cursor: pointer; + &:hover { + opacity: 0.5; + } +`; diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx index 465bae7f4..dcb457d06 100644 --- a/packages/website/ts/pages/jobs/teams.tsx +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -2,10 +2,11 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; +import { HeaderItem } from 'ts/pages/jobs/list/header_item'; +import { ListItem } from 'ts/pages/jobs/list/list_item'; import { ScreenWidths } from 'ts/types'; -const ITEMS_COLUMN1: BulletedItemInfo[] = [ +const TEAM_ITEM_PROPS_COLUMN1: TeamItemProps[] = [ { bulletColor: '#EB5757', title: 'User Growth', @@ -19,7 +20,7 @@ const ITEMS_COLUMN1: BulletedItemInfo[] = [ '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: BulletedItemInfo[] = [ +const TEAM_ITEM_PROPS_COLUMN2: TeamItemProps[] = [ { bulletColor: '#EB5757', title: 'Developer Tools', @@ -34,6 +35,7 @@ const ITEMS_COLUMN2: BulletedItemInfo[] = [ }, ]; const HEADER_TEXT = 'Our Teams'; +const MINIMUM_ITEM_HEIGHT = 240; export interface TeamsProps { screenWidth: ScreenWidths; @@ -44,14 +46,42 @@ export const Teams = (props: TeamsProps) => (props.screenWidth === ScreenWidths. const LargeLayout = () => ( <div className="mx-auto max-width-4 clearfix pb4"> <div className="col lg-col-6 md-col-6 col-12"> - <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={ITEMS_COLUMN1} /> + <HeaderItem headerText={HEADER_TEXT} /> + {_.map(TEAM_ITEM_PROPS_COLUMN1, teamItemProps => React.createElement(TeamItem, teamItemProps))} </div> <div className="col lg-col-6 md-col-6 col-12"> - <BulletedItemList headerText=" " bulletedItemInfos={ITEMS_COLUMN2} /> + <HeaderItem headerText=" " /> + {_.map(TEAM_ITEM_PROPS_COLUMN2, teamItemProps => React.createElement(TeamItem, teamItemProps))} </div> </div> ); const SmallLayout = () => ( - <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={_.concat(ITEMS_COLUMN1, ITEMS_COLUMN2)} /> + <div> + <HeaderItem headerText={HEADER_TEXT} /> + {_.map(_.concat(TEAM_ITEM_PROPS_COLUMN1, TEAM_ITEM_PROPS_COLUMN2), teamItemProps => + React.createElement(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}> + <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div> + </ListItem> + <ListItem> + <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}> + {description} + </div> + </ListItem> + </div> + ); +}; diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index 45bbf950f..abacafdba 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -2,9 +2,10 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; +import { HeaderItem } from 'ts/pages/jobs/list/header_item'; +import { ListItem } from 'ts/pages/jobs/list/list_item'; -const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ +const VALUE_ITEM_PROPS_LIST: ValueItemProps[] = [ { bulletColor: '#6FCF97', title: 'Ethics/Doing the right thing', @@ -22,4 +23,35 @@ const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ }, ]; -export const Values = () => <BulletedItemList headerText="Our Values" bulletedItemInfos={BULLETED_ITEM_INFOS} />; +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 => React.createElement(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}> + <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div> + </ListItem> + <ListItem> + <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}> + {description} + </div> + </ListItem> + </div> + ); +}; -- cgit v1.2.3 From e3bb64cf358d293a6d30297013af1ff908bf0d45 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 12:52:36 -0700 Subject: Remove extra packages --- packages/order-utils/order-utils | 1 - packages/types/types | 1 - 2 files changed, 2 deletions(-) delete mode 120000 packages/order-utils/order-utils delete mode 120000 packages/types/types diff --git a/packages/order-utils/order-utils b/packages/order-utils/order-utils deleted file mode 120000 index f27c264ed..000000000 --- a/packages/order-utils/order-utils +++ /dev/null @@ -1 +0,0 @@ -/Users/bmillman/workspace/0x-monorepo/packages/order-utils \ No newline at end of file diff --git a/packages/types/types b/packages/types/types deleted file mode 120000 index 69f5a8cce..000000000 --- a/packages/types/types +++ /dev/null @@ -1 +0,0 @@ -/Users/bmillman/workspace/0x-monorepo/packages/types \ No newline at end of file -- cgit v1.2.3 From f1496656607bc2b382b8f378652a2e334f4a5908 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 13:40:15 -0700 Subject: Fix lint errors --- packages/website/ts/components/relayer_index/relayer_index.tsx | 1 - packages/website/ts/components/ui/retry.tsx | 1 - packages/website/ts/containers/jobs.ts | 3 +-- packages/website/ts/index.tsx | 1 - packages/website/ts/pages/jobs/jobs.tsx | 1 - packages/website/ts/pages/jobs/mission.tsx | 6 ++++-- packages/website/ts/pages/jobs/open_positions.tsx | 9 +++++++-- packages/website/ts/pages/jobs/photo_rail.tsx | 3 --- packages/website/ts/pages/jobs/teams.tsx | 1 - packages/website/ts/pages/jobs/values.tsx | 1 - 10 files changed, 12 insertions(+), 15 deletions(-) diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 69a7cada1..3c5761bcd 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -1,7 +1,6 @@ import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; -import FlatButton from 'material-ui/FlatButton'; import { GridList } from 'material-ui/GridList'; import * as React from 'react'; diff --git a/packages/website/ts/components/ui/retry.tsx b/packages/website/ts/components/ui/retry.tsx index f18b5abac..accdbfe9c 100644 --- a/packages/website/ts/components/ui/retry.tsx +++ b/packages/website/ts/components/ui/retry.tsx @@ -1,5 +1,4 @@ import FlatButton from 'material-ui/FlatButton'; -import { GridList } from 'material-ui/GridList'; import * as React from 'react'; import { colors } from 'ts/style/colors'; diff --git a/packages/website/ts/containers/jobs.ts b/packages/website/ts/containers/jobs.ts index 63ef59221..b18485882 100644 --- a/packages/website/ts/containers/jobs.ts +++ b/packages/website/ts/containers/jobs.ts @@ -1,4 +1,3 @@ -import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; @@ -17,7 +16,7 @@ interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, ownProps: JobsProps): ConnectedState => ({ +const mapStateToProps = (state: State, _ownProps: JobsProps): ConnectedState => ({ translate: state.translate, screenWidth: state.screenWidth, }); diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index a8749d8bf..5501f5972 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -4,7 +4,6 @@ import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'; import * as injectTapEventPlugin from 'react-tap-event-plugin'; -import { createStore, Store as ReduxStore } from 'redux'; import { About } from 'ts/containers/about'; import { FAQ } from 'ts/containers/faq'; import { Jobs } from 'ts/containers/jobs'; diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index 9fd305972..c23b4a976 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -15,7 +15,6 @@ 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 { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx index b4d294623..f7f874e04 100644 --- a/packages/website/ts/pages/jobs/mission.tsx +++ b/packages/website/ts/pages/jobs/mission.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { FilledImage } from 'ts/pages/jobs/filled_image'; import { colors } from 'ts/style/colors'; import { ScreenWidths } from 'ts/types'; @@ -35,7 +34,10 @@ export const Mission = (props: MissionProps) => { </div> ); return ( - <div className="container lg-py4 md-py4" style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }}> + <div + className="container lg-py4 md-py4" + style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }} + > <div className="mx-auto clearfix sm-py4"> {isSmallScreen ? ( <div> diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index f6dbc38a0..c43cc43fe 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -13,7 +13,7 @@ import { backendClient } from 'ts/utils/backend_client'; const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; const HEADER_TEXT = 'Open Positions'; -const LIST_ITEM_MIN_HEIGHT = 80; +const TABLE_ROW_MIN_HEIGHT = 100; export interface OpenPositionsProps { hash: string; @@ -108,7 +108,12 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit } private _renderJobInfoTableRow(jobInfo: WebsiteBackendJobInfo): React.ReactNode { return ( - <TableRow key={jobInfo.id} hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}> + <TableRow + key={jobInfo.id} + hoverable={true} + displayBorder={false} + style={{ height: TABLE_ROW_MIN_HEIGHT, border: 2 }} + > <TableRowColumn colSpan={5} style={labelStyle}> {jobInfo.title} </TableRowColumn> diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx index bcc3444ec..4db4bc31b 100644 --- a/packages/website/ts/pages/jobs/photo_rail.tsx +++ b/packages/website/ts/pages/jobs/photo_rail.tsx @@ -2,9 +2,6 @@ import * as _ from 'lodash'; import * as React from 'react'; import { FilledImage } from 'ts/pages/jobs/filled_image'; -import { ScreenWidths } from 'ts/types'; - -const IMAGE_PATHS = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png']; export interface PhotoRailProps { images: string[]; diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx index dcb457d06..d5960949a 100644 --- a/packages/website/ts/pages/jobs/teams.tsx +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -1,4 +1,3 @@ -import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index abacafdba..799db3d67 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -1,4 +1,3 @@ -import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -- cgit v1.2.3 From eba8b4bf00f6e1794a8642a8972585f062c58d3b Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 13:45:56 -0700 Subject: Consolidate jobs page grey colors with shared colors --- packages/website/ts/style/colors.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index 539f3e125..bfec3ea41 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -11,8 +11,8 @@ const appColors = { wrapEtherConfirmationButton: sharedColors.mediumBlue, drawerMenuBackground: '#4a4a4a', menuItemDefaultSelectedBackground: '#424242', - jobsPageBackground: '#fafafa', - jobsPageOpenPositionRow: '#f5f5f5', + jobsPageBackground: sharedColors.green50, + jobsPageOpenPositionRow: sharedColors.green100, }; export const colors = { -- cgit v1.2.3 From d206d0a3aea86612a274427bcf2eaa590f46c6e7 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 14:23:03 -0700 Subject: Add font family to Button component and use in Join0x component --- packages/website/ts/components/ui/button.tsx | 4 +++- packages/website/ts/pages/jobs/join_0x.tsx | 25 +++++++++++++------------ 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 4c7d59839..1f88297de 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -7,6 +7,7 @@ export interface ButtonProps { className?: string; fontSize?: string; fontColor?: string; + fontFamily?: string; backgroundColor?: string; borderColor?: string; width?: string; @@ -28,7 +29,7 @@ export const Button = styled(PlainButton)` border-radius: 6px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); font-weight: 500; - font-family: 'Roboto'; + font-family: ${props => props.fontFamily}; width: ${props => props.width}; background-color: ${props => props.backgroundColor}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; @@ -44,6 +45,7 @@ Button.defaultProps = { fontSize: '12px', backgroundColor: colors.white, width: 'auto', + fontFamily: 'Roboto', }; Button.displayName = 'Button'; diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx index e7fdf3ce1..72cce3b89 100644 --- a/packages/website/ts/pages/jobs/join_0x.tsx +++ b/packages/website/ts/pages/jobs/join_0x.tsx @@ -1,8 +1,11 @@ import { colors } from '@0xproject/react-shared'; -import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; +import { Button } from 'ts/components/ui/button'; + +const BUTTON_TEXT = 'view open positions'; + export interface Join0xProps { onCallToActionClick: () => void; } @@ -21,19 +24,17 @@ export const Join0x = (props: Join0xProps) => ( work remotely anywhere in the world to help create the infrastructure of a new tokenized economy. </div> <div className="py3"> - <FlatButton - label={'view open positions'} + <Button + type="button" backgroundColor={colors.black} - labelStyle={{ - fontSize: 18, - fontFamily: 'Roboto Mono', - fontWeight: 'lighter', - color: colors.white, - textTransform: 'lowercase', - }} - style={{ width: 280, height: 62, borderRadius: 5 }} + width="290px" + fontColor={colors.white} + fontSize="18px" + fontFamily="Roboto Mono" onClick={props.onCallToActionClick} - /> + > + {BUTTON_TEXT} + </Button> </div> </div> </div> -- cgit v1.2.3 From 982391cd7cc9fbcd5da26cd671a2b656fc48772d Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 14:23:47 -0700 Subject: Fix incorrect colors --- packages/website/ts/style/colors.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index bfec3ea41..b15000d7a 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -11,8 +11,8 @@ const appColors = { wrapEtherConfirmationButton: sharedColors.mediumBlue, drawerMenuBackground: '#4a4a4a', menuItemDefaultSelectedBackground: '#424242', - jobsPageBackground: sharedColors.green50, - jobsPageOpenPositionRow: sharedColors.green100, + jobsPageBackground: sharedColors.grey50, + jobsPageOpenPositionRow: sharedColors.grey100, }; export const colors = { -- cgit v1.2.3 From 084285a76002bc1659797ee9a1aabc5bfae9e7d2 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 14:26:48 -0700 Subject: Replace FlatButton with Button in Retry --- packages/website/ts/components/ui/retry.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/website/ts/components/ui/retry.tsx b/packages/website/ts/components/ui/retry.tsx index accdbfe9c..543b7df4b 100644 --- a/packages/website/ts/components/ui/retry.tsx +++ b/packages/website/ts/components/ui/retry.tsx @@ -1,8 +1,10 @@ -import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; +import { Button } from 'ts/components/ui/button'; import { colors } from 'ts/style/colors'; +const BUTTON_TEXT = 'reload'; + export interface RetryProps { onRetry: () => void; } @@ -13,19 +15,17 @@ export const Retry = (props: RetryProps) => ( Something went wrong. </div> <div className="py3"> - <FlatButton - label={'reload'} + <Button + type="button" backgroundColor={colors.black} - labelStyle={{ - fontSize: 18, - fontFamily: 'Roboto Mono', - fontWeight: 'lighter', - color: colors.white, - textTransform: 'lowercase', - }} - style={{ width: 280, height: 62, borderRadius: 5 }} + width="290px" + fontColor={colors.white} + fontSize="18px" + fontFamily="Roboto Mono" onClick={props.onRetry} - /> + > + {BUTTON_TEXT} + </Button> </div> </div> </div> -- cgit v1.2.3 From ca41f100ab9187b32b61ef83f8affed5ae3670b8 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 14:49:42 -0700 Subject: Move FilledImage into components/ui --- packages/website/ts/components/ui/filled_image.tsx | 18 ++++++++++++++++++ packages/website/ts/pages/jobs/benefits.tsx | 2 +- packages/website/ts/pages/jobs/filled_image.tsx | 18 ------------------ packages/website/ts/pages/jobs/photo_rail.tsx | 2 +- 4 files changed, 20 insertions(+), 20 deletions(-) create mode 100644 packages/website/ts/components/ui/filled_image.tsx delete mode 100644 packages/website/ts/pages/jobs/filled_image.tsx diff --git a/packages/website/ts/components/ui/filled_image.tsx b/packages/website/ts/components/ui/filled_image.tsx new file mode 100644 index 000000000..7f58ee5b9 --- /dev/null +++ b/packages/website/ts/components/ui/filled_image.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; + +export interface FilledImageProps { + src: string; +} +export const FilledImage = (props: FilledImageProps) => ( + <div + style={{ + width: '100%', + height: '100%', + objectFit: 'cover', + backgroundImage: `url(${props.src})`, + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center', + backgroundSize: 'cover', + }} + /> +); diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index b27c68a5b..4ec09b129 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { FilledImage } from 'ts/pages/jobs/filled_image'; +import { FilledImage } from 'ts/components/ui/filled_image'; import { FloatingImage } from 'ts/pages/jobs/floating_image'; import { HeaderItem } from 'ts/pages/jobs/list/header_item'; import { ListItem } from 'ts/pages/jobs/list/list_item'; diff --git a/packages/website/ts/pages/jobs/filled_image.tsx b/packages/website/ts/pages/jobs/filled_image.tsx deleted file mode 100644 index 7f58ee5b9..000000000 --- a/packages/website/ts/pages/jobs/filled_image.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; - -export interface FilledImageProps { - src: string; -} -export const FilledImage = (props: FilledImageProps) => ( - <div - style={{ - width: '100%', - height: '100%', - objectFit: 'cover', - backgroundImage: `url(${props.src})`, - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center', - backgroundSize: 'cover', - }} - /> -); diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx index 4db4bc31b..acc9dcb91 100644 --- a/packages/website/ts/pages/jobs/photo_rail.tsx +++ b/packages/website/ts/pages/jobs/photo_rail.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { FilledImage } from 'ts/pages/jobs/filled_image'; +import { FilledImage } from 'ts/components/ui/filled_image'; export interface PhotoRailProps { images: string[]; -- cgit v1.2.3 From 155e3d225d3255d6728e1c986de46416f5685e7f Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 15:03:16 -0700 Subject: Remove FloatingImage --- packages/website/ts/pages/jobs/benefits.tsx | 3 +-- packages/website/ts/pages/jobs/floating_image.tsx | 8 -------- packages/website/ts/pages/jobs/jobs.tsx | 4 ++-- 3 files changed, 3 insertions(+), 12 deletions(-) delete mode 100644 packages/website/ts/pages/jobs/floating_image.tsx diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index 4ec09b129..8a44eb596 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -2,7 +2,6 @@ import * as _ from 'lodash'; import * as React from 'react'; import { FilledImage } from 'ts/components/ui/filled_image'; -import { FloatingImage } from 'ts/pages/jobs/floating_image'; import { HeaderItem } from 'ts/pages/jobs/list/header_item'; import { ListItem } from 'ts/pages/jobs/list/list_item'; import { colors } from 'ts/style/colors'; @@ -67,7 +66,7 @@ const LargeLayout = () => ( const SmallLayout = () => ( <div> - <FloatingImage src={_.head(IMAGE_PATHS)} /> + <FilledImage src={_.head(IMAGE_PATHS)} /> <BenefitsList /> </div> ); diff --git a/packages/website/ts/pages/jobs/floating_image.tsx b/packages/website/ts/pages/jobs/floating_image.tsx deleted file mode 100644 index 4719a9596..000000000 --- a/packages/website/ts/pages/jobs/floating_image.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; - -export interface FloatingImageProps { - src: string; -} -export const FloatingImage = (props: FloatingImageProps) => { - return <img src={props.src} style={{ width: '100%' }} />; -}; diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index c23b4a976..314669ee9 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -5,8 +5,8 @@ import * as DocumentTitle from 'react-document-title'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; +import { FilledImage } from 'ts/components/ui/filled_image'; import { Benefits } from 'ts/pages/jobs/benefits'; -import { FloatingImage } from 'ts/pages/jobs/floating_image'; import { Join0x } from 'ts/pages/jobs/join_0x'; import { Mission } from 'ts/pages/jobs/mission'; import { OpenPositions } from 'ts/pages/jobs/open_positions'; @@ -55,7 +55,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> { <Join0x onCallToActionClick={this._onJoin0xCallToActionClick.bind(this)} /> <Mission screenWidth={this.props.screenWidth} /> {this._isSmallScreen() ? ( - <FloatingImage src={_.head(PHOTO_RAIL_IMAGES)} /> + <FilledImage src={_.head(PHOTO_RAIL_IMAGES)} /> ) : ( <PhotoRail images={PHOTO_RAIL_IMAGES} /> )} -- cgit v1.2.3 From 9d9341901f2b5b14e3a29a6bdc18a505d9b361aa Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 15:25:47 -0700 Subject: Use Text component for HeaderItem --- packages/website/ts/components/ui/text.tsx | 2 ++ packages/website/ts/pages/jobs/list/header_item.tsx | 16 +++++++++------- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index e90c1707d..2b80869d1 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -11,6 +11,7 @@ export interface TextProps { fontFamily?: string; fontColor?: string; lineHeight?: string; + minHeight?: string; center?: boolean; fontWeight?: number; } @@ -26,6 +27,7 @@ export const Text = styled(PlainText)` ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; color: ${props => props.fontColor}; + min-height: ${props => props.minHeight}; `; Text.defaultProps = { diff --git a/packages/website/ts/pages/jobs/list/header_item.tsx b/packages/website/ts/pages/jobs/list/header_item.tsx index b130cb0c4..ac214904c 100644 --- a/packages/website/ts/pages/jobs/list/header_item.tsx +++ b/packages/website/ts/pages/jobs/list/header_item.tsx @@ -1,6 +1,8 @@ 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; @@ -9,15 +11,15 @@ export const HeaderItem: React.StatelessComponent<HeaderItemProps> = ({ headerTe return ( <div className="h2 lg-py4 md-py4 sm-py3"> <ListItem> - <div - style={{ - fontFamily: 'Roboto Mono', - minHeight: '1.25em', - lineHeight: 1.25, - }} + <Text + fontFamily="Roboto Mono" + fontSize="24px" + lineHeight="1.25" + minHeight="1.25em" + fontColor={colors.black} > {headerText} - </div> + </Text> </ListItem> </div> ); -- cgit v1.2.3 From 2794d64d3e920cd30ed0603becffc74b17c22218 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 15:54:27 -0700 Subject: Use Text in OpenPositions --- packages/website/ts/components/ui/text.tsx | 2 +- packages/website/ts/pages/jobs/open_positions.tsx | 9 ++++++--- packages/website/ts/utils/configs.ts | 2 +- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 2b80869d1..0fa79bc7c 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -13,7 +13,7 @@ export interface TextProps { lineHeight?: string; minHeight?: string; center?: boolean; - fontWeight?: number; + fontWeight?: number | string; } const PlainText: React.StatelessComponent<TextProps> = ({ children, className, Tag }) => ( diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index c43cc43fe..79b51c0d1 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -4,6 +4,7 @@ import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowCol 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'; @@ -171,10 +172,12 @@ export interface JobInfoListItemProps { const PlainJobInfoListItem: React.StatelessComponent<JobInfoListItemProps> = ({ title, description, onClick }) => ( <div className="mb3" onClick={onClick}> <ListItem> - <div style={{ fontWeight: 'bold', fontSize: 16, color: colors.mediumBlue }}>{title + ' ›'}</div> - <div className="pt1" style={{ fontSize: 16, color: colors.darkGrey }}> + <Text fontWeight="bold" fontSize="16px" fontColor={colors.mediumBlue}> + {title + ' ›'} + </Text> + <Text className="pt1" fontSize="16px" fontColor={colors.darkGrey}> {description} - </div> + </Text> </ListItem> </div> ); diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index ace8a5ba0..2fdc7f031 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -10,7 +10,7 @@ const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs'; export const configs = { AMOUNT_DISPLAY_PRECSION: 5, - BACKEND_BASE_PROD_URL: 'https://website-api.0xproject.com', + BACKEND_BASE_PROD_URL: 'http://localhost:3000', BACKEND_BASE_STAGING_URL: 'http://ec2-52-91-181-85.compute-1.amazonaws.com', BASE_URL, BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208', -- cgit v1.2.3 From f1a98693d0c9b7855838b8c4aaaca243839614b4 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 15:58:24 -0700 Subject: Use Text in Teams --- packages/website/ts/pages/jobs/teams.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx index d5960949a..8112351db 100644 --- a/packages/website/ts/pages/jobs/teams.tsx +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -1,8 +1,10 @@ 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[] = [ @@ -74,12 +76,14 @@ export const TeamItem: React.StatelessComponent<TeamItemProps> = ({ bulletColor, return ( <div style={{ minHeight: MINIMUM_ITEM_HEIGHT }}> <ListItem bulletColor={bulletColor}> - <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div> + <Text fontWeight="bold" fontSize="16px" fontColor={colors.black}> + {title} + </Text> </ListItem> <ListItem> - <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}> + <Text className="pt1" fontSize="16px" lineHeight="2em" fontColor={colors.black}> {description} - </div> + </Text> </ListItem> </div> ); -- cgit v1.2.3 From 76405639913b28c86f8cf9db65905215288e6032 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 16:09:23 -0700 Subject: Revert localhost config --- packages/website/ts/utils/configs.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index 2fdc7f031..ace8a5ba0 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -10,7 +10,7 @@ const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs'; export const configs = { AMOUNT_DISPLAY_PRECSION: 5, - BACKEND_BASE_PROD_URL: 'http://localhost:3000', + BACKEND_BASE_PROD_URL: 'https://website-api.0xproject.com', BACKEND_BASE_STAGING_URL: 'http://ec2-52-91-181-85.compute-1.amazonaws.com', BASE_URL, BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208', -- cgit v1.2.3 From d0bbee7e8c3eaac1f727a9f40a2213d041938c3b Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 12 Jun 2018 16:11:31 -0700 Subject: Fix issue with positions hash --- packages/website/ts/pages/jobs/open_positions.tsx | 40 ++++++++++++----------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index 79b51c0d1..f3d980315 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -44,26 +44,28 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit } public render(): React.ReactNode { const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.jobInfos); + return ( + <div id={this.props.hash} className="mx-auto max-width-4"> + {isReadyToRender ? this._renderBody() : this._renderLoading()} + </div> + ); + } + private _renderBody(): React.ReactNode { const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; - if (!isReadyToRender) { - return ( - // TODO: consolidate this loading component with the one in portal and RelayerIndex - // TODO: possibly refactor into a generic loading container with spinner and retry UI - <div className="center"> - {_.isUndefined(this.state.error) ? ( - <CircularProgress size={40} thickness={5} /> - ) : ( - <Retry onRetry={this._fetchJobInfosAsync.bind(this)} /> - )} - </div> - ); - } else { - return ( - <div id={this.props.hash} className="mx-auto max-width-4"> - {isSmallScreen ? this._renderList() : this._renderTable()} - </div> - ); - } + return isSmallScreen ? this._renderList() : this._renderTable(); + } + private _renderLoading(): React.ReactNode { + return ( + // TODO: consolidate this loading component with the one in portal and RelayerIndex + // TODO: possibly refactor into a generic loading container with spinner and retry UI + <div className="center"> + {_.isUndefined(this.state.error) ? ( + <CircularProgress size={40} thickness={5} /> + ) : ( + <Retry onRetry={this._fetchJobInfosAsync.bind(this)} /> + )} + </div> + ); } private _renderList(): React.ReactNode { return ( -- cgit v1.2.3 From 14071ea11917c8a50f6817866cecdb0d41915fb8 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Wed, 13 Jun 2018 12:01:08 -0700 Subject: Use spread operator instead of React.createElement --- packages/website/ts/pages/jobs/benefits.tsx | 2 +- packages/website/ts/pages/jobs/teams.tsx | 10 +++++----- packages/website/ts/pages/jobs/values.tsx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index 8a44eb596..006facc83 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -75,7 +75,7 @@ export const BenefitsList = () => { return ( <div> <HeaderItem headerText={HEADER_TEXT} /> - {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => React.createElement(BenefitItem, valueItemProps))} + {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => <BenefitItem {...valueItemProps} />)} </div> ); }; diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx index 8112351db..80b036396 100644 --- a/packages/website/ts/pages/jobs/teams.tsx +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -48,11 +48,11 @@ 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 => React.createElement(TeamItem, teamItemProps))} + {_.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 => React.createElement(TeamItem, teamItemProps))} + {_.map(TEAM_ITEM_PROPS_COLUMN2, teamItemProps => <TeamItem {...teamItemProps} />)} </div> </div> ); @@ -60,9 +60,9 @@ const LargeLayout = () => ( const SmallLayout = () => ( <div> <HeaderItem headerText={HEADER_TEXT} /> - {_.map(_.concat(TEAM_ITEM_PROPS_COLUMN1, TEAM_ITEM_PROPS_COLUMN2), teamItemProps => - React.createElement(TeamItem, teamItemProps), - )} + {_.map(_.concat(TEAM_ITEM_PROPS_COLUMN1, TEAM_ITEM_PROPS_COLUMN2), teamItemProps => ( + <TeamItem {...teamItemProps} /> + ))} </div> ); diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index 799db3d67..ad62754ce 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -29,7 +29,7 @@ export const Values = () => { return ( <div className="mx-auto max-width-4"> <HeaderItem headerText={HEADER_TEXT} /> - {_.map(VALUE_ITEM_PROPS_LIST, valueItemProps => React.createElement(ValueItem, valueItemProps))} + {_.map(VALUE_ITEM_PROPS_LIST, valueItemProps => <ValueItem {...valueItemProps} />)} </div> ); }; -- cgit v1.2.3 From eafcbabaa28fc4176bae4351231fd295ebdcddff Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Wed, 13 Jun 2018 12:10:21 -0700 Subject: Use Text components in Values --- packages/website/ts/pages/jobs/values.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index ad62754ce..c7c4d5726 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -1,8 +1,10 @@ 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[] = [ { @@ -44,12 +46,14 @@ export const ValueItem: React.StatelessComponent<ValueItemProps> = ({ bulletColo return ( <div style={{ minHeight: VALUE_ITEM_MIN_HEIGHT }}> <ListItem bulletColor={bulletColor}> - <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div> + <Text fontWeight="bold" fontSize="16x" fontColor={colors.black}> + {title} + </Text> </ListItem> <ListItem> - <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}> + <Text className="pt1" fontSize="16x" lineHeight="2em" fontColor={colors.black}> {description} - </div> + </Text> </ListItem> </div> ); -- cgit v1.2.3 From 8a3df7e434c98d75e0a8ccaec8c16122d5a2952b Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Wed, 13 Jun 2018 12:19:14 -0700 Subject: Update minHeight in Text --- packages/website/ts/components/ui/text.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 0fa79bc7c..7e47f1d09 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -27,7 +27,7 @@ export const Text = styled(PlainText)` ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; color: ${props => props.fontColor}; - min-height: ${props => props.minHeight}; + ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')}; `; Text.defaultProps = { -- cgit v1.2.3 From d172a97247f133a5340c5df263fe0f23019db956 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Wed, 13 Jun 2018 12:29:36 -0700 Subject: Add back redirector behind feature flag --- packages/website/ts/components/redirector.tsx | 9 +++++++++ packages/website/ts/index.tsx | 8 +++++++- packages/website/ts/utils/utils.ts | 3 +++ 3 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 packages/website/ts/components/redirector.tsx diff --git a/packages/website/ts/components/redirector.tsx b/packages/website/ts/components/redirector.tsx new file mode 100644 index 000000000..a02693003 --- /dev/null +++ b/packages/website/ts/components/redirector.tsx @@ -0,0 +1,9 @@ +import { constants } from 'ts/utils/constants'; + +interface RedirectorProps { + location: string; +} + +export function Redirector(_props: RedirectorProps): void { + window.location.href = constants.URL_ANGELLIST; +} diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 5501f5972..249b4fdc9 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -4,6 +4,7 @@ import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'; import * as injectTapEventPlugin from 'react-tap-event-plugin'; +import { Redirector } from 'ts/components/redirector'; import { About } from 'ts/containers/about'; import { FAQ } from 'ts/containers/faq'; import { Jobs } from 'ts/containers/jobs'; @@ -86,7 +87,12 @@ render( <Switch> <Route exact={true} path="/" component={Landing as any} /> <Redirect from="/otc" to={`${WebsitePaths.Portal}`} /> - <Route path={WebsitePaths.Jobs} component={Jobs as any} /> + {/* TODO: Remove this once we ship the jobs page*/} + {utils.shouldShowJobsPage() ? ( + <Route path={WebsitePaths.Jobs} component={Jobs as any} /> + ) : ( + <Route path={WebsitePaths.Jobs} component={Redirector as any} /> + )} <Route path={WebsitePaths.Portal} component={LazyPortal} /> <Route path={WebsitePaths.FAQ} component={FAQ as any} /> <Route path={WebsitePaths.About} component={About as any} /> diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 651a4212a..eb384fbb4 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -318,6 +318,9 @@ export const utils = { shouldShowPortalV2(): boolean { return this.isDevelopment() || this.isStaging() || this.isDogfood(); }, + shouldShowJobsPage(): boolean { + return this.isDevelopment() || this.isStaging() || this.isDogfood(); + }, getEthToken(tokenByAddress: TokenByAddress): Token { const tokens = _.values(tokenByAddress); const etherToken = _.find(tokens, { symbol: constants.ETHER_TOKEN_SYMBOL }); -- cgit v1.2.3