diff options
Diffstat (limited to 'packages')
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; |