Merge branch 'develop' into chore/lerna

7 files changed, 103 insertions, 15 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index dbe0bb4b6..bce792e56 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -6,9 +6,10 @@ import { TitleBar } from 'electron-react-titlebar';
 
 import InfoBar from '../ui/InfoBar';
 import { Component as DelayApp } from '../../features/delayApp';
+import { Component as BasicAuth } from '../../features/basicAuth';
 import ErrorBoundary from '../util/ErrorBoundary';
 
-import globalMessages from '../../i18n/globalMessages';
+// import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
 
@@ -50,7 +51,7 @@ export default @observer class AppLayout extends Component {
     services: PropTypes.element.isRequired,
     children: PropTypes.element,
     news: MobxPropTypes.arrayOrObservableArray.isRequired,
-    isOnline: PropTypes.bool.isRequired,
+    // isOnline: PropTypes.bool.isRequired,
     showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
     removeNewsItem: PropTypes.func.isRequired,
@@ -78,7 +79,7 @@ export default @observer class AppLayout extends Component {
       sidebar,
       services,
       children,
-      isOnline,
+      // isOnline,
       news,
       showServicesUpdatedInfoBar,
       appUpdateIsDownloaded,
@@ -114,14 +115,15 @@ export default @observer class AppLayout extends Component {
                     <span dangerouslySetInnerHTML={createMarkup(item.message)} />
                   </InfoBar>
                 ))}
-                {!isOnline && (
+                {/* {!isOnline && (
                   <InfoBar
                     type="danger"
+                    sticky
                   >
                     <span className="mdi mdi-flash" />
                     {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
                   </InfoBar>
-                )}
+                )} */}
                 {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
                   <InfoBar
                     type="danger"
@@ -161,6 +163,7 @@ export default @observer class AppLayout extends Component {
                   </InfoBar>
                 )}
                 {isDelayAppScreenVisible && (<DelayApp />)}
+                <BasicAuth />
                 {services}
               </div>
             </div>
diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
index 415a8d1b5..37ccc8e51 100644
--- a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
+++ b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
@@ -31,7 +31,7 @@ const messages = defineMessages({
   },
 });
 
-export default @injectSheet(styles) @observer class WebviewCrashHandler extends Component {
+export default @injectSheet(styles) @observer class WebviewErrorHandler extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     reload: PropTypes.func.isRequired,
diff --git a/src/components/services/content/ErrorHandlers/styles.js b/src/components/services/content/ErrorHandlers/styles.js
index f11386798..9e2509ee5 100644
--- a/src/components/services/content/ErrorHandlers/styles.js
+++ b/src/components/services/content/ErrorHandlers/styles.js
@@ -1,4 +1,4 @@
-export default {
+export default theme => ({
   component: {
     left: 0,
     position: 'absolute',
@@ -6,7 +6,7 @@ export default {
     width: '100%',
     zIndex: 0,
     alignItems: 'center',
-    // background: $theme-gray-lighter;
+    background: theme.colorWebviewErrorHandlerBackground,
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
@@ -22,4 +22,4 @@ export default {
       margin: [0, 10, 0, 10],
     },
   },
-};
+});
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index b1a2c0207..bb577e4cc 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -18,7 +18,6 @@ export default @observer class ServiceWebview extends Component {
     setWebviewReference: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
     edit: PropTypes.func.isRequired,
-    isAppMuted: PropTypes.bool.isRequired,
     enable: PropTypes.func.isRequired,
     isActive: PropTypes.bool,
   };
@@ -69,7 +68,6 @@ export default @observer class ServiceWebview extends Component {
       setWebviewReference,
       reload,
       edit,
-      isAppMuted,
       enable,
     } = this.props;
 
@@ -137,7 +135,6 @@ export default @observer class ServiceWebview extends Component {
             })}
             onUpdateTargetUrl={this.updateTargetUrl}
             useragent={service.userAgent}
-            muted={isAppMuted || service.isMuted}
             allowpopups
           />
         )}
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 1aeb17e03..54f16ba12 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -26,7 +26,6 @@ export default @observer class Services extends Component {
     openWindow: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
     openSettings: PropTypes.func.isRequired,
-    isAppMuted: PropTypes.bool.isRequired,
     update: PropTypes.func.isRequired,
   };
 
@@ -46,7 +45,6 @@ export default @observer class Services extends Component {
       openWindow,
       reload,
       openSettings,
-      isAppMuted,
       update,
     } = this.props;
     const { intl } = this.context;
@@ -81,7 +79,6 @@ export default @observer class Services extends Component {
             openWindow={openWindow}
             reload={() => reload({ serviceId: service.id })}
             edit={() => openSettings({ path: `services/edit/${service.id}` })}
-            isAppMuted={isAppMuted}
             enable={() => update({
               serviceId: service.id,
               serviceData: {
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js
new file mode 100644
index 000000000..d84e4c713
--- /dev/null
+++ b/src/components/ui/Modal/index.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import ReactModal from 'react-modal';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import injectCSS from 'react-jss';
+
+import styles from './styles';
+
+export default @injectCSS(styles) class Modal extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    classes: PropTypes.object.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    portal: PropTypes.string,
+    close: PropTypes.func.isRequired,
+  }
+
+  static defaultProps = {
+    className: null,
+    portal: 'modal-portal',
+  }
+
+  render() {
+    const {
+      children,
+      className,
+      classes,
+      isOpen,
+      portal,
+      close,
+    } = this.props;
+
+    return (
+      <ReactModal
+        isOpen={isOpen}
+        className={classnames({
+          [`${classes.modal}`]: true,
+          [`${className}`]: className,
+        })}
+        portalClassName={classes.component}
+        overlayClassName={classes.overlay}
+        portal={portal}
+        onRequestClose={close}
+      >
+        {/* <button
+          type="button"
+          className={classnames({
+            [`${classes.close}`]: true,
+            'mdi mdi-close': true,
+          })}
+        /> */}
+        <div className={classes.content}>
+          {children}
+        </div>
+      </ReactModal>
+    );
+  }
+}
diff --git a/src/components/ui/Modal/styles.js b/src/components/ui/Modal/styles.js
new file mode 100644
index 000000000..56fecbf55
--- /dev/null
+++ b/src/components/ui/Modal/styles.js
@@ -0,0 +1,32 @@
+export default theme => ({
+  component: {
+    zIndex: 500,
+    position: 'absolute',
+  },
+  overlay: {
+    background: theme.colorModalOverlayBackground,
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: 'flex',
+  },
+  modal: {
+    background: '#FFF',
+    maxWidth: '90%',
+    height: 'auto',
+    margin: 'auto auto',
+    borderRadius: 6,
+    boxShadow: '0px 13px 40px 0px rgba(0,0,0,0.2)',
+    position: 'relative',
+  },
+  content: {
+    padding: 20,
+  },
+  close: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
+});