feat: update styling of layout and element pane

src/component/container/app.tsx

@@ -1,30 +1,25 @@
-import Button, { Order } from '../../lsg/patterns/button';
+import AddButton from '../../lsg/patterns/add-button';
 import { ChromeContainer } from '../chrome/chrome-container';
-import { colors } from '../../lsg/patterns/colors';
-import Copy, { Size as CopySize } from '../../lsg/patterns/copy';
 import { remote } from 'electron';
 import { ElementList } from '../../component/container/element-list';
 import ElementPane from '../../lsg/patterns/panes/element-pane';
 import * as FileExtraUtils from 'fs-extra';
 import globalStyles from '../../lsg/patterns/global-styles';
-import { Headline } from '../../lsg/patterns/headline';
 import { IconName, IconRegistry } from '../../lsg/patterns/icons';
 import Layout, { MainArea, SideBar } from '../../lsg/patterns/layout';
-import Link from '../../lsg/patterns/link';
 import { createMenu } from '../../electron/menu';
 import * as MobX from 'mobx';
 import { observer } from 'mobx-react';
 import * as PathUtils from 'path';
-import { PatternListContainer } from '../../component/container/pattern-list';
+import { PatternListContainer } from './pattern-list';
 import PatternsPane from '../../lsg/patterns/panes/patterns-pane';
 import { PreviewPaneWrapper } from '../../component/container/preview-pane-wrapper';
 import * as ProcessUtils from 'process';
 import { PropertyList } from './property-list';
 import PropertyPane from '../../lsg/patterns/panes/property-pane';
 import * as React from 'react';
-import Space, { Size as SpaceSize } from '../../lsg/patterns/space';
-import SplashScreen from '../../lsg/patterns/splash-screen';
-import { Store } from '../../store/store';
+import { SplashScreen } from './splash-screen';
+import { RightPane, Store } from '../../store/store';
 
 globalStyles();
 
@@ -36,32 +31,22 @@ export class App extends React.Component {
 	private static PROPERTIES_LIST_ID = 'propertieslist';
 
 	@MobX.observable protected activeTab: string = App.PATTERN_LIST_ID;
+
 	private ctrlDown: boolean = false;
 	private shiftDown: boolean = false;
 
 	public constructor(props: {}) {
 		super(props);
 		this.handleTabNaviagtionClick = this.handleTabNaviagtionClick.bind(this);
-		this.handleMainWindowClick = this.handleMainWindowClick.bind(this);
-		this.handleCreateNewSpaceClick = this.handleCreateNewSpaceClick.bind(this);
-		this.handleOpenSpaceClick = this.handleOpenSpaceClick.bind(this);
 	}
 
 	public componentDidMount(): void {
 		createMenu();
 		this.redirectUndoRedo();
 	}
 
-	private getDevTools(): React.StatelessComponent | null {
-		try {
-			const DevToolsExports = require('mobx-react-devtools');
-			return DevToolsExports ? DevToolsExports.default : undefined;
-		} catch (error) {
-			return null;
-		}
-	}
-
-	protected handleCreateNewSpaceClick(): void {
+	// TODO: Should move to store
+	protected createNewSpace(): void {
 		let appPath: string = remote.app.getAppPath().replace('.asar', '.asar.unpacked');
 		if (appPath.indexOf('node_modules') >= 0) {
 			appPath = ProcessUtils.cwd();
@@ -82,18 +67,20 @@ export class App extends React.Component {
 		);
 	}
 
+	private getDevTools(): React.StatelessComponent | null {
+		try {
+			const DevToolsExports = require('mobx-react-devtools');
+			return DevToolsExports ? DevToolsExports.default : undefined;
+		} catch (error) {
+			return null;
+		}
+	}
+
 	private handleMainWindowClick(): void {
 		Store.getInstance().setElementFocussed(false);
 		createMenu();
 	}
 
-	protected handleOpenSpaceClick(): void {
-		remote.dialog.showOpenDialog({ properties: ['openDirectory'] }, filePaths => {
-			store.openStyleguide(filePaths[0]);
-			store.openFirstPage();
-		});
-	}
-
 	protected handleTabNaviagtionClick(evt: React.MouseEvent<HTMLElement>, id: string): void {
 		this.activeTab = id;
 	}
@@ -106,6 +93,14 @@ export class App extends React.Component {
 		return this.activeTab === App.PROPERTIES_LIST_ID;
 	}
 
+	// TODO: Should move to store
+	protected openSpace(): void {
+		remote.dialog.showOpenDialog({ properties: ['openDirectory'] }, filePaths => {
+			store.openStyleguide(filePaths[0]);
+			store.openFirstPage();
+		});
+	}
+
 	private redirectUndoRedo(): void {
 		document.body.onkeydown = event => {
 			if (event.keyCode === 16) {
@@ -145,54 +140,52 @@ export class App extends React.Component {
 		const DevTools = this.getDevTools();
 
 		return (
-			<Layout directionVertical handleClick={this.handleMainWindowClick}>
+			<Layout directionVertical onClick={this.handleMainWindowClick}>
 				<ChromeContainer />
-
 				<MainArea>
-					{project && [
-						<SideBar key="left" directionVertical hasPaddings>
-							<ElementPane>
-								<ElementList />
-							</ElementPane>
-							<PatternsPane>
-								<PatternListContainer />
-							</PatternsPane>
-						</SideBar>,
-						<PreviewPaneWrapper key="center" previewFrame={previewFramePath} />,
-						<SideBar key="right" directionVertical hasPaddings>
-							<PropertyPane>
-								<PropertyList />
-							</PropertyPane>
-						</SideBar>
-					]}
-
-					{!project && (
-						<SplashScreen>
-							<Space sizeBottom={SpaceSize.L}>
-								<Headline textColor={colors.grey20} order={2}>
-									Getting started with Alva
-								</Headline>
-							</Space>
-							<Space sizeBottom={SpaceSize.XXXL}>
-								<Copy size={CopySize.M} textColor={colors.grey20}>
-									You can open an existing Alva space or create a new one based on our
-									designkit including some basic components to kickstart your project.
-								</Copy>
-							</Space>
-							<Space sizeBottom={SpaceSize.S}>
-								<Button handleClick={this.handleCreateNewSpaceClick} order={Order.Primary}>
-									Create new Alva space
-								</Button>
-							</Space>
-							<Link color={colors.grey50} onClick={this.handleOpenSpaceClick}>
-								<Copy size={CopySize.S}>or open existing Alva space</Copy>
-							</Link>
-						</SplashScreen>
+					{project ? (
+						<React.Fragment>
+							<SideBar
+								side="left"
+								directionVertical
+								onClick={() => store.setSelectedElement()}
+								hasBorder
+							>
+								<ElementPane>
+									<ElementList />
+								</ElementPane>
+								<AddButton
+									active={store.getRightPane() === RightPane.Patterns}
+									label="Add Elements"
+									onClick={e => {
+										e.stopPropagation();
+										store.setRightPane(RightPane.Patterns);
+										store.setSelectedElement();
+									}}
+								/>
+							</SideBar>
+							<PreviewPaneWrapper key="center" previewFrame={previewFramePath} />
+							<SideBar side="right" directionVertical hasBorder>
+								{store.getRightPane() === RightPane.Properties && (
+									<PropertyPane>
+										<PropertyList />
+									</PropertyPane>
+								)}
+								{store.getRightPane() === RightPane.Patterns && (
+									<PatternsPane>
+										<PatternListContainer />
+									</PatternsPane>
+								)}
+							</SideBar>
+						</React.Fragment>
+					) : (
+						<SplashScreen
+							onPrimaryButtonClick={() => this.createNewSpace()}
+							onSecondaryButtonClick={() => this.openSpace()}
+						/>
 					)}
 				</MainArea>
-
 				<IconRegistry names={IconName} />
-
 				{DevTools ? <DevTools /> : null}
 			</Layout>
 		);