diff options
Diffstat (limited to 'packages/website/ts/@next/components')
7 files changed, 65 insertions, 13 deletions
diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx index 982e764af..6c4d94dc5 100644 --- a/packages/website/ts/@next/components/banner.tsx +++ b/packages/website/ts/@next/components/banner.tsx @@ -31,7 +31,7 @@ interface BorderProps { export const Banner: React.StatelessComponent<Props> = (props: Props) => { const { heading, subline, mainCta, secondaryCta } = props; return ( - <CustomSection bgColor="light" isFlex={true} flexBreakpoint="900px" paddingMobile="120px 0"> + <CustomSection bgColor={colors.brandDark} isFlex={true} flexBreakpoint="900px" paddingMobile="120px 0"> <Border /> <Border isBottom={true} /> diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index b686b27a2..fdf396ef0 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -73,6 +73,12 @@ const ButtonBase = outline: none; transition: background-color 0.35s, border-color 0.35s; + // @todo Refactor to use theme props + ${props => props.bgColor === 'dark' && ` + background-color: ${colors.brandDark}; + color: ${colors.white}; + `} + svg { margin-left: 9px; transition: transform 0.5s; diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index d203151b9..965466f60 100644 --- a/packages/website/ts/@next/components/definition.tsx +++ b/packages/website/ts/@next/components/definition.tsx @@ -19,6 +19,7 @@ interface Props { isWithMargin?: boolean; icon: string; iconSize?: 'medium' | 'large' | number; + fontSize?: 'default' | 'medium' | number; title: string; titleSize?: 'small' | 'default' | number; description: React.ReactNode | string; @@ -40,7 +41,7 @@ export const Definition = (props: Props) => ( </Heading> {typeof props.description === 'string' ? ( - <Paragraph isMuted={true}>{props.description}</Paragraph> + <Paragraph isMuted={true} size={props.fontSize || 'default'}>{props.description}</Paragraph> ) : ( <>{props.description}</> )} @@ -107,6 +108,9 @@ const TextWrap = } li { + color: ${props => props.theme.paragraphColor}; + font-size: ${props => `var(--${props.fontSize || 'default'}Paragraph)`}; + font-weight: 300; list-style: disc; opacity: 0.75; line-height: 1.444444444; diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index e6b49e395..24bfa28ba 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -176,6 +176,7 @@ const StyledNavLink = styled(Link).attrs({ const StyledAnchor = styled.a` ${linkStyles}; + cursor: default; `; const HeaderWrap = styled(FlexWrap)` diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx index 46e2ca6d9..c79e2a6eb 100644 --- a/packages/website/ts/@next/components/hero.tsx +++ b/packages/website/ts/@next/components/hero.tsx @@ -5,8 +5,11 @@ import {addFadeInAnimation} from 'ts/@next/constants/animations'; interface Props { title: string; + maxWidth?: string; + maxWidthHeading?: string; isLargeTitle?: boolean; isFullWidth?: boolean; + isCenteredMobile?: boolean; description: string; figure?: React.ReactNode; actions?: React.ReactNode; @@ -14,15 +17,15 @@ interface Props { export const Hero = (props: Props) => ( <Section> - <Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth}> + <Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth} isCenteredMobile={props.isCenteredMobile}> {props.figure && <Content width="400px"> {props.figure} </Content> } - <Content width={props.figure ? '546px' : '678px'}> - <Title isLarge={props.isLargeTitle}> + <Content width={props.maxWidth ? props.maxWidth : (props.figure ? '546px' : '678px')}> + <Title isLarge={props.isLargeTitle} maxWidth={props.maxWidthHeading}> {props.title} </Title> @@ -40,6 +43,10 @@ export const Hero = (props: Props) => ( </Section> ); +Hero.defaultProps = { + isCenteredMobile: true, +}; + const Section = styled.section` padding: 120px 0; @@ -48,7 +55,7 @@ const Section = styled.section` } `; -const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean }>` +const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean; isCenteredMobile?: boolean }>` width: calc(100% - 60px); margin: 0 auto; @@ -62,15 +69,18 @@ const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean }>` } @media (max-width: 768px) { - text-align: center; + text-align: ${props => props.isCenteredMobile ? `center` : 'left'}; } `; -const Title = styled.h1<{ isLarge?: any }>` +const Title = styled.h1<{ isLarge?: any; maxWidth?: string }>` font-size: ${props => props.isLarge ? '80px' : '50px'}; font-weight: 300; line-height: 1.1; + margin-left: auto; + margin-right: auto; margin-bottom: 30px; + max-width: ${props => props.maxWidth}; ${addFadeInAnimation('0.5s')} @media (max-width: 1024px) { @@ -85,9 +95,10 @@ const Title = styled.h1<{ isLarge?: any }>` const Description = styled.p` font-size: 22px; line-height: 31px; + font-weight: 300; padding: 0; margin-bottom: 50px; - color: rgba(255, 255, 255, 0.75); + color: ${props => props.theme.introTextColor}; ${addFadeInAnimation('0.5s', '0.15s')} @media (max-width: 1024px) { @@ -117,4 +128,19 @@ const ButtonWrap = styled.div` > *:nth-child(2) { ${addFadeInAnimation('0.6s', '0.4s')} } + + @media (max-width: 500px) { + flex-direction: column; + justify-content: center; + + * { + padding-left: 20px; + padding-right: 20px; + } + + * + * { + margin-left: 0; + margin-top: 12px; + } + } `; diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx index bf2577581..87a0fe562 100644 --- a/packages/website/ts/@next/components/sections/landing/about.tsx +++ b/packages/website/ts/@next/components/sections/landing/about.tsx @@ -26,13 +26,14 @@ export const SectionLandingAbout = () => ( instruments to assets that could have never existed before. </Paragraph> - <Button href={`${WebsitePaths.Why}#cases`} isWithArrow={true} isAccentColor={true}> + <DeveloperLink href={`${WebsitePaths.Why}#cases`} isWithArrow={true} isAccentColor={true}> Discover how developers use 0x - </Button> + </DeveloperLink> <hr style={{ - width: '340px', + width: '100%', + maxWidth: '340px', borderColor: '#3C4746', margin: '60px auto', }} @@ -55,6 +56,15 @@ const Figure = (props: FigureProps) => ( </Column> ); +const DeveloperLink = styled(Button)` + @media (max-width: 500px) { + && { + white-space: pre-wrap; + line-height: 1.3; + } + } +`; + const FigureValue = styled.dt` font-size: 50px; font-weight: 300; diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index ad7691885..db91fe08a 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -24,6 +24,7 @@ export interface ThemeValuesInterface { bgColor: string; darkBgColor?: string; lightBgColor: string; + introTextColor: string; textColor: string; paragraphColor: string; linkColor: string; @@ -48,6 +49,7 @@ const GLOBAL_THEMES: ThemeInterface = { bgColor: '#000000', darkBgColor: '#111A19', lightBgColor: '#003831', + introTextColor: 'rgba(255, 255, 255, 0.75)', textColor: '#FFFFFF', paragraphColor: '#FFFFFF', linkColor: colors.brandLight, @@ -63,7 +65,9 @@ const GLOBAL_THEMES: ThemeInterface = { }, light: { bgColor: '#FFFFFF', - lightBgColor: '#003831', + lightBgColor: '#F3F6F4', + darkBgColor: '#003831', + introTextColor: 'rgba(92, 92, 92, 0.87)', textColor: '#000000', paragraphColor: '#474747', linkColor: colors.brandDark, @@ -81,6 +85,7 @@ const GLOBAL_THEMES: ThemeInterface = { gray: { bgColor: '#e0e0e0', lightBgColor: '#003831', + introTextColor: 'rgba(92, 92, 92, 0.87)', textColor: '#000000', paragraphColor: '#777777', linkColor: colors.brandDark, |