Tests animations on about page headers

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