diff options
Diffstat (limited to 'packages/website/ts/pages/jobs')
| -rw-r--r-- | packages/website/ts/pages/jobs/benefits.tsx | 158 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/jobs.tsx | 71 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/join_0x.tsx | 64 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/mission.tsx | 47 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/open_positions.tsx | 179 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/photo_rail.tsx | 22 |
6 files changed, 0 insertions, 541 deletions
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx deleted file mode 100644 index 563b72e63..000000000 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { Circle } from 'ts/components/ui/circle'; -import { Container } from 'ts/components/ui/container'; -import { Image } from 'ts/components/ui/image'; -import { Text } from 'ts/components/ui/text'; -import { colors } from 'ts/style/colors'; -import { styled } from 'ts/style/theme'; -import { ScreenWidths } from 'ts/types'; -import { constants } from 'ts/utils/constants'; - -const BENEFITS = [ - 'Comprehensive insurance (medical, dental, and vision)', - 'Unlimited vacation (three weeks per year minimum)', - 'Meals and snacks provided in-office daily', - 'Flexible hours and liberal work-from-home-policy', - 'Supportive remote working environment', - 'Transportation, phone, and wellness expense', - 'Relocation assistance', - 'Optional team excursions (fully paid, often international)', - 'Competitive salary and cryptocurrency-based compensation', -]; - -interface Value { - iconSrc: string; - text: string; -} -const VALUES: Value[] = [ - { - iconSrc: 'images/jobs/heart-icon.svg', - text: 'Do the right thing', - }, - { - iconSrc: 'images/jobs/ship-icon.svg', - text: 'Consistently ship', - }, - { - iconSrc: 'images/jobs/calendar-icon.svg', - text: 'Focus on long term impact', - }, -]; - -export interface BenefitsProps { - screenWidth: ScreenWidths; -} - -export const Benefits = (props: BenefitsProps) => { - const isSmallScreen = props.screenWidth === ScreenWidths.Sm; - return ( - <Container className="flex flex-column items-center py4 px3" backgroundColor={colors.white}> - {!isSmallScreen ? ( - <Container className="flex" maxWidth="1200px"> - <BenefitsList /> - <Container marginLeft="120px"> - <ValuesList /> - </Container> - </Container> - ) : ( - <Container className="flex-column"> - <BenefitsList /> - <Container marginTop="50px"> - <ValuesList /> - </Container> - </Container> - )} - </Container> - ); -}; - -const Header: React.StatelessComponent = ({ children }) => ( - <Container marginBottom="30px"> - <Text fontFamily="Roboto Mono" fontSize="24px" fontColor={colors.black}> - {children} - </Text> - </Container> -); - -interface BenefitsListProps { - className?: string; -} -const PlainBenefitsList: React.StatelessComponent<BenefitsListProps> = ({ className }) => { - return ( - <Container className={className}> - <Header>Benefits</Header> - {_.map(BENEFITS, benefit => <BenefitItem key={benefit} description={benefit} />)} - </Container> - ); -}; -const BenefitsList = styled(PlainBenefitsList)` - transform: translateY(30px); -`; - -interface BenefitItemProps { - description: string; -} - -const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ description }) => ( - <Container marginBottom="15px"> - <div className="flex"> - <Circle className="flex-none pr2 pt1" diameter={8} fillColor={colors.black} /> - <div className="flex-auto"> - <Text fontSize="14px" lineHeight="24px"> - {description} - </Text> - </div> - </div> - </Container> -); - -interface ValuesListProps { - className?: string; -} -const PlainValuesList: React.StatelessComponent<ValuesListProps> = ({ className }) => { - return ( - <Container className={className} maxWidth="270px"> - <Header>Our Values</Header> - {_.map(VALUES, value => <ValueItem key={value.text} {...value} />)} - <Text fontSize="14px" lineHeight="26px"> - We care deeply about our culture and values, and encourage you to{' '} - <a - style={{ color: colors.mediumBlue, textDecoration: 'none' }} - target="_blank" - href={constants.URL_MISSION_AND_VALUES_BLOG_POST} - > - read more on our blog - </a>. - </Text> - </Container> - ); -}; - -const ValuesList = styled(PlainValuesList)` - border-color: ${colors.beigeWhite}; - border-radius: 7px; - border-width: 1px; - border-style: solid; - padding-left: 38px; - padding-right: 38px; - padding-top: 28px; - padding-bottom: 28px; -`; - -type ValueItemProps = Value; -const ValueItem: React.StatelessComponent<ValueItemProps> = ({ iconSrc, text }) => { - return ( - <Container marginBottom="25px"> - <div className="flex items-center"> - <Image className="flex-none pr2" width="20px" src={iconSrc} /> - <div className="flex-auto"> - <Text fontSize="14px" lineHeight="24px" fontWeight="bold"> - {text} - </Text> - </div> - </div> - </Container> - ); -}; diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx deleted file mode 100644 index 728e17f9e..000000000 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { colors, utils as sharedUtils } from '@0x/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 { MetaTags } from 'ts/components/meta_tags'; -import { TopBar } from 'ts/components/top_bar/top_bar'; -import { Container } from 'ts/components/ui/container'; -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 { Dispatcher } from 'ts/redux/dispatcher'; -import { ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; -import { utils } from 'ts/utils/utils'; - -const OPEN_POSITIONS_HASH = 'positions'; -const THROTTLE_TIMEOUT = 100; -const DOCUMENT_TITLE = 'Careers at 0x'; -const DOCUMENT_DESCRIPTION = 'Join 0x in creating a tokenized world where all value can flow freely'; - -export interface JobsProps { - location: Location; - translate: Translate; - dispatcher: Dispatcher; - screenWidth: ScreenWidths; -} - -export interface JobsState {} - -export class Jobs extends React.Component<JobsProps, JobsState> { - // TODO: consolidate this small screen scaffolding into one place (its being used in portal and docs as well) - private readonly _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 { - return ( - <Container overflowX="hidden"> - <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} /> - <DocumentTitle title={DOCUMENT_TITLE} /> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - style={{ backgroundColor: colors.white, position: 'relative' }} - translate={this.props.translate} - /> - <Join0x onCallToActionClick={this._onJoin0xCallToActionClick.bind(this)} /> - <Mission screenWidth={this.props.screenWidth} /> - <Benefits screenWidth={this.props.screenWidth} /> - <OpenPositions hash={OPEN_POSITIONS_HASH} screenWidth={this.props.screenWidth} /> - <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> - </Container> - ); - } - private _onJoin0xCallToActionClick(): void { - sharedUtils.setUrlHash(OPEN_POSITIONS_HASH); - sharedUtils.scrollToHash(OPEN_POSITIONS_HASH, ''); - } - private _updateScreenWidth(): void { - const newScreenWidth = utils.getScreenWidth(); - this.props.dispatcher.updateScreenWidth(newScreenWidth); - } -} diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx deleted file mode 100644 index e869cd455..000000000 --- a/packages/website/ts/pages/jobs/join_0x.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { colors } from '@0x/react-shared'; - -import * as React from 'react'; - -import { Button } from 'ts/components/ui/button'; -import { Container } from 'ts/components/ui/container'; -import { Image } from 'ts/components/ui/image'; -import { Text } from 'ts/components/ui/text'; -import { constants } from 'ts/utils/constants'; - -const BUTTON_TEXT = 'View open positions'; - -export interface Join0xProps { - onCallToActionClick: () => void; -} - -export const Join0x = (props: Join0xProps) => ( - <div className="clearfix center lg-py4 md-py4" style={{ backgroundColor: colors.white, color: colors.black }}> - <div - className="mx-auto inline-block align-middle py4" - style={{ lineHeight: '44px', textAlign: 'center', position: 'relative' }} - > - <Container className="sm-hide xs-hide" position="absolute" left="100%" marginLeft="80px"> - <Image src="images/jobs/hero-dots-right.svg" width="400px" /> - </Container> - <Container className="sm-hide xs-hide" position="absolute" right="100%" marginRight="80px"> - <Image src="images/jobs/hero-dots-left.svg" width="400px" /> - </Container> - <div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}> - Join Us in Our Mission - </div> - <Container className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 sm-center" maxWidth="537px"> - <Text fontSize="14px" lineHeight="30px"> - At 0x, our mission is to create a tokenized world where all value can flow freely. - <br /> - <br />We are powering a growing ecosystem of decentralized applications and solving novel challenges - to make our technology intuitive, flexible, and accessible to all.{' '} - <a - style={{ color: colors.mediumBlue, textDecoration: 'none' }} - target="_blank" - href={constants.URL_MISSION_AND_VALUES_BLOG_POST} - > - Read more - </a>{' '} - about our mission, and join us in building financial infrastructure upon which the exchange of - anything of value will take place. - </Text> - </Container> - <div className="py3"> - <Button - type="button" - backgroundColor={colors.black} - width="290px" - fontColor={colors.white} - fontSize="18px" - fontFamily="Roboto Mono" - onClick={props.onCallToActionClick} - > - {BUTTON_TEXT} - </Button> - </div> - </div> - </div> -); diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx deleted file mode 100644 index 28546f985..000000000 --- a/packages/website/ts/pages/jobs/mission.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import * as React from 'react'; - -import { Container } from 'ts/components/ui/container'; -import { Image } from 'ts/components/ui/image'; -import { Text } from 'ts/components/ui/text'; -import { colors } from 'ts/style/colors'; -import { ScreenWidths } from 'ts/types'; - -export interface MissionProps { - screenWidth: ScreenWidths; -} -export const Mission = (props: MissionProps) => { - const shouldShowImage = props.screenWidth === ScreenWidths.Lg; - const image = <Image src="/images/jobs/world-map.svg" maxWidth="500px" maxHeight="280px" />; - const missionStatementClassName = !shouldShowImage ? 'center' : undefined; - const missionStatement = ( - <Container className={missionStatementClassName} maxWidth="388px"> - <Text fontFamily="Roboto Mono" fontSize="22px" lineHeight="31px"> - Powered by a Diverse<br />Worldwide Community - </Text> - <Container marginTop="32px"> - <Text fontSize="14px" lineHeight="2em"> - We're a highly technical team with varied backgrounds in engineering, science, business, finance, - and research. While the core team is headquartered in San Francisco, there are 30+ teams building on - 0x and hundreds of thousands of participants behind our efforts globally. We're passionate about - open-source software and decentralized technology's potential to act as an equalizing force in the - world. - </Text> - </Container> - </Container> - ); - return ( - <div - className="flex flex-column items-center py4 px3" - style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }} - > - {shouldShowImage ? ( - <Container className="flex items-center" maxWidth="1200px"> - {image} - <Container marginLeft="115px">{missionStatement}</Container> - </Container> - ) : ( - <Container className="flex flex-column items-center">{missionStatement}</Container> - )} - </div> - ); -}; diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx deleted file mode 100644 index b8442a9c4..000000000 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ /dev/null @@ -1,179 +0,0 @@ -import * as _ from 'lodash'; -import CircularProgress from 'material-ui/CircularProgress'; -import * as React from 'react'; - -import { Container } from 'ts/components/ui/container'; -import { Retry } from 'ts/components/ui/retry'; -import { Text } from 'ts/components/ui/text'; -import { colors } from 'ts/style/colors'; -import { styled } from 'ts/style/theme'; -import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types'; -import { backendClient } from 'ts/utils/backend_client'; -import { constants } from 'ts/utils/constants'; -import { utils } from 'ts/utils/utils'; - -const TABLE_ROW_MIN_HEIGHT = 100; - -export interface OpenPositionsProps { - hash: string; - screenWidth: ScreenWidths; -} -export interface OpenPositionsState { - jobInfos?: WebsiteBackendJobInfo[]; - error?: Error; -} - -export class OpenPositions extends React.Component<OpenPositionsProps, OpenPositionsState> { - 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); - const isSmallScreen = utils.isMobileWidth(this.props.screenWidth); - return ( - <Container id={this.props.hash} className="mx-auto pb4 px3 max-width-4"> - {!isSmallScreen && ( - <hr style={{ border: 0, borderTop: 1, borderStyle: 'solid', borderColor: colors.beigeWhite }} /> - )} - <Container marginTop="64px" marginBottom="50px"> - <Text fontFamily="Roboto Mono" fontSize="24px" fontColor={colors.black}> - Open Positions - </Text> - </Container> - {isReadyToRender ? this._renderTable() : this._renderLoading()} - </Container> - ); - } - 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 _renderTable(): React.ReactNode { - return ( - <Container width="100%"> - <div> - {_.map(this.state.jobInfos, jobInfo => { - return ( - <JobInfoTableRow - key={jobInfo.id} - screenWidth={this.props.screenWidth} - jobInfo={jobInfo} - onClick={this._openJobInfoUrl.bind(this, jobInfo)} - /> - ); - })} - </div> - <Container className="center" marginTop="70px"> - <Text fontStyle="italic" fontSize="14px"> - Interested in telling us why you'd be a valuable addition to the team outside of the positions - listed above?{' '} - <a - style={{ color: colors.mediumBlue, textDecoration: 'none' }} - href={`mailto:${constants.EMAIL_JOBS}`} - > - Email us! - </a> - </Text> - </Container> - </Container> - ); - } - 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 _openJobInfoUrl(jobInfo: WebsiteBackendJobInfo): void { - const url = jobInfo.url; - utils.openUrl(url); - } -} - -export interface JobInfoTableRowProps { - className?: string; - screenWidth: ScreenWidths; - jobInfo: WebsiteBackendJobInfo; - onClick?: (event: React.MouseEvent<HTMLElement>) => void; -} - -const PlainJobInfoTableRow: React.StatelessComponent<JobInfoTableRowProps> = ({ - className, - screenWidth, - jobInfo, - onClick, -}) => { - const isSmallScreen = screenWidth === ScreenWidths.Sm; - const titleClassName = isSmallScreen ? 'col col-12 center' : 'col col-5'; - const paddingLeft = isSmallScreen ? undefined : '30px'; - return ( - <Container className={className} onClick={onClick} marginBottom="30px" paddingLeft={paddingLeft}> - <Container className="flex items-center" minHeight={TABLE_ROW_MIN_HEIGHT} width="100%"> - <Container className="clearfix container" width="100%"> - <Container className={titleClassName}> - <Text fontSize="16px" fontWeight="bold" fontColor={colors.mediumBlue}> - {jobInfo.title} - </Text> - </Container> - {!isSmallScreen && ( - <Container className="col col-3"> - <Text fontSize="16px">{jobInfo.department}</Text> - </Container> - )} - {!isSmallScreen && ( - <Container className="col col-4 center"> - <Text fontSize="16px">{jobInfo.office}</Text> - </Container> - )} - </Container> - </Container> - </Container> - ); -}; - -export const JobInfoTableRow = styled(PlainJobInfoTableRow)` - cursor: pointer; - background-color: ${colors.grey100}; - border-radius: 7px; - &:hover { - opacity: 0.5; - } -`; diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx deleted file mode 100644 index acc9dcb91..000000000 --- a/packages/website/ts/pages/jobs/photo_rail.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { FilledImage } from 'ts/components/ui/filled_image'; - -export interface PhotoRailProps { - images: string[]; -} - -export const PhotoRail = (props: PhotoRailProps) => { - return ( - <div className="clearfix" style={{ height: 490 }}> - {_.map(props.images, (image: string) => { - return ( - <div key={image} className="col lg-col-4 md-col-4 col-12 center" style={{ height: '100%' }}> - <FilledImage src={image} /> - </div> - ); - })} - </div> - ); -}; |