diff options
author | Fred Carlsen <fred@sjelfull.no> | 2018-12-12 20:55:59 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-12 22:49:23 +0800 |
commit | 39ceff3d6ef64a284f0513febe448fe139ab1922 (patch) | |
tree | b8a477ced62413098af00b1c3796901ee1221dc6 | |
parent | fa501e9c9313584d212b53282b73dc5390b29725 (diff) | |
download | dexon-0x-contracts-39ceff3d6ef64a284f0513febe448fe139ab1922.tar dexon-0x-contracts-39ceff3d6ef64a284f0513febe448fe139ab1922.tar.gz dexon-0x-contracts-39ceff3d6ef64a284f0513febe448fe139ab1922.tar.bz2 dexon-0x-contracts-39ceff3d6ef64a284f0513febe448fe139ab1922.tar.lz dexon-0x-contracts-39ceff3d6ef64a284f0513febe448fe139ab1922.tar.xz dexon-0x-contracts-39ceff3d6ef64a284f0513febe448fe139ab1922.tar.zst dexon-0x-contracts-39ceff3d6ef64a284f0513febe448fe139ab1922.zip |
Type fixes
-rw-r--r-- | packages/website/ts/@next/components/footer.tsx | 2 | ||||
-rw-r--r-- | packages/website/ts/@next/components/hero.tsx | 4 | ||||
-rw-r--r-- | packages/website/ts/@next/components/heroImage.tsx | 2 | ||||
-rw-r--r-- | packages/website/ts/@next/components/newLayout.tsx | 27 |
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'}; |