Merge branch 'feature/dark-theme' into develop

3 files changed, 56 insertions, 43 deletions

diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 4c991797c..4fb0e6a59 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { RouteTransition } from 'react-router-transition';
 import { intlShape } from 'react-intl';
+import { TitleBar } from 'electron-react-titlebar';
 
 import Link from '../ui/Link';
 import InfoBar from '../ui/InfoBar';
@@ -10,6 +11,8 @@ import InfoBar from '../ui/InfoBar';
 import { oneOrManyChildElements, globalError as globalErrorPropType } from '../../prop-types';
 import globalMessages from '../../i18n/globalMessages';
 
+import { isWindows } from '../../environment';
+
 export default @observer class AuthLayout extends Component {
   static propTypes = {
     children: oneOrManyChildElements.isRequired,
@@ -19,6 +22,8 @@ export default @observer class AuthLayout extends Component {
     isAPIHealthy: PropTypes.bool.isRequired,
     retryHealthCheck: PropTypes.func.isRequired,
     isHealthCheckLoading: PropTypes.bool.isRequired,
+    isFullScreen: PropTypes.bool.isRequired,
+    darkMode: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -34,53 +39,58 @@ export default @observer class AuthLayout extends Component {
       isAPIHealthy,
       retryHealthCheck,
       isHealthCheckLoading,
+      isFullScreen,
+      darkMode,
     } = this.props;
     const { intl } = this.context;
 
     return (
-      <div className="auth">
-        {!isOnline && (
-          <InfoBar
-            type="warning"
-          >
-            <span className="mdi mdi-flash" />
-            {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
-          </InfoBar>
-        )}
-        {isOnline && !isAPIHealthy && (
-          <InfoBar
-            type="danger"
-            ctaLabel="Try again"
-            ctaLoading={isHealthCheckLoading}
-            sticky
-            onClick={retryHealthCheck}
-          >
-            <span className="mdi mdi-flash" />
-            {intl.formatMessage(globalMessages.APIUnhealthy)}
-          </InfoBar>
-        )}
-        <div className="auth__layout">
-          <RouteTransition
-            pathname={pathname}
-            atEnter={{ opacity: 0 }}
-            atLeave={{ opacity: 0 }}
-            atActive={{ opacity: 1 }}
-            mapStyles={styles => ({
-              transform: `translateX(${styles.translateX}%)`,
-              opacity: styles.opacity,
-            })}
-            component="span"
-          >
-            {/* Inject globalError into children  */}
-            {React.cloneElement(children, {
-              error,
-            })}
-          </RouteTransition>
+      <div className={darkMode ? 'theme__dark' : ''}>
+        {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon={'assets/images/logo.svg'} />}
+        <div className={'auth'}>
+          {!isOnline && (
+            <InfoBar
+              type="warning"
+            >
+              <span className="mdi mdi-flash" />
+              {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
+            </InfoBar>
+          )}
+          {isOnline && !isAPIHealthy && (
+            <InfoBar
+              type="danger"
+              ctaLabel="Try again"
+              ctaLoading={isHealthCheckLoading}
+              sticky
+              onClick={retryHealthCheck}
+            >
+              <span className="mdi mdi-flash" />
+              {intl.formatMessage(globalMessages.APIUnhealthy)}
+            </InfoBar>
+          )}
+          <div className="auth__layout">
+            <RouteTransition
+              pathname={pathname}
+              atEnter={{ opacity: 0 }}
+              atLeave={{ opacity: 0 }}
+              atActive={{ opacity: 1 }}
+              mapStyles={styles => ({
+                transform: `translateX(${styles.translateX}%)`,
+                opacity: styles.opacity,
+              })}
+              component="span"
+            >
+              {/* Inject globalError into children  */}
+              {React.cloneElement(children, {
+                error,
+              })}
+            </RouteTransition>
+          </div>
+          {/* </div> */}
+          <Link to="https://adlk.io" className="auth__adlk" target="_blank">
+            <img src="./assets/images/adlk.svg" alt="" />
+          </Link>
         </div>
-        {/* </div> */}
-        <Link to="https://adlk.io" className="auth__adlk" target="_blank">
-          <img src="./assets/images/adlk.svg" alt="" />
-        </Link>
       </div>
     );
   }
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index c2e811f3e..a4003ef8e 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -57,6 +57,7 @@ export default @observer class AppLayout extends Component {
     areRequiredRequestsSuccessful: PropTypes.bool.isRequired,
     retryRequiredRequests: PropTypes.func.isRequired,
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
+    darkMode: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -84,12 +85,13 @@ export default @observer class AppLayout extends Component {
       areRequiredRequestsSuccessful,
       retryRequiredRequests,
       areRequiredRequestsLoading,
+      darkMode,
     } = this.props;
 
     const { intl } = this.context;
 
     return (
-      <div>
+      <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">
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 3d265ce31..b5c048ebd 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -160,6 +160,7 @@ export default @observer class EditSettingsForm extends Component {
             <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
             <Toggle field={form.$('showDisabledServices')} />
             <Toggle field={form.$('showMessageBadgeWhenMuted')} />
+            <Toggle field={form.$('darkMode')} />
 
             {/* Language */}
             <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>