6 files changed, 117 insertions, 82 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 499bc097a..ebb9849ea 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -68,7 +68,6 @@ class AppLayout extends Component {
     areRequiredRequestsSuccessful: PropTypes.bool.isRequired,
     retryRequiredRequests: PropTypes.func.isRequired,
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
-    darkMode: PropTypes.bool.isRequired,
     isDelayAppScreenVisible: PropTypes.bool.isRequired,
   };
 
@@ -101,7 +100,6 @@ class AppLayout extends Component {
       areRequiredRequestsSuccessful,
       retryRequiredRequests,
       areRequiredRequestsLoading,
-      darkMode,
       isDelayAppScreenVisible,
     } = this.props;
 
@@ -109,69 +107,67 @@ class AppLayout extends Component {
 
     return (
       <ErrorBoundary>
-        <div className={(darkMode ? 'theme__dark' : '')}>
-          <div className="app">
-            {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
-            <div className={`app__content ${classes.appContent}`}>
-              {workspacesDrawer}
-              {sidebar}
-              <div className="app__service">
-                <WorkspaceSwitchingIndicator />
-                {news.length > 0 && news.map(item => (
-                  <InfoBar
-                    key={item.id}
-                    position="top"
-                    type={item.type}
-                    sticky={item.sticky}
-                    onHide={() => removeNewsItem({ newsId: item.id })}
-                  >
-                    <span dangerouslySetInnerHTML={createMarkup(item.message)} />
-                  </InfoBar>
-                ))}
-                {/* {!isOnline && (
-                  <InfoBar
-                    type="danger"
-                    sticky
-                  >
-                    <span className="mdi mdi-flash" />
-                    {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
-                  </InfoBar>
-                )} */}
-                {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
-                  <InfoBar
-                    type="danger"
-                    ctaLabel="Try again"
-                    ctaLoading={areRequiredRequestsLoading}
-                    sticky
-                    onClick={retryRequiredRequests}
-                  >
-                    <span className="mdi mdi-flash" />
-                    {intl.formatMessage(messages.requiredRequestsFailed)}
-                  </InfoBar>
-                )}
-                {showServicesUpdatedInfoBar && (
-                  <InfoBar
-                    type="primary"
-                    ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
-                    onClick={reloadServicesAfterUpdate}
-                    sticky
-                  >
-                    <span className="mdi mdi-power-plug" />
-                    {intl.formatMessage(messages.servicesUpdated)}
-                  </InfoBar>
-                )}
-                {appUpdateIsDownloaded && (
-                  <AppUpdateInfoBar
-                    nextAppReleaseVersion={nextAppReleaseVersion}
-                    onInstallUpdate={installAppUpdate}
-                  />
-                )}
-                {isDelayAppScreenVisible && (<DelayApp />)}
-                <BasicAuth />
-                <ShareFranz />
-                {services}
-                {children}
-              </div>
+        <div className="app">
+          {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
+          <div className={`app__content ${classes.appContent}`}>
+            {workspacesDrawer}
+            {sidebar}
+            <div className="app__service">
+              <WorkspaceSwitchingIndicator />
+              {news.length > 0 && news.map(item => (
+                <InfoBar
+                  key={item.id}
+                  position="top"
+                  type={item.type}
+                  sticky={item.sticky}
+                  onHide={() => removeNewsItem({ newsId: item.id })}
+                >
+                  <span dangerouslySetInnerHTML={createMarkup(item.message)} />
+                </InfoBar>
+              ))}
+              {/* {!isOnline && (
+                <InfoBar
+                  type="danger"
+                  sticky
+                >
+                  <span className="mdi mdi-flash" />
+                  {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
+                </InfoBar>
+              )} */}
+              {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
+                <InfoBar
+                  type="danger"
+                  ctaLabel="Try again"
+                  ctaLoading={areRequiredRequestsLoading}
+                  sticky
+                  onClick={retryRequiredRequests}
+                >
+                  <span className="mdi mdi-flash" />
+                  {intl.formatMessage(messages.requiredRequestsFailed)}
+                </InfoBar>
+              )}
+              {showServicesUpdatedInfoBar && (
+                <InfoBar
+                  type="primary"
+                  ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
+                  onClick={reloadServicesAfterUpdate}
+                  sticky
+                >
+                  <span className="mdi mdi-power-plug" />
+                  {intl.formatMessage(messages.servicesUpdated)}
+                </InfoBar>
+              )}
+              {appUpdateIsDownloaded && (
+                <AppUpdateInfoBar
+                  nextAppReleaseVersion={nextAppReleaseVersion}
+                  onInstallUpdate={installAppUpdate}
+                />
+              )}
+              {isDelayAppScreenVisible && (<DelayApp />)}
+              <BasicAuth />
+              <ShareFranz />
+              {services}
+              {children}
             </div>
           </div>
         </div>
diff --git a/src/containers/auth/AuthLayoutContainer.js b/src/containers/auth/AuthLayoutContainer.js
index 1f9c1ea61..20b88c500 100644
--- a/src/containers/auth/AuthLayoutContainer.js
+++ b/src/containers/auth/AuthLayoutContainer.js
@@ -24,24 +24,22 @@ export default @inject('stores', 'actions') @observer class AuthLayoutContainer
       stores, actions, children, location,
     } = this.props;
     const {
-      app, features, globalError, settings,
+      app, features, globalError,
     } = stores;
 
     const isLoadingBaseFeatures = features.defaultFeaturesRequest.isExecuting
       && !features.defaultFeaturesRequest.wasExecuted;
 
-    const themeType = theme(settings.app.darkMode ? 'dark' : 'default');
-
     if (isLoadingBaseFeatures) {
       return (
-        <ThemeProvider theme={theme(themeType)}>
+        <ThemeProvider theme={stores.ui.theme}>
           <AppLoader />
         </ThemeProvider>
       );
     }
 
     return (
-      <ThemeProvider theme={theme(themeType)}>
+      <ThemeProvider theme={stores.ui.theme}>
         <AuthLayout
           error={globalError.response}
           pathname={location.pathname}
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index d290a6094..cf3da71e8 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -148,7 +148,6 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
           areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful}
           retryRequiredRequests={retryRequiredRequests}
           areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
-          darkMode={settings.all.app.darkMode}
           isDelayAppScreenVisible={delayAppState.isDelayAppScreenVisible}
         >
           {React.Children.count(children) > 0 ? children : null}
diff --git a/src/containers/settings/SettingsWindow.js b/src/containers/settings/SettingsWindow.js
index 663b9e2e4..440d32a46 100644
--- a/src/containers/settings/SettingsWindow.js
+++ b/src/containers/settings/SettingsWindow.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 
@@ -10,10 +11,23 @@ import ErrorBoundary from '../../components/util/ErrorBoundary';
 import { workspaceStore } from '../../features/workspaces';
 
 export default @inject('stores', 'actions') @observer class SettingsContainer extends Component {
+  portalRoot = document.querySelector('#portalContainer');
+
+  el = document.createElement('div');
+
+  componentDidMount() {
+    this.portalRoot.appendChild(this.el);
+  }
+
+  componentWillUnmount() {
+    this.portalRoot.removeChild(this.el);
+  }
+
   render() {
     const { children, stores } = this.props;
     const { closeSettings } = this.props.actions.ui;
 
+
     const navigation = (
       <Navigation
         serviceCount={stores.services.all.length}
@@ -21,15 +35,18 @@ export default @inject('stores', 'actions') @observer class SettingsContainer ex
       />
     );
 
-    return (
-      <ErrorBoundary>
-        <Layout
-          navigation={navigation}
-          closeSettings={closeSettings}
-        >
-          {children}
-        </Layout>
-      </ErrorBoundary>
+    return ReactDOM.createPortal(
+      (
+        <ErrorBoundary>
+          <Layout
+            navigation={navigation}
+            closeSettings={closeSettings}
+          >
+            {children}
+          </Layout>
+        </ErrorBoundary>
+      ),
+      this.el,
     );
   }
 }
diff --git a/src/index.html b/src/index.html
index bf15e2d4e..f29aa2686 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,6 +10,7 @@
   <div class="window-draggable"></div>
   <div class="dev-warning">DEV MODE</div>
   <div id="root"></div>
+  <div id="portalContainer"></div>
   <script>
     document.querySelector('body').classList.add(process.env.OS_PLATFORM ? process.env.OS_PLATFORM : process.platform);
 
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
index a95a8e1e0..61e0c5010 100644
--- a/src/stores/UIStore.js
+++ b/src/stores/UIStore.js
@@ -1,4 +1,9 @@
-import { action, observable, computed } from 'mobx';
+import {
+  action,
+  observable,
+  computed,
+  reaction,
+} from 'mobx';
 import { theme } from '@meetfranz/theme';
 
 import Store from './lib/Store';
@@ -15,6 +20,14 @@ export default class UIStore extends Store {
     this.actions.ui.toggleServiceUpdatedInfoBar.listen(this._toggleServiceUpdatedInfoBar.bind(this));
   }
 
+  setup() {
+    reaction(
+      () => this.isDarkThemeActive,
+      () => this._setupThemeInDOM(),
+      { fireImmediately: true },
+    );
+  }
+
   @computed get showMessageBadgesEvenWhenMuted() {
     const settings = this.stores.settings.all;
 
@@ -26,7 +39,7 @@ export default class UIStore extends Store {
   }
 
   @computed get theme() {
-    if (this.isDarkThemeActive) return theme('dark');
+    if (this.isDarkThemeActive || this.stores.settings.app.darkMode) return theme('dark');
     return theme('default');
   }
 
@@ -47,4 +60,15 @@ export default class UIStore extends Store {
     }
     this.showServicesUpdatedInfoBar = visibility;
   }
+
+  // Reactions
+  _setupThemeInDOM() {
+    const body = document.querySelector('body');
+
+    if (!this.isDarkThemeActive) {
+      body.classList.remove('theme__dark');
+    } else {
+      body.classList.add('theme__dark');
+    }
+  }
 }