feat: move styles from component to lsg

src/component/app.tsx

@@ -4,7 +4,7 @@ import { ElementList } from './container/element_list';
 import { IconName, IconRegistry } from '../lsg/patterns/icons';
 import { fonts } from '../lsg/patterns/fonts/index';
 import { JsonObject } from '../store/json';
-import Layout from '../lsg/patterns/layout';
+import Layout, {MainArea, SideBar} from '../lsg/patterns/layout';
 import { createMenu } from './menu';
 import * as MobX from 'mobx';
 import { observer } from 'mobx-react';
@@ -29,17 +29,6 @@ injectGlobal`
 	}
 `;
 
-const MainArea = styledComponents(Layout)`
-	box-sizing: border-box;
-	height: 100vh;
-	padding-top: 38px;
-`;
-
-const SideBar = styledComponents(Layout)`
-	flex-basis: 240px;
-	overflow-y: scroll;
-`;
-
 const ElementPane = styledComponents.div`
 	flex: 2 0 0px;
 `;

src/lsg/patterns/layout/index.tsx

@@ -15,6 +15,37 @@ const StyledLayout = styled.div`
 	${(props: LayoutProps) => (props.hasMargins ? `margin: 0 ${getSpace(Size.L)}px` : '')};
 `;
 
+const StyledMainArea = styled(StyledLayout)`
+	box-sizing: border-box;
+	height: 100vh;
+	padding-top: 38px;
+`;
+
+const StyledSideBar = styled(StyledLayout)`
+	flex-basis: 240px;
+	overflow-y: scroll;
+`;
+
+export const MainArea: React.StatelessComponent<LayoutProps> = props => (
+	<StyledMainArea
+		className={props.className}
+		directionVertical={props.directionVertical}
+		hasMargins={props.hasMargins}
+	>
+		{props.children}
+	</StyledMainArea>
+);
+
+export const SideBar: React.StatelessComponent<LayoutProps> = props => (
+	<StyledSideBar
+		className={props.className}
+		directionVertical={props.directionVertical}
+		hasMargins={props.hasMargins}
+	>
+		{props.children}
+	</StyledSideBar>
+);
+
 const Layout: React.StatelessComponent<LayoutProps> = props => (
 	<StyledLayout
 		className={props.className}