Add new 404 page

packages/website/ts/components/siteWrap.tsx

@@ -9,6 +9,7 @@ import { GlobalStyles } from 'ts/constants/globalStyle';
 
 interface Props {
     theme?: 'dark' | 'light' | 'gray';
+    isFullScreen?: boolean;
     children: any;
 }
 
@@ -18,6 +19,7 @@ interface State {
 
 interface MainProps {
     isNavToggled: boolean;
+    isFullScreen?: boolean;
 }
 
 export interface ThemeValuesInterface {
@@ -118,7 +120,7 @@ export class SiteWrap extends React.Component<Props, State> {
     };
 
     public render(): React.ReactNode {
-        const { children, theme = 'dark' } = this.props;
+        const { children, theme = 'dark', isFullScreen } = this.props;
         const { isMobileNavOpen } = this.state;
         const currentTheme = GLOBAL_THEMES[theme];
 
@@ -130,7 +132,7 @@ export class SiteWrap extends React.Component<Props, State> {
 
                         <Header isNavToggled={isMobileNavOpen} toggleMobileNav={this.toggleMobileNav} />
 
-                        <Main isNavToggled={isMobileNavOpen}>{children}</Main>
+                        <Main isNavToggled={isMobileNavOpen} isFullScreen={isFullScreen}>{children}</Main>
 
                         <Footer />
                     </>
@@ -143,4 +145,10 @@ export class SiteWrap extends React.Component<Props, State> {
 const Main = styled.main<MainProps>`
     transition: transform 0.5s, opacity 0.5s;
     opacity: ${props => props.isNavToggled && '0.5'};
+
+    ${props => props.isFullScreen && `
+        display: flex;
+        align-items: center;
+        min-height: calc(100vh - 108px - 381px);
+    `}
 `;

packages/website/ts/pages/fullscreen_message.tsx

@@ -1,30 +1,32 @@
-import { Styles } from '@0x/react-shared';
 import * as React from 'react';
+import styled from 'styled-components';
+import { colors } from 'ts/style/colors';
 
 export interface FullscreenMessageProps {
     headerText: string;
     bodyText: string;
 }
 
-const styles: Styles = {
-    thin: {
-        fontWeight: 100,
-    },
-};
-
 export const FullscreenMessage = (props: FullscreenMessageProps) => {
     return (
         <div className="mx-auto max-width-4 py4">
             <div className="center py4">
-                <div className="py4">
+                <Heading>{props.headerText}</Heading>
-                    <div className="py4">
+                <Paragraph>{props.bodyText}</Paragraph>
-                        <h1 style={styles.thin}>{props.headerText}</h1>
-                        <div className="py1">
-                            <div className="py3">{props.bodyText}</div>
-                        </div>
-                    </div>
-                </div>
             </div>
         </div>
     );
 };
+
+const Heading = styled.h1`
+    color: ${colors.brandLight};
+    font-size: 78px;
+    font-weight: 300;
+    margin-bottom: 35px;
+`;
+
+const Paragraph = styled.p`
+    color: #7A7A7A;
+    font-size: 22px;
+    line-height: 1.409090909;
+`;

packages/website/ts/pages/not_found.tsx

@@ -1,6 +1,10 @@
+import { utils as sharedUtils } from '@0x/react-shared';
+import * as _ from 'lodash';
 import * as React from 'react';
-import { Footer } from 'ts/components/old_footer';
+import DocumentTitle from 'react-document-title';
-import { TopBar } from 'ts/components/top_bar/top_bar';
+import styled, { keyframes } from 'styled-components';
+
+import { SiteWrap } from 'ts/components/siteWrap';
 import { FullscreenMessage } from 'ts/pages/fullscreen_message';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { Translate } from 'ts/utils/translate';
@@ -11,15 +15,17 @@ export interface NotFoundProps {
     dispatcher: Dispatcher;
 }
 
-export const NotFound = (props: NotFoundProps) => {
+export class NotFound extends React.Component<NotFoundProps> {
-    return (
+    public render(): React.ReactNode {
-        <div>
+        return (
-            <TopBar blockchainIsLoaded={false} location={props.location} translate={props.translate} />
+            <SiteWrap isFullScreen={true}>
-            <FullscreenMessage
+                <DocumentTitle title="404 Page Not Found" />
-                headerText={'404 Not Found'}
+
-                bodyText={"Hm... looks like we couldn't find what you are looking for."}
+                <FullscreenMessage
-            />
+                    headerText={'404'}
-            <Footer translate={props.translate} dispatcher={props.dispatcher} />
+                    bodyText={"Hm... looks like we couldn't find what you are looking for."}
-        </div>
+                />
-    );
+            </SiteWrap>
-};
+        );
+    }
+}