Color tabs for text editor

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})}>

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>

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;
+}