17 files changed, 171 insertions, 157 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e1fe2ab45..70b77637e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [5.2.0-beta.3](https://github.com/meetfranz/franz/compare/v5.2.0-beta.2...v5.2.0-beta.3) (2019-06-24)
+
+### General
+
+* **App:** Downgraded electron to 4.2.4 ([404c87a](https://github.com/meetfranz/franz/commit/404c87a))
+
+
 # [5.2.0-beta.2](https://github.com/meetfranz/franz/compare/v5.2.0-beta.1...v5.2.0-beta.2) (2019-06-12)
 
 
diff --git a/package-lock.json b/package-lock.json
index 77575ad56..b4d86c5e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "franz",
-  "version": "5.2.0-beta.1",
+  "version": "5.2.0-beta.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2173,13 +2173,13 @@
       "requires": {
         "@mdi/js": "^3.3.92",
         "@mdi/react": "^1.1.0",
-        "@meetfranz/theme": "^1.0.13",
+        "@meetfranz/theme": "^1.0.14",
         "react-html-attributes": "^1.4.3",
         "react-loader": "^2.4.5"
       },
       "dependencies": {
         "@meetfranz/theme": {
-          "version": "1.0.13",
+          "version": "1.0.14",
           "bundled": true,
           "requires": {
             "color": "^3.1.0"
@@ -2198,12 +2198,12 @@
       "requires": {
         "@mdi/js": "^3.3.92",
         "@mdi/react": "^1.1.0",
-        "@meetfranz/theme": "^1.0.13",
+        "@meetfranz/theme": "^1.0.14",
         "react-loader": "^2.4.5"
       },
       "dependencies": {
         "@meetfranz/theme": {
-          "version": "1.0.13",
+          "version": "1.0.14",
           "bundled": true,
           "requires": {
             "color": "^3.1.0"
@@ -6803,9 +6803,9 @@
       "dev": true
     },
     "electron": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-5.0.2.tgz",
-      "integrity": "sha512-bUHKQhyuOen/q8iHTkrnzqB9CAwBDI+vHbeu21kpq2bqAD+t25yfrmUEcYHaPL4fZOAhk6nnRqskF6/Xd+aZxg==",
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-4.2.4.tgz",
+      "integrity": "sha512-d4wEwJluMsRyRgbukLmFVTb6l1J+mc3RLB1ctbpMlSWDFvs+zknPWa+cHBzTWwrdgwINLddr69qsAW1ku6FqYw==",
       "dev": true,
       "requires": {
         "@types/node": "^10.12.18",
@@ -6814,9 +6814,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "10.14.4",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-10.14.4.tgz",
-          "integrity": "sha512-DT25xX/YgyPKiHFOpNuANIQIVvYEwCWXgK2jYYwqgaMrYE6+tq+DtmMwlD3drl6DJbUwtlIDnn0d7tIn/EbXBg==",
+          "version": "10.14.9",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-10.14.9.tgz",
+          "integrity": "sha512-NelG/dSahlXYtSoVPErrp06tYFrvzj8XLWmKA+X8x0W//4MqbUyZu++giUG/v0bjAT6/Qxa8IjodrfdACyb0Fg==",
           "dev": true
         }
       }
@@ -7043,12 +7043,14 @@
       }
     },
     "electron-hunspell": {
-      "version": "1.0.0-beta.7",
-      "resolved": "https://registry.npmjs.org/electron-hunspell/-/electron-hunspell-1.0.0-beta.7.tgz",
-      "integrity": "sha512-BByCXqU8sZbuzyoxKcBYjycp8ORiqjeYZd2OT8RNjVW+XGPmZkHewXUu4tUa1IXW6ij6IqojV5kr+xhYKLN1DA==",
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/electron-hunspell/-/electron-hunspell-0.1.1.tgz",
+      "integrity": "sha512-B3nOQqHexIX+8bz72FZkNk+iFBrdqS9DpV2SaH+t7T9SLbONBVBRLJ2Jj2ytXFUzvw81q7vz2dfxPCddh/E3ww==",
       "requires": {
-        "hunspell-asm": "^2.0.0",
-        "tslib": "1.9.3"
+        "hunspell-asm": "1.0.2",
+        "lodash": "^4.17.11",
+        "tslib": "1.9.3",
+        "unixify": "1.0.0"
       }
     },
     "electron-is-dev": {
@@ -11379,34 +11381,14 @@
       }
     },
     "hunspell-asm": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/hunspell-asm/-/hunspell-asm-2.0.0.tgz",
-      "integrity": "sha512-FMIUBpy+bRREFAvC63RcYEK9U6+FdlEojGSVsvMTpuZ2CekYyUBwEfG4+ExIQOQyEN0U6f1MoVgrFqvgPNSA2g==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hunspell-asm/-/hunspell-asm-1.0.2.tgz",
+      "integrity": "sha512-UTLBvc0yZiIcHl9qrgxnFTZbX3zF4CprzEY+u+N0iXlUKZnUJRIgvgppTdgiQTsucm5b0aN/rHsgXz2q/0kBRA==",
       "requires": {
-        "emscripten-wasm-loader": "^2.2.3",
-        "nanoid": "^2.0.1",
-        "tslib": "^1.9.3",
+        "emscripten-wasm-loader": "^1.0.0",
+        "nanoid": "^1.0.2",
+        "tslib": "^1.9.0",
         "unixify": "^1.0.0"
-      },
-      "dependencies": {
-        "emscripten-wasm-loader": {
-          "version": "2.2.3",
-          "resolved": "https://registry.npmjs.org/emscripten-wasm-loader/-/emscripten-wasm-loader-2.2.3.tgz",
-          "integrity": "sha512-//gI0afvtVnY7smttrPOW/BM+pTJLmdIcXAQV3fgRdQ0o6wm2vdSI0kjLYVOeo/rbtRsGgVuMLu6fT+O//EfaA==",
-          "requires": {
-            "getroot": "^1.0.0",
-            "nanoid": "^1.3.4",
-            "tslib": "^1.9.3",
-            "unixify": "^1.0.0"
-          },
-          "dependencies": {
-            "nanoid": {
-              "version": "1.3.4",
-              "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-1.3.4.tgz",
-              "integrity": "sha512-4ug4BsuHxiVHoRUe1ud6rUFT3WUMmjXt1W0quL0CviZQANdan7D8kqN5/maw53hmAApY/jfzMRkC57BNNs60ZQ=="
-            }
-          }
-        }
       }
     },
     "husky": {
@@ -14385,9 +14367,9 @@
       "integrity": "sha512-JY7V6lRkStKcKTvHO5NVSQRv+RV+FIL5pvDoLiAtSL9pKlC5x9PKQcZDsq7m4FO4d57mkhC6Z+QhAh3Jdk5JFw=="
     },
     "nanoid": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.0.3.tgz",
-      "integrity": "sha512-NbaoqdhIYmY6FXDRB4eYtDVC9Z9eCbn8TyaiC16LNKtpPv/aqa0tOPD8y6gNE4yUNnaZ7LLhYtXOev/6+cBtfw=="
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-1.3.4.tgz",
+      "integrity": "sha512-4ug4BsuHxiVHoRUe1ud6rUFT3WUMmjXt1W0quL0CviZQANdan7D8kqN5/maw53hmAApY/jfzMRkC57BNNs60ZQ=="
     },
     "nanomatch": {
       "version": "1.2.13",
diff --git a/package.json b/package.json
index 9060c32db..7bf1f8a4a 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "franz",
   "productName": "Franz",
   "appId": "com.meetfranz.franz",
-  "version": "5.2.0-beta.2",
+  "version": "5.2.0-beta.4",
   "description": "Messaging app for WhatsApp, Slack, Telegram, HipChat, Hangouts and many many more.",
   "copyright": "adlk x franz - Stefan Malzner",
   "main": "index.js",
@@ -47,7 +47,7 @@
     "du": "^0.1.0",
     "electron-dl": "1.12.0",
     "electron-fetch": "1.3.0",
-    "electron-hunspell": "1.0.0-beta.7",
+    "electron-hunspell": "0.1.1",
     "electron-is-dev": "1.0.1",
     "electron-react-titlebar": "0.8.1",
     "electron-updater": "4.0.6",
@@ -118,7 +118,7 @@
     "cross-env": "^5.0.5",
     "cz-conventional-changelog": "2.1.0",
     "dotenv": "^4.0.0",
-    "electron": "5.0.2",
+    "electron": "4.2.4",
     "electron-builder": "20.40.2",
     "electron-rebuild": "1.8.4",
     "eslint": "5.10.0",
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 3d43d4e5c..75a8cfc61 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -22,7 +22,6 @@ export default @observer class AuthLayout extends Component {
     retryHealthCheck: PropTypes.func.isRequired,
     isHealthCheckLoading: PropTypes.bool.isRequired,
     isFullScreen: PropTypes.bool.isRequired,
-    darkMode: PropTypes.bool.isRequired,
     nextAppReleaseVersion: PropTypes.string,
     installAppUpdate: PropTypes.func.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
@@ -45,7 +44,6 @@ export default @observer class AuthLayout extends Component {
       retryHealthCheck,
       isHealthCheckLoading,
       isFullScreen,
-      darkMode,
       nextAppReleaseVersion,
       installAppUpdate,
       appUpdateIsDownloaded,
@@ -53,7 +51,7 @@ export default @observer class AuthLayout extends Component {
     const { intl } = this.context;
 
     return (
-      <div className={darkMode ? 'theme__dark' : ''}>
+      <>
         {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
         <div className="auth">
           {!isOnline && (
@@ -93,7 +91,7 @@ export default @observer class AuthLayout extends Component {
             <img src="./assets/images/adlk.svg" alt="" />
           </Link>
         </div>
-      </div>
+      </>
     );
   }
 }
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..427054d3d 100644
--- a/src/containers/auth/AuthLayoutContainer.js
+++ b/src/containers/auth/AuthLayoutContainer.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { ThemeProvider } from 'react-jss';
-import { theme } from '@meetfranz/theme';
 
 import AuthLayout from '../../components/auth/AuthLayout';
 import AppStore from '../../stores/AppStore';
@@ -24,24 +23,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}
@@ -50,7 +47,6 @@ export default @inject('stores', 'actions') @observer class AuthLayoutContainer
           retryHealthCheck={actions.app.healthCheck}
           isHealthCheckLoading={app.healthCheckRequest.isExecuting}
           isFullScreen={app.isFullScreen}
-          darkMode={app.isSystemDarkModeEnabled}
           installAppUpdate={actions.app.installUpdate}
           nextAppReleaseVersion={app.nextAppReleaseVersion}
           appUpdateIsDownloaded={app.updateStatus === app.updateStatusTypes.DOWNLOADED}
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/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js
index e7c5fe395..03bd5ba41 100644
--- a/src/features/announcements/components/AnnouncementScreen.js
+++ b/src/features/announcements/components/AnnouncementScreen.js
@@ -28,7 +28,7 @@ const smallScreen = '1000px';
 const styles = theme => ({
   container: {
     background: theme.colorBackground,
-    position: 'absolute',
+    position: 'relative',
     top: 0,
     zIndex: 140,
     width: '100%',
diff --git a/src/features/delayApp/index.js b/src/features/delayApp/index.js
index 67f0fc5e6..39fae3b20 100644
--- a/src/features/delayApp/index.js
+++ b/src/features/delayApp/index.js
@@ -33,7 +33,7 @@ export default function init(stores) {
   };
 
   reaction(
-    () => stores.user.isLoggedIn && stores.features.features.needToWaitToProceed && !stores.user.data.isPremium,
+    () => stores.user.isLoggedIn && stores.services.allServicesRequest.wasExecuted && stores.features.features.needToWaitToProceed && !stores.user.data.isPremium,
     (isEnabled) => {
       if (isEnabled) {
         debug('Enabling `delayApp` feature');
@@ -45,6 +45,7 @@ export default function init(stores) {
 
         autorun(() => {
           if (stores.services.all.length === 0) {
+            debug('seas', stores.services.all.length);
             shownAfterLaunch = true;
             return;
           }
@@ -64,7 +65,7 @@ export default function init(stores) {
               debug('Resetting app delay');
 
               setVisibility(false);
-            }, DEFAULT_FEATURES_CONFIG.needToWaitToProceedConfig.wait + 1000); // timer needs to be able to hit 0
+            }, config.delayDuration + 1000); // timer needs to be able to hit 0
           }
         });
       } else {
diff --git a/src/features/delayApp/styles.js b/src/features/delayApp/styles.js
index 5c214cfdf..69c3c7a27 100644
--- a/src/features/delayApp/styles.js
+++ b/src/features/delayApp/styles.js
@@ -1,7 +1,6 @@
 export default theme => ({
   container: {
     background: theme.colorBackground,
-    position: 'absolute',
     top: 0,
     width: '100%',
     display: 'flex',
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..9680c5bcc 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,10 +20,18 @@ 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;
 
-    return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.isAppMuted;
+    return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.app.isAppMuted;
   }
 
   @computed get isDarkThemeActive() {
@@ -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');
+    }
+  }
 }
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index e858b7904..9f226b61c 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -39,7 +39,7 @@ html { overflow: hidden; }
   .app__content { display: flex; }
 
   .app__service {
-    position: relative;
+    // position: relative;
     display: flex;
     flex: 1;
     flex-direction: column;
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index 80328dcef..f46ede4a2 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -64,7 +64,7 @@ body {
   font-size: 1.4rem;
   line-height: 1;
 
-  .theme__dark { color: $dark-theme-gray-smoke; }
+  &.theme__dark { color: $dark-theme-gray-smoke; }
 }
 
 * {
diff --git a/src/webview/contextMenu.js b/src/webview/contextMenu.js
index 967e8e667..a4a6ab899 100644
--- a/src/webview/contextMenu.js
+++ b/src/webview/contextMenu.js
@@ -280,13 +280,12 @@ const buildMenuTpl = (props, suggestions, isSpellcheckEnabled, defaultSpellcheck
 };
 
 export default function contextMenu(spellcheckProvider, isSpellcheckEnabled, getDefaultSpellcheckerLanguage, getSpellcheckerLanguage) {
-  webContents.on('context-menu', async (e, props) => {
+  webContents.on('context-menu', (e, props) => {
     e.preventDefault();
 
     let suggestions = [];
     if (spellcheckProvider && props.misspelledWord) {
-      debug('Mispelled word', props.misspelledWord);
-      suggestions = await spellcheckProvider.getSuggestion(props.misspelledWord);
+      suggestions = spellcheckProvider.getSuggestion(props.misspelledWord);
 
       debug('Suggestions', suggestions);
     }
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index 417d1ea1a..9158b3b94 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -1,8 +1,6 @@
 import { webFrame } from 'electron';
-import { attachSpellCheckProvider, SpellCheckerProvider } from 'electron-hunspell';
-import { ENVIRONMENT } from 'hunspell-asm';
+import { SpellCheckerProvider } from 'electron-hunspell';
 import path from 'path';
-import { readFileSync } from 'fs';
 
 import { DICTIONARY_PATH } from '../config';
 import { SPELLCHECKER_LOCALES } from '../i18n/languages';
@@ -12,12 +10,11 @@ const debug = require('debug')('Franz:spellchecker');
 let provider;
 let currentDict;
 let _isEnabled = false;
-let attached;
 
 async function loadDictionary(locale) {
   try {
     const fileLocation = path.join(DICTIONARY_PATH, `hunspell-dict-${locale}/${locale}`);
-    await provider.loadDictionary(locale, readFileSync(`${fileLocation}.dic`), readFileSync(`${fileLocation}.aff`));
+    await provider.loadDictionary(locale, `${fileLocation}.dic`, `${fileLocation}.aff`);
     debug('Loaded dictionary', locale, 'from', fileLocation);
   } catch (err) {
     console.error('Could not load dictionary', err);
@@ -44,7 +41,7 @@ export async function switchDict(locale) {
       provider.unloadDictionary(locale);
     }
     loadDictionary(locale);
-    attached.switchLanguage(locale);
+    provider.switchDictionary(locale);
 
     debug('Switched dictionary to', locale);
 
@@ -61,14 +58,12 @@ export default async function initialize(languageCode = 'en-us') {
     const locale = languageCode.toLowerCase();
 
     debug('Init spellchecker');
-    await provider.initialize({ environment: ENVIRONMENT.NODE });
-
-    debug('Attaching spellcheck provider');
-    attached = await attachSpellCheckProvider(provider);
+    await provider.initialize();
+    // await loadDictionaries();
 
     debug('Available spellchecker dictionaries', provider.availableDictionaries);
 
-    attached.switchLanguage(locale);
+    switchDict(locale);
 
     return provider;
   } catch (err) {