aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-14 19:55:06 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-14 19:55:22 +0800
commitfab3a90d5add060f2bfeb1dc470373af03fd6d83 (patch)
treef3ac82df3b2d900cd49abd775fd79f05d4f9345f /packages/website/ts/@next
parenta04c54b4d8fe96bf4b2f51b674fa9df87a58c2bb (diff)
downloaddexon-sol-tools-fab3a90d5add060f2bfeb1dc470373af03fd6d83.tar
dexon-sol-tools-fab3a90d5add060f2bfeb1dc470373af03fd6d83.tar.gz
dexon-sol-tools-fab3a90d5add060f2bfeb1dc470373af03fd6d83.tar.bz2
dexon-sol-tools-fab3a90d5add060f2bfeb1dc470373af03fd6d83.tar.lz
dexon-sol-tools-fab3a90d5add060f2bfeb1dc470373af03fd6d83.tar.xz
dexon-sol-tools-fab3a90d5add060f2bfeb1dc470373af03fd6d83.tar.zst
dexon-sol-tools-fab3a90d5add060f2bfeb1dc470373af03fd6d83.zip
Adds mission office photo
Diffstat (limited to 'packages/website/ts/@next')
-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
4 files changed, 30 insertions, 14 deletions
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;
+ }
+`;