aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-30 23:25:37 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-30 23:25:54 +0800
commit5c12e664a96296dae720433deb8bf98b10a5fbcb (patch)
tree4affdf2110d3d5df49f4d4710081ca068893aaeb /packages/website/ts
parent46422ff78302a410178b42947e1b483b712c920f (diff)
downloaddexon-sol-tools-5c12e664a96296dae720433deb8bf98b10a5fbcb.tar
dexon-sol-tools-5c12e664a96296dae720433deb8bf98b10a5fbcb.tar.gz
dexon-sol-tools-5c12e664a96296dae720433deb8bf98b10a5fbcb.tar.bz2
dexon-sol-tools-5c12e664a96296dae720433deb8bf98b10a5fbcb.tar.lz
dexon-sol-tools-5c12e664a96296dae720433deb8bf98b10a5fbcb.tar.xz
dexon-sol-tools-5c12e664a96296dae720433deb8bf98b10a5fbcb.tar.zst
dexon-sol-tools-5c12e664a96296dae720433deb8bf98b10a5fbcb.zip
WIP themeprovider
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx63
-rw-r--r--packages/website/ts/@next/components/text.tsx8
-rw-r--r--packages/website/ts/@next/constants/globalStyle.tsx23
-rw-r--r--packages/website/ts/@next/pages/landing.tsx4
4 files changed, 67 insertions, 31 deletions
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index a175c6901..6c29b3c43 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import styled from 'styled-components';
+import styled, { ThemeProvider } from 'styled-components';
import { Footer } from 'ts/@next/components/footer';
import { Header } from 'ts/@next/components/header';
@@ -9,23 +9,54 @@ import { GlobalStyles } from 'ts/@next/constants/globalStyle';
// Note(ez): We'll define the theme and provide it via a prop
// e.g. theme dark/light/etc.
interface Props {
+ theme?: 'dark' | 'light' | 'gray';
+ children: any;
+}
+
+interface GlobalThemes {
+ [key: string]: {
+ bgColor: string;
+ textColor: string;
+ }
+}
+const GLOBAL_THEMES: GlobalThemes = {
+ dark: {
+ bgColor: '#000000',
+ textColor: '#FFFFFF',
+ },
+ light: {
+ bgColor: '#FFFFFF',
+ textColor: '#FFFFFF',
+ },
+ gray: {
+ bgColor: '#e0e0e0',
+ textColor: '#FFFFFF',
+ },
}
export const SiteWrap: React.StatelessComponent<Props> = props => {
- const { children } = props;
-
- return (
- <>
- {/* GlobalStyles will be exposed the theme via provider,
- same is true for all children of SiteWrap
- */}
- <GlobalStyles />
- <Header />
- <Main>
- {children}
- </Main>
- <Footer/>
- </>
- );
+ const {
+ children,
+ theme = 'dark',
+ } = props;
+ const currentTheme = GLOBAL_THEMES[theme];
+
+ return (
+ <>
+ <ThemeProvider theme={currentTheme}>
+ <>
+ <GlobalStyles />
+
+ <Header />
+
+ <Main>
+ { children }
+ </Main>
+
+ <Footer/>
+ </>
+ </ThemeProvider>
+ </>
+ );
};
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index c0d683973..9e16c9411 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
import { colors } from 'ts/style/colors';
interface HeadingProps {
@@ -47,7 +47,7 @@ const PARAGRAPH_SIZES: ParagraphSizes = {
};
const StyledHeading = styled.h1<HeadingProps>`
- color: ${props => props.color || colors.white};
+ color: ${props => props.color || props.theme.textColor};
font-size: ${props => HEADING_SIZES[props.size || 'default']};
font-weight: 300;
margin-bottom: ${props => !props.noMargin && '30px'};
@@ -60,7 +60,6 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => {
children,
} = props;
const Component = StyledHeading.withComponent(asElement);
-
return <Component {...props}>{children}</Component>;
};
@@ -69,6 +68,7 @@ export const Paragraph = styled.p<ParagraphProps>`
font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']};
margin-bottom: ${props => !props.noMargin && '30px'};
line-height: 1.4;
- color: ${props => `rgba(255, 255, 255, ${props.muted || 0.75})`};
+ color: ${props => props.color || props.theme.textColor};
+ opacity: ${props => props.muted || 0.75};
text-align: ${props => props.center && 'center'};
`;
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index d33a8e68c..72c8a933e 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -1,11 +1,16 @@
-import {createGlobalStyle} from 'styled-components';
+import { withTheme, createGlobalStyle } from 'styled-components';
import {cssReset} from 'ts/@next/constants/cssReset';
import {colors} from 'ts/style/colors';
-// Not sure if cssReset is already imported into index.tsx Also: currently
-// createglobalStyle from styled-components is throwing a warning about how
-// there's not typing exported from styled-comps
-const GlobalStyles = createGlobalStyle `
+
+interface GlobalStyle {
+ theme: {
+ bgColor: string;
+ textColor: string;
+ }
+}
+
+const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
${cssReset};
@font-face {
@@ -24,13 +29,13 @@ const GlobalStyles = createGlobalStyle `
html {
font-size: 18px;
- background-color: ${colors.backgroundBlack};
+ background-color: ${props => props.theme.bgColor};
}
body {
font-family: 'Formular', sans-serif !important;
-webkit-font-smoothing: antialiased;
- color: ${colors.white};
+ color: ${props => props.theme.textColor};
}
.visuallyHidden {
@@ -58,6 +63,6 @@ const GlobalStyles = createGlobalStyle `
color: inherit;
text-decoration: none;
}
-`;
+`);
-export {GlobalStyles};
+export { GlobalStyles };
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index a2afab97e..137bcda7d 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -25,8 +25,8 @@ import SupportIcon from 'ts/@next/icons/illustrations/support.svg';
</SiteWrap>
*/
-export const NextLanding = () => (
- <SiteWrap>
+export const NextLanding: React.StatelessComponent<{}> = () => (
+ <SiteWrap theme="dark">
<Section>
<Wrap>
<Column colWidth="1/2">