aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/components')
-rw-r--r--packages/website/ts/@next/components/banner.tsx1
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx8
-rw-r--r--packages/website/ts/@next/components/dropdowns/mock.tsx5
-rw-r--r--packages/website/ts/@next/components/footer.tsx37
-rw-r--r--packages/website/ts/@next/components/header.tsx43
-rw-r--r--packages/website/ts/@next/components/sections/landing/cta.tsx7
6 files changed, 42 insertions, 59 deletions
diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx
index a3740c25a..7141a4eb1 100644
--- a/packages/website/ts/@next/components/banner.tsx
+++ b/packages/website/ts/@next/components/banner.tsx
@@ -4,7 +4,6 @@ import styled from 'styled-components';
import {colors} from 'ts/style/colors';
import {Button} from 'ts/@next/components/button';
-import {Wrap, WrapCentered} from 'ts/@next/components/layout';
import {ThemeInterface} from 'ts/@next/components/siteWrap';
import {Heading, Paragraph} from 'ts/@next/components/text';
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
index 8a4db2656..317302d44 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -4,7 +4,7 @@ import {Link as RouterLink} from 'react-router-dom';
import styled, {withTheme} from 'styled-components';
import {Button} from 'ts/@next/components/button';
-import {Column, Wrap, WrapGrid} from 'ts/@next/components/layout';
+import {Column, FlexWrap, WrapGrid} from 'ts/@next/components/newLayout';
import {Heading} from 'ts/@next/components/text';
import {GlobalStyle} from 'ts/@next/constants/globalStyle';
@@ -90,7 +90,7 @@ export const DropdownDevelopers = withTheme((props: Props) => (
</div>
<StyledWrap>
- <Column colWidth="1/2" isNoPadding={true}>
+ <Column width="calc(100% - 15px)">
<Heading
asElement="h4"
size={14}
@@ -112,7 +112,7 @@ export const DropdownDevelopers = withTheme((props: Props) => (
</ul>
</Column>
- <Column colWidth="1/2" isNoPadding={true}>
+ <Column width="calc(100% - 15px)">
<Heading asElement="h4" size={14} color="inherit" isMuted={0.35}>
Useful Links
</Heading>
@@ -155,7 +155,7 @@ const StyledGrid = styled(WrapGrid.withComponent('ul'))`
}
`;
-const StyledWrap = styled(Wrap)`
+const StyledWrap = styled(FlexWrap)`
padding-top: 20px;
margin-top: 30px;
position: relative;
diff --git a/packages/website/ts/@next/components/dropdowns/mock.tsx b/packages/website/ts/@next/components/dropdowns/mock.tsx
deleted file mode 100644
index 9ead533d6..000000000
--- a/packages/website/ts/@next/components/dropdowns/mock.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from 'react';
-
-export const Dropdown = () => (
- <div>Dropdown menu placeholder</div>
-);
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index defc4ba81..11d18c7f7 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -3,15 +3,10 @@ import * as React from 'react';
import { Link as ReactRouterLink } from 'react-router-dom';
import styled from 'styled-components';
-import { colors } from 'ts/style/colors';
-
-import { BREAKPOINTS, Column, Section, Wrap, WrapGrid } from 'ts/@next/components/layout';
import { Logo } from 'ts/@next/components/logo';
+import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
import { NewsletterForm } from 'ts/@next/components/newsletter_form';
-interface FooterInterface {
-}
-
interface LinkInterface {
text: string;
url: string;
@@ -66,15 +61,15 @@ const linkRows: LinkRows[] = [
},
];
-export const Footer: React.StatelessComponent<FooterInterface> = ({}) => (
- <FooterWrap bgColor="#181818" isNoMargin={true} padding={40}>
- <Wrap>
- <FooterColumn width="35%" isNoPadding={true}>
+export const Footer: React.StatelessComponent = () => (
+ <FooterWrap>
+ <FlexWrap>
+ <FooterColumn width="35%">
<Logo isLight={true} />
<NewsletterForm />
</FooterColumn>
- <FooterColumn width="55%" isNoPadding={true}>
+ <FooterColumn width="55%">
<WrapGrid isCentered={false} isWrapped={true}>
{_.map(linkRows, (row, index) => (
<FooterSectionWrap
@@ -92,7 +87,7 @@ export const Footer: React.StatelessComponent<FooterInterface> = ({}) => (
))}
</WrapGrid>
</FooterColumn>
- </Wrap>
+ </FlexWrap>
</FooterWrap>
);
@@ -108,38 +103,40 @@ const LinkList = (props: LinkListProps) => (
</List>
);
-const FooterSection = styled.footer`
+const FooterWrap = styled.footer`
padding: 40px 30px 30px 30px;
margin-top: 30px;
background-color: ${props => props.theme.footerBg};
-`;
-
-const FooterWrap = styled(FooterSection)`
color: ${props => props.theme.footerColor};
path {
fill: ${props => props.theme.footerColor};
}
- @media (min-width: ${BREAKPOINTS.mobile}) {
+ @media (min-width: 768px) {
height: 350px;
}
`;
const FooterColumn = styled(Column)`
- @media (min-width: ${BREAKPOINTS.mobile}) {
+ @media (min-width: 768px) {
width: ${props => props.width};
}
- @media (max-width: ${BREAKPOINTS.mobile}) {
+ @media (max-width: 768px) {
display: ${props => props.isMobileHidden && 'none'};
text-align: left;
}
`;
const FooterSectionWrap = styled(FooterColumn)`
- @media (max-width: ${BREAKPOINTS.mobile}) {
+ @media (max-width: 768px) {
width: 50%;
+
+ & + & {
+ margin-top: 0;
+ margin-bottom: 30px;
+ }
}
`;
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index d7046ec7a..c5c67ac80 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -3,18 +3,14 @@ import * as React from 'react';
import { Link as ReactRouterLink } from 'react-router-dom';
import styled, { withTheme } from 'styled-components';
-import { colors } from 'ts/style/colors';
-
import { Button } from 'ts/@next/components/button';
import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
-import { Dropdown } from 'ts/@next/components/dropdowns/mock';
import { Hamburger } from 'ts/@next/components/hamburger';
-import { BREAKPOINTS, Section, Wrap } from 'ts/@next/components/layout';
import { Logo } from 'ts/@next/components/logo';
-import { Paragraph } from 'ts/@next/components/text';
-
import { MobileNav } from 'ts/@next/components/mobileNav';
+import { FlexWrap } from 'ts/@next/components/newLayout';
+import { Paragraph } from 'ts/@next/components/text';
interface HeaderProps {
isOpen: boolean;
@@ -96,11 +92,15 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
<Logo/>
</ReactRouterLink>
- <StyledButtonWrap>
+ <NavLinks>
{_.map(navItems, (link, index) => (
- <NavItem link={link} index={index} />
+ <NavItem
+ key={`navlink-${index}`}
+ link={link}
+ index={index}
+ />
))}
- </StyledButtonWrap>
+ </NavLinks>
<TradeButton
bgColor={theme.headerButtonBg}
@@ -113,8 +113,8 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
<Hamburger onClick={toggleMobileNav}/>
<MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
</HeaderWrap>
- </StyledHeader>
- );
+ </StyledHeader>
+ );
}
}
@@ -122,11 +122,10 @@ export const Header = withTheme(HeaderBase);
const NavItem = (props): React.ReactNode => {
const { link, index } = props;
- const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment;
const Subnav = link.dropdownComponent;
return (
- <Wrapper key={`nav-${index}`}>
+ <LinkWrap key={`nav-${index}`}>
<StyledNavLink
to={link.url}
isTransparent={true}
@@ -140,24 +139,22 @@ const NavItem = (props): React.ReactNode => {
<Subnav />
</DropdownWrap>
}
- </Wrapper>
+ </LinkWrap>
);
};
-const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
+const StyledHeader = styled.header<HeaderProps>`
+ padding: 30px;
+
@media (max-width: 800px) {
min-height: ${props => props.isOpen ? '385px' : '70px'};
overflow: hidden;
position: relative;
transition: min-height 0.25s ease-in-out;
}
-
- @media (max-width: 800px) {
- background-color: ${props => props.theme.bgColor};
- }
`;
-const LinkWrap = styled.div`
+const LinkWrap = styled.li`
position: relative;
a {
@@ -189,7 +186,7 @@ const StyledNavLink = styled(ReactRouterLink).attrs({
}
`;
-const HeaderWrap = styled(Wrap)`
+const HeaderWrap = styled(FlexWrap)`
justify-content: space-between;
align-items: center;
@@ -200,7 +197,7 @@ const HeaderWrap = styled(Wrap)`
}
`;
-const StyledButtonWrap = styled.div`
+const NavLinks = styled.ul`
display: flex;
align-items: center;
justify-content: space-between;
@@ -249,7 +246,7 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`
margin-left: -11px;
}
- @media (max-width: ${BREAKPOINTS.mobile}) {
+ @media (max-width: 768px) {
display: none;
}
`;
diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx
index 5a0617256..49fc48c1c 100644
--- a/packages/website/ts/@next/components/sections/landing/cta.tsx
+++ b/packages/website/ts/@next/components/sections/landing/cta.tsx
@@ -1,12 +1,7 @@
import * as React from 'react';
-import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
-import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
-import {Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
-import {Heading, Paragraph} from 'ts/@next/components/text';
-
-import {Column, Section} from 'ts/@next/components/newLayout';
import {BlockIconLink} from 'ts/@next/components/blockIconLink';
+import {Section} from 'ts/@next/components/newLayout';
interface Props {
onContactClick?: () => void;