conflict in package json

embark-ui/package-lock.json

@@ -8253,7 +8253,7 @@
     },
     "postcss-discard-comments": {
       "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz",
+      "resolved": "http://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz",
       "integrity": "sha1-vv6J+v1bPazlzM5Rt2uBUUvgDj0=",
       "requires": {
         "postcss": "^5.0.14"
@@ -8331,7 +8331,7 @@
     },
     "postcss-discard-empty": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz",
       "integrity": "sha1-0rS9nVztXr2Nyt52QMfXzX9PkrU=",
       "requires": {
         "postcss": "^5.0.14"
@@ -8714,7 +8714,7 @@
     },
     "postcss-minify-gradients": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz",
+      "resolved": "http://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz",
       "integrity": "sha1-Xb2hE3NwP4PPtKPqOIHY11/15uE=",
       "requires": {
         "postcss": "^5.0.12",
@@ -8754,7 +8754,7 @@
     },
     "postcss-minify-params": {
       "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz",
+      "resolved": "http://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz",
       "integrity": "sha1-rSzgcTc7lDs9kwo/pZo1jCjW8fM=",
       "requires": {
         "alphanum-sort": "^1.0.1",
@@ -8796,7 +8796,7 @@
     },
     "postcss-minify-selectors": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz",
+      "resolved": "http://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz",
       "integrity": "sha1-ssapjAByz5G5MtGkllCBFDEXNb8=",
       "requires": {
         "alphanum-sort": "^1.0.2",
@@ -8873,7 +8873,7 @@
     },
     "postcss-normalize-charset": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz",
+      "resolved": "http://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz",
       "integrity": "sha1-757nEhLX/nWceO0WL2HtYrXLk/E=",
       "requires": {
         "postcss": "^5.0.5"
@@ -9133,11 +9133,32 @@
         "svgo": "^0.7.0"
       },
       "dependencies": {
+        "depd": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz",
+          "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k="
+        },
         "has-flag": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
           "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo="
         },
+        "http-errors": {
+          "version": "1.6.2",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz",
+          "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=",
+          "requires": {
+            "depd": "1.1.1",
+            "inherits": "2.0.3",
+            "setprototypeof": "1.0.3",
+            "statuses": ">= 1.3.1 < 2"
+          }
+        },
+        "iconv-lite": {
+          "version": "0.4.19",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
+          "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ=="
+        },
         "postcss": {
           "version": "5.2.18",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
@@ -9149,6 +9170,11 @@
             "supports-color": "^3.2.3"
           }
         },
+        "setprototypeof": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz",
+          "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ="
+        },
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -9179,6 +9205,11 @@
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
           "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo="
         },
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+        },
         "postcss": {
           "version": "5.2.18",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
@@ -9373,9 +9404,9 @@
       "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
     },
     "psl": {
-      "version": "1.1.28",
+      "version": "1.1.29",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.28.tgz",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.29.tgz",
-      "integrity": "sha512-+AqO1Ae+N/4r7Rvchrdm432afjT9hqJRyBN3DQv9At0tPz4hIFSGKbq64fN9dVoCow4oggIIax5/iONx0r9hZw=="
+      "integrity": "sha512-AeUmQ0oLN02flVHXWh9sSJF7mcdFq0ppid/JkErufc3hGIV/AMa8Fo9VgDo/cT2jFdOWoFvHp90qqBH54W+gjQ=="
     },
     "pstree.remy": {
       "version": "1.1.0",
@@ -9386,15 +9417,16 @@
       }
     },
     "public-encrypt": {
-      "version": "4.0.2",
+      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
-      "integrity": "sha512-4kJ5Esocg8X3h8YgJsKAuoesBgB7mqH3eowiDzMUPKiRDDE7E/BqqZD1hnTByIaAFiwAw246YEltSq7tdrOH0Q==",
+      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
       "requires": {
         "bn.js": "^4.1.0",
         "browserify-rsa": "^4.0.0",
         "create-hash": "^1.1.0",
         "parse-asn1": "^5.0.0",
-        "randombytes": "^2.0.1"
+        "randombytes": "^2.0.1",
+        "safe-buffer": "^5.1.2"
       }
     },
     "punycode": {
@@ -9452,9 +9484,9 @@
       }
     },
     "randomatic": {
-      "version": "3.0.0",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.0.tgz",
-      "integrity": "sha512-VdxFOIEY3mNO5PtSRkkle/hPJDHvQhK21oa73K4yAc9qmp6N429gAyF1gZMOTMeS0/AYzaV/2Trcef+NaIonSA==",
+      "integrity": "sha512-KnGPVE0lo2WoXxIZ7cPR8YBpiol4gsSuOwDSg410oHh80ZMp5EiypNqL2K4Z77vJn6lB5rap7IkAmcUlalcnBQ==",
       "requires": {
         "is-number": "^4.0.0",
         "kind-of": "^6.0.0",
@@ -9542,7 +9574,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
         }
       }
@@ -9636,6 +9668,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
       "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw=="
     },
+    "react-fontawesome": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.6.1.tgz",
+      "integrity": "sha1-7dzhfn3HMaoJ/UoYZoimF5OhbFw=",
+      "requires": {
+        "prop-types": "^15.5.6"
+      }
+    },
     "react-is": {
       "version": "16.5.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.5.2.tgz",
@@ -9951,12 +9991,8 @@
     },
     "redux": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
-      "integrity": "sha512-NnnHF0h0WVE/hXyrB6OlX67LYRuaf/rJcbWvnHHEPCF/Xa/AZpwhs/20WyqzQae5x4SD2F9nPObgBh2rxAgLiA==",
+      "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw=="
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "symbol-observable": "^1.2.0"
-      }
     },
     "redux-saga": {
       "version": "0.16.0",
@@ -11069,11 +11105,6 @@
         "serviceworker-cache-polyfill": "^4.0.0"
       }
     },
-    "symbol-observable": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
-    },
     "symbol-tree": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",

embark-ui/package.json

@@ -55,6 +55,7 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-dev-utils": "^5.0.1",
     "react-dom": "^16.4.1",
+    "react-fontawesome": "^1.6.1",
     "react-json-tree": "^0.11.0",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",

embark-ui/src/components/Layout.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, Container } from 'reactstrap';
+import { DropdownItem, DropdownMenu, DropdownToggle, Nav, Container } from 'reactstrap';
 import {LIGHT_THEME, DARK_THEME} from '../constants';
+import FontAwesome from 'react-fontawesome';
 
 import {
   AppAside,
@@ -39,7 +40,7 @@ const sidebarNavItems = {items: [
   ]}
 ]};
 
-const Layout = ({children, logout, credentials, location, changeTheme}) => (
+const Layout = ({children, logout, credentials, location, toggleTheme, currentTheme}) => (
   <div className="app">
     <AppHeader fixed>
       <AppSidebarToggler className="d-lg-none" display="md" mobile />
@@ -54,7 +55,11 @@ const Layout = ({children, logout, credentials, location, changeTheme}) => (
             <i className="fa fa-user fa-3x" />
           </DropdownToggle>
           <DropdownMenu right style={{ right: 'auto' }}>
-            <DropdownItem onClick={logout}><i className="fa fa-lock"></i> Logout</DropdownItem>
+            <DropdownItem className="text-capitalize" onClick={() => toggleTheme()}>
+              <FontAwesome name={currentTheme === DARK_THEME ? 'sun-o' : 'moon-o'} />
+              {currentTheme === DARK_THEME ? LIGHT_THEME : DARK_THEME} Mode
+            </DropdownItem>
+            <DropdownItem onClick={logout}><FontAwesome name="lock" /> Logout</DropdownItem>
           </DropdownMenu>
         </AppHeaderDropdown>
       </Nav>
@@ -76,15 +81,6 @@ const Layout = ({children, logout, credentials, location, changeTheme}) => (
       </AppAside>
     </div>
     <AppFooter>
-      <UncontrolledDropdown direction="up">
-        <DropdownToggle caret>
-          Theme
-        </DropdownToggle>
-        <DropdownMenu>
-          <DropdownItem onClick={() => changeTheme(DARK_THEME)}>Dark</DropdownItem>
-          <DropdownItem onClick={() => changeTheme(LIGHT_THEME)}>Light</DropdownItem>
-        </DropdownMenu>
-      </UncontrolledDropdown>
 
       <span className="ml-auto">
         Embark&nbsp;
@@ -102,7 +98,8 @@ Layout.propTypes = {
   credentials: PropTypes.object,
   location: PropTypes.object,
   logout: PropTypes.func,
-  changeTheme: PropTypes.func
+  toggleTheme: PropTypes.func,
+  currentTheme: PropTypes.string
 };
 
 export default Layout;

embark-ui/src/containers/AppContainer.js

@@ -14,6 +14,9 @@ import {
   changeTheme, fetchTheme
 } from '../actions';
 
+
+import {LIGHT_THEME, DARK_THEME} from '../constants';
+
 import { getCredentials, getAuthenticationError, getVersions, getTheme } from '../reducers/selectors';
 
 const qs = require('qs');
@@ -61,8 +64,12 @@ class AppContainer extends Component {
     return this.props.authenticationError || !this.props.credentials.authenticated;
   }
 
-  changeTheme(theme) {
+  toggleTheme() {
-    this.props.changeTheme(theme);
+    if (this.props.theme === LIGHT_THEME) {
+      this.props.changeTheme(DARK_THEME);
+    } else {
+      this.props.changeTheme(LIGHT_THEME);
+    }
   }
 
   render() {
@@ -70,7 +77,8 @@ class AppContainer extends Component {
     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)}>
+      content = <Layout location={this.props.location} logout={this.props.logout} credentials={this.props.credentials}
+                        toggleTheme={() => this.toggleTheme()} currentTheme={this.props.theme}>
         <React.Fragment>{routes}</React.Fragment>
       </Layout>;
     }

embark-ui/src/dark-theme/_dropdown.scss

@@ -8,7 +8,7 @@
     border-bottom: 0;
   }
 
-  i {
+  i, span.fa {
     display: inline-block;
     width: 20px;
     margin-right: 10px;

embark-ui/src/dark-theme/bootstrap/_reboot.scss

@@ -65,6 +65,15 @@ article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
   background-color: $body-bg; // 2
 }
 
+span.fa {
+  display: inline-block;
+  width: 20px;
+  margin-right: 10px;
+  margin-left: -10px;
+  color: $gray-300;
+  text-align: center;
+}
+
 // Suppress the focus outline on elements that cannot be accessed via keyboard.
 // This prevents an unwanted focus outline from appearing around elements that
 // might still respond to pointer events.

embark-ui/src/dark-theme/variables/bootstrap/_variables.scss

@@ -39,7 +39,7 @@ $card-cap-bg:                     #343b41 !default;
 // Dropdowns
 
 $dropdown-padding-y:              0 !default;
-$dropdown-border-color:           $dark-border-color !default;
+$dropdown-border-color:           $gray-900 !default;
 $dropdown-divider-bg:             $dark-border-color !default;
 
 // Buttons