1 files changed, 43 insertions, 14 deletions

diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 5cde0db8e..fa34ac60b 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',
@@ -63,7 +67,7 @@ const messages = defineMessages({
   },
   customUrlPremiumInfo: {
     id: 'settings.service.form.customUrlPremiumInfo',
-    defaultMessage: '!!!To add self hosted services, you need a Franz Premium Supporter Account.',
+    defaultMessage: '!!!To add self hosted services, you need a Ferdi Premium Supporter Account.',
   },
   customUrlUpgradeAccount: {
     id: 'settings.service.form.customUrlUpgradeAccount',
@@ -103,11 +107,11 @@ const messages = defineMessages({
   },
   proxyRestartInfo: {
     id: 'settings.service.form.proxy.restartInfo',
-    defaultMessage: '!!!Please restart Franz after changing proxy Settings.',
+    defaultMessage: '!!!Please restart Ferdi after changing proxy Settings.',
   },
   proxyInfo: {
     id: 'settings.service.form.proxy.info',
-    defaultMessage: '!!!Proxy settings will not be synchronized with the Franz servers.',
+    defaultMessage: '!!!Proxy settings will not be synchronized with the Ferdi servers.',
   },
 });
 
@@ -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,
@@ -155,7 +161,7 @@ export default @observer class EditServiceForm extends Component {
         const values = form.values();
         let isValid = true;
 
-        const files = form.$('customIcon').files;
+        const { files } = form.$('customIcon');
         if (files) {
           values.iconFile = files[0];
         }
@@ -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;
@@ -303,6 +328,18 @@ export default @observer class EditServiceForm extends Component {
                 )}
               </Tabs>
             )}
+
+            {recipe.message && (
+              <p
+                className="settings__message"
+                style={{
+                  marginTop: 0,
+                }}
+              >
+                <span className="mdi mdi-information" />
+                {recipe.message}
+              </p>
+            )}
             <div className="service-flex-grid">
               <div className="settings__options">
                 <div className="settings__settings-group">
@@ -329,9 +366,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>
@@ -394,18 +429,12 @@ export default @observer class EditServiceForm extends Component {
                 </div>
               </PremiumFeatureContainer>
             )}
-
-            {recipe.message && (
-              <p className="settings__message">
-                <span className="mdi mdi-information" />
-                {recipe.message}
-              </p>
-            )}
           </form>
         </div>
         <div className="settings__controls">
           {/* Delete Button */}
           {action === 'edit' && deleteButton}
+          {action === 'edit' && openDarkmodeCssButton}
 
           {/* Save Button */}
           {isSaving || isValidatingCustomUrl ? (