From 4ad0d09ceeb5614a05ffd75dfdcdd44e1848ed9c Mon Sep 17 00:00:00 2001
From: lukasmartinelli <me@lukasmartinelli.ch>
Date: Fri, 9 Sep 2016 12:08:33 +0200
Subject: [PATCH] Fix layer scrolling

---
 src/app.jsx         | 11 ++++++-----
 src/layers.jsx      | 11 ++++++++++-
 src/scrollbars.scss | 12 ++++++++++++
 src/theme.js        |  6 ++++--
 4 files changed, 32 insertions(+), 8 deletions(-)
 create mode 100644 src/scrollbars.scss

diff --git a/src/app.jsx b/src/app.jsx
index 2ea730d6..f06891c0 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -7,6 +7,7 @@ import { LayerEditor } from './layers.jsx'
 
 import theme from './theme.js'
 import layout from './layout.scss'
+import 'react-virtualized/styles.css';
 
 export class WorkspaceDrawer extends React.Component {
 	render() {
@@ -19,13 +20,13 @@ export class WorkspaceDrawer extends React.Component {
 		return <div style={{
 			zIndex: 100,
 			position: "fixed",
-			height: "100%",
-			left: "60",
+			left: 60,
 			width: 300,
-			top: "0",
-			bottom: "0",
+			top: 0,
+			bottom: 0,
+			overflow: "hidden",
 			backgroundColor: theme.colors.gray}
-		} >
+		}>
 			{editor}
 		</div>
 	}
diff --git a/src/layers.jsx b/src/layers.jsx
index 2b54af9f..c36e9b61 100644
--- a/src/layers.jsx
+++ b/src/layers.jsx
@@ -3,8 +3,8 @@ import React from 'react'
 import { Heading, Checkbox, Slider, Switch, Input, Panel, PanelHeader, Toolbar, NavItem, Tooltip, Container, Space} from 'rebass'
 import { Button, Text } from 'rebass'
 import Collapse from 'react-collapse'
-
 import theme from './theme.js'
+import scrollbars from './scrollbars.scss'
 
 export class FillLayer extends React.Component {
 	render() {
@@ -66,7 +66,16 @@ export class LayerEditor extends React.Component {
 		});
 		return <div>
 			<Heading level={2}>Layers</Heading>
+			<div className={scrollbars.darkScrollbar} style={{
+				overflowY: "scroll",
+				bottom:0,
+				left:0,
+				right:0,
+				top:40,
+				position: "absolute",
+			}}>
 			{layerPanels}
+			</div>
 		</div>
 	}
 }
diff --git a/src/scrollbars.scss b/src/scrollbars.scss
new file mode 100644
index 00000000..5c4ab23a
--- /dev/null
+++ b/src/scrollbars.scss
@@ -0,0 +1,12 @@
+.darkScrollbar::-webkit-scrollbar {
+	background-color: #313131;
+	width: 10px;
+}
+
+.darkScrollbar::-webkit-scrollbar-thumb {
+	border-radius: 6px;
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+	background-color: #555;
+	padding-left: 2px;
+	padding-right: 2px;
+}
diff --git a/src/theme.js b/src/theme.js
index bd09a88a..a967848c 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -40,7 +40,7 @@ const border = {
 const dark = {
   name: 'Dark',
   color: colors.white,
-	fontFamily: 'Roboto, sans-serif',
+	fontFamily: 'Open Sans Bold, sans-serif',
   scale,
 	fontSizes,
   colors,
@@ -53,10 +53,12 @@ const dark = {
 		borderLeft: 0,
 		borderRight: 0,
 		marginBottom: 0,
+		paddingBottom: 0,
 	},
 	PanelHeader: {
 		marginRight: -10,
-		fontSize: fontSizes[4],
+		marginBottom: 0,
+		fontSize: fontSizes[5],
 		fontWeight: 400,
 		color: colors.white,
 	},