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

5 files changed, 94 insertions, 44 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>
     );
   }
diff --git a/src/containers/auth/AuthLayoutContainer.js b/src/containers/auth/AuthLayoutContainer.js
index a0618e012..e1a780d1e 100644
--- a/src/containers/auth/AuthLayoutContainer.js
+++ b/src/containers/auth/AuthLayoutContainer.js
@@ -26,6 +26,7 @@ export default @inject('stores', 'actions') @observer class AuthLayoutContainer
         isAPIHealthy={!stores.app.healthCheckRequest.isError}
         retryHealthCheck={actions.app.healthCheck}
         isHealthCheckLoading={stores.app.healthCheckRequest.isExecuting}
+        isFullScreen={stores.app.isFullscreen}
         darkMode={stores.app.isSystemDarkModeEnabled}
       >
         {children}
diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index 4cdf6ccd5..54e264dc6 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -1,6 +1,6 @@
 @import './config.scss';
 
-.theme__dark.auth {
+.theme__dark .auth {
   background: $dark-theme-gray-darkest;
 
   .auth__container {
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 0053db4d0..38e487b47 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -1,6 +1,5 @@
 @import './config.scss';
 
-
 .theme__dark .franz-form__button {
   background: $theme-brand-primary;
   color: $dark-theme-text-color;
diff --git a/src/styles/title-bar.scss b/src/styles/title-bar.scss
index 5c7b0bcdf..885eb94c4 100644
--- a/src/styles/title-bar.scss
+++ b/src/styles/title-bar.scss
@@ -1,3 +1,45 @@
+@import './config.scss';
+
+.theme__dark #electron-app-title-bar {
+  background: $dark-theme-gray-darker;
+
+  .toolbar-dropdown {
+    &.open > .toolbar-button > button { 
+      background: $dark-theme-gray-light;
+      color: $dark-theme-gray-lightest;
+    }
+
+    &:not(.open) {
+      .menu-item .menu-label { opacity: 1; }
+      > .toolbar-button > button:hover { 
+        background: $dark-theme-gray-darkest; 
+      }
+    }
+  }
+
+  #app-menu-bar #foldout-container .foldout {
+    color: $dark-theme-gray-lightest;
+
+    .menu-pane {
+      background: $dark-theme-gray-light;
+  
+      .menu-item {
+        .accelerator {
+          color: lighten($dark-theme-gray-light, 20%);
+        }
+      }
+  
+      hr {
+        border-color: $dark-theme-gray-lighter;
+      }
+    }
+  }
+
+  .list .ReactVirtualized__Grid {
+    background: $dark-theme-gray-light;
+  }
+}
+
 #electron-app-title-bar {
   background: $theme-gray-lightest;
   border-bottom: 0;