aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-13 00:39:31 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-13 00:39:45 +0800
commit98325e1cfb4f6c732728fe2943895fad2cb03be5 (patch)
tree30f0c731521d7426523141e4f09ed0b20f3cb367
parent356b7df534054c0e1fbe5899b953dea6c99d2081 (diff)
downloaddexon-0x-contracts-98325e1cfb4f6c732728fe2943895fad2cb03be5.tar
dexon-0x-contracts-98325e1cfb4f6c732728fe2943895fad2cb03be5.tar.gz
dexon-0x-contracts-98325e1cfb4f6c732728fe2943895fad2cb03be5.tar.bz2
dexon-0x-contracts-98325e1cfb4f6c732728fe2943895fad2cb03be5.tar.lz
dexon-0x-contracts-98325e1cfb4f6c732728fe2943895fad2cb03be5.tar.xz
dexon-0x-contracts-98325e1cfb4f6c732728fe2943895fad2cb03be5.tar.zst
dexon-0x-contracts-98325e1cfb4f6c732728fe2943895fad2cb03be5.zip
Tests animations on about page headers
-rw-r--r--packages/website/ts/@next/components/aboutPageLayout.tsx26
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx3
-rw-r--r--packages/website/ts/@next/components/text.tsx2
-rw-r--r--packages/website/ts/@next/pages/why.tsx6
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