border color configuration support

app/hyperterm.js

@@ -69,13 +69,14 @@ export default class HyperTerm extends Component {
   }
 
   render () {
-    const { backgroundColor } = this.props.config;
+    const { backgroundColor, borderColor } = this.props.config;
     return <div onClick={ this.focusActive }>
-      <div className={ classes('main', { mac: this.state.mac }) }>
+      <div style={{ borderColor }} className={ classes('main', { mac: this.state.mac }) }>
         <header style={{ backgroundColor }} onMouseDown={this.onHeaderMouseDown}>
           <Tabs
             active={this.state.active}
             activeMarkers={this.state.activeMarkers}
+            borderColor={borderColor}
             data={this.state.sessions.map((uid) => {
               const title = this.state.titles[uid];
               return null != title ? title : 'Shell';

app/tabs.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import classes from 'classnames';
 
-export default function ({ data = [], active, activeMarkers = [], onChange, onClose }) {
+export default function ({ data = [], borderColor, active, activeMarkers = [], onChange, onClose }) {
   return <nav style={{ WebkitAppRegion: 'drag' }}>{
     data.length
       ? 1 === data.length
         ? <div className='single'>{ data[0] }</div>
-        : <ul className='tabs'>
+        : <ul style={{ borderColor }} className='tabs'>
             {
               data.map((tab, i) => {
                 const isActive = i === active;
@@ -14,7 +14,11 @@ export default function ({ data = [], active, activeMarkers = [], onChange, onCl
                 return <li
                   key={`tab-${i}`}
                   className={classes({ is_active: isActive, has_activity: hasActivity })}>
-                    <span onClick={ onChange ? onClick.bind(null, i, onChange, active) : null }>{ tab }</span>
+                    <span
+                      style={{ borderColor: isActive ? borderColor : null }}
+                      onClick={ onChange ? onClick.bind(null, i, onChange, active) : null }>
+                      { tab }
+                    </span>
                     <i onClick={ onClose ? onClose.bind(null, i) : null }>
                       <svg className='icon'>
                         <use xlinkHref='assets/icons.svg#close'></use>

config-default.js

@@ -10,7 +10,10 @@ module.exports = {
     cursorColor: '#F81CE5',
 
     // terminal background color (hex)
-    backgroundColor: '#000',
+    backgroundColor: '#000000',
+
+    // border color (winodw, tabs)
+    borderColor: '#333',
 
     // some color overrides. see http://bit.ly/29k1iU2 for
     // the full list