diff options
Diffstat (limited to 'packages/website/ts/pages/jobs/open_positions.tsx')
| -rw-r--r-- | packages/website/ts/pages/jobs/open_positions.tsx | 174 |
1 files changed, 80 insertions, 94 deletions
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index e789795c1..b8442a9c4 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -1,20 +1,17 @@ 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'; +import { Container } from 'ts/components/ui/container'; import { Retry } from 'ts/components/ui/retry'; import { Text } from 'ts/components/ui/text'; -import { HeaderItem } from 'ts/pages/jobs/list/header_item'; -import { ListItem } from 'ts/pages/jobs/list/list_item'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; +import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; -const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; -const HEADER_TEXT = 'Open Positions'; const TABLE_ROW_MIN_HEIGHT = 100; export interface OpenPositionsProps { @@ -45,16 +42,21 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit } public render(): React.ReactNode { const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.jobInfos); + const isSmallScreen = utils.isMobileWidth(this.props.screenWidth); return ( - <div id={this.props.hash} className="mx-auto max-width-4"> - {isReadyToRender ? this._renderBody() : this._renderLoading()} - </div> + <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 _renderBody(): React.ReactNode { - const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; - return isSmallScreen ? this._renderList() : this._renderTable(); - } private _renderLoading(): React.ReactNode { return ( // TODO: consolidate this loading component with the one in portal and RelayerIndex @@ -68,66 +70,34 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit </div> ); } - 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: TABLE_ROW_MIN_HEIGHT, 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> + <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> { @@ -152,41 +122,57 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit } } } - private _onCellClick(rowNumber: number): void { - if (_.isUndefined(this.state.jobInfos)) { - return; - } - const jobInfo = this.state.jobInfos[rowNumber]; - this._openJobInfoUrl(jobInfo); - } - private _openJobInfoUrl(jobInfo: WebsiteBackendJobInfo): void { const url = jobInfo.url; utils.openUrl(url); } } -export interface JobInfoListItemProps { - title?: string; - description?: string; +export interface JobInfoTableRowProps { + className?: string; + screenWidth: ScreenWidths; + jobInfo: WebsiteBackendJobInfo; onClick?: (event: React.MouseEvent<HTMLElement>) => void; } -const PlainJobInfoListItem: React.StatelessComponent<JobInfoListItemProps> = ({ title, description, onClick }) => ( - <div className="mb3" onClick={onClick}> - <ListItem> - <Text fontWeight="bold" fontSize="16px" fontColor={colors.mediumBlue}> - {title + ' ›'} - </Text> - <Text className="pt1" fontSize="16px" fontColor={colors.darkGrey}> - {description} - </Text> - </ListItem> - </div> -); +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 JobInfoListItem = styled(PlainJobInfoListItem)` +export const JobInfoTableRow = styled(PlainJobInfoTableRow)` cursor: pointer; + background-color: ${colors.grey100}; + border-radius: 7px; &:hover { opacity: 0.5; } |