Merge branch 'develop' into local-server

12 files changed, 110 insertions, 20 deletions

diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index a77ad7742..aadb18d91 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -95,7 +95,7 @@ const styles = theme => ({
   },
 });
 
-export default @observer @injectSheet(styles) class Signup extends Component {
+export default @injectSheet(styles) @observer class Signup extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     isLoadingRequiredData: PropTypes.bool.isRequired,
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index d0cae3443..f7d10735c 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -116,7 +116,7 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
             { stores.settings.all.app.lockingFeatureEnabled ? (
               <button
                 type="button"
-                className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
+                className="sidebar__button"
                 onClick={() => {
                   // Disable lock first - otherwise the application might not update correctly
                   actions.settings.update({
@@ -201,6 +201,12 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
           data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`}
         >
           <i className="mdi mdi-settings" />
+          { (this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.AVAILABLE
+            || this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED) && (
+            <span className="update-availible">
+              •
+            </span>
+          ) }
         </button>
         {this.state.tooltipEnabled && (
           <ReactTooltip place="right" type="dark" effect="solid" />
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 664a494c1..49ee24361 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -15,7 +15,7 @@ import SettingsStore from '../../../stores/SettingsStore';
 import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 import { CUSTOM_WEBSITE_ID } from '../../../features/webControls/constants';
 
-export default @observer @inject('stores', 'actions') class ServiceView extends Component {
+export default @inject('stores', 'actions') @observer class ServiceView extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     setWebviewReference: PropTypes.func.isRequired,
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 6d7909362..80f17d8f2 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -44,7 +44,7 @@ const styles = {
   },
 };
 
-export default @observer @inject('actions') @injectSheet(styles) class Services extends Component {
+export default @injectSheet(styles) @inject('actions') @observer class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
     setWebviewReference: PropTypes.func.isRequired,
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 5fe00cb8b..76138aa15 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -29,6 +29,10 @@ const messages = defineMessages({
     id: 'settings.service.form.deleteButton',
     defaultMessage: '!!!Delete Service',
   },
+  openDarkmodeCss: {
+    id: 'settings.service.form.openDarkmodeCss',
+    defaultMessage: '!!!Open darkmode.css',
+  },
   availableServices: {
     id: 'settings.service.form.availableServices',
     defaultMessage: '!!!Available services',
@@ -127,6 +131,8 @@ export default @observer class EditServiceForm extends Component {
     form: PropTypes.instanceOf(Form).isRequired,
     onSubmit: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
+    openDarkmodeCss: PropTypes.func.isRequired,
+    isOpeningDarkModeCss: PropTypes.bool.isRequired,
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
     isProxyFeatureEnabled: PropTypes.bool.isRequired,
@@ -193,6 +199,8 @@ export default @observer class EditServiceForm extends Component {
       isSaving,
       isDeleting,
       onDelete,
+      openDarkmodeCss,
+      isOpeningDarkModeCss,
       isProxyFeatureEnabled,
       isServiceProxyIncludedInCurrentPlan,
       isSpellcheckerIncludedInCurrentPlan,
@@ -218,6 +226,23 @@ export default @observer class EditServiceForm extends Component {
       />
     );
 
+    const openDarkmodeCssButton = isOpeningDarkModeCss ? (
+      <Button
+        label={intl.formatMessage(messages.openDarkmodeCss)}
+        loaded={false}
+        buttonType="secondary"
+        className="settings__open-dark-mode-button"
+        disabled
+      />
+    ) : (
+      <Button
+        buttonType="secondary"
+        label={intl.formatMessage(messages.openDarkmodeCss)}
+        className="settings__open-dark-mode-button"
+        onClick={openDarkmodeCss}
+      />
+    );
+
     let activeTabIndex = 0;
     if (recipe.hasHostedOption && service.team) {
       activeTabIndex = 1;
@@ -329,9 +354,7 @@ export default @observer class EditServiceForm extends Component {
 
                 <div className="settings__settings-group">
                   <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
-                  {recipe.hasDarkMode && (
-                    <Toggle field={form.$('isDarkModeEnabled')} />
-                  )}
+                  <Toggle field={form.$('isDarkModeEnabled')} />
                   <Toggle field={form.$('isEnabled')} />
                 </div>
               </div>
@@ -406,6 +429,7 @@ export default @observer class EditServiceForm extends Component {
         <div className="settings__controls">
           {/* Delete Button */}
           {action === 'edit' && deleteButton}
+          {action === 'edit' && openDarkmodeCssButton}
 
           {/* Save Button */}
           {isSaving || isValidatingCustomUrl ? (
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index b01368f69..2be5c4ed7 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -79,6 +79,14 @@ const messages = defineMessages({
     id: 'settings.app.headlineAppearance',
     defaultMessage: '!!!Appearance',
   },
+  universalDarkModeInfo: {
+    id: 'settings.app.universalDarkModeInfo',
+    defaultMessage: '!!!Universal Dark Mode tries to dynamically generate dark mode styles for services that are otherwise not currently supported.',
+  },
+  accentColorInfo: {
+    id: 'settings.app.accentColorInfo',
+    defaultMessage: '!!!Write your accent color in a CSS-compatible format. (Default: #7367f0)',
+  },
   headlineAdvanced: {
     id: 'settings.app.headlineAdvanced',
     defaultMessage: '!!!Advanced',
@@ -152,6 +160,7 @@ export default @observer class EditSettingsForm extends Component {
     server: PropTypes.string.isRequired,
     noUpdates: PropTypes.bool.isRequired,
     hibernationEnabled: PropTypes.bool.isRequired,
+    isDarkmodeEnabled: PropTypes.bool.isRequired,
     openProcessManager: PropTypes.func.isRequired,
   };
 
@@ -188,6 +197,7 @@ export default @observer class EditSettingsForm extends Component {
       server,
       noUpdates,
       hibernationEnabled,
+      isDarkmodeEnabled,
       openProcessManager,
     } = this.props;
     const { intl } = this.context;
@@ -373,6 +383,28 @@ export default @observer class EditSettingsForm extends Component {
             <Toggle field={form.$('showDisabledServices')} />
             <Toggle field={form.$('showMessageBadgeWhenMuted')} />
             <Toggle field={form.$('darkMode')} />
+            {isDarkmodeEnabled && (
+              <>
+                <Toggle field={form.$('universalDarkMode')} />
+                <p
+                  className="settings__message"
+                  style={{
+                    borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+                  }}
+                >
+                  <span>
+                    { intl.formatMessage(messages.universalDarkModeInfo) }
+                  </span>
+                </p>
+              </>
+            )}
+
+            <Input
+              placeholder="Accent Color"
+              onChange={e => this.submit(e)}
+              field={form.$('accentColor')}
+            />
+            <p>{intl.formatMessage(messages.accentColorInfo)}</p>
 
             {/* Language */}
             <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
diff --git a/src/components/subscription/TrialForm.js b/src/components/subscription/TrialForm.js
index 9ed548f16..6ccdf20ae 100644
--- a/src/components/subscription/TrialForm.js
+++ b/src/components/subscription/TrialForm.js
@@ -56,7 +56,7 @@ const styles = theme => ({
   },
 });
 
-export default @observer @injectSheet(styles) class TrialForm extends Component {
+export default @injectSheet(styles) @observer class TrialForm extends Component {
   static propTypes = {
     activateTrial: PropTypes.func.isRequired,
     isActivatingTrial: PropTypes.bool.isRequired,
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
index e2d7cea83..5066b9c06 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 import Loader from 'react-loader';
 import classnames from 'classnames';
 
-export default @observer class Button extends Component {
+export default @inject('stores') @observer class Button extends Component {
   static propTypes = {
     className: PropTypes.string,
     label: PropTypes.string.isRequired,
@@ -14,12 +14,19 @@ export default @observer class Button extends Component {
     buttonType: PropTypes.string,
     loaded: PropTypes.bool,
     htmlForm: PropTypes.string,
+    stores: PropTypes.shape({
+      settings: PropTypes.shape({
+        app: PropTypes.shape({
+          accentColor: PropTypes.string.isRequired,
+        }).isRequired,
+      }).isRequired,
+    }).isRequired,
   };
 
   static defaultProps = {
     className: null,
     disabled: false,
-    onClick: () => {},
+    onClick: () => { },
     type: 'button',
     buttonType: '',
     loaded: true,
@@ -69,7 +76,7 @@ export default @observer class Button extends Component {
           loaded={loaded}
           lines={10}
           scale={0.4}
-          color={buttonType !== 'secondary' ? '#FFF' : '#7367F0'}
+          color={buttonType !== 'secondary' ? '#FFF' : this.props.stores.settings.app.accentColor}
           component="span"
         />
         {label}
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index 06dab1eb6..d8cdc2e8a 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 import injectSheet, { withTheme } from 'react-jss';
 import classnames from 'classnames';
 
@@ -8,7 +8,7 @@ import Loader from '../Loader';
 
 import styles from './styles';
 
-export default @observer @withTheme @injectSheet(styles) class FullscreenLoader extends Component {
+export default @inject('stores') @withTheme @injectSheet(styles) @observer class FullscreenLoader extends Component {
   static propTypes = {
     className: PropTypes.string,
     title: PropTypes.string.isRequired,
@@ -16,6 +16,13 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader
     theme: PropTypes.object.isRequired,
     spinnerColor: PropTypes.string,
     children: PropTypes.node,
+    stores: PropTypes.shape({
+      settings: PropTypes.shape({
+        app: PropTypes.shape({
+          accentColor: PropTypes.string.isRequired,
+        }).isRequired,
+      }).isRequired,
+    }).isRequired,
   };
 
   static defaultProps = {
@@ -32,10 +39,16 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader
       spinnerColor,
       className,
       theme,
+      stores,
     } = this.props;
 
     return (
-      <div className={classes.wrapper}>
+      <div
+        className={classes.wrapper}
+        style={{
+          background: stores.app.accentColor,
+        }}
+      >
         <div
           className={classnames({
             [`${classes.component}`]: true,
diff --git a/src/components/ui/FullscreenLoader/styles.js b/src/components/ui/FullscreenLoader/styles.js
index d516781a8..64d24e4ce 100644
--- a/src/components/ui/FullscreenLoader/styles.js
+++ b/src/components/ui/FullscreenLoader/styles.js
@@ -4,7 +4,6 @@ export default {
     alignItems: 'center',
     position: 'absolute',
     width: '100%',
-    background: 'linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%)',
   },
   component: {
     width: '100%',
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.js
index de8769b6c..4d7113aa1 100644
--- a/src/components/ui/Loader.js
+++ b/src/components/ui/Loader.js
@@ -1,22 +1,30 @@
 import React, { Component } from 'react';
+import { observer, inject } from 'mobx-react';
 import PropTypes from 'prop-types';
 import Loader from 'react-loader';
 
 import { oneOrManyChildElements } from '../../prop-types';
 
-export default class LoaderComponent extends Component {
+export default @inject('stores') @observer class LoaderComponent extends Component {
   static propTypes = {
     children: oneOrManyChildElements,
     loaded: PropTypes.bool,
     className: PropTypes.string,
     color: PropTypes.string,
+    stores: PropTypes.shape({
+      settings: PropTypes.shape({
+        app: PropTypes.shape({
+          accentColor: PropTypes.string.isRequired,
+        }).isRequired,
+      }).isRequired,
+    }).isRequired,
   };
 
   static defaultProps = {
     children: null,
     loaded: false,
     className: '',
-    color: '#7367F0',
+    color: 'ACCENT',
   };
 
   render() {
@@ -24,9 +32,10 @@ export default class LoaderComponent extends Component {
       children,
       loaded,
       className,
-      color,
     } = this.props;
 
+    const color = this.props.color !== 'ACCENT' ? this.props.color : this.props.stores.settings.app.accentColor;
+
     return (
       <Loader
         loaded={loaded}
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
index 58b6b6f1b..923f10327 100644
--- a/src/components/ui/WebviewLoader/index.js
+++ b/src/components/ui/WebviewLoader/index.js
@@ -14,7 +14,7 @@ const messages = defineMessages({
   },
 });
 
-export default @observer @injectSheet(styles) class WebviewLoader extends Component {
+export default @injectSheet(styles) @observer class WebviewLoader extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     classes: PropTypes.object.isRequired,