Merge branch 'develop_51' of github.com:status-im/embark-area-51 into develop_51

embark-ui/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "react-app",
+  "rules": {
+    "react/prop-types": "warn"
+  }
+}

embark-ui/package.json

@@ -123,8 +123,5 @@
     "presets": [
       "react-app"
     ]
-  },
-  "eslintConfig": {
-    "extends": "react-app"
   }
 }

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'];
@@ -120,8 +120,8 @@ class TextEditor extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.currentFile.content && this.props.currentFile.content !== prevProps.currentFile.content) {
-      editor.setValue(this.props.currentFile.content);
+    if (this.props.currentFile.content !== prevProps.currentFile.content) {
+      editor.setValue(this.props.currentFile.content || '');
     }
 
     this.updateMarkers();
@@ -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;
+}

package.json

@@ -27,7 +27,7 @@
   },
   "main": "./lib/index.js",
   "scripts": {
-    "lint": "eslint bin/embark lib/",
+    "lint": "eslint bin/embark lib/ embark-ui/src",
     "prepack": "cd embark-ui && npm install && npm run build",
     "test": "npm-run-all lint test:*",
     "test:embark": "mocha test/ --no-timeouts --exit",