Fixes toolArea close, add close button

Fix: click somewhere to close toolArea
Add: close button to toolArea

app/lib/components/ToolArea/ToolArea.jsx

@@ -23,7 +23,8 @@ class ToolArea extends React.Component
 			toolAreaOpen,
 			unreadMessages,
 			unreadFiles,
-			toggleToolArea
+			toggleToolArea,
+			closeToolArea
 		} = this.props;
 
 		const VisibleTab = {
@@ -43,11 +44,17 @@ class ToolArea extends React.Component
 				/>
 
 				<div
-					data-component='ToolArea' 
+					data-component='ToolArea'
 					className={classNames({
 						open : toolAreaOpen
 					})}
 				>
+					<div
+						className={classNames('toolarea-close-button button', {
+							on : toolAreaOpen
+						})}
+						onClick={closeToolArea}
+					/>
 					<div className='tab-headers'>
 						<TabHeader
 							id='chat'
@@ -89,7 +96,8 @@ ToolArea.propTypes =
 	unreadMessages : PropTypes.number.isRequired,
 	unreadFiles    : PropTypes.number.isRequired,
 	toolAreaOpen   : PropTypes.bool,
-	toggleToolArea : PropTypes.func.isRequired
+	toggleToolArea : PropTypes.func.isRequired,
+	closeToolArea  : PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state) => ({
@@ -101,7 +109,8 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = {
 	setToolTab     : stateActions.setToolTab,
-	toggleToolArea : stateActions.toggleToolArea
+	toggleToolArea : stateActions.toggleToolArea,
+	closeToolArea  : stateActions.closeToolArea
 };
 
 const ToolAreaContainer = connect(

app/lib/components/ToolArea/ToolAreaButton.jsx

@@ -27,7 +27,7 @@ class ToolAreaButton extends React.Component
 					className={classnames('button toolarea-button', {
 						on : toolAreaOpen
 					})}
-					data-tip='Toggle tool area'
+					data-tip='Open tool box'
 					data-type='dark'
 					onClick={() => toggleToolArea()}
 				/>

app/resources/images/arrow_right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 256 256" height="256px" id="Layer_1" version="1.1" viewBox="0 0 256 256" width="256px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M76.8,217.6c0-1.637,0.625-3.274,1.875-4.524L163.75,128L78.675,42.925c-2.5-2.5-2.5-6.55,0-9.05s6.55-2.5,9.05,0  l89.601,89.6c2.5,2.5,2.5,6.551,0,9.051l-89.601,89.6c-2.5,2.5-6.55,2.5-9.05,0C77.425,220.875,76.8,219.237,76.8,217.6z"/></svg>

app/stylus/components/ToolArea.styl

@@ -5,7 +5,6 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background: rgba(0, 0, 0, 0.6);
 	display: none;
 
 	&.open {
@@ -14,7 +13,8 @@
 
 	+desktop() {
 		&.open {
-			display: none;
+			background: rgba(0, 0, 0, 0.3);
+			display: block;
 		}
 	}
 }
@@ -33,6 +33,36 @@
 	.toolarea-shade.open {
 		display: block;
 	}
+	> .button {
+		background-position: center;
+		background-size: 100%;
+		background-repeat: no-repeat;
+		background-color: rgba(#aef);
+		cursor: pointer;
+		border-radius: 15%;
+		padding: 1px;
+
+		+desktop() {
+			height: 36px;
+			width: 18px;
+		}
+
+		+mobile() {
+			height: 32px;
+			width: 16px;
+		}
+		&.toolarea-close-button {
+			background-image: url('/resources/images/arrow_right.svg');
+			position: absolute;
+			top: 50%;
+			left: -22px;
+			display: none;
+			&.on {
+				display: block;
+		}
+		}
+	}
+
 }
 
 @media (min-width: 600px) {
@@ -128,6 +158,10 @@
 				background-image: url('/resources/images/icon_tool_area_black.svg');
 			}
 		}
+
+		&.toolarea-close-button {
+			background-image: url('/resources/images/arrow_right.svg');
+		}
 	}
 
 	> .badge {