Add windows title bar dark mode styling & add titlebar to auth

1 files changed, 50 insertions, 42 deletions

diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 032588471..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,7 @@ 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,
   };
 
@@ -35,54 +39,58 @@ export default @observer class AuthLayout extends Component {
       isAPIHealthy,
       retryHealthCheck,
       isHealthCheckLoading,
+      isFullScreen,
       darkMode,
     } = this.props;
     const { intl } = this.context;
 
     return (
-      <div className={`auth${darkMode ? ' theme__dark' : ''}`}>
-        {!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>
     );
   }