From ff2419c54b6ace5da53c078214632b2c12c54d6f Mon Sep 17 00:00:00 2001
From: Guillermo Rauch <rauchg@gmail.com>
Date: Thu, 7 Jul 2016 20:37:58 -0700
Subject: [PATCH] border color configuration support

---
 app/hyperterm.js  |  5 +++--
 app/tabs.js       | 10 +++++++---
 config-default.js |  5 ++++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/app/hyperterm.js b/app/hyperterm.js
index b750f92c..bce4dfb6 100644
--- a/app/hyperterm.js
+++ b/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';
diff --git a/app/tabs.js b/app/tabs.js
index f33e00e0..7ca0508a 100644
--- a/app/tabs.js
+++ b/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>
diff --git a/config-default.js b/config-default.js
index 48688a63..e7aa2684 100644
--- a/config-default.js
+++ b/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