add highlighting for an active item in the snippet list

Author: Rokt33r

browser/main/Containers/SnippetContainer.jsx

@@ -5,7 +5,8 @@ var CodeViewer = require('../Components/CodeViewer')
 var SnippetList = React.createClass({
   propTypes: {
     snippets: React.PropTypes.array,
-    selectSnippet: React.PropTypes.func
+    selectSnippet: React.PropTypes.func,
+    currentSnippet: React.PropTypes.object
   },
   itemClickHandlerFactory: function (snippet) {
     return function () {
@@ -20,7 +21,7 @@ var SnippetList = React.createClass({
         )
       })
       return (
-        <li key={snippet.id} onClick={this.itemClickHandlerFactory(snippet)}>
+        <li className={this.props.currentSnippet.id === snippet.id ? 'active' : ''} key={snippet.id} onClick={this.itemClickHandlerFactory(snippet)}>
           <div className='callSign'><i className='fa fa-code'></i> {snippet.callSign}</div>
           <div className='description'>{snippet.description}</div>
           <div className='updatedAt'>{snippet.updatedAt}</div>

browser/styles/main/components/SideNavigator.styl

@@ -1,7 +1,7 @@
 .SideNavigator
   absolute top bottom left
   width 200px
-  border-right solid 2px brandColor
+  border-right solid 1px highlightenBorderColor
   padding 10px
   box-sizing border-box
   .nav-header

browser/styles/main/containers/SnippetContainer.styl

@@ -31,6 +31,9 @@
           font-size 0.8em
         &:hover, &.hover
           background-color hoverBackgroundColor
+        &:active, &.active
+          border solid 2px brandBorderColor
+          padding 9px 9px 8px
 
   .SnippetViewer
     absolute top bottom right