Adds mission office photo

6 files changed, 30 insertions, 14 deletions

diff --git a/packages/website/public/images/@next/about/about-mission@2x.jpg b/packages/website/public/images/@next/about/about-mission@2x.jpg
deleted file mode 100644
index bc701d812..000000000
--- a/packages/website/public/images/@next/about/about-mission@2x.jpg
+++ /dev/null
diff --git a/packages/website/public/images/@next/about/about-office.png b/packages/website/public/images/@next/about/about-office.png
new file mode 100755
index 000000000..432d18a8b
--- /dev/null
+++ b/packages/website/public/images/@next/about/about-office.png
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 4c646e199..fb7c913a5 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import { Link as ReactRouterLink, NavLink as ReactRouterNavLink } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { ThemeInterface } from 'ts/@next/components/siteWrap';
+
 import { colors } from 'ts/style/colors';
 
 interface ButtonInterface {
@@ -19,9 +21,7 @@ interface ButtonInterface {
     type?: string;
     to?: string;
     onClick?: () => any;
-    theme?: {
-        textColor: string;
-    };
+    theme: ThemeInterface;
 }
 
 export const Button = (props: ButtonInterface) => {
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 881ec799e..fc754af7e 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -102,7 +102,6 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
                             <NavItem
                                 key={`navlink-${index}`}
                                 link={link}
-                                index={index}
                             />
                         ))}
                     </NavLinks>
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index e0956c582..cc7e4a098 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -7,8 +7,6 @@ import { Footer } from 'ts/@next/components/footer';
 import { Header } from 'ts/@next/components/header';
 import { GlobalStyles } from 'ts/@next/constants/globalStyle';
 
-// Note(ez): We'll define the theme and provide it via a prop
-// e.g. theme dark/light/etc.
 interface Props {
     theme?: 'dark' | 'light' | 'gray';
     children: any;
@@ -22,7 +20,6 @@ interface MainProps {
     isNavToggled: boolean;
 }
 
-// we proabbly want to put this somewhere else (themes)
 export interface ThemeInterface {
     [key: string]: {
         bgColor: string;
diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx
index b06130345..286d2629f 100644
--- a/packages/website/ts/@next/pages/about/mission.tsx
+++ b/packages/website/ts/@next/pages/about/mission.tsx
@@ -35,13 +35,14 @@ export const NextAboutMission = () => (
         linkLabel="Our mission and values"
         linkUrl="#"
     >
-        <Section isFullWidth={true}>
-            <Image
-                src="/images/@next/about/about-mission@2x.jpg"
-                height="372"
-                alt=""
-                isCentered={true}
-            />
+        <Section isFullWidth={true} isPadded={false}>
+            <FullWidthImage>
+                <Image
+                    src="/images/@next/about/about-office.png"
+                    alt="0x Offices"
+                    isCentered={true}
+                />
+            </FullWidthImage>
         </Section>
 
         <Section isFlex={true} maxWidth="1170px" wrapWidth="100%">
@@ -74,3 +75,22 @@ const StyledDefinition = styled(Definition)`
         border-top: 1px solid #eaeaea;
     }
 `;
+
+const FullWidthImage = styled.figure`
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    @media (min-width: 768px) {
+        height: 500px;
+    }
+
+    @media (max-width: 768px) {
+        height: 400px;
+    }
+`;