From f1e1c4a14370d1207814a9272777df02a2094048 Mon Sep 17 00:00:00 2001
From: Anthony Laibe <anthony@laibe.cc>
Date: Sun, 28 Oct 2018 10:39:40 +0100
Subject: [PATCH] Color tabs for text editor

---
 embark-ui/src/components/SearchBar.js  |  2 +-
 embark-ui/src/components/TextEditor.js | 16 +++++++++-------
 embark-ui/src/index.css                |  6 +++---
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/embark-ui/src/components/SearchBar.js b/embark-ui/src/components/SearchBar.js
index 6cb540ee..9167ef2a 100644
--- a/embark-ui/src/components/SearchBar.js
+++ b/embark-ui/src/components/SearchBar.js
@@ -44,7 +44,7 @@ class SearchBar extends React.Component {
 
   render() {
     return (
-      <Form inline className={classNames('search-bar', 'mr-2', {hidden: this.props.hidden})}>
+      <Form inline className={classNames('search-bar', 'mr-2')}>
         {!this.props.loading &&
           <React.Fragment>
             <div className={classNames({'d-sm-down-none': !this.state.showForm})}>
diff --git a/embark-ui/src/components/TextEditor.js b/embark-ui/src/components/TextEditor.js
index 9dc01e22..1674906a 100644
--- a/embark-ui/src/components/TextEditor.js
+++ b/embark-ui/src/components/TextEditor.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import FontAwesomeIcon from 'react-fontawesome';
 import classNames from 'classnames';
 
-import {DARK_THEME} from '../constants';
+import {DARK_THEME, LIGHT_THEME} from '../constants';
 import './TextEditor.css';
 
 const SUPPORTED_LANGUAGES = ['css', 'sol', 'html', 'json'];
@@ -137,18 +137,20 @@ class TextEditor extends React.Component {
 
   renderTabs() {
     return (
-      <ul className="list-inline m-0 p-2">
+      <ul className="list-inline m-0 p-0">
         {this.props.editorTabs.map(file => (
-          <li key={file.name} className={classNames("m-1", "list-inline-item", "border-right")}>
+          <li key={file.name} className={classNames("p-2", "list-inline-item", "mr-0", "border-right", {
+            'bg-white': file.active && LIGHT_THEME === this.props.theme,
+            'bg-black': file.active && DARK_THEME === this.props.theme
+          })}>
             <a
               href="#switch-tab"
               onClick={() => this.props.addEditorTabs(file)}
-              className={classNames('p-2', {'text-muted': !file.active},
-                                           {'text-primary': file.active})
-            }>
+              className="p-2 text-muted"
+            >
               {file.name}
             </a>
-            <FontAwesomeIcon style={{cursor: 'pointer'}} onClick={() => this.props.removeEditorTabs(file)} className="mx-1" name="close"/>
+            <FontAwesomeIcon style={{cursor: 'pointer'}} onClick={() => this.props.removeEditorTabs(file)} className="px-1" name="close"/>
           </li>
         ))}
       </ul>
diff --git a/embark-ui/src/index.css b/embark-ui/src/index.css
index f35702e8..7ac8a40a 100644
--- a/embark-ui/src/index.css
+++ b/embark-ui/src/index.css
@@ -21,9 +21,6 @@
 .relative {
   position: relative;
 }
-.hidden {
-  display: none;
-}
 
 .react-json-view {
   border-radius: .25rem;
@@ -77,3 +74,6 @@
   text-decoration: none;
 }
 
+.bg-black {
+  background-color: #1C1C1C;
+}
\ No newline at end of file