Merge pull request #685 from 0xProject/feature/website/jobs-page

Jobs page

packages/website/ts/components/redirecter.tsx → packages/website/ts/components/redirector.tsx

@@ -1,9 +1,9 @@
 import { constants } from 'ts/utils/constants';
 
-interface RedirecterProps {
+interface RedirectorProps {
     location: string;
 }
 
-export function Redirecter(_props: RedirecterProps): void {
+export function Redirector(_props: RedirectorProps): void {
     window.location.href = constants.URL_ANGELLIST;
 }

packages/website/ts/components/relayer_index/relayer_index.tsx

@@ -1,11 +1,11 @@
 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';
 
 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 +63,8 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
         const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos);
         if (!isReadyToRender) {
             return (
-                // TODO: consolidate this loading component with the one in portal
+                // TODO: consolidate this loading component with the one in portal and OpenPositions
+                // 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} />
@@ -124,31 +125,3 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
         }
     }
 }
-
-interface RetryProps {
-    onRetry: () => void;
-}
-const Retry = (props: RetryProps) => (
-    <div className="clearfix center" style={{ color: colors.black }}>
-        <div className="mx-auto inline-block align-middle" style={{ lineHeight: '44px', textAlign: 'center' }}>
-            <div className="h2" style={{ fontFamily: 'Roboto Mono' }}>
-                Something went wrong.
-            </div>
-            <div className="py3">
-                <FlatButton
-                    label={'reload'}
-                    backgroundColor={colors.black}
-                    labelStyle={{
-                        fontSize: 18,
-                        fontFamily: 'Roboto Mono',
-                        fontWeight: 'lighter',
-                        color: colors.white,
-                        textTransform: 'lowercase',
-                    }}
-                    style={{ width: 280, height: 62, borderRadius: 5 }}
-                    onClick={props.onRetry}
-                />
-            </div>
-        </div>
-    </div>
-);

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';

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',
+        }}
+    />
+);

packages/website/ts/components/ui/retry.tsx

@@ -0,0 +1,32 @@
+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;
+}
+export const Retry = (props: RetryProps) => (
+    <div className="clearfix center" style={{ color: colors.black }}>
+        <div className="mx-auto inline-block align-middle" style={{ lineHeight: '44px', textAlign: 'center' }}>
+            <div className="h2" style={{ fontFamily: 'Roboto Mono' }}>
+                Something went wrong.
+            </div>
+            <div className="py3">
+                <Button
+                    type="button"
+                    backgroundColor={colors.black}
+                    width="290px"
+                    fontColor={colors.white}
+                    fontSize="18px"
+                    fontFamily="Roboto Mono"
+                    onClick={props.onRetry}
+                >
+                    {BUTTON_TEXT}
+                </Button>
+            </div>
+        </div>
+    </div>
+);

packages/website/ts/components/ui/text.tsx

@@ -11,8 +11,9 @@ export interface TextProps {
     fontFamily?: string;
     fontColor?: string;
     lineHeight?: string;
+    minHeight?: string;
     center?: boolean;
-    fontWeight?: number;
+    fontWeight?: number | string;
 }
 
 const PlainText: React.StatelessComponent<TextProps> = ({ children, className, Tag }) => (
@@ -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};
+    ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')};
 `;
 
 Text.defaultProps = {

packages/website/ts/containers/jobs.ts

@@ -0,0 +1,28 @@
+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 { ScreenWidths } from 'ts/types';
+import { Translate } from 'ts/utils/translate';
+
+interface ConnectedState {
+    translate: Translate;
+    screenWidth: ScreenWidths;
+}
+
+interface ConnectedDispatch {
+    dispatcher: Dispatcher;
+}
+
+const mapStateToProps = (state: State, _ownProps: JobsProps): ConnectedState => ({
+    translate: state.translate,
+    screenWidth: state.screenWidth,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    dispatcher: new Dispatcher(dispatch),
+});
+
+export const Jobs: React.ComponentClass<JobsProps> = connect(mapStateToProps, mapDispatchToProps)(JobsComponent);

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 { Redirector } from 'ts/components/redirector';
 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,12 @@ render(
                         <Switch>
                             <Route exact={true} path="/" component={Landing as any} />
                             <Redirect from="/otc" to={`${WebsitePaths.Portal}`} />
-
-                            <Route path={WebsitePaths.Jobs} component={Redirecter 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} />

packages/website/ts/pages/jobs/benefits.tsx

@@ -0,0 +1,109 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { FilledImage } from 'ts/components/ui/filled_image';
+import { HeaderItem } from 'ts/pages/jobs/list/header_item';
+import { ListItem } from 'ts/pages/jobs/list/list_item';
+import { 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 BENEFIT_ITEM_PROPS_LIST: BenefitItemProps[] = [
+    {
+        bulletColor: '#6FCF97',
+        description:
+            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
+    },
+    {
+        bulletColor: '#56CCF2',
+        description:
+            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
+    },
+    {
+        bulletColor: '#EB5757',
+        description:
+            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
+    },
+    {
+        bulletColor: '#6FCF97',
+        description:
+            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
+    },
+    {
+        bulletColor: '#56CCF2',
+        description:
+            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
+    },
+];
+const LARGE_LAYOUT_HEIGHT = 937;
+const LARGE_LAYOUT_BENEFITS_LIST_PADDING_LEFT = 205;
+const HEADER_TEXT = 'Benefits';
+const BENEFIT_ITEM_MIN_HEIGHT = 150;
+
+export interface BenefitsProps {
+    screenWidth: ScreenWidths;
+}
+
+export const Benefits = (props: BenefitsProps) => (
+    <div style={{ backgroundColor: colors.jobsPageBackground }}>
+        {props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />}
+    </div>
+);
+
+const LargeLayout = () => (
+    <div className="flex" style={{ height: LARGE_LAYOUT_HEIGHT }}>
+        <div style={{ width: '43%', height: '100%' }}>
+            <ImageGrid />
+        </div>
+        <div
+            className="pr4"
+            style={{ paddingLeft: LARGE_LAYOUT_BENEFITS_LIST_PADDING_LEFT, width: '57%', height: '100%' }}
+        >
+            <BenefitsList />
+        </div>
+    </div>
+);
+
+const SmallLayout = () => (
+    <div>
+        <FilledImage src={_.head(IMAGE_PATHS)} />
+        <BenefitsList />
+    </div>
+);
+
+export const BenefitsList = () => {
+    return (
+        <div>
+            <HeaderItem headerText={HEADER_TEXT} />
+            {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => <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%' }}>
+        <div className="flex" style={{ height: '67%' }}>
+            <FilledImage src={IMAGE_PATHS[0]} />
+        </div>
+        <div className="clearfix" style={{ height: '33%' }}>
+            <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}>
+                <FilledImage src={IMAGE_PATHS[1]} />
+            </div>
+            <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}>
+                <FilledImage src={IMAGE_PATHS[2]} />
+            </div>
+        </div>
+    </div>
+);