diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/website/ts/@next/components/aboutPageLayout.tsx | 26 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 3 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/text.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/why.tsx | 6 |
4 files changed, 27 insertions, 10 deletions
diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx index 9f55c2e81..002d35c0c 100644 --- a/packages/website/ts/@next/components/aboutPageLayout.tsx +++ b/packages/website/ts/@next/components/aboutPageLayout.tsx @@ -7,6 +7,8 @@ import { Column, Section } from 'ts/@next/components/newLayout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Paragraph } from 'ts/@next/components/text'; +import { addFadeInAnimation } from 'ts/@next/constants/animations'; + interface Props { title: string; description: React.Node; @@ -26,18 +28,18 @@ export const AboutPageLayout = (props: Props) => ( <Column width="70%" maxWidth="800px"> <Column width="100%" maxWidth="680px"> - <Heading size="medium"> + <AnimatedHeading size="medium"> {props.title} - </Heading> + </AnimatedHeading> - <Paragraph size="medium" marginBottom="60px" isMuted={0.65}> + <AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}> {props.description} - </Paragraph> + </AnimatedParagraph> {(props.linkLabel && props.linkUrl) && - <Link href={props.linkUrl} isNoBorder={true} isWithArrow={true}> + <AnimatedLink href={props.linkUrl} isNoBorder={true} isWithArrow={true}> {props.linkLabel} - </Link> + </AnimatedLink> } </Column> </Column> @@ -46,3 +48,15 @@ export const AboutPageLayout = (props: Props) => ( {props.children} </SiteWrap> ); + +const AnimatedHeading = styled(Heading)` + ${addFadeInAnimation('0.5s')} +`; + +const AnimatedParagraph = styled(Paragraph)` + ${addFadeInAnimation('0.5s', '0.15s')} +`; + +const AnimatedLink = styled(Link)` + ${addFadeInAnimation('0.6s', '0.3s')} +`; diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index fab917eeb..48efb6e6b 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -29,6 +29,7 @@ const GLOBAL_THEMES: ThemeInterface = { darkBgColor: '#111A19', lightBgColor: '#003831', textColor: '#FFFFFF', + paragraphColor: '#777777', linkColor: colors.brandLight, dropdownBg: '#111A19', dropdownButtonBg: '#003831', @@ -40,6 +41,7 @@ const GLOBAL_THEMES: ThemeInterface = { light: { bgColor: '#FFFFFF', textColor: '#000000', + paragraphColor: '#474747', linkColor: colors.brandDark, dropdownBg: '#FBFBFB', dropdownButtonBg: '#F3F6F4', @@ -52,6 +54,7 @@ const GLOBAL_THEMES: ThemeInterface = { gray: { bgColor: '#e0e0e0', textColor: '#000000', + paragraphColor: '#777777', linkColor: colors.brandDark, dropdownBg: '#FFFFFF', dropdownButtonBg: '#F3F6F4', diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 2ce47513f..9e801003f 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -63,7 +63,7 @@ export const Paragraph = styled.p<ParagraphProps>` font-size: ${props => `var(--${props.size || 'default'}Paragraph)`}; margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')}; padding: ${props => props.padding && getCSSPadding(props.padding)}; - color: ${props => props.color || props.theme.textColor}; + color: ${props => props.color || props.theme.paragraphColor}; opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted}; text-align: ${props => props.isCentered && 'center'}; line-height: 1.4; diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 7b30cd25a..18c4dc092 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -137,7 +137,7 @@ export class NextWhy extends React.PureComponent { <Column width="55%" maxWidth="826px"> <Column width="100%" maxWidth="560px" padding="0 30px 0 0"> <SectionWrap id="benefits"> - <Heading size="medium">What 0x offers</Heading> + <Heading size="medium" marginBottom="60px">What 0x offers</Heading> {_.map(offersData, (item, index) => ( <Definition @@ -151,7 +151,7 @@ export class NextWhy extends React.PureComponent { </SectionWrap> <SectionWrap id="cases" isNotRelative={true}> - <Heading size="medium">Use Cases</Heading> + <Heading size="medium" marginBottom="60px">Use Cases</Heading> <Slider> {_.map(useCaseSlides, (item, index) => ( <Slide @@ -165,7 +165,7 @@ export class NextWhy extends React.PureComponent { </SectionWrap> <SectionWrap id="functionality"> - <Heading size="medium">Exchange Functionality</Heading> + <Heading size="medium" marginBottom="60px">Exchange Functionality</Heading> {_.map(functionalityData, (item, index) => ( <Definition |