From 34dfd73aabf63fe20cc1cd708df01c91ed915b87 Mon Sep 17 00:00:00 2001 From: Piotr Janosz Date: Thu, 25 Jul 2019 01:37:29 +0200 Subject: [PATCH] Cleaned up siteWrap for docs and elsewhere. Converted the other sitewrap to function component. --- .../ts/components/annoucement_banner.tsx | 5 +- packages/website/ts/components/banner.tsx | 4 +- packages/website/ts/components/button.tsx | 4 +- .../components/docs/{ => header}/header.tsx | 6 +- .../docs/{ => header}/mobileNav.tsx | 0 .../docs/layout/docs_page_layout.tsx | 3 +- .../ts/components/docs/layout/siteWrap.tsx | 61 ++++++++ .../website/ts/components/docs/siteWrap.tsx | 143 ----------------- .../dropdowns/dropdown_developers.tsx | 4 +- .../dropdowns/dropdown_resources.tsx | 4 +- packages/website/ts/components/header.tsx | 4 +- packages/website/ts/components/logo.tsx | 4 +- packages/website/ts/components/siteWrap.tsx | 147 +++--------------- .../ts/pages/explore/explore_tag_button.tsx | 4 +- packages/website/ts/style/theme.ts | 87 ++++++++++- 15 files changed, 191 insertions(+), 289 deletions(-) rename packages/website/ts/components/docs/{ => header}/header.tsx (96%) rename packages/website/ts/components/docs/{ => header}/mobileNav.tsx (100%) create mode 100644 packages/website/ts/components/docs/layout/siteWrap.tsx delete mode 100644 packages/website/ts/components/docs/siteWrap.tsx diff --git a/packages/website/ts/components/annoucement_banner.tsx b/packages/website/ts/components/annoucement_banner.tsx index 2ed4b3ad1d..e18a5d29dc 100644 --- a/packages/website/ts/components/annoucement_banner.tsx +++ b/packages/website/ts/components/annoucement_banner.tsx @@ -5,9 +5,10 @@ import { colors } from 'ts/style/colors'; import { zIndex } from 'ts/style/z_index'; import { Button } from 'ts/components/button'; -import { ThemeInterface } from 'ts/components/siteWrap'; import { Paragraph } from 'ts/components/text'; +import { IThemeInterface } from 'ts/style/theme'; + import { Column, Section, SectionProps } from 'ts/components/newLayout'; interface Props { @@ -16,7 +17,7 @@ interface Props { onDismiss?: () => void; mainCta?: CTAButton; secondaryCta?: CTAButton; - theme?: ThemeInterface; + theme?: IThemeInterface; dismissed?: boolean; } diff --git a/packages/website/ts/components/banner.tsx b/packages/website/ts/components/banner.tsx index 4df5e0082b..c6e9b37f20 100644 --- a/packages/website/ts/components/banner.tsx +++ b/packages/website/ts/components/banner.tsx @@ -4,7 +4,7 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; import { Button } from 'ts/components/button'; -import { ThemeInterface } from 'ts/components/siteWrap'; +import { IThemeInterface } from 'ts/style/theme'; import { Paragraph } from 'ts/components/text'; import { Column, Section } from 'ts/components/newLayout'; @@ -15,7 +15,7 @@ interface Props { customCta?: React.ReactNode; mainCta?: CTAButton; secondaryCta?: CTAButton; - theme?: ThemeInterface; + theme?: IThemeInterface; } interface CTAButton { diff --git a/packages/website/ts/components/button.tsx b/packages/website/ts/components/button.tsx index bc38131d63..900c8f7451 100644 --- a/packages/website/ts/components/button.tsx +++ b/packages/website/ts/components/button.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Link as ReactRouterLink } from 'react-router-dom'; import styled from 'styled-components'; -import { ThemeInterface } from 'ts/components/siteWrap'; +import { IThemeInterface } from 'ts/style/theme'; import { colors } from 'ts/style/colors'; import { withFilteredProps } from 'ts/utils/filter_props'; @@ -30,7 +30,7 @@ export interface ButtonInterface { textAlign?: string; to?: string; onClick?: (e: any) => any; - theme?: ThemeInterface; + theme?: IThemeInterface; shouldUseAnchorTag?: boolean; } diff --git a/packages/website/ts/components/docs/header.tsx b/packages/website/ts/components/docs/header/header.tsx similarity index 96% rename from packages/website/ts/components/docs/header.tsx rename to packages/website/ts/components/docs/header/header.tsx index 057f595f60..2b417deabe 100644 --- a/packages/website/ts/components/docs/header.tsx +++ b/packages/website/ts/components/docs/header/header.tsx @@ -5,13 +5,13 @@ import styled, { css } from 'styled-components'; import { Link } from '@0x/react-shared'; -import { MobileNav } from 'ts/components/docs/mobileNav'; +import { MobileNav } from 'ts/components/docs/header/mobileNav'; import { SearchInput } from 'ts/components/docs/search/search_input'; import { Hamburger } from 'ts/components/hamburger'; import { Logo } from 'ts/components/logo'; import { FlexWrap } from 'ts/components/newLayout'; -import { ThemeValuesInterface } from 'ts/components/siteWrap'; + import { IThemeValuesInterface } from 'ts/style/theme'; import { colors } from 'ts/style/colors'; import { zIndex } from 'ts/style/z_index'; @@ -149,7 +149,7 @@ const LinkWrap = styled.li` } `; -const linkStyles = css<{ theme: ThemeValuesInterface }>` +const linkStyles = css<{ theme: IThemeValuesInterface }>` color: ${({ theme }) => theme.textColor}; opacity: 0.5; transition: opacity 0.35s; diff --git a/packages/website/ts/components/docs/mobileNav.tsx b/packages/website/ts/components/docs/header/mobileNav.tsx similarity index 100% rename from packages/website/ts/components/docs/mobileNav.tsx rename to packages/website/ts/components/docs/header/mobileNav.tsx diff --git a/packages/website/ts/components/docs/layout/docs_page_layout.tsx b/packages/website/ts/components/docs/layout/docs_page_layout.tsx index ee75153f0f..2c5dc0ea3d 100644 --- a/packages/website/ts/components/docs/layout/docs_page_layout.tsx +++ b/packages/website/ts/components/docs/layout/docs_page_layout.tsx @@ -6,7 +6,8 @@ import CircularProgress from 'material-ui/CircularProgress'; import { Hero } from 'ts/components/docs/hero'; import { ScrollTopArrow } from 'ts/components/docs/layout/scroll_top_arrow'; -import { SiteWrap } from 'ts/components/docs/siteWrap'; +import { SiteWrap } from 'ts/components/docs/layout/siteWrap'; + import { DocumentTitle } from 'ts/components/document_title'; import { Section } from 'ts/components/newLayout'; diff --git a/packages/website/ts/components/docs/layout/siteWrap.tsx b/packages/website/ts/components/docs/layout/siteWrap.tsx new file mode 100644 index 0000000000..5e23b5e6ff --- /dev/null +++ b/packages/website/ts/components/docs/layout/siteWrap.tsx @@ -0,0 +1,61 @@ +import React, { useEffect, useState } from 'react'; +import styled, { ThemeProvider } from 'styled-components'; + +import { Header } from 'ts/components/docs/header/header'; +import { Footer } from 'ts/components/footer'; + +import { GlobalStyles } from 'ts/constants/globalStyle'; +import { GLOBAL_THEMES } from 'ts/style/theme'; + +interface ISiteWrapProps { + theme?: 'dark' | 'light' | 'gray'; + isFullScreen?: boolean; + children: any; +} + +interface IMainProps { + isNavToggled: boolean; + isFullScreen?: boolean; +} + +export const SiteWrap: React.FC = props => { + const { children, theme = 'dark', isFullScreen } = props; + const [isMobileNavOpen, setIsMobileNavOpen] = useState(false); + + useEffect(() => { + document.documentElement.style.overflowY = 'auto'; + window.scrollTo(0, 0); + }, []); + + const toggleMobileNav = () => setIsMobileNavOpen(!isMobileNavOpen); + + return ( + + <> + + +
+ +
+ {children} +
+ +