aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/public/images/@next/about/about-mission@2x.jpgbin148591 -> 0 bytes
-rwxr-xr-xpackages/website/public/images/@next/about/about-office.pngbin0 -> 474673 bytes
-rw-r--r--packages/website/ts/@next/components/button.tsx6
-rw-r--r--packages/website/ts/@next/components/header.tsx1
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx3
-rw-r--r--packages/website/ts/@next/pages/about/mission.tsx34
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
Binary files differ
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
Binary files differ
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;
+ }
+`;