32 files changed, 203 insertions, 296 deletions

diff --git a/@types/index.d.ts b/@types/index.d.ts
new file mode 100644
index 000000000..e21f88cee
--- /dev/null
+++ b/@types/index.d.ts
@@ -0,0 +1,11 @@
+declare global {
+  interface Window {
+    ferdi: any;
+  }
+}
+
+/**
+ * Workaround to make TS recognize this file as a module.
+ * https://fettblog.eu/typescript-augmenting-global-lib-dom/
+ */
+export {};
diff --git a/package-lock.json b/package-lock.json
index 9d988e332..2128f78e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6613,12 +6613,6 @@
       "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
       "dev": true
     },
-    "@tsconfig/node14": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.1.tgz",
-      "integrity": "sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg==",
-      "dev": true
-    },
     "@types/babel__core": {
       "version": "7.1.15",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.15.tgz",
@@ -6975,6 +6969,12 @@
       "integrity": "sha512-XDwyIlt/47l2kWLTzw/mtrpLdB+GPSskR2n/PIcPn+VYhVO77rGhRncIR5GPU0KRzXuqkDO+J5qqrG0Y8P6jzQ==",
       "dev": true
     },
+    "@types/validator": {
+      "version": "13.6.3",
+      "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.6.3.tgz",
+      "integrity": "sha512-fWG42pMJOL4jKsDDZZREnXLjc3UE0R8LOJfARWYg6U966rxDT7TYejYzLnUF5cvSObGg34nd0+H2wHHU5Omdfw==",
+      "dev": true
+    },
     "@types/verror": {
       "version": "1.10.5",
       "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.5.tgz",
diff --git a/package.json b/package.json
index 638dca627..9b9382e3c 100644
--- a/package.json
+++ b/package.json
@@ -149,7 +149,6 @@
     "@commitlint/cli": "13.1.0",
     "@commitlint/config-conventional": "13.1.0",
     "@formatjs/cli": "4.2.33",
-    "@tsconfig/node14": "1.0.1",
     "@types/color": "3.0.2",
     "@types/du": "1.0.1",
     "@types/expect.js": "0.3.29",
@@ -163,6 +162,7 @@
     "@types/route-parser": "0.1.3",
     "@types/tar": "4.0.5",
     "@types/uuid": "3.4.9",
+    "@types/validator": "13.6.3",
     "@typescript-eslint/eslint-plugin": "4.30.0",
     "@typescript-eslint/parser": "4.29.1",
     "all-contributors-cli": "6.20.0",
diff --git a/packages/forms/tsconfig.json b/packages/forms/tsconfig.json
index 8b9507eac..015581136 100644
--- a/packages/forms/tsconfig.json
+++ b/packages/forms/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.settings.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "lib",
     "rootDir": "src"
diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json
index 4deaa5dd7..8b4163e7f 100644
--- a/packages/theme/tsconfig.json
+++ b/packages/theme/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.settings.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "lib",
     "rootDir": "src"
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 8b9507eac..015581136 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.settings.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "lib",
     "rootDir": "src"
diff --git a/recipes b/recipes
-Subproject 9db43e100a672b6d6932ac68c0fbe503c129138
+Subproject 2c5236b5251c7224a346f2a00a9d7e487aca3e6
diff --git a/src/actions/app.js b/src/actions/app.ts
index e6f7f22ba..e6f7f22ba 100644
--- a/src/actions/app.js
+++ b/src/actions/app.ts
diff --git a/src/actions/index.js b/src/actions/index.ts
index aecdac675..aecdac675 100644
--- a/src/actions/index.js
+++ b/src/actions/index.ts
diff --git a/src/actions/lib/actions.js b/src/actions/lib/actions.ts
index 7be40f1cf..ed42eabc0 100644
--- a/src/actions/lib/actions.js
+++ b/src/actions/lib/actions.ts
@@ -1,6 +1,6 @@
 export const createActionsFromDefinitions = (actionDefinitions, validate) => {
   const actions = {};
-  Object.keys(actionDefinitions).forEach((actionName) => {
+  Object.keys(actionDefinitions).forEach(actionName => {
     const action = (params = {}) => {
       const schema = actionDefinitions[actionName];
       validate(schema, params, actionName);
@@ -8,20 +8,24 @@ export const createActionsFromDefinitions = (actionDefinitions, validate) => {
     };
     actions[actionName] = action;
     action.listeners = [];
-    action.listen = (listener) => action.listeners.push(listener);
-    action.off = (listener) => {
+    action.listen = listener => action.listeners.push(listener);
+    action.off = listener => {
       const { listeners } = action;
       listeners.splice(listeners.indexOf(listener), 1);
     };
-    action.notify = (params) => action.listeners.forEach((listener) => listener(params));
+    action.notify = params =>
+      action.listeners.forEach(listener => listener(params));
   });
   return actions;
 };
 
 export default (definitions, validate) => {
   const newActions = {};
-  Object.keys(definitions).forEach((scopeName) => {
-    newActions[scopeName] = createActionsFromDefinitions(definitions[scopeName], validate);
+  Object.keys(definitions).forEach(scopeName => {
+    newActions[scopeName] = createActionsFromDefinitions(
+      definitions[scopeName],
+      validate,
+    );
   });
   return newActions;
 };
diff --git a/src/actions/news.js b/src/actions/news.ts
index db106e84f..db106e84f 100644
--- a/src/actions/news.js
+++ b/src/actions/news.ts
diff --git a/src/actions/recipe.js b/src/actions/recipe.ts
index 29b0a151f..29b0a151f 100644
--- a/src/actions/recipe.js
+++ b/src/actions/recipe.ts
diff --git a/src/actions/recipePreview.js b/src/actions/recipePreview.ts
index 36de3d844..36de3d844 100644
--- a/src/actions/recipePreview.js
+++ b/src/actions/recipePreview.ts
diff --git a/src/actions/requests.js b/src/actions/requests.ts
index 89296e7ec..89296e7ec 100644
--- a/src/actions/requests.js
+++ b/src/actions/requests.ts
diff --git a/src/actions/service.js b/src/actions/service.ts
index e56513f8f..e56513f8f 100644
--- a/src/actions/service.js
+++ b/src/actions/service.ts
diff --git a/src/actions/settings.js b/src/actions/settings.ts
index fd29b798b..fd29b798b 100644
--- a/src/actions/settings.js
+++ b/src/actions/settings.ts
diff --git a/src/actions/ui.js b/src/actions/ui.ts
index b913b430b..b913b430b 100644
--- a/src/actions/ui.js
+++ b/src/actions/ui.ts
diff --git a/src/actions/user.js b/src/actions/user.ts
index 20d27ee53..20d27ee53 100644
--- a/src/actions/user.js
+++ b/src/actions/user.ts
diff --git a/src/api/apiBase.js b/src/api/apiBase.ts
index 2fad7eb21..dc10fad91 100644
--- a/src/api/apiBase.js
+++ b/src/api/apiBase.ts
@@ -1,9 +1,7 @@
 /**
  * Get API base URL from store
  */
-import {
-  API_VERSION,
-} from '../environment';
+import { API_VERSION } from '../environment';
 import {
   DEV_API_FRANZ_WEBSITE,
   LIVE_FRANZ_API,
@@ -14,21 +12,25 @@ import {
 
 // Note: This cannot be used from the internal-server since we are not running within the context of a browser window
 const apiBase = (withVersion = true) => {
-  let url;
+  let url: string;
 
-  if (!window.ferdi
-    || !window.ferdi.stores.settings
-    || !window.ferdi.stores.settings.all
-    || !window.ferdi.stores.settings.all.app.server) {
+  if (
+    !(window as any).ferdi ||
+    !(window as any).ferdi.stores.settings ||
+    !(window as any).ferdi.stores.settings.all ||
+    !(window as any).ferdi.stores.settings.all.app.server
+  ) {
     // Stores have not yet been loaded - return SERVER_NOT_LOADED to force a retry when stores are loaded
     return SERVER_NOT_LOADED;
   }
-  if (window.ferdi.stores.settings.all.app.server === LOCAL_SERVER) {
+  if ((window as any).ferdi.stores.settings.all.app.server === LOCAL_SERVER) {
     // Use URL for local server
-    url = `http://${LOCAL_HOSTNAME}:${window.ferdi.stores.requests.localServerPort}`;
+    url = `http://${LOCAL_HOSTNAME}:${
+      (window as any).ferdi.stores.requests.localServerPort
+    }`;
   } else {
     // Load URL from store
-    url = window.ferdi.stores.settings.all.app.server;
+    url = (window as any).ferdi.stores.settings.all.app.server;
   }
 
   return withVersion ? `${url}/${API_VERSION}` : url;
@@ -38,5 +40,7 @@ export default apiBase;
 
 export function termsBase() {
   // TODO: This needs to handle local vs ferdi vs franz servers
-  return window.ferdi.stores.settings.all.app.server !== LIVE_FRANZ_API ? window.ferdi.stores.settings.all.app.server : DEV_API_FRANZ_WEBSITE;
+  return (window as any).ferdi.stores.settings.all.app.server !== LIVE_FRANZ_API
+    ? (window as any).ferdi.stores.settings.all.app.server
+    : DEV_API_FRANZ_WEBSITE;
 }
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
deleted file mode 100644
index 646cf56ca..000000000
--- a/src/components/ui/FeatureItem.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import injectSheet from 'react-jss';
-import { Icon } from '@meetfranz/ui';
-import classnames from 'classnames';
-import { mdiCheckCircle } from '@mdi/js';
-
-const styles = (theme) => ({
-  featureItem: {
-    borderBottom: [1, 'solid', theme.defaultContentBorder],
-    padding: [8, 0],
-    display: 'flex',
-    alignItems: 'center',
-    textAlign: 'left',
-  },
-  featureIcon: {
-    fill: theme.brandSuccess,
-    marginRight: 10,
-  },
-});
-
-export const FeatureItem = injectSheet(styles)(({
-  classes, className, name, icon,
-}) => (
-  <li className={classnames({
-    [classes.featureItem]: true,
-    [className]: className,
-  })}
-  >
-    {icon ? (
-      <span className={classes.featureIcon}>{icon}</span>
-    ) : (
-      <Icon icon={mdiCheckCircle} className={classes.featureIcon} size={1.5} />
-    )}
-    {name}
-  </li>
-));
-
-export default FeatureItem;
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
deleted file mode 100644
index 14e7ec3c4..000000000
--- a/src/components/ui/FeatureList.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import { FeatureItem } from './FeatureItem';
-
-const messages = defineMessages({
-  availableRecipes: {
-    id: 'pricing.features.recipes',
-    defaultMessage: 'Choose from more than 70 Services', // TODO: Make this dynamic
-  },
-  accountSync: {
-    id: 'pricing.features.accountSync',
-    defaultMessage: 'Account Synchronisation',
-  },
-  desktopNotifications: {
-    id: 'pricing.features.desktopNotifications',
-    defaultMessage: 'Desktop Notifications',
-  },
-  unlimitedServices: {
-    id: 'pricing.features.unlimitedServices',
-    defaultMessage: 'Add unlimited services',
-  },
-  spellchecker: {
-    id: 'pricing.features.spellchecker',
-    defaultMessage: 'Spellchecker support',
-  },
-  workspaces: {
-    id: 'pricing.features.workspaces',
-    defaultMessage: 'Workspaces',
-  },
-  customWebsites: {
-    id: 'pricing.features.customWebsites',
-    defaultMessage: 'Add Custom Websites',
-  },
-  onPremise: {
-    id: 'pricing.features.onPremise',
-    defaultMessage: 'On-premise & other Hosted Services',
-  },
-  thirdPartyServices: {
-    id: 'pricing.features.thirdPartyServices',
-    defaultMessage: 'Install 3rd party services',
-  },
-  serviceProxies: {
-    id: 'pricing.features.serviceProxies',
-    defaultMessage: 'Service Proxies',
-  },
-  teamManagement: {
-    id: 'pricing.features.teamManagement',
-    defaultMessage: 'Team Management',
-  },
-});
-
-export class FeatureList extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    featureClassName: PropTypes.string,
-  };
-
-  static defaultProps = {
-    className: '',
-    featureClassName: '',
-  };
-
-  render() {
-    const { className, featureClassName } = this.props;
-    const { intl } = this.props;
-
-    const features = [
-      messages.availableRecipes,
-      messages.accountSync,
-      messages.desktopNotifications,
-
-      messages.spellchecker,
-
-      messages.workspaces,
-      messages.customWebsites,
-      messages.thirdPartyServices,
-
-      messages.unlimitedServices,
-      messages.onPremise,
-      messages.serviceProxies,
-      messages.teamManagement,
-    ];
-
-    return (
-      <ul className={className}>
-        {features.map(feature => (
-          <FeatureItem
-            name={intl.formatMessage(feature)}
-            className={featureClassName}
-          />
-        ))}
-      </ul>
-    );
-  }
-}
-
-export default injectIntl(FeatureList);
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
index 335367f03..43fab10ee 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.js
@@ -42,7 +42,7 @@ class Input extends Component {
     passwordScore: 0,
   };
 
-  inputElement = null;
+  inputElement;
 
   componentDidMount() {
     if (this.props.focus) {
@@ -133,10 +133,10 @@ class Input extends Component {
               {/* <progress value={this.state.passwordScore} max="100" /> */}
               <meter
                 value={passwordScore < 5 ? 5 : passwordScore}
-                low="30"
-                high="75"
-                optimum="100"
-                max="100"
+                low={30}
+                high={75}
+                optimum={100}
+                max={100}
               />
             </div>
           )}
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js
index 3aab2fcad..d1db68ac6 100644
--- a/src/features/appearance/index.js
+++ b/src/features/appearance/index.js
@@ -10,13 +10,15 @@ function createStyleElement() {
   const styles = document.createElement('style');
   styles.id = STYLE_ELEMENT_ID;
 
-  document.querySelector('head').appendChild(styles);
+  document.querySelector('head')?.appendChild(styles);
 }
 
 function setAppearance(style) {
   const styleElement = document.getElementById(STYLE_ELEMENT_ID);
 
-  styleElement.innerHTML = style;
+  if (styleElement) {
+    styleElement.innerHTML = style;
+  }
 }
 
 // See https://github.com/Qix-/color/issues/53#issuecomment-656590710
@@ -28,7 +30,7 @@ function darkenAbsolute(originalColor, absoluteChange) {
 function generateAccentStyle(accentColorStr) {
   let style = '';
 
-  Object.keys(themeInfo).forEach((property) => {
+  Object.keys(themeInfo).forEach(property => {
     style += `
       ${themeInfo[property]} {
         ${property}: ${accentColorStr};
@@ -80,19 +82,21 @@ function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) {
   const width = Number(widthStr);
   const iconSize = Number(iconSizeStr) - iconSizeBias;
 
-  return vertical ? `
+  return vertical
+    ? `
     .tab-item {
       width: ${width - 2}px !important;
       height: ${width - 5 + iconSize}px !important;
       min-height: unset;
     }
     .tab-item .tab-item__icon {
-      width: ${(width / 2) + iconSize}px !important;
+      width: ${width / 2 + iconSize}px !important;
     }
     .sidebar__button {
       font-size: ${width / 3}px !important;
     }
-  ` : `
+  `
+    : `
     .sidebar {
       width: ${width}px !important;
     }
@@ -101,7 +105,7 @@ function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) {
       height: ${width - 5 + iconSize}px !important;
     }
     .tab-item .tab-item__icon {
-      width: ${(width / 2) + iconSize}px !important;
+      width: ${width / 2 + iconSize}px !important;
     }
     .sidebar__button {
       font-size: ${width / 3}px !important;
@@ -145,9 +149,13 @@ function generateVerticalStyle(widthStr, alwaysShowWorkspaces) {
   return `
   .sidebar {
     height: ${sidebarWidth + verticalStyleOffset + 1}px !important;
-  ${alwaysShowWorkspaces ? `
+  ${
+  alwaysShowWorkspaces
+    ? `
     width: calc(100% - 300px) !important;
-  ` : ''}
+  `
+    : ''
+}
   }
 
   .sidebar .sidebar__button {
@@ -192,12 +200,20 @@ function generateStyle(settings) {
     alwaysShowWorkspaces,
   } = settings;
 
-  if (accentColor.toLowerCase() !== DEFAULT_APP_SETTINGS.accentColor.toLowerCase()) {
+  if (
+    accentColor.toLowerCase() !== DEFAULT_APP_SETTINGS.accentColor.toLowerCase()
+  ) {
     style += generateAccentStyle(accentColor);
   }
-  if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth
-      || iconSize !== DEFAULT_APP_SETTINGS.iconSize) {
-    style += generateServiceRibbonWidthStyle(serviceRibbonWidth, iconSize, useVerticalStyle);
+  if (
+    serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth ||
+    iconSize !== DEFAULT_APP_SETTINGS.iconSize
+  ) {
+    style += generateServiceRibbonWidthStyle(
+      serviceRibbonWidth,
+      iconSize,
+      useVerticalStyle,
+    );
   }
   if (showDragArea) {
     style += generateShowDragAreaStyle(accentColor);
@@ -206,7 +222,9 @@ function generateStyle(settings) {
     style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces);
   } else if (document.getElementById('vertical-style')) {
     const link = document.getElementById('vertical-style');
-    document.head.removeChild(link);
+    if (link) {
+      document.head.removeChild(link);
+    }
   }
   if (alwaysShowWorkspaces) {
     style += generateOpenWorkspaceStyle();
@@ -225,14 +243,14 @@ export default function initAppearance(stores) {
 
   // Update style when settings change
   reaction(
-    () => ([
+    () => [
       settings.all.app.accentColor,
       settings.all.app.serviceRibbonWidth,
       settings.all.app.iconSize,
       settings.all.app.showDragArea,
       settings.all.app.useVerticalStyle,
       settings.all.app.alwaysShowWorkspaces,
-    ]),
+    ],
     () => {
       updateStyle(settings.all.app);
     },
diff --git a/src/helpers/serverless-helpers.js b/src/helpers/serverless-helpers.ts
index 01549e038..01549e038 100644
--- a/src/helpers/serverless-helpers.js
+++ b/src/helpers/serverless-helpers.ts
diff --git a/src/helpers/service-helpers.js b/src/helpers/service-helpers.ts
index 745f40dd9..13c921f88 100644
--- a/src/helpers/service-helpers.js
+++ b/src/helpers/service-helpers.ts
@@ -2,15 +2,20 @@ import { readdirSync, removeSync } from 'fs-extra';
 import { userDataPath } from '../environment';
 
 export function getServicePartitionsDirectory(...segments) {
-  return userDataPath('Partitions', ...([segments].flat()));
+  return userDataPath('Partitions', ...[segments].flat());
 }
 
-export function removeServicePartitionDirectory(id = '', addServicePrefix = false) {
-  const servicePartition = getServicePartitionsDirectory(`${addServicePrefix ? 'service-' : ''}${id}`);
+export function removeServicePartitionDirectory(
+  id = '',
+  addServicePrefix = false,
+) {
+  const servicePartition = getServicePartitionsDirectory(
+    `${addServicePrefix ? 'service-' : ''}${id}`,
+  );
   return removeSync(servicePartition);
 }
 
 export async function getServiceIdsFromPartitions() {
   const files = readdirSync(getServicePartitionsDirectory());
-  return files.filter((n) => n !== '__chrome_extension');
+  return files.filter(n => n !== '__chrome_extension');
 }
diff --git a/src/helpers/validation-helpers.js b/src/helpers/validation-helpers.ts
index 569b13bb0..80d368b2e 100644
--- a/src/helpers/validation-helpers.js
+++ b/src/helpers/validation-helpers.ts
@@ -28,7 +28,9 @@ export function required({ field }) {
   const isValid = field.value.trim() !== '';
   return [
     isValid,
-    window.ferdi.intl.formatMessage(messages.required, { field: field.label }),
+    (window as any).ferdi.intl.formatMessage(messages.required, {
+      field: field.label,
+    }),
   ];
 }
 
@@ -37,7 +39,9 @@ export function email({ field }) {
   const isValid = isEmail(value);
   return [
     isValid,
-    window.ferdi.intl.formatMessage(messages.email, { field: field.label }),
+    (window as any).ferdi.intl.formatMessage(messages.email, {
+      field: field.label,
+    }),
   ];
 }
 
@@ -58,11 +62,13 @@ export function url({ field }) {
 
   return [
     isValid,
-    window.ferdi.intl.formatMessage(messages.url, { field: field.label }),
+    (window as any).ferdi.intl.formatMessage(messages.url, {
+      field: field.label,
+    }),
   ];
 }
 
-export function minLength(length) {
+export function minLength(length: number) {
   return ({ field }) => {
     let isValid = true;
     if (field.touched) {
@@ -70,7 +76,7 @@ export function minLength(length) {
     }
     return [
       isValid,
-      window.ferdi.intl.formatMessage(messages.minLength, {
+      (window as any).ferdi.intl.formatMessage(messages.minLength, {
         field: field.label,
         length,
       }),
@@ -78,12 +84,12 @@ export function minLength(length) {
   };
 }
 
-export function oneRequired(targets) {
+export function oneRequired(targets: string[]) {
   return ({ field, form }) => {
     const invalidFields = targets.filter(target => form.$(target).value === '');
     return [
       targets.length !== invalidFields.length,
-      window.ferdi.intl.formatMessage(messages.required, {
+      (window as any).ferdi.intl.formatMessage(messages.required, {
         field: field.label,
       }),
     ];
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 19adaaf6a..c66056467 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -152,17 +152,6 @@
   "password.link.signup": "Create a free account",
   "password.noUser": "No user affiliated with that email address",
   "password.successInfo": "Your new password was sent to your email address",
-  "pricing.features.accountSync": "Account Synchronisation",
-  "pricing.features.customWebsites": "Add Custom Websites",
-  "pricing.features.desktopNotifications": "Desktop Notifications",
-  "pricing.features.onPremise": "On-premise & other Hosted Services",
-  "pricing.features.recipes": "Choose from more than 70 Services",
-  "pricing.features.serviceProxies": "Service Proxies",
-  "pricing.features.spellchecker": "Spellchecker support",
-  "pricing.features.teamManagement": "Team Management",
-  "pricing.features.thirdPartyServices": "Install 3rd party services",
-  "pricing.features.unlimitedServices": "Add unlimited services",
-  "pricing.features.workspaces": "Workspaces",
   "service.crashHandler.action": "Reload {name}",
   "service.crashHandler.autoReload": "Trying to automatically restore {name} in {seconds} seconds",
   "service.crashHandler.headline": "Oh no!",
diff --git a/src/index.js b/src/index.js
index 7f1f77b4e..08d9a3a45 100644
--- a/src/index.js
+++ b/src/index.js
@@ -78,14 +78,18 @@ if (isWindows) {
 const settings = new Settings('app', DEFAULT_APP_SETTINGS);
 const proxySettings = new Settings('proxy');
 
-const retrieveSettingValue = (key, defaultValue = true) => ifUndefinedBoolean(settings.get(key), defaultValue);
+const retrieveSettingValue = (key, defaultValue = true) =>
+  ifUndefinedBoolean(settings.get(key), defaultValue);
 
 if (retrieveSettingValue('sentry')) {
   // eslint-disable-next-line global-require
   require('./sentry');
 }
 
-const liftSingleInstanceLock = retrieveSettingValue('liftSingleInstanceLock', false);
+const liftSingleInstanceLock = retrieveSettingValue(
+  'liftSingleInstanceLock',
+  false,
+);
 
 // Force single window
 const gotTheLock = liftSingleInstanceLock
@@ -190,11 +194,11 @@ const createWindow = () => {
     minWidth: 600,
     minHeight: 500,
     show: false,
-    titleBarStyle: isMac ? 'hidden' : '',
+    titleBarStyle: isMac ? 'hidden' : 'default',
     frame: isLinux,
-    spellcheck: retrieveSettingValue('enableSpellchecking'),
     backgroundColor,
     webPreferences: {
+      spellcheck: retrieveSettingValue('enableSpellchecking'),
       nodeIntegration: true,
       contextIsolation: false,
       webviewTag: true,
@@ -268,10 +272,7 @@ const createWindow = () => {
     // Dereference the window object, usually you would store windows
     // in an array if your app supports multi windows, this is the time
     // when you should delete the corresponding element.
-    if (
-      !willQuitApp &&
-      retrieveSettingValue('runInBackground')
-    ) {
+    if (!willQuitApp && retrieveSettingValue('runInBackground')) {
       e.preventDefault();
       if (isWindows) {
         debug('Window: minimize');
@@ -471,7 +472,9 @@ ipcMain.on('open-browser-window', (e, { url, serviceId }) => {
 ipcMain.on(
   'modifyRequestHeaders',
   (e, { modifiedRequestHeaders, serviceId }) => {
-    debug(`Received modifyRequestHeaders ${modifiedRequestHeaders} for serviceId ${serviceId}`);
+    debug(
+      `Received modifyRequestHeaders ${modifiedRequestHeaders} for serviceId ${serviceId}`,
+    );
     modifiedRequestHeaders.forEach(headerFilterSet => {
       const { headers, requestFilters } = headerFilterSet;
       session
@@ -489,23 +492,22 @@ ipcMain.on(
   },
 );
 
-ipcMain.on(
-  'knownCertificateHosts',
-  (e, { knownHosts, serviceId }) => {
-    debug(`Received knownCertificateHosts ${knownHosts} for serviceId ${serviceId}`);
-    session
-      .fromPartition(`persist:service-${serviceId}`)
-      .setCertificateVerifyProc((request, callback) => {
-        // To know more about these callbacks: https://www.electronjs.org/docs/api/session#sessetcertificateverifyprocproc
-        const { hostname } = request;
-        if (knownHosts.find(item => item.includes(hostname)).length > 0) {
-          callback(0);
-        } else {
-          callback(-2);
-        }
-      });
-  },
-);
+ipcMain.on('knownCertificateHosts', (e, { knownHosts, serviceId }) => {
+  debug(
+    `Received knownCertificateHosts ${knownHosts} for serviceId ${serviceId}`,
+  );
+  session
+    .fromPartition(`persist:service-${serviceId}`)
+    .setCertificateVerifyProc((request, callback) => {
+      // To know more about these callbacks: https://www.electronjs.org/docs/api/session#sessetcertificateverifyprocproc
+      const { hostname } = request;
+      if (knownHosts.find(item => item.includes(hostname)).length > 0) {
+        callback(0);
+      } else {
+        callback(-2);
+      }
+    });
+});
 
 ipcMain.on('feature-basic-auth-cancel', () => {
   debug('Cancel basic auth');
@@ -560,7 +562,7 @@ app.on('window-all-closed', () => {
   }
 });
 
-app.on('before-quit', (event) => {
+app.on('before-quit', event => {
   const yesButtonIndex = 0;
   let selection = yesButtonIndex;
   if (retrieveSettingValue('confirmOnQuit')) {
@@ -568,10 +570,7 @@ app.on('before-quit', (event) => {
       type: 'question',
       message: 'Quit',
       detail: 'Do you really want to quit Ferdi?',
-      buttons: [
-        'Yes',
-        'No',
-      ],
+      buttons: ['Yes', 'No'],
     });
   }
   if (selection === yesButtonIndex) {
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.ts
index be675d5ed..ec48eeb40 100644
--- a/src/stores/UIStore.js
+++ b/src/stores/UIStore.ts
@@ -1,13 +1,15 @@
-import {
-  action, observable, computed, reaction,
-} from 'mobx';
-import { theme } from '@meetfranz/theme';
+import { action, observable, computed, reaction } from 'mobx';
+import { theme, ThemeType } from '@meetfranz/theme';
 import { nativeTheme, systemPreferences } from '@electron/remote';
 
 import Store from './lib/Store';
 import { isMac, isWindows } from '../environment';
 
 export default class UIStore extends Store {
+  actions: any;
+
+  stores: any;
+
   @observable showServicesUpdatedInfoBar = false;
 
   @observable isOsDarkThemeActive = nativeTheme.shouldUseDarkColors;
@@ -43,9 +45,7 @@ export default class UIStore extends Store {
 
   setup() {
     reaction(
-      () => (
-        this.isDarkThemeActive
-      ),
+      () => this.isDarkThemeActive,
       () => {
         this._setupThemeInDOM();
       },
@@ -57,24 +57,31 @@ export default class UIStore extends Store {
     const settings = this.stores.settings.all;
 
     return (
-      (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted)
-      || !settings.app.isAppMuted
+      (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) ||
+      !settings.app.isAppMuted
     );
   }
 
   @computed get isDarkThemeActive() {
-    const isWithAdaptableInDarkMode = this.stores.settings.all.app.adaptableDarkMode
-      && this.isOsDarkThemeActive;
-    const isWithoutAdaptableInDarkMode = this.stores.settings.all.app.darkMode
-      && !this.stores.settings.all.app.adaptableDarkMode;
+    const isWithAdaptableInDarkMode =
+      this.stores.settings.all.app.adaptableDarkMode &&
+      this.isOsDarkThemeActive;
+    const isWithoutAdaptableInDarkMode =
+      this.stores.settings.all.app.darkMode &&
+      !this.stores.settings.all.app.adaptableDarkMode;
     const isInDarkMode = this.stores.settings.all.app.darkMode;
-    return !!(isWithAdaptableInDarkMode
-      || isWithoutAdaptableInDarkMode
-      || isInDarkMode);
+    return !!(
+      isWithAdaptableInDarkMode ||
+      isWithoutAdaptableInDarkMode ||
+      isInDarkMode
+    );
   }
 
   @computed get theme() {
-    const themeId = (this.isDarkThemeActive || this.stores.settings.app.darkMode) ? 'dark' : 'default';
+    const themeId =
+      this.isDarkThemeActive || this.stores.settings.app.darkMode
+        ? ThemeType.dark
+        : ThemeType.default;
     const { accentColor } = this.stores.settings.app;
     return theme(themeId, accentColor);
   }
@@ -102,9 +109,9 @@ export default class UIStore extends Store {
     const body = document.querySelector('body');
 
     if (!this.isDarkThemeActive) {
-      body.classList.remove('theme__dark');
+      body?.classList.remove('theme__dark');
     } else {
-      body.classList.add('theme__dark');
+      body?.classList.add('theme__dark');
     }
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 2676f392d..c01c40f68 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,34 @@
 {
-  "extends": "./tsconfig.settings.json",
   "compilerOptions": {
     "outDir": ".tmp",
-    "rootDir": "./"
+    "rootDir": "./",
+    "baseUrl": ".",
+    "strict": true,
+    "target": "esnext",
+    "lib": ["esnext", "dom"],
+    "module": "commonjs",
+    "jsx": "react",
+    "typeRoots": ["@types", "node_modules/@types"],
+    "moduleResolution": "node",
+    "types": ["node"],
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "noImplicitAny": false, // TODO: Need to switch
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "composite": true,
+    "esModuleInterop": true,
+    "importHelpers": true,
+    "removeComments": true,
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "preserveConstEnums": true,
+    "strictNullChecks": true,
+    "resolveJsonModule": true,
+    "forceConsistentCasingInFileNames": true
   }
 }
diff --git a/tsconfig.settings.json b/tsconfig.settings.json
deleted file mode 100644
index bd4669e01..000000000
--- a/tsconfig.settings.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "extends": "@tsconfig/node14/tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "target": "esnext",
-    "lib": ["es2015", "es2017", "dom"],
-    "jsx": "react",
-    "typeRoots": ["node_modules/@types"],
-    "moduleResolution": "node",
-    "types": ["node"],
-    "sourceMap": true,
-    "noImplicitAny": false,   // TODO: Need to switch
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "composite": true,
-    "esModuleInterop": true,
-    "importHelpers": true,
-    "removeComments": true,
-    "allowUnreachableCode": false,
-    "allowUnusedLabels": false,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "preserveConstEnums": true,
-    "strictNullChecks": true,
-  }
-}
diff --git a/uidev/tsconfig.json b/uidev/tsconfig.json
index fb57639c8..60459d69e 100644
--- a/uidev/tsconfig.json
+++ b/uidev/tsconfig.json
@@ -1,14 +1,16 @@
 {
-  "extends": "../tsconfig.settings.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "baseUrl": "..",
     "outDir": "lib",
-    "rootDir": "src",
+    "rootDir": "src"
   },
-  "references": [{
-    "path": "../packages/theme"
-  },
-  {
-    "path": "../packages/forms"
-  }]
+  "references": [
+    {
+      "path": "../packages/theme"
+    },
+    {
+      "path": "../packages/forms"
+    }
+  ]
 }