move global styles to components package

packages/app/src/components/Layout.tsx

@@ -1,34 +1,12 @@
 import React from "react";
-import { css, Global } from "@emotion/core";
-import emotionNormalize from "emotion-normalize";
-import { theme } from "@joystream/components";
+import { GlobalStyle } from "@joystream/components";
 
 type LayoutProps = { children: React.ReactNode };
 
-const globalStyles = css`
-	${emotionNormalize};
-
-	body {
-		box-sizing: border-box;
-		font-family: ${theme.typography.fonts.base};
-		background: ${theme.colors.black};
-		color: ${theme.colors.gray[500]};
-	}
-
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		font-family: ${theme.typography.fonts.headers};
-		color: ${theme.colors.white};
-	}
-`;
 export default function Layout({ children }: LayoutProps) {
 	return (
 		<>
-			<Global styles={globalStyles} />
+			<GlobalStyle />
 			{children}
 		</>
 	);

packages/components/.storybook/preview.jsx

@@ -3,8 +3,8 @@ import { css } from "@emotion/core";
 import { addDecorator, addParameters } from "@storybook/react";
 import { withKnobs } from "@storybook/addon-knobs";
 import { jsxDecorator } from "storybook-addon-jsx";
-import { Layout } from "app/src/components";
 import theme from "./theme";
+import GlobalStyle from "../src/components/GlobalStyle";
 
 const wrapperStyle = css`
 	padding: 10px;
@@ -12,7 +12,8 @@ const wrapperStyle = css`
 
 const stylesWrapperDecorator = (styleFn) => (
 	<div css={wrapperStyle}>
-		<Layout>{styleFn()}</Layout>
+		<GlobalStyle />
+		{styleFn()}
 	</div>
 );
 

packages/components/src/components/GlobalStyle/GlobalStyle.tsx

@@ -0,0 +1,29 @@
+import { css, Global } from "@emotion/core";
+import emotionNormalize from "emotion-normalize";
+import { typography, colors } from "../../theme";
+import React from "react";
+
+const globalStyles = css`
+	${emotionNormalize};
+
+	body {
+		box-sizing: border-box;
+		font-family: ${typography.fonts.base};
+		background: ${colors.black};
+		color: ${colors.gray[500]};
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-family: ${typography.fonts.headers};
+		color: ${colors.white};
+	}
+`;
+
+const GlobalStyle: React.FC = () => <Global styles={globalStyles} />;
+
+export default GlobalStyle;

packages/components/src/components/GlobalStyle/index.ts

@@ -0,0 +1,2 @@
+import GlobalStyle from "./GlobalStyle";
+export default GlobalStyle;

packages/components/src/index.ts

@@ -1,23 +1,24 @@
-import * as theme from "./theme"
+import * as theme from "./theme";
 
-export { default as Button } from "./components/Button"
-export { default as Carousel } from "./components/Carousel"
-export { default as Dropdown } from "./components/Dropdown"
-export { default as Grid } from "./components/Grid"
-export { default as Header } from "./components/Header"
-export { default as Link } from "./components/Link"
-export { default as NavButton } from "./components/NavButton"
-export { default as RadioButton } from "./components/RadioButton"
-export { default as Checkbox } from "./components/Checkbox"
-export { default as TagButton } from "./components/TagButton"
-export { default as Tabs } from "./components/Tabs"
-export { default as Tab } from "./components/Tabs/Tab"
-export { default as Tag } from "./components/Tag"
-export { default as TextField } from "./components/TextField"
-export { default as Typography } from "./components/Typography"
-export { default as VideoPreview } from "./components/VideoPreview"
-export { default as VideoPlayer } from "./components/VideoPlayer"
-export { default as SeriesPreview } from "./components/SeriesPreview"
-export { default as ChannelPreview } from "./components/ChannelPreview"
-export { default as Gallery } from "./components/Gallery"
-export { theme }
+export { default as Button } from "./components/Button";
+export { default as Carousel } from "./components/Carousel";
+export { default as Dropdown } from "./components/Dropdown";
+export { default as Grid } from "./components/Grid";
+export { default as Header } from "./components/Header";
+export { default as Link } from "./components/Link";
+export { default as NavButton } from "./components/NavButton";
+export { default as RadioButton } from "./components/RadioButton";
+export { default as Checkbox } from "./components/Checkbox";
+export { default as TagButton } from "./components/TagButton";
+export { default as Tabs } from "./components/Tabs";
+export { default as Tab } from "./components/Tabs/Tab";
+export { default as Tag } from "./components/Tag";
+export { default as TextField } from "./components/TextField";
+export { default as Typography } from "./components/Typography";
+export { default as VideoPreview } from "./components/VideoPreview";
+export { default as VideoPlayer } from "./components/VideoPlayer";
+export { default as SeriesPreview } from "./components/SeriesPreview";
+export { default as ChannelPreview } from "./components/ChannelPreview";
+export { default as Gallery } from "./components/Gallery";
+export { default as GlobalStyle } from "./components/GlobalStyle";
+export { theme };