diff --git a/src/component/app.tsx b/src/component/app.tsx index 5efd31346..a911857f7 100644 --- a/src/component/app.tsx +++ b/src/component/app.tsx @@ -17,11 +17,13 @@ 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` @@ -29,7 +31,10 @@ const PropertyPane = styledComponents.div` `; 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 { // 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 ( diff --git a/src/lsg/patterns/chrome/index.tsx b/src/lsg/patterns/chrome/index.tsx index f25929d4c..9980213f5 100644 --- a/src/lsg/patterns/chrome/index.tsx +++ b/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 { diff --git a/src/lsg/patterns/layout/index.tsx b/src/lsg/patterns/layout/index.tsx index a43822d9b..2be96b6ca 100644 --- a/src/lsg/patterns/layout/index.tsx +++ b/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)`