Improve sidebar UI (#1178)

* use presets.veryLightPurple (instead of purple) for header and sidebar borders
* add even lighter purple as background for the sidebar
* consolidate sidebar CSS in presets.sidebarStyles
  * make "Tutorial" sidebar 100vh
  * let the browser decide wether to display a scrollbar for `overflowY`

Author: fk

www/src/layouts/index.js

@@ -55,7 +55,7 @@ module.exports = React.createClass({
         <div
           css={{
             borderBottom: this.props.location.pathname !== `/`
-              ? `1px solid ${presets.purple}`
+              ? `1px solid ${presets.veryLightPurple}`
               : ``,
           }}
         >
@@ -231,10 +231,7 @@ module.exports = React.createClass({
               width: rhythm(10),
               display: `none`,
               [presets.Tablet]: {
-                borderRight: `1px solid ${presets.purple}`,
-                position: `fixed`,
-                overflowY: `scroll`,
-                height: `calc(100vh - 55px)`,
+                ...presets.sidebarStyles,
                 display: this.props.location.pathname.slice(0, 6) === `/docs/`
                   ? `block`
                   : `none`,
@@ -251,8 +248,7 @@ module.exports = React.createClass({
               width: rhythm(10),
               display: `none`,
               [presets.Tablet]: {
-                borderRight: `1px solid ${presets.purple}`,
-                position: `fixed`,
+                ...presets.sidebarStyles,
                 display: this.props.location.pathname.slice(0, 10) ===
                   `/tutorial/`
                   ? `block`

www/src/utils/presets.js

@@ -16,4 +16,11 @@ module.exports = {
   purple: colors.a[13],
   lightPurple: colors.b[2],
   veryLightPurple: colors.b[0],
+  sidebarStyles: {
+    borderRight: `1px solid ${colors.b[0]}`,
+    backgroundColor: `#fcfaff`,
+    position: `fixed`,
+    overflowY: `auto`,
+    height: `calc(100vh - 55px)`,
+  },
 }