10 files changed, 27 insertions, 13 deletions

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/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 430b49b55..749912c59 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -108,7 +108,6 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
         openWindow={openWindow}
         reload={reload}
         openSettings={openSettings}
-        isAppMuted={settings.all.app.isAppMuted}
         update={updateService}
       />
     );
diff --git a/src/models/Service.js b/src/models/Service.js
index 3b8bebdef..eee8df8ca 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -15,7 +15,7 @@ export default class Service {
 
   events = {};
 
-  isAttached = false;
+  @observable isAttached = false;
 
   @observable isActive = false; // Is current webview active
 
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 84f84891a..f79197c38 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -70,6 +70,7 @@ export default class ServicesStore extends Store {
       this._mapActiveServiceToServiceModelReaction.bind(this),
       this._saveActiveService.bind(this),
       this._logoutReaction.bind(this),
+      this._handleMuteSettings.bind(this),
     ]);
 
     // Just bind this
@@ -622,6 +623,20 @@ export default class ServicesStore extends Store {
     }
   }
 
+  _handleMuteSettings() {
+    const { enabled } = this;
+    const { isAppMuted } = this.stores.settings.app;
+
+    enabled.forEach((service) => {
+      const { isAttached } = service;
+      const isMuted = isAppMuted || service.isMuted;
+
+      if (isAttached) {
+        service.webview.setAudioMuted(isMuted);
+      }
+    });
+  }
+
   _shareSettingsWithServiceProcess() {
     const settings = this.stores.settings.app;
     this.actions.service.sendIPCMessageToAllServices({
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index ebf468cf0..8b7cc512a 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -19,7 +19,7 @@ html { overflow: hidden; }
 
       &:hover,
       &:active { color: $dark-theme-gray-smoke; }
-      &.is-muted { color: $dark-theme-gray; }
+      &.is-muted { color: $theme-brand-primary; }
     }
   }
 
diff --git a/src/theme/dark/index.js b/src/theme/dark/index.js
index 429284f9e..8fdb321f3 100644
--- a/src/theme/dark/index.js
+++ b/src/theme/dark/index.js
@@ -8,6 +8,9 @@ export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo;
 export const colorHeadline = legacyStyles.darkThemeTextColor;
 export const colorText = legacyStyles.darkThemeTextColor;
 
+// Error Handler
+export const colorWebviewErrorHandlerBackground = legacyStyles.darkThemeGrayDarkest;
+
 // Loader
 export const colorFullscreenLoaderSpinner = '#FFF';
 export const colorWebviewLoaderBackground = hexToRgba(legacyStyles.darkThemeGrayDarkest, 0.5);
diff --git a/src/theme/default/index.js b/src/theme/default/index.js
index 3ce8e7f0e..61410073d 100644
--- a/src/theme/default/index.js
+++ b/src/theme/default/index.js
@@ -23,6 +23,9 @@ export const colorSubscriptionContainerTitle = brandPrimary;
 export const colorSubscriptionContainerActionButtonBackground = brandPrimary;
 export const colorSubscriptionContainerActionButtonColor = '#FFF';
 
+// Error Handler
+export const colorWebviewErrorHandlerBackground = legacyStyles.themeGrayLighter;
+
 // Loader
 export const colorAppLoaderSpinner = '#FFF';
 export const colorFullscreenLoaderSpinner = legacyStyles.themeGrayDark;