feat(lsg): add new style for chrome, property pane and element pane

src/component/app.tsx

@@ -17,19 +17,24 @@ import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Store } from '../store';
 import styledComponents from 'styled-components';
+import { colors } from '../lsg/patterns/colors';
 
 globalStyles();
 
 const ElementPane = styledComponents.div`
-	flex: 2 0 0px;
+	flex: 3 0 60%;
+    overflow: scroll;
 `;
 
 const PropertyPane = styledComponents.div`
 	flex: 2 0 0px;
 `;
 
 const PatternsPane = styledComponents.div`
-	flex: 3 0 0px;
+	flex: 2 0 40%;
+    overflow: scroll;
+    border-top: 2px solid ${colors.grey70.toString()};
+    box-sizing: border-box;
 `;
 
 const ProjectPane = styledComponents.div`
@@ -82,7 +87,7 @@ class App extends React.Component<AppProps> {
 		// Todo: project and page don't update on page change
 		const project = this.props.store.getCurrentProject();
 		const page = this.props.store.getCurrentPage();
-		const title = `${project && project.getName()} - ${page && page.getName()}`;
+		const title = `${project && project.getName()} > ${page && page.getName()}`;
 
 		return (
 			<Layout directionVertical>

src/lsg/patterns/chrome/index.tsx

@@ -19,7 +19,7 @@ const StyledChrome = styled(Space).attrs({
 	width: 100%;
 	align-items: center;
 	font-family: ${fonts().NORMAL_FONT};
-	height: 38px;
+	height: 54px;
 	-webkit-app-region: drag;
 	-webkit-user-select: none;
 	user-select: none;
@@ -30,6 +30,7 @@ const StyledChromeTitle = styled.div`
 	align-items: center;
 	margin: 0 auto;
 	color: ${colors.grey36.toString()};
+    font-size: 15px;
 `;
 
 export default class Chrome extends React.Component<ChromeProps> {

src/lsg/patterns/layout/index.tsx

@@ -18,7 +18,7 @@ const StyledLayout = styled.div`
 const StyledMainArea = styled(StyledLayout)`
 	box-sizing: border-box;
 	height: 100vh;
-	padding-top: 38px;
+	padding-top: 54px;
 `;
 
 const StyledSideBar = styled(StyledLayout)`