diff options
| -rw-r--r-- | packages/website/public/images/@next/about/about-mission@2x.jpg | bin | 148591 -> 0 bytes | |||
| -rwxr-xr-x | packages/website/public/images/@next/about/about-office.png | bin | 0 -> 474673 bytes | |||
| -rw-r--r-- | packages/website/ts/@next/components/button.tsx | 6 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 1 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 3 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/about/mission.tsx | 34 |
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 Binary files differdeleted 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 Binary files differnew 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; + } +`; |
