conflict in constants

embark-ui/package.json

@@ -78,7 +78,7 @@
     "start": "npm-run-all --parallel css-compile react-start watch-css",
     "build": "npm run css-compile && node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom",
-    "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/dark-theme/coreui.scss src/css/coreui.css",
+    "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/dark-theme/coreui.scss src/css/coreui-dark.css",
     "watch-css": "nodemon --ignore dist/ -e scss -x \"npm run css-compile\""
   },
   "homepage": "http://localhost:8000/embark",

embark-ui/src/components/ContractOverview.js

@@ -4,7 +4,7 @@ import {Row, Col, Table} from "reactstrap";
 import JSONTree from 'react-json-tree';
 import {formatContractForDisplay} from '../utils/presentation';
 
-const Contract = ({contract, match}) => {
+const Contract = ({contract}) => {
   const contractDisplay = formatContractForDisplay(contract);
   return (
     <Row>
@@ -43,7 +43,7 @@ const Contract = ({contract, match}) => {
 };
 
 Contract.propTypes = {
-  contract: PropTypes.object,
+  contract: PropTypes.object
 };
 
 export default Contract;

embark-ui/src/components/Layout.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, Container } from 'reactstrap';
+import {LIGHT_THEME, DARK_THEME} from '../constants';
 
 import {
   AppAside,
@@ -27,7 +28,7 @@ const sidebarNavItems = {items: [
     {url: "/embark/explorer/overview", icon: "fa fa-signal", name: "Overview"},
     {url: "/embark/explorer/accounts", icon: "fa fa-users", name: "Accounts"},
     {url: "/embark/explorer/blocks", icon: "fa fa-stop", name: "Blocks"},
-    {url: "/embark/explorer/transactions", icon: "fa fa-tree", name: "Transactions"},
+    {url: "/embark/explorer/transactions", icon: "fa fa-tree", name: "Transactions"}
   ]},
   {name: "Fiddle", url: "/embark/fiddle", icon: "fa fa-codepen"},
   {name: "Documentation", url: "/embark/documentation", icon: "fa fa-book"},
@@ -35,7 +36,7 @@ const sidebarNavItems = {items: [
     {url: "/embark/utilities/converter", icon: "fa fa-plug", name: "Converter"},
     {url: "/embark/utilities/communication", icon: "fa fa-phone", name: "Communication"},
     {url: "/embark/utilities/ens", icon: "fa fa-circle", name: "ENS"}
-  ]},
+  ]}
 ]};
 
 const Layout = ({children, logout, credentials, location, changeTheme}) => (
@@ -80,8 +81,8 @@ const Layout = ({children, logout, credentials, location, changeTheme}) => (
           Theme
         </DropdownToggle>
         <DropdownMenu>
-          <DropdownItem onClick={() => changeTheme('dark')}>Dark</DropdownItem>
-          <DropdownItem onClick={() => changeTheme('light')}>Light</DropdownItem>
+          <DropdownItem onClick={() => changeTheme(DARK_THEME)}>Dark</DropdownItem>
+          <DropdownItem onClick={() => changeTheme(LIGHT_THEME)}>Light</DropdownItem>
         </DropdownMenu>
       </UncontrolledDropdown>
 

embark-ui/src/constants.js

@@ -1,2 +1,4 @@
 export const EMBARK_PROCESS_NAME = 'embark';
 export const LOG_LIMIT = 50;
+export const DARK_THEME = 'dark';
+export const LIGHT_THEME = 'light';

embark-ui/src/containers/AppContainer.js

@@ -66,15 +66,18 @@ class AppContainer extends Component {
   }
 
   render() {
-    return (
-      <div className={(this.props.theme || 'dark') + "-theme"}>
-        {this.shouldRenderLogin() ?
-          <Login credentials={this.props.credentials} authenticate={this.props.authenticate} error={this.props.authenticationError} />
-          :
-          <Layout location={this.props.location} logout={this.props.logout} credentials={this.props.credentials} changeTheme={(v) => this.changeTheme(v)}>
+    let content;
+    if (this.shouldRenderLogin()) {
+      content = <Login credentials={this.props.credentials} authenticate={this.props.authenticate} error={this.props.authenticationError} />;
+    } else {
+      content = <Layout location={this.props.location} logout={this.props.logout} credentials={this.props.credentials} changeTheme={(v) => this.changeTheme(v)}>
         <React.Fragment>{routes}</React.Fragment>
-          </Layout>
+      </Layout>;
     }
+
+    return (
+      <div className={(this.props.theme) + "-theme"}>
+        {content}
       </div>
     );
   }
@@ -93,7 +96,8 @@ AppContainer.propTypes = {
   fetchVersions: PropTypes.func,
   location: PropTypes.object,
   theme: PropTypes.string,
-  changeTheme: PropTypes.func
+  changeTheme: PropTypes.func,
+  fetchTheme: PropTypes.func
 };
 
 function mapStateToProps(state) {

embark-ui/src/index.js

@@ -3,9 +3,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import {Provider} from 'react-redux';
 
+// Icons
 import 'font-awesome/css/font-awesome.min.css';
+// Light theme
 import '@coreui/coreui/dist/css/coreui.min.css';
-import './css/coreui.css';
+// Dark theme
+import './css/coreui-dark.css';
+// Custom style
 import './index.css';
 
 import AppContainer from './containers/AppContainer';

embark-ui/src/reducers/index.js

@@ -1,7 +1,7 @@
 import {combineReducers} from 'redux';
 import {REQUEST, SUCCESS, FAILURE, CONTRACT_COMPILE, FILES, LOGOUT, AUTHENTICATE,
         FETCH_CREDENTIALS, UPDATE_BASE_ETHER, CHANGE_THEME, FETCH_THEME} from "../actions";
-import {EMBARK_PROCESS_NAME} from '../constants';
+import {EMBARK_PROCESS_NAME, DARK_THEME} from '../constants';
 
 const BN_FACTOR = 10000;
 const VOID_ADDRESS = '0x0000000000000000000000000000000000000000';
@@ -223,8 +223,8 @@ function baseEther(state = '1', action) {
   return state;
 }
 
-function theme(state='dark', action) {
-  if (action.type === CHANGE_THEME[REQUEST] || action.type === FETCH_THEME[SUCCESS]) {
+function theme(state=DARK_THEME, action) {
+  if (action.type === CHANGE_THEME[REQUEST] || (action.type === FETCH_THEME[SUCCESS] && action.theme)) {
     return action.theme;
   }
   return state;