From a56408ad7531c1f5e552f926a88cc4540d805b85 Mon Sep 17 00:00:00 2001
From: vantezzen <hello@vantezzen.io>
Date: Wed, 16 Oct 2019 11:06:27 +0200
Subject: Add button to directly open darkmode.css

---
 src/actions/service.js                             |  3 +
 .../settings/services/EditServiceForm.js           | 26 ++++++
 src/containers/settings/EditServiceScreen.js       | 29 +++++++
 src/i18n/locales/defaultMessages.json              | 93 ++++++++++++----------
 src/i18n/locales/en-US.json                        |  1 +
 .../settings/services/EditServiceForm.json         | 93 ++++++++++++----------
 src/stores/ServicesStore.js                        | 26 ++++++
 src/styles/settings.scss                           |  1 +
 src/webview/darkmode/custom.js                     |  4 +-
 src/webview/recipe.js                              |  4 +-
 10 files changed, 196 insertions(+), 84 deletions(-)

(limited to 'src')

diff --git a/src/actions/service.js b/src/actions/service.js
index 99f4b3610..3283d8fee 100644
--- a/src/actions/service.js
+++ b/src/actions/service.js
@@ -28,6 +28,9 @@ export default {
     serviceId: PropTypes.string.isRequired,
     redirect: PropTypes.string,
   },
+  openDarkmodeCss: {
+    recipe: PropTypes.string.isRequired,
+  },
   clearCache: {
     serviceId: PropTypes.string.isRequired,
   },
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 5fe00cb8b..bcff62280 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;
@@ -406,6 +431,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/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index e4ff03bb3..d18d7fb9b 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -92,6 +92,10 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
     intl: intlShape,
   };
 
+  state = {
+    isOpeningDarkModeCss: false,
+  }
+
   onSubmit(data) {
     const { action } = this.props.router.params;
     const { recipes, services } = this.props.stores;
@@ -278,6 +282,28 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
     }
   }
 
+  openDarkmodeCss() {
+    const { openDarkmodeCss } = this.props.actions.service;
+    const { action } = this.props.router.params;
+
+    if (action === 'edit') {
+      this.setState({
+        isOpeningDarkModeCss: true,
+      });
+
+      const { activeSettings: service } = this.props.stores.services;
+      openDarkmodeCss({
+        recipe: service.recipe.id,
+      });
+
+      setTimeout(() => {
+        this.setState({
+          isOpeningDarkModeCss: false,
+        });
+      }, 2500);
+    }
+  }
+
   render() {
     const { recipes, services, user } = this.props.stores;
     const { action } = this.props.router.params;
@@ -329,6 +355,8 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
           isDeleting={services.deleteServiceRequest.isExecuting}
           onSubmit={d => this.onSubmit(d)}
           onDelete={() => this.deleteService()}
+          openDarkmodeCss={() => this.openDarkmodeCss()}
+          isOpeningDarkModeCss={this.state.isOpeningDarkModeCss}
           isProxyFeatureEnabled={proxyFeature.isEnabled}
           isServiceProxyIncludedInCurrentPlan={proxyFeature.isIncludedInCurrentPlan}
           isSpellcheckerIncludedInCurrentPlan={spellcheckerFeature.isIncludedInCurrentPlan}
@@ -356,6 +384,7 @@ EditServiceScreen.wrappedComponent.propTypes = {
       createService: PropTypes.func.isRequired,
       updateService: PropTypes.func.isRequired,
       deleteService: PropTypes.func.isRequired,
+      openDarkmodeCss: PropTypes.func.isRequired,
     }).isRequired,
     // settings: PropTypes.shape({
     //   update: PropTypes.func.isRequred,
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index c2ce3d783..3fc86c266 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -1974,263 +1974,276 @@
         }
       },
       {
-        "defaultMessage": "!!!Available services",
+        "defaultMessage": "!!!Open darkmode.css",
         "end": {
           "column": 3,
           "line": 35
         },
         "file": "src/components/settings/services/EditServiceForm.js",
+        "id": "settings.service.form.openDarkmodeCss",
+        "start": {
+          "column": 19,
+          "line": 32
+        }
+      },
+      {
+        "defaultMessage": "!!!Available services",
+        "end": {
+          "column": 3,
+          "line": 39
+        },
+        "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.availableServices",
         "start": {
           "column": 21,
-          "line": 32
+          "line": 36
         }
       },
       {
         "defaultMessage": "!!!Your services",
         "end": {
           "column": 3,
-          "line": 39
+          "line": 43
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.yourServices",
         "start": {
           "column": 16,
-          "line": 36
+          "line": 40
         }
       },
       {
         "defaultMessage": "!!!Add {name}",
         "end": {
           "column": 3,
-          "line": 43
+          "line": 47
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.addServiceHeadline",
         "start": {
           "column": 22,
-          "line": 40
+          "line": 44
         }
       },
       {
         "defaultMessage": "!!!Edit {name}",
         "end": {
           "column": 3,
-          "line": 47
+          "line": 51
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.editServiceHeadline",
         "start": {
           "column": 23,
-          "line": 44
+          "line": 48
         }
       },
       {
         "defaultMessage": "!!!Hosted",
         "end": {
           "column": 3,
-          "line": 51
+          "line": 55
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.tabHosted",
         "start": {
           "column": 13,
-          "line": 48
+          "line": 52
         }
       },
       {
         "defaultMessage": "!!!Self hosted ⭐️",
         "end": {
           "column": 3,
-          "line": 55
+          "line": 59
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.tabOnPremise",
         "start": {
           "column": 16,
-          "line": 52
+          "line": 56
         }
       },
       {
         "defaultMessage": "!!!Use the hosted {name} service.",
         "end": {
           "column": 3,
-          "line": 59
+          "line": 63
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.useHostedService",
         "start": {
           "column": 20,
-          "line": 56
+          "line": 60
         }
       },
       {
         "defaultMessage": "!!!Could not validate custom {name} server.",
         "end": {
           "column": 3,
-          "line": 63
+          "line": 67
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlValidationError",
         "start": {
           "column": 28,
-          "line": 60
+          "line": 64
         }
       },
       {
         "defaultMessage": "!!!To add self hosted services, you need a Ferdi Premium Supporter Account.",
         "end": {
           "column": 3,
-          "line": 67
+          "line": 71
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlPremiumInfo",
         "start": {
           "column": 24,
-          "line": 64
+          "line": 68
         }
       },
       {
         "defaultMessage": "!!!Upgrade your account",
         "end": {
           "column": 3,
-          "line": 71
+          "line": 75
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlUpgradeAccount",
         "start": {
           "column": 27,
-          "line": 68
+          "line": 72
         }
       },
       {
         "defaultMessage": "!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
         "end": {
           "column": 3,
-          "line": 75
+          "line": 79
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.indirectMessageInfo",
         "start": {
           "column": 23,
-          "line": 72
+          "line": 76
         }
       },
       {
         "defaultMessage": "!!!When disabled, all notification sounds and audio playback are muted",
         "end": {
           "column": 3,
-          "line": 79
+          "line": 83
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.isMutedInfo",
         "start": {
           "column": 15,
-          "line": 76
+          "line": 80
         }
       },
       {
         "defaultMessage": "!!!Notifications",
         "end": {
           "column": 3,
-          "line": 83
+          "line": 87
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineNotifications",
         "start": {
           "column": 25,
-          "line": 80
+          "line": 84
         }
       },
       {
         "defaultMessage": "!!!Unread message badges",
         "end": {
           "column": 3,
-          "line": 87
+          "line": 91
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineBadges",
         "start": {
           "column": 18,
-          "line": 84
+          "line": 88
         }
       },
       {
         "defaultMessage": "!!!General",
         "end": {
           "column": 3,
-          "line": 91
+          "line": 95
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineGeneral",
         "start": {
           "column": 19,
-          "line": 88
+          "line": 92
         }
       },
       {
         "defaultMessage": "!!!Delete",
         "end": {
           "column": 3,
-          "line": 95
+          "line": 99
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.iconDelete",
         "start": {
           "column": 14,
-          "line": 92
+          "line": 96
         }
       },
       {
         "defaultMessage": "!!!Drop your image, or click here",
         "end": {
           "column": 3,
-          "line": 99
+          "line": 103
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.iconUpload",
         "start": {
           "column": 14,
-          "line": 96
+          "line": 100
         }
       },
       {
         "defaultMessage": "!!!HTTP/HTTPS Proxy Settings",
         "end": {
           "column": 3,
-          "line": 103
+          "line": 107
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.headline",
         "start": {
           "column": 17,
-          "line": 100
+          "line": 104
         }
       },
       {
         "defaultMessage": "!!!Please restart Ferdi after changing proxy Settings.",
         "end": {
           "column": 3,
-          "line": 107
+          "line": 111
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.restartInfo",
         "start": {
           "column": 20,
-          "line": 104
+          "line": 108
         }
       },
       {
         "defaultMessage": "!!!Proxy settings will not be synchronized with the Ferdi servers.",
         "end": {
           "column": 3,
-          "line": 111
+          "line": 115
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.info",
         "start": {
           "column": 13,
-          "line": 108
+          "line": 112
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 2cdc57e3f..b4649c03c 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -316,6 +316,7 @@
   "settings.service.form.indirectMessages": "Show message badge for all new messages",
   "settings.service.form.isMutedInfo": "When disabled, all notification sounds and audio playback are muted",
   "settings.service.form.name": "Name",
+  "settings.service.form.openDarkmodeCss": "Open darkmode.css",
   "settings.service.form.proxy.headline": "HTTP/HTTPS Proxy Settings",
   "settings.service.form.proxy.host": "Proxy Host/IP",
   "settings.service.form.proxy.info": "Proxy settings will not synced with the Ferdi servers.",
diff --git a/src/i18n/messages/src/components/settings/services/EditServiceForm.json b/src/i18n/messages/src/components/settings/services/EditServiceForm.json
index 45dc7b690..f4692ed29 100644
--- a/src/i18n/messages/src/components/settings/services/EditServiceForm.json
+++ b/src/i18n/messages/src/components/settings/services/EditServiceForm.json
@@ -25,16 +25,29 @@
       "column": 3
     }
   },
+  {
+    "id": "settings.service.form.openDarkmodeCss",
+    "defaultMessage": "!!!Open darkmode.css",
+    "file": "src/components/settings/services/EditServiceForm.js",
+    "start": {
+      "line": 32,
+      "column": 19
+    },
+    "end": {
+      "line": 35,
+      "column": 3
+    }
+  },
   {
     "id": "settings.service.form.availableServices",
     "defaultMessage": "!!!Available services",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 32,
+      "line": 36,
       "column": 21
     },
     "end": {
-      "line": 35,
+      "line": 39,
       "column": 3
     }
   },
@@ -43,11 +56,11 @@
     "defaultMessage": "!!!Your services",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 36,
+      "line": 40,
       "column": 16
     },
     "end": {
-      "line": 39,
+      "line": 43,
       "column": 3
     }
   },
@@ -56,11 +69,11 @@
     "defaultMessage": "!!!Add {name}",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 40,
+      "line": 44,
       "column": 22
     },
     "end": {
-      "line": 43,
+      "line": 47,
       "column": 3
     }
   },
@@ -69,11 +82,11 @@
     "defaultMessage": "!!!Edit {name}",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 44,
+      "line": 48,
       "column": 23
     },
     "end": {
-      "line": 47,
+      "line": 51,
       "column": 3
     }
   },
@@ -82,11 +95,11 @@
     "defaultMessage": "!!!Hosted",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 48,
+      "line": 52,
       "column": 13
     },
     "end": {
-      "line": 51,
+      "line": 55,
       "column": 3
     }
   },
@@ -95,11 +108,11 @@
     "defaultMessage": "!!!Self hosted ⭐️",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 52,
+      "line": 56,
       "column": 16
     },
     "end": {
-      "line": 55,
+      "line": 59,
       "column": 3
     }
   },
@@ -108,11 +121,11 @@
     "defaultMessage": "!!!Use the hosted {name} service.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 56,
+      "line": 60,
       "column": 20
     },
     "end": {
-      "line": 59,
+      "line": 63,
       "column": 3
     }
   },
@@ -121,11 +134,11 @@
     "defaultMessage": "!!!Could not validate custom {name} server.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 60,
+      "line": 64,
       "column": 28
     },
     "end": {
-      "line": 63,
+      "line": 67,
       "column": 3
     }
   },
@@ -134,11 +147,11 @@
     "defaultMessage": "!!!To add self hosted services, you need a Ferdi Premium Supporter Account.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 64,
+      "line": 68,
       "column": 24
     },
     "end": {
-      "line": 67,
+      "line": 71,
       "column": 3
     }
   },
@@ -147,11 +160,11 @@
     "defaultMessage": "!!!Upgrade your account",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 68,
+      "line": 72,
       "column": 27
     },
     "end": {
-      "line": 71,
+      "line": 75,
       "column": 3
     }
   },
@@ -160,11 +173,11 @@
     "defaultMessage": "!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 72,
+      "line": 76,
       "column": 23
     },
     "end": {
-      "line": 75,
+      "line": 79,
       "column": 3
     }
   },
@@ -173,11 +186,11 @@
     "defaultMessage": "!!!When disabled, all notification sounds and audio playback are muted",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 76,
+      "line": 80,
       "column": 15
     },
     "end": {
-      "line": 79,
+      "line": 83,
       "column": 3
     }
   },
@@ -186,11 +199,11 @@
     "defaultMessage": "!!!Notifications",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 80,
+      "line": 84,
       "column": 25
     },
     "end": {
-      "line": 83,
+      "line": 87,
       "column": 3
     }
   },
@@ -199,11 +212,11 @@
     "defaultMessage": "!!!Unread message badges",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 84,
+      "line": 88,
       "column": 18
     },
     "end": {
-      "line": 87,
+      "line": 91,
       "column": 3
     }
   },
@@ -212,11 +225,11 @@
     "defaultMessage": "!!!General",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 88,
+      "line": 92,
       "column": 19
     },
     "end": {
-      "line": 91,
+      "line": 95,
       "column": 3
     }
   },
@@ -225,11 +238,11 @@
     "defaultMessage": "!!!Delete",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 92,
+      "line": 96,
       "column": 14
     },
     "end": {
-      "line": 95,
+      "line": 99,
       "column": 3
     }
   },
@@ -238,11 +251,11 @@
     "defaultMessage": "!!!Drop your image, or click here",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 96,
+      "line": 100,
       "column": 14
     },
     "end": {
-      "line": 99,
+      "line": 103,
       "column": 3
     }
   },
@@ -251,11 +264,11 @@
     "defaultMessage": "!!!HTTP/HTTPS Proxy Settings",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 100,
+      "line": 104,
       "column": 17
     },
     "end": {
-      "line": 103,
+      "line": 107,
       "column": 3
     }
   },
@@ -264,11 +277,11 @@
     "defaultMessage": "!!!Please restart Ferdi after changing proxy Settings.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 104,
+      "line": 108,
       "column": 20
     },
     "end": {
-      "line": 107,
+      "line": 111,
       "column": 3
     }
   },
@@ -277,11 +290,11 @@
     "defaultMessage": "!!!Proxy settings will not be synchronized with the Ferdi servers.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 108,
+      "line": 112,
       "column": 13
     },
     "end": {
-      "line": 111,
+      "line": 115,
       "column": 3
     }
   }
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 1bf32af9f..9e952a6b1 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -1,3 +1,4 @@
+import { shell } from 'electron';
 import {
   action,
   reaction,
@@ -6,12 +7,15 @@ import {
 } from 'mobx';
 import { remove } from 'lodash';
 import ms from 'ms';
+import fs from 'fs-extra';
+import path from 'path';
 
 import Store from './lib/Store';
 import Request from './lib/Request';
 import CachedRequest from './lib/CachedRequest';
 import { matchRoute } from '../helpers/routing-helpers';
 import { isInTimeframe } from '../helpers/schedule-helpers';
+import { getRecipeDirectory, getDevRecipeDirectory } from '../helpers/recipe-helpers';
 import { workspaceStore } from '../features/workspaces';
 import { serviceLimitStore } from '../features/serviceLimit';
 import { RESTRICTION_TYPES } from '../models/Service';
@@ -52,6 +56,7 @@ export default class ServicesStore extends Store {
     this.actions.service.createFromLegacyService.listen(this._createFromLegacyService.bind(this));
     this.actions.service.updateService.listen(this._updateService.bind(this));
     this.actions.service.deleteService.listen(this._deleteService.bind(this));
+    this.actions.service.openDarkmodeCss.listen(this._openDarkmodeCss.bind(this));
     this.actions.service.clearCache.listen(this._clearCache.bind(this));
     this.actions.service.setWebviewReference.listen(this._setWebviewReference.bind(this));
     this.actions.service.detachService.listen(this._detachService.bind(this));
@@ -316,6 +321,27 @@ export default class ServicesStore extends Store {
     this.actionStatus = request.result.status;
   }
 
+  @action async _openDarkmodeCss({ recipe }) {
+    // Get directory for recipe
+    const normalDirectory = getRecipeDirectory(recipe);
+    const devDirectory = getDevRecipeDirectory(recipe);
+    let directory;
+
+    if (await fs.pathExists(normalDirectory)) {
+      directory = normalDirectory;
+    } else if (await fs.pathExists(devDirectory)) {
+      directory = devDirectory;
+    } else {
+      // Recipe cannot be found on drive
+      return;
+    }
+
+    // Create and open darkmode.css
+    const file = path.join(directory, 'darkmode.css');
+    await fs.ensureFile(file);
+    shell.showItemInFolder(file);
+  }
+
   @action async _clearCache({ serviceId }) {
     this.clearCacheRequest.reset();
     const request = this.clearCacheRequest.execute(serviceId);
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index bb95ab5d2..071861f16 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -296,6 +296,7 @@
   }
 
   .settings__delete-button { right: 0; }
+  .settings__open-dark-mode-button { right: 0; cursor:pointer; }
 
   .settings__empty-state {
     align-items: center;
diff --git a/src/webview/darkmode/custom.js b/src/webview/darkmode/custom.js
index 4b2b89fb2..f767f5755 100644
--- a/src/webview/darkmode/custom.js
+++ b/src/webview/darkmode/custom.js
@@ -1,5 +1,5 @@
 // CSS for pages that need custom styles to work correctly in darkmode
-export default { 
+export default {
   'web.whatsapp.com': `
     div.landing-window > div.landing-main {
       background-color: #FFFFFF !important;
@@ -18,5 +18,5 @@ export default {
     .scan input.md-input {
       color: #212121;
     }
-  `
+  `,
 };
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 854cbce58..6068e6c4a 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -117,7 +117,7 @@ class RecipeController {
         this.cldIdentifier.destroy();
       }
     }
-    
+
     if (this.settings.service.isDarkModeEnabled || this.settings.app.darkMode) {
       debug('Enable dark mode');
 
@@ -130,7 +130,7 @@ class RecipeController {
       } else if (!ignoreList.includes(window.location.host)) {
         // Use darkreader instead
         enableDarkMode({}, {
-          css: customDarkModeCss[window.location.host] || ''
+          css: customDarkModeCss[window.location.host] || '',
         });
       }
     } else {
-- 
cgit v1.2.3-70-g09d2