aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/@next/components/footer.tsx2
-rw-r--r--packages/website/ts/@next/components/hero.tsx4
-rw-r--r--packages/website/ts/@next/components/heroImage.tsx2
-rw-r--r--packages/website/ts/@next/components/newLayout.tsx27
4 files changed, 20 insertions, 15 deletions
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index d6f11b653..0a9decd76 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -108,7 +108,7 @@ const LinkList = (props: LinkListProps) => (
</List>
);
-const FooterSection = styled.section`
+const FooterSection = styled.footer`
padding: 30px;
margin-top: 30px;
background-color: #181818;
diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx
index d17856b8a..3a16c12bb 100644
--- a/packages/website/ts/@next/components/hero.tsx
+++ b/packages/website/ts/@next/components/hero.tsx
@@ -4,8 +4,8 @@ import styled from 'styled-components';
interface Props {
title: string;
description: string;
- figure?: React.Node;
- actions?: React.Node;
+ figure?: React.ReactNode;
+ actions?: React.ReactNode;
}
export const Hero = (props: Props) => (
diff --git a/packages/website/ts/@next/components/heroImage.tsx b/packages/website/ts/@next/components/heroImage.tsx
index 51b35480b..7b9014c37 100644
--- a/packages/website/ts/@next/components/heroImage.tsx
+++ b/packages/website/ts/@next/components/heroImage.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
interface Props {
- image: React.Node;
+ image: React.ReactNode;
}
export const LandingAnimation = (props: Props) => (
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index 4c5afd318..f4cf19e29 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -1,14 +1,13 @@
import * as React from 'react';
import styled from 'styled-components';
-interface FlexProps {
- padding?: string;
- isFlex?: boolean;
-}
-
-interface WrapProps extends FlexProps {
+interface WrapProps {
+ offsetTop?: string;
+ maxWidth?: string;
isFullWidth?: boolean;
isTextCentered?: boolean;
+ isCentered?: boolean;
+ isWrapped?: boolean;
}
interface WrapGridProps {
@@ -30,10 +29,16 @@ interface SectionProps extends WrapProps {
bgColor?: 'dark' | 'light' | string;
}
+interface FlexProps {
+ padding?: string;
+ isFlex?: boolean;
+ flexBreakpoint?: string;
+}
+
interface ColumnProps {
+ padding?: string;
width?: string;
maxWidth?: string;
- padding?: string;
}
export const Section = (props: SectionProps) => {
@@ -60,7 +65,7 @@ export const Column = styled.div<ColumnProps>`
}
`;
-export const FlexWrap = styled.div<SectionProps>`
+export const FlexWrap = styled.div<FlexProps>`
padding: ${props => props.padding};
@media (min-width: ${props => props.flexBreakpoint || '768px'}) {
@@ -69,7 +74,7 @@ export const FlexWrap = styled.div<SectionProps>`
}
`;
-export const WrapSticky = styled.div<WrapStickyProps>`
+export const WrapSticky = styled.div<WrapProps>`
position: sticky;
top: ${props => props.offsetTop || '60px'};
`;
@@ -87,7 +92,7 @@ const SectionBase = styled.section<SectionProps>`
`;
const Wrap = styled(FlexWrap)<WrapProps>`
- width: ${props => !props.isFullWidth && 'calc(100% - 60px)'};
+ width: calc(100% - 60px);
max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
text-align: ${props => props.isTextCentered && 'center'};
margin: 0 auto;
@@ -97,7 +102,7 @@ const Wrap = styled(FlexWrap)<WrapProps>`
}
`;
-export const WrapGrid = styled(Wrap)<WrapGridProps>`
+export const WrapGrid = styled(Wrap)<WrapProps>`
display: flex;
flex-wrap: ${props => props.isWrapped && `wrap`};
justify-content: ${props => props.isCentered ? `center` : 'space-between'};