Add button to directly open darkmode.css

1 files changed, 26 insertions, 0 deletions

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 ? (