129 files changed, 964 insertions, 1039 deletions

diff --git a/.eslintignore b/.eslintignore
index 52fde4c3e..5385bbb5f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,5 +1,6 @@
 build/
 out/
 packages/*/lib
+packages/**/*.test.*
 src/internal-server
-recipes/
\ No newline at end of file
+recipes/
diff --git a/.eslintrc b/.eslintrc
index 668f688ae..5e8d4cebf 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,71 +3,124 @@
   "parser": "@babel/eslint-parser",
   "extends": "eslint-config-airbnb",
   "plugins": ["jest"],
-  "rules": {
-    "arrow-parens": 0,
-    "consistent-return": 0,
-    "no-param-reassign": 0,
-    "import/extensions": 0,
-    "import/no-extraneous-dependencies": 0,
-    "import/no-unresolved": [
-      2,
-      {
-        "ignore": ["electron"]
-      }
-    ],
-    "import/prefer-default-export": 0,
-    "linebreak-style": 0,
-    "react/static-property-placement": 0,
-    "react/state-in-constructor": 0,
-    "react/jsx-props-no-spreading": 0,
-    "react/prefer-stateless-function": 0,
-    "react/jsx-filename-extension": [
-      1,
-      {
-        "extensions": [".js", ".jsx"]
-      }
-    ],
-    "react/forbid-prop-types": 0,
-    "react/destructuring-assignment": 0,
-    "prefer-destructuring": 1,
-    "no-underscore-dangle": 0,
-    "max-len": 0,
-    "class-methods-use-this": 0,
-    "no-console": 0,
-    "react/jsx-no-bind": 0,
-    "react/sort-comp": 0,
-    "jsx-a11y/no-static-element-interactions": 0,
-    "react/jsx-no-target-blank": 0,
-    "no-restricted-syntax": [0, "ForInStatement"],
-    "jsx-a11y/no-noninteractive-element-interactions": 1,
-    "jsx-a11y/label-has-for": [
-      2,
-      {
-        "components": ["Label"],
-        "required": {
-          "every": ["id"]
-        },
-        "allowChildren": false
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "env": { "browser": true, "es6": true, "node": true },
+      "extends": ["airbnb-typescript"],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "ecmaFeatures": { "jsx": true },
+        "ecmaVersion": 2018,
+        "sourceType": "module",
+        "project": "./tsconfig.json"
+      },
+      "plugins": ["@typescript-eslint"],
+      "rules": {
+        // eslint
+        "arrow-parens": 0,
+        "array-callback-return": 1,
+        "class-methods-use-this": 0,
+        "consistent-return": 0,
+        "implicit-arrow-linebreak": 0,
+        "linebreak-style": 0,
+        "max-len": 0,
+        "no-confusing-arrow": 0,
+        "no-console": 0,
+        "no-param-reassign": 0,
+        "no-return-assign": 1,
+        "no-underscore-dangle": 0,
+        "no-use-before-define": 0,
+        "prefer-destructuring": 1,
+        "object-curly-newline": 0,
+        "operator-linebreak": 0,
+        // @typescript-eslint
+        "@typescript-eslint/indent": 0,
+        "@typescript-eslint/no-shadow": 0,
+        "@typescript-eslint/no-unused-expressions": 0,
+        // eslint-plugin-import
+        "import/extensions": 0,
+        "import/no-cycle": 1,
+        "import/no-extraneous-dependencies": 0,
+        "import/no-unresolved": 0,
+        "import/prefer-default-export": 0,
+        // eslint-plugin-react
+        "react/destructuring-assignment": 0,
+        "react/button-has-type": 0,
+        "react/forbid-prop-types": 0,
+        "react/jsx-curly-newline": 0,
+        "react/jsx-no-bind": 0,
+        "react/jsx-no-target-blank": 0,
+        "react/jsx-props-no-spreading": 0,
+        "react/no-deprecated": 1,
+        "react/no-array-index-key": 0,
+        "react/prefer-stateless-function": 0,
+        "react/sort-comp": 0,
+        "react/state-in-constructor": 0,
+        "react/static-property-placement": 0,
+        //  eslint-plugin-jsx-a11y
+        "jsx-a11y/click-events-have-key-events": 1,
+        "jsx-a11y/mouse-events-have-key-events": 1,
+        "jsx-a11y/label-has-for": [
+          2,
+          {
+            "components": ["Label"],
+            "required": {
+              "every": ["id"]
+            },
+            "allowChildren": false
+          }
+        ],
+        "jsx-a11y/no-static-element-interactions": 0,
+        "jsx-a11y/no-noninteractive-element-interactions": 1
       }
-    ],
-    "jsx-a11y/click-events-have-key-events": 1
+    }
+  ],
+  "settings": {
+    "react": {
+      "pragma": "React", // Pragma to use, default to "React"
+      "version": "detect" // React version. "detect" automatically picks the version you have installed.
+    }
   },
   "globals": {
     "window": true,
     "document": true,
-    "ENV": true,
     "FormData": true,
     "localStorage": true,
     "navigator": true,
-    "Worker": true,
-    "atob": true,
-    "btoa": true,
-    "ga": true,
-    "mocha": true,
-    "Element": true,
-    "electron": true
+    "Element": true
   },
   "env": {
     "jest/globals": true
+  },
+  "rules": {
+    // eslint
+    "prefer-destructuring": 1,
+    "class-methods-use-this": 1,
+    "consistent-return": 1,
+    "max-len": 0,
+    "no-param-reassign": 1,
+    "no-restricted-syntax": 0,
+    "no-underscore-dangle": 0,
+    "operator-linebreak": 0,
+    // eslint-plugin-import
+    "import/extensions": 1,
+    "import/prefer-default-export": 0,
+    "import/no-extraneous-dependencies": 1,
+    "import/no-unresolved": 1,
+    // eslint-plugin-react
+    "react/forbid-prop-types": 1,
+    "react/destructuring-assignment": 0,
+    "react/jsx-filename-extension": 1,
+    "react/jsx-no-bind": 1,
+    "react/jsx-props-no-spreading": 0,
+    "react/prefer-stateless-function": 1,
+    "react/static-property-placement": 0,
+    "react/state-in-constructor": 1,
+    "react/sort-comp": 0,
+    //  eslint-plugin-jsx-a11y
+    "jsx-a11y/click-events-have-key-events": 1,
+    "jsx-a11y/no-static-element-interactions": 1,
+    "jsx-a11y/no-noninteractive-element-interactions": 1
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 45c38f01b..cb80ba47a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3526,46 +3526,6 @@
         }
       }
     },
-    "@fimbul/bifrost": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/@fimbul/bifrost/-/bifrost-0.21.0.tgz",
-      "integrity": "sha512-ou8VU+nTmOW1jeg+FT+sn+an/M0Xb9G16RucrfhjXGWv1Q97kCoM5CG9Qj7GYOSdu7km72k7nY83Eyr53Bkakg==",
-      "dev": true,
-      "requires": {
-        "@fimbul/ymir": "^0.21.0",
-        "get-caller-file": "^2.0.0",
-        "tslib": "^1.8.1",
-        "tsutils": "^3.5.0"
-      },
-      "dependencies": {
-        "get-caller-file": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-          "dev": true
-        },
-        "tsutils": {
-          "version": "3.17.1",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
-          "integrity": "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.8.1"
-          }
-        }
-      }
-    },
-    "@fimbul/ymir": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/@fimbul/ymir/-/ymir-0.21.0.tgz",
-      "integrity": "sha512-T/y7WqPsm4n3zhT08EpB5sfdm2Kvw3gurAxr2Lr5dQeLi8ZsMlNT/Jby+ZmuuAAd1PnXYzKp+2SXgIkQIIMCUg==",
-      "dev": true,
-      "requires": {
-        "inversify": "^5.0.0",
-        "reflect-metadata": "^0.1.12",
-        "tslib": "^1.8.1"
-      }
-    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -8175,22 +8135,6 @@
         "@types/ms": "*"
       }
     },
-    "@types/eslint": {
-      "version": "7.2.13",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.13.tgz",
-      "integrity": "sha512-LKmQCWAlnVHvvXq4oasNUMTJJb2GwSyTY8+1C7OH5ILR8mPLaljv1jxL1bXW3xB3jFbQxTKxJAvI8PyjB09aBg==",
-      "dev": true,
-      "requires": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "@types/estree": {
-      "version": "0.0.48",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.48.tgz",
-      "integrity": "sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==",
-      "dev": true
-    },
     "@types/events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
@@ -8484,6 +8428,38 @@
       "integrity": "sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==",
       "dev": true
     },
+    "@typescript-eslint/eslint-plugin": {
+      "version": "4.28.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.28.5.tgz",
+      "integrity": "sha512-m31cPEnbuCqXtEZQJOXAHsHvtoDi9OVaeL5wZnO2KZTnkvELk+u6J6jHg+NzvWQxk+87Zjbc4lJS4NHmgImz6Q==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/experimental-utils": "4.28.5",
+        "@typescript-eslint/scope-manager": "4.28.5",
+        "debug": "^4.3.1",
+        "functional-red-black-tree": "^1.0.1",
+        "regexpp": "^3.1.0",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        }
+      }
+    },
     "@typescript-eslint/experimental-utils": {
       "version": "4.28.5",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.28.5.tgz",
@@ -8536,6 +8512,35 @@
         }
       }
     },
+    "@typescript-eslint/parser": {
+      "version": "4.28.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.28.5.tgz",
+      "integrity": "sha512-NPCOGhTnkXGMqTznqgVbA5LqVsnw+i3+XA1UKLnAb+MG1Y1rP4ZSK9GX0kJBmAZTMIktf+dTwXToT6kFwyimbw==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/scope-manager": "4.28.5",
+        "@typescript-eslint/types": "4.28.5",
+        "@typescript-eslint/typescript-estree": "4.28.5",
+        "debug": "^4.3.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        }
+      }
+    },
     "@typescript-eslint/scope-manager": {
       "version": "4.28.5",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.5.tgz",
@@ -11698,12 +11703,6 @@
         }
       }
     },
-    "builtin-modules": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
-      "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
-      "dev": true
-    },
     "builtin-status-codes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -16965,6 +16964,23 @@
         }
       }
     },
+    "eslint-config-airbnb-typescript": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-12.3.1.tgz",
+      "integrity": "sha512-ql/Pe6/hppYuRp4m3iPaHJqkBB7dgeEmGPQ6X0UNmrQOfTF+dXw29/ZjU2kQ6RDoLxaxOA+Xqv07Vbef6oVTWw==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/parser": "^4.4.1",
+        "eslint-config-airbnb": "^18.2.0",
+        "eslint-config-airbnb-base": "^14.2.0"
+      }
+    },
+    "eslint-config-prettier": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz",
+      "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==",
+      "dev": true
+    },
     "eslint-import-resolver-node": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz",
@@ -17237,6 +17253,15 @@
         }
       }
     },
+    "eslint-plugin-prettier": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz",
+      "integrity": "sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
+    },
     "eslint-plugin-react": {
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.24.0.tgz",
@@ -17289,6 +17314,12 @@
         }
       }
     },
+    "eslint-plugin-react-hooks": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz",
+      "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==",
+      "dev": true
+    },
     "eslint-scope": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
@@ -17322,120 +17353,6 @@
       "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
       "dev": true
     },
-    "eslint-webpack-plugin": {
-      "version": "2.5.4",
-      "resolved": "https://registry.npmjs.org/eslint-webpack-plugin/-/eslint-webpack-plugin-2.5.4.tgz",
-      "integrity": "sha512-7rYh0m76KyKSDE+B+2PUQrlNS4HJ51t3WKpkJg6vo2jFMbEPTG99cBV0Dm7LXSHucN4WGCG65wQcRiTFrj7iWw==",
-      "dev": true,
-      "requires": {
-        "@types/eslint": "^7.2.6",
-        "arrify": "^2.0.1",
-        "jest-worker": "^26.6.2",
-        "micromatch": "^4.0.2",
-        "normalize-path": "^3.0.0",
-        "schema-utils": "^3.0.0"
-      },
-      "dependencies": {
-        "arrify": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
-          "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
-          "dev": true
-        },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "jest-worker": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
-          "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
-          "dev": true,
-          "requires": {
-            "@types/node": "*",
-            "merge-stream": "^2.0.0",
-            "supports-color": "^7.0.0"
-          }
-        },
-        "micromatch": {
-          "version": "4.0.4",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.2.3"
-          }
-        },
-        "normalize-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-          "dev": true
-        },
-        "picomatch": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-          "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-          "dev": true
-        },
-        "schema-utils": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.6",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
-      }
-    },
     "espree": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
@@ -17927,6 +17844,12 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
@@ -22075,12 +21998,6 @@
         "loose-envify": "^1.0.0"
       }
     },
-    "inversify": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/inversify/-/inversify-5.0.1.tgz",
-      "integrity": "sha512-Ieh06s48WnEYGcqHepdsJUIJUXpwH5o5vodAX+DK2JA/gjy4EbEcQZxw+uFfzysmKjiLXGYwNG3qDZsKVMcINQ==",
-      "dev": true
-    },
     "invert-kv": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
@@ -30130,6 +30047,15 @@
       "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
       "dev": true
     },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -31734,12 +31660,6 @@
         }
       }
     },
-    "reflect-metadata": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
-      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==",
-      "dev": true
-    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -34842,152 +34762,15 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
       "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
     },
-    "tslint": {
-      "version": "5.20.1",
-      "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.20.1.tgz",
-      "integrity": "sha512-EcMxhzCFt8k+/UP5r8waCf/lzmeSyVlqxqMEDQE7rWYiQky8KpIBz1JAoYXfROHrPZ1XXd43q8yQnULOLiBRQg==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "builtin-modules": "^1.1.1",
-        "chalk": "^2.3.0",
-        "commander": "^2.12.1",
-        "diff": "^4.0.1",
-        "glob": "^7.1.1",
-        "js-yaml": "^3.13.1",
-        "minimatch": "^3.0.4",
-        "mkdirp": "^0.5.1",
-        "resolve": "^1.3.2",
-        "semver": "^5.3.0",
-        "tslib": "^1.8.0",
-        "tsutils": "^2.29.0"
-      },
-      "dependencies": {
-        "diff": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.1.tgz",
-          "integrity": "sha512-s2+XdvhPCOF01LRQBC8hf4vhbVmI2CGS5aZnxLJlT5FtdhPCDFq80q++zK2KlrVorVDdL5BOGZ/VfLrVtYNF+Q==",
-          "dev": true
-        },
-        "js-yaml": {
-          "version": "3.14.0",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
-          "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
-          "dev": true,
-          "requires": {
-            "argparse": "^1.0.7",
-            "esprima": "^4.0.0"
-          }
-        },
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true
-        }
-      }
-    },
-    "tslint-config-airbnb": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/tslint-config-airbnb/-/tslint-config-airbnb-5.11.2.tgz",
-      "integrity": "sha512-mUpHPTeeCFx8XARGG/kzYP4dPSOgoCqNiYbGHh09qTH8q+Y1ghsOgaeZKYYQT7IyxMos523z/QBaiv2zKNBcow==",
-      "dev": true,
-      "requires": {
-        "tslint-consistent-codestyle": "^1.14.1",
-        "tslint-eslint-rules": "^5.4.0",
-        "tslint-microsoft-contrib": "~5.2.1"
-      }
-    },
-    "tslint-consistent-codestyle": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/tslint-consistent-codestyle/-/tslint-consistent-codestyle-1.16.0.tgz",
-      "integrity": "sha512-ebR/xHyMEuU36hGNOgCfjGBNYxBPixf0yU1Yoo6s3BrpBRFccjPOmIVaVvQsWAUAMdmfzHOCihVkcaMfimqvHw==",
-      "dev": true,
-      "requires": {
-        "@fimbul/bifrost": "^0.21.0",
-        "tslib": "^1.7.1",
-        "tsutils": "^2.29.0"
-      }
-    },
-    "tslint-eslint-rules": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/tslint-eslint-rules/-/tslint-eslint-rules-5.4.0.tgz",
-      "integrity": "sha512-WlSXE+J2vY/VPgIcqQuijMQiel+UtmXS+4nvK4ZzlDiqBfXse8FAvkNnTcYhnQyOTW5KFM+uRRGXxYhFpuBc6w==",
-      "dev": true,
-      "requires": {
-        "doctrine": "0.7.2",
-        "tslib": "1.9.0",
-        "tsutils": "^3.0.0"
-      },
-      "dependencies": {
-        "doctrine": {
-          "version": "0.7.2",
-          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz",
-          "integrity": "sha1-fLhgNZujvpDgQLJrcpzkv6ZUxSM=",
-          "dev": true,
-          "requires": {
-            "esutils": "^1.1.6",
-            "isarray": "0.0.1"
-          }
-        },
-        "esutils": {
-          "version": "1.1.6",
-          "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.1.6.tgz",
-          "integrity": "sha1-wBzKqa5LiXxtDD4hCuUvPHqEQ3U=",
-          "dev": true
-        },
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
-          "dev": true
-        },
-        "tslib": {
-          "version": "1.9.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
-          "integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ==",
-          "dev": true
-        },
-        "tsutils": {
-          "version": "3.17.1",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
-          "integrity": "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.8.1"
-          }
-        }
-      }
-    },
-    "tslint-microsoft-contrib": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/tslint-microsoft-contrib/-/tslint-microsoft-contrib-5.2.1.tgz",
-      "integrity": "sha512-PDYjvpo0gN9IfMULwKk0KpVOPMhU6cNoT9VwCOLeDl/QS8v8W2yspRpFFuUS7/c5EIH/n8ApMi8TxJAz1tfFUA==",
-      "dev": true,
-      "requires": {
-        "tsutils": "^2.27.2 <2.29.0"
-      },
-      "dependencies": {
-        "tsutils": {
-          "version": "2.28.0",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.28.0.tgz",
-          "integrity": "sha512-bh5nAtW0tuhvOJnx1GLRn5ScraRLICGyJV5wJhtRWOLsxW70Kk5tZtpK3O/hW6LDnqKS9mlUMPZj9fEMJ0gxqA==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.8.1"
-          }
-        }
-      }
-    },
     "tsscmp": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/tsscmp/-/tsscmp-1.0.6.tgz",
       "integrity": "sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA=="
     },
     "tsutils": {
-      "version": "2.29.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
-      "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
       "dev": true,
       "requires": {
         "tslib": "^1.8.1"
diff --git a/package.json b/package.json
index 524a445f1..6bc86ea6d 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "dev": "cross-env NODE_ENV=development gulp dev",
     "test": "jest",
     "test:watch": "jest --watch",
-    "lint": "eslint --quiet --fix src",
+    "lint": "eslint \"{src,packages,uidev}/**/*.{js,jsx,ts,tsx}\" --quiet --fix",
     "manage-translations": "node ./src/i18n/manage-translations.js",
     "prebuild": "preval-build-info-cli && gulp build",
     "build": "electron-builder",
@@ -156,6 +156,8 @@
     "@types/react": "16.14.6",
     "@types/react-dom": "16.9.13",
     "@types/uuid": "3.4.9",
+    "@typescript-eslint/eslint-plugin": "4.28.5",
+    "@typescript-eslint/parser": "4.28.5",
     "all-contributors-cli": "6.20.0",
     "babel-loader": "8.2.2",
     "babel-plugin-react-intl": "3.5.1",
@@ -169,11 +171,14 @@
     "electron-rebuild": "2.3.5",
     "eslint": "7.31.0",
     "eslint-config-airbnb": "18.2.1",
+    "eslint-config-airbnb-typescript": "12.3.1",
+    "eslint-config-prettier": "8.3.0",
     "eslint-plugin-import": "2.23.4",
     "eslint-plugin-jest": "24.4.0",
     "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-react": "7.24.0",
-    "eslint-webpack-plugin": "2.5.4",
+    "eslint-plugin-react-hooks": "4.2.0",
     "expect.js": "0.3.1",
     "gulp": "4.0.0",
     "gulp-babel": "8.0.0",
@@ -196,8 +201,6 @@
     "sass": "1.36.0",
     "terser-webpack-plugin": "1.4.5",
     "ts-loader": "5.4.5",
-    "tslint": "5.20.1",
-    "tslint-config-airbnb": "5.11.2",
     "typescript": "3.9.10",
     "webpack": "4.46.0",
     "webpack-cli": "3.3.12",
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index ecb2876ca..c08c4e97d 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -8,14 +8,24 @@ import Loader from 'react-loader';
 import { IFormField, IWithStyle } from '../typings/generic';
 import { Theme } from '../../../theme';
 
-type ButtonType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'inverted';
+type ButtonType =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'inverted';
 
 interface IProps extends IFormField, IWithStyle {
   className?: string;
   disabled?: boolean;
   id?: string;
   type?: 'button' | 'reset' | 'submit' | undefined;
-  onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
+  onClick: (
+    event:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.MouseEvent<HTMLAnchorElement>,
+  ) => void;
   buttonType?: ButtonType;
   stretch?: boolean;
   loaded?: boolean;
@@ -25,10 +35,6 @@ interface IProps extends IFormField, IWithStyle {
   target?: string;
 }
 
-interface IState {
-  busy: boolean;
-}
-
 const styles = (theme: Theme) => ({
   button: {
     borderRadius: theme.borderRadiusSmall,
@@ -40,7 +46,8 @@ const styles = (theme: Theme) => ({
     outline: 'none',
     alignItems: 'center',
     padding: 0,
-    width: (props: IProps) => (props.stretch ? '100%' : 'auto') as Property.Width<string>,
+    width: (props: IProps) =>
+      (props.stretch ? '100%' : 'auto') as Property.Width<string>,
     fontSize: theme.uiFontSize,
     textDecoration: 'none',
     // height: theme.buttonHeight,
@@ -125,7 +132,8 @@ const styles = (theme: Theme) => ({
     transition: 'all 0.3s',
     marginLeft: (props: IProps): number => (!props.busy ? 10 : 20),
     marginRight: (props: IProps): number => (!props.busy ? -10 : -20),
-    position: (props: IProps): Property.Position => props.stretch ? 'absolute' : 'inherit',
+    position: (props: IProps): Property.Position =>
+      props.stretch ? 'absolute' : 'inherit',
   },
   icon: {
     margin: [1, 10, 0, -5],
@@ -175,7 +183,6 @@ class ButtonComponent extends Component<IProps> {
       buttonType,
       loaded,
       icon,
-      busy: busyProp,
       href,
       target,
     } = this.props;
@@ -185,7 +192,9 @@ class ButtonComponent extends Component<IProps> {
     let showLoader = false;
     if (loaded) {
       showLoader = !loaded;
-      console.warn('Ferdi Button prop `loaded` will be deprecated in the future. Please use `busy` instead');
+      console.warn(
+        'Ferdi Button prop `loaded` will be deprecated in the future. Please use `busy` instead',
+      );
     }
     if (busy) {
       showLoader = busy;
diff --git a/packages/forms/src/error/index.tsx b/packages/forms/src/error/index.tsx
index a487bb281..243321d97 100644
--- a/packages/forms/src/error/index.tsx
+++ b/packages/forms/src/error/index.tsx
@@ -11,18 +11,9 @@ interface IProps {
 
 class ErrorComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      message,
-    } = this.props;
+    const { classes, message } = this.props;
 
-    return (
-      <p
-        className={classes.message}
-      >
-        {message}
-      </p>
-    );
+    return <p className={classes.message}>{message}</p>;
   }
 }
 
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index b96dbc12d..41751710a 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -17,7 +17,10 @@ interface IData {
   [index: string]: string;
 }
 
-interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle {
+interface IProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    IFormField,
+    IWithStyle {
   focus?: boolean;
   prefix?: string;
   suffix?: string;
@@ -62,23 +65,24 @@ class InputComponent extends Component<IProps, IState> {
       }
 
       if (data) {
-        Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]);
+        Object.keys(data).map(
+          key => (this.inputRef.current!.dataset[key] = data[key]),
+        );
       }
     }
   }
 
   onChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const {
-      scorePassword,
-      onChange,
-    } = this.props;
+    const { scorePassword, onChange } = this.props;
 
     if (onChange) {
       onChange(e);
     }
 
     if (this.inputRef && this.inputRef.current && scorePassword) {
-      this.setState({ passwordScore: scorePasswordFunc(this.inputRef.current.value) });
+      this.setState({
+        passwordScore: scorePasswordFunc(this.inputRef.current.value),
+      });
     }
   }
 
@@ -117,10 +121,7 @@ class InputComponent extends Component<IProps, IState> {
       noMargin,
     } = this.props;
 
-    const {
-      showPassword,
-      passwordScore,
-    } = this.state;
+    const { showPassword, passwordScore } = this.state;
 
     const inputType = type === 'password' && showPassword ? 'text' : type;
 
@@ -144,12 +145,9 @@ class InputComponent extends Component<IProps, IState> {
               [`${classes.wrapper}`]: true,
               [`${classes.disabled}`]: disabled,
               [`${classes.hasError}`]: error,
-            })}>
-            {prefix && (
-              <span className={classes.prefix}>
-                {prefix}
-              </span>
-            )}
+            })}
+          >
+            {prefix && <span className={classes.prefix}>{prefix}</span>}
             <input
               id={id}
               type={inputType}
@@ -168,30 +166,29 @@ class InputComponent extends Component<IProps, IState> {
               max={max}
               step={step}
             />
-            {suffix && (
-              <span className={classes.suffix}>
-                {suffix}
-              </span>
-            )}
+            {suffix && <span className={classes.suffix}>{suffix}</span>}
             {showPasswordToggle && (
               <button
                 type="button"
                 className={classes.formModifier}
-                onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))}
+                onClick={() =>
+                  this.setState(prevState => ({
+                    showPassword: !prevState.showPassword,
+                  }))
+                }
                 tabIndex={-1}
               >
-                <Icon
-                  path={!showPassword ? mdiEye : mdiEyeOff}
-                  size={1}
-                />
+                <Icon path={!showPassword ? mdiEye : mdiEyeOff} size={1} />
               </button>
             )}
           </div>
           {scorePassword && (
-            <div className={classnames({
-              [`${classes.passwordScore}`]: true,
-              [`${classes.hasError}`]: error,
-            })}>
+            <div
+              className={classnames({
+                [`${classes.passwordScore}`]: true,
+                [`${classes.hasError}`]: error,
+              })}
+            >
               <meter
                 value={passwordScore < 5 ? 5 : passwordScore}
                 low={30}
@@ -202,9 +199,7 @@ class InputComponent extends Component<IProps, IState> {
             </div>
           )}
         </Label>
-        {error && (
-          <Error message={error} />
-        )}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }
diff --git a/packages/forms/src/input/scorePassword.ts b/packages/forms/src/input/scorePassword.ts
index 0b7719ec1..bc30de4b8 100644
--- a/packages/forms/src/input/scorePassword.ts
+++ b/packages/forms/src/input/scorePassword.ts
@@ -11,7 +11,7 @@ interface IVariations {
 }
 
 export function scorePasswordFunc(password: string): number {
-  let score: number = 0;
+  let score = 0;
   if (!password) {
     return score;
   }
@@ -32,8 +32,8 @@ export function scorePasswordFunc(password: string): number {
   };
 
   let variationCount = 0;
-  Object.keys(variations).forEach((key) => {
-    variationCount += (variations[key] === true) ? 1 : 0;
+  Object.keys(variations).forEach(key => {
+    variationCount += variations[key] === true ? 1 : 0;
   });
 
   score += (variationCount - 1) * 10;
diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx
index 1b33ba22c..ad503b785 100644
--- a/packages/forms/src/label/index.tsx
+++ b/packages/forms/src/label/index.tsx
@@ -7,7 +7,9 @@ import { IFormField } from '../typings/generic';
 
 import styles from './styles';
 
-interface ILabel extends IFormField, React.LabelHTMLAttributes<HTMLLabelElement> {
+interface ILabel
+  extends IFormField,
+    React.LabelHTMLAttributes<HTMLLabelElement> {
   classes: Classes;
   isRequired: boolean;
 }
@@ -38,11 +40,12 @@ class LabelComponent extends Component<ILabel> {
         htmlFor={htmlFor}
       >
         {showLabel && (
-          <span className={classes.label}>{title}{isRequired && ' *'}</span>
+          <span className={classes.label}>
+            {title}
+            {isRequired && ' *'}
+          </span>
         )}
-        <div className={classes.content}>
-          {children}
-        </div>
+        <div className={classes.content}>{children}</div>
       </label>
     );
   }
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index e5b59cb19..4a5775579 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -1,4 +1,8 @@
-import { mdiArrowRightDropCircleOutline, mdiCloseCircle, mdiMagnify } from '@mdi/js';
+import {
+  mdiArrowRightDropCircleOutline,
+  mdiCloseCircle,
+  mdiMagnify,
+} from '@mdi/js';
 import Icon from '@mdi/react';
 import classnames from 'classnames';
 import React, { Component, createRef } from 'react';
@@ -58,7 +62,7 @@ const styles = (theme: Theme) => ({
   label: {
     '& > div': {
       marginTop: 5,
-    }
+    },
   },
   popup: {
     opacity: 0,
@@ -153,9 +157,13 @@ class SelectComponent extends Component<IProps> {
   };
 
   private componentRef = createRef<HTMLDivElement>();
+
   private inputRef = createRef<HTMLInputElement>();
+
   private searchInputRef = createRef<HTMLInputElement>();
+
   private scrollContainerRef = createRef<HTMLDivElement>();
+
   private activeOptionRef = createRef<HTMLDivElement>();
 
   private keyListener: any;
@@ -168,7 +176,7 @@ class SelectComponent extends Component<IProps> {
     }
   }
 
-  componentDidUpdate(prevProps: IProps, prevState: IState) {
+  componentDidUpdate() {
     const { open } = this.state;
 
     if (this.searchInputRef && this.searchInputRef.current) {
@@ -183,7 +191,9 @@ class SelectComponent extends Component<IProps> {
       const { data } = this.props;
 
       if (data) {
-        Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]);
+        Object.keys(data).map(
+          key => (this.inputRef.current!.dataset[key] = data[key]),
+        );
       }
     }
 
@@ -194,7 +204,10 @@ class SelectComponent extends Component<IProps> {
     const { value } = this.props;
 
     if (this.componentRef && this.componentRef.current) {
-      this.componentRef.current.removeEventListener('keydown', this.keyListener);
+      this.componentRef.current.removeEventListener(
+        'keydown',
+        this.keyListener,
+      );
     }
 
     if (value) {
@@ -210,13 +223,18 @@ class SelectComponent extends Component<IProps> {
     window.removeEventListener('keydown', this.arrowKeysHandler.bind(this));
   }
 
-  setFilter(needle: string = '') {
+  setFilter(needle = '') {
     const { options } = this.props;
 
     let filteredOptions = {};
     if (needle) {
-      Object.keys(options).map((key) => {
-        if (key.toLocaleLowerCase().startsWith(needle.toLocaleLowerCase()) || options[key].toLocaleLowerCase().startsWith(needle.toLocaleLowerCase())) {
+      Object.keys(options).map(key => {
+        if (
+          key.toLocaleLowerCase().startsWith(needle.toLocaleLowerCase()) ||
+          options[key]
+            .toLocaleLowerCase()
+            .startsWith(needle.toLocaleLowerCase())
+        ) {
           Object.assign(filteredOptions, {
             [`${key}`]: options[key],
           });
@@ -234,7 +252,7 @@ class SelectComponent extends Component<IProps> {
   }
 
   select(key: string) {
-    this.setState((state: IState) => ({
+    this.setState(() => ({
       value: key,
       open: false,
     }));
@@ -247,11 +265,7 @@ class SelectComponent extends Component<IProps> {
   }
 
   arrowKeysHandler(e: KeyboardEvent) {
-    const {
-      selected,
-      open,
-      options,
-    } = this.state;
+    const { selected, open, options } = this.state;
 
     if (!open) return;
 
@@ -264,7 +278,10 @@ class SelectComponent extends Component<IProps> {
         this.setState((state: IState) => ({
           selected: state.selected - 1,
         }));
-      } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) {
+      } else if (
+        e.keyCode === 40 &&
+        selected < Object.keys(options!).length - 1
+      ) {
         this.setState((state: IState) => ({
           selected: state.selected + 1,
         }));
@@ -272,7 +289,12 @@ class SelectComponent extends Component<IProps> {
         this.select(Object.keys(options!)[selected]);
       }
 
-      if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) {
+      if (
+        this.activeOptionRef &&
+        this.activeOptionRef.current &&
+        this.scrollContainerRef &&
+        this.scrollContainerRef.current
+      ) {
         const containerTopOffset = this.scrollContainerRef.current.offsetTop;
         const optionTopOffset = this.activeOptionRef.current.offsetTop;
 
@@ -282,10 +304,15 @@ class SelectComponent extends Component<IProps> {
       }
     }
 
-    switch (e.keyCode){
-      case 37: case 39: case 38:  case 40: // Arrow keys
-      case 32:  break; // Space
-      default: break; // do not block other keys
+    switch (e.keyCode) {
+      case 37:
+      case 39:
+      case 38:
+      case 40: // Arrow keys
+      case 32:
+        break; // Space
+      default:
+        break; // do not block other keys
     }
   }
 
@@ -307,13 +334,7 @@ class SelectComponent extends Component<IProps> {
       required,
     } = this.props;
 
-    const {
-      open,
-      needle,
-      value,
-      selected,
-      options,
-    } = this.state;
+    const { open, needle, value, selected, options } = this.state;
 
     let selection = '';
     if (!value && defaultValue && options![defaultValue]) {
@@ -325,10 +346,7 @@ class SelectComponent extends Component<IProps> {
     }
 
     return (
-      <Wrapper
-        className={className}
-        identifier="franz-select"
-      >
+      <Wrapper className={className} identifier="franz-select">
         <Label
           title={label}
           showLabel={showLabel}
@@ -345,14 +363,19 @@ class SelectComponent extends Component<IProps> {
           >
             <button
               type="button"
-               className={classnames({
-                 [`${inputClassName}`]: inputClassName,
-                 [`${classes.select}`]: true,
-                 [`${classes.hasError}`]: error,
-               })}
-              onClick= {!disabled ? () => this.setState((state: IState) => ({
-                open: !state.open,
-              })) : () => {}}
+              className={classnames({
+                [`${inputClassName}`]: inputClassName,
+                [`${classes.select}`]: true,
+                [`${classes.hasError}`]: error,
+              })}
+              onClick={
+                !disabled
+                  ? () =>
+                      this.setState((state: IState) => ({
+                        open: !state.open,
+                      }))
+                  : () => {}
+              }
             >
               {selection}
               <Icon
@@ -366,10 +389,7 @@ class SelectComponent extends Component<IProps> {
             </button>
             {showSearch && open && (
               <div className={classes.searchContainer}>
-                <Icon
-                  path={mdiMagnify}
-                  size={0.8}
-                />
+                <Icon path={mdiMagnify} size={0.8} />
                 <input
                   type="text"
                   value={needle}
@@ -384,10 +404,7 @@ class SelectComponent extends Component<IProps> {
                     className={classes.clearNeedle}
                     onClick={() => this.setFilter()}
                   >
-                    <Icon
-                      path={mdiCloseCircle}
-                      size={0.7}
-                    />
+                    <Icon path={mdiCloseCircle} size={0.7} />
                   </button>
                 )}
               </div>
@@ -399,7 +416,7 @@ class SelectComponent extends Component<IProps> {
               })}
               ref={this.scrollContainerRef}
             >
-              {Object.keys(options!).map(((key, i) => (
+              {Object.keys(options!).map((key, i) => (
                 <div
                   key={key}
                   onClick={() => this.select(key)}
@@ -413,7 +430,7 @@ class SelectComponent extends Component<IProps> {
                 >
                   {options![key]}
                 </div>
-              )))}
+              ))}
             </div>
           </div>
           <input
@@ -427,9 +444,7 @@ class SelectComponent extends Component<IProps> {
             ref={this.inputRef}
           />
         </Label>
-        {error && (
-          <Error message={error} />
-        )}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }
diff --git a/packages/forms/src/textarea/index.tsx b/packages/forms/src/textarea/index.tsx
index 31c572d1c..2d89d1c9f 100644
--- a/packages/forms/src/textarea/index.tsx
+++ b/packages/forms/src/textarea/index.tsx
@@ -14,7 +14,10 @@ interface IData {
   [index: string]: string;
 }
 
-interface IProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, IFormField, IWithStyle {
+interface IProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    IFormField,
+    IWithStyle {
   focus?: boolean;
   data: IData;
   textareaClassName?: string;
@@ -37,14 +40,14 @@ class TextareaComponent extends Component<IProps> {
     const { data } = this.props;
 
     if (this.textareaRef && this.textareaRef.current && data) {
-      Object.keys(data).map(key => this.textareaRef.current!.dataset[key] = data[key]);
+      Object.keys(data).map(
+        key => (this.textareaRef.current!.dataset[key] = data[key]),
+      );
     }
   }
 
   onChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
-    const {
-      onChange,
-    } = this.props;
+    const { onChange } = this.props;
 
     if (onChange) {
       onChange(e);
@@ -57,7 +60,6 @@ class TextareaComponent extends Component<IProps> {
       className,
       disabled,
       error,
-      focus,
       id,
       textareaClassName,
       label,
@@ -94,9 +96,9 @@ class TextareaComponent extends Component<IProps> {
               [`${classes.wrapper}`]: true,
               [`${classes.disabled}`]: disabled,
               [`${classes.hasError}`]: error,
-            })}>
+            })}
+          >
             <textarea
-              autoFocus={focus}
               id={id}
               name={name}
               placeholder={placeholder}
@@ -115,9 +117,7 @@ class TextareaComponent extends Component<IProps> {
             </textarea>
           </div>
         </Label>
-        {error && (
-          <Error message={error} />
-        )}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index b146236df..a9970c8f1 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -3,7 +3,7 @@ import { Property } from 'csstype';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { IFormField, IWithStyle, Omit } from '../typings/generic';
+import { IFormField, IWithStyle } from '../typings/generic';
 import { Theme } from '../../../theme';
 
 import { Error } from '../error';
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx
index cf179bc5e..3ae551e2c 100644
--- a/packages/forms/src/wrapper/index.tsx
+++ b/packages/forms/src/wrapper/index.tsx
@@ -12,18 +12,13 @@ interface IProps extends IWithStyle {
 
 const styles = {
   container: {
-    marginBottom: (props: IProps) => props.noMargin ? 0 : 20,
+    marginBottom: (props: IProps) => (props.noMargin ? 0 : 20),
   },
 };
 
 class WrapperComponent extends Component<IProps> {
   render() {
-    const {
-      children,
-      classes,
-      className,
-      identifier,
-    } = this.props;
+    const { children, classes, className, identifier } = this.props;
 
     return (
       <div
diff --git a/packages/forms/tslint.json b/packages/forms/tslint.json
deleted file mode 100644
index 0946f2096..000000000
--- a/packages/forms/tslint.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../../tslint.json"
-}
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
index 94df5afd1..5ba225e51 100644
--- a/packages/theme/src/index.ts
+++ b/packages/theme/src/index.ts
@@ -9,11 +9,13 @@ export enum ThemeType {
 
 export const DEFAULT_ACCENT_COLOR = themeBrandPrimary;
 
-export function theme(themeId: ThemeType,
-                      brandColor: string = DEFAULT_ACCENT_COLOR) {
-  return themeId === ThemeType.dark ?
-    makeDarkThemeConfig(brandColor) :
-    makeDefaultThemeConfig(brandColor);
+export function theme(
+  themeId: ThemeType,
+  brandColor: string = DEFAULT_ACCENT_COLOR,
+) {
+  return themeId === ThemeType.dark
+    ? makeDarkThemeConfig(brandColor)
+    : makeDefaultThemeConfig(brandColor);
 }
 
 const defaultThemeConfigWithDefaultAccentColor =
diff --git a/packages/theme/src/themes/IStyleTypes.ts b/packages/theme/src/themes/IStyleTypes.ts
index df5b51c1d..cf8bdea33 100644
--- a/packages/theme/src/themes/IStyleTypes.ts
+++ b/packages/theme/src/themes/IStyleTypes.ts
@@ -1,4 +1,3 @@
-
 export default interface IStyleTypes {
   [index: string]: {
     accent: string;
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index c8ad78829..7d7bab399 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -18,7 +18,9 @@ export default (brandPrimary: string) => {
   const inputColor = legacyStyles.darkThemeGrayLightest;
   const inputBackground = legacyStyles.themeGrayDark;
   const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`;
-  const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex();
+  const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter)
+    .lighten(0.3)
+    .hex();
   const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor;
   const selectColor = inputColor;
   const drawerBg = color(colorBackground).lighten(0.3).hex();
@@ -47,7 +49,10 @@ export default (brandPrimary: string) => {
 
     // Loader
     colorFullscreenLoaderSpinner: '#FFF',
-    colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string(),
+    colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest)
+      .alpha(0.5)
+      .rgb()
+      .string(),
 
     // Input
     labelColor: legacyStyles.darkThemeTextColor,
@@ -58,8 +63,12 @@ export default (brandPrimary: string) => {
     inputPrefixBackground: legacyStyles.darkThemeGray,
     inputDisabledOpacity: 0.5,
     inputScorePasswordBackground: legacyStyles.darkThemeGrayDark,
-    inputModifierColor: color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(),
-    inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex(),
+    inputModifierColor: color(legacyStyles.darkThemeGrayLighter)
+      .lighten(0.3)
+      .hex(),
+    inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter)
+      .darken(0.1)
+      .hex(),
 
     // Toggle
     toggleBackground: legacyStyles.darkThemeGray,
@@ -91,13 +100,20 @@ export default (brandPrimary: string) => {
     selectToggleColor: inputPrefixColor,
     selectPopupBackground: legacyStyles.darkThemeGrayLight,
     selectOptionColor: '#FFF',
-    selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight).darken(0.2).hex()}`,
-    selectOptionItemHover: color(legacyStyles.darkThemeGrayLight).darken(0.2).hex(),
+    selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight)
+      .darken(0.2)
+      .hex()}`,
+    selectOptionItemHover: color(legacyStyles.darkThemeGrayLight)
+      .darken(0.2)
+      .hex(),
     selectOptionItemHoverColor: selectColor,
     selectSearchColor: inputBackground,
 
     // Modal
-    colorModalOverlayBackground: color(legacyStyles.darkThemeBlack).alpha(0.9).rgb().string(),
+    colorModalOverlayBackground: color(legacyStyles.darkThemeBlack)
+      .alpha(0.9)
+      .rgb()
+      .string(),
     colorModalBackground: legacyStyles.darkThemeGrayDark,
 
     // Services
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index b8f3e3201..21017bbe0 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -82,7 +82,10 @@ export default (brandPrimary: string) => {
 
     colorText,
 
-    defaultContentBorder: color(legacyStyles.themeGrayLighter).darken(0.1).rgb().string(),
+    defaultContentBorder: color(legacyStyles.themeGrayLighter)
+      .darken(0.1)
+      .rgb()
+      .string(),
 
     // Subscription Container Component
     colorSubscriptionContainerBackground: 'none',
@@ -94,7 +97,10 @@ export default (brandPrimary: string) => {
     // Loader
     colorAppLoaderSpinner: '#FFF',
     colorFullscreenLoaderSpinner: legacyStyles.themeGrayDark,
-    colorWebviewLoaderBackground: color(legacyStyles.themeGrayLighter).alpha(0.8).rgb().string(),
+    colorWebviewLoaderBackground: color(legacyStyles.themeGrayLighter)
+      .alpha(0.8)
+      .rgb()
+      .string(),
 
     // Input
     labelColor: legacyStyles.themeGrayLight,
@@ -103,7 +109,9 @@ export default (brandPrimary: string) => {
     inputBackground,
     inputBorder,
     inputModifierColor: legacyStyles.themeGrayLight,
-    inputPlaceholderColor: color(legacyStyles.themeGrayLight).lighten(0.3).hex(),
+    inputPlaceholderColor: color(legacyStyles.themeGrayLight)
+      .lighten(0.3)
+      .hex(),
     inputPrefixColor,
     inputPrefixBackground: legacyStyles.themeGrayLighter,
     inputDisabledOpacity,
diff --git a/packages/theme/tslint.json b/packages/theme/tslint.json
deleted file mode 100644
index 0946f2096..000000000
--- a/packages/theme/tslint.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../../tslint.json"
-}
diff --git a/packages/typings/types/react-loader.d.ts b/packages/typings/types/react-loader.d.ts
index 8dc36b71f..728e3dfa0 100644
--- a/packages/typings/types/react-loader.d.ts
+++ b/packages/typings/types/react-loader.d.ts
@@ -36,7 +36,7 @@ interface LoaderProps extends LoaderOptions {
   className?: string;
 }
 
-declare class ReactLoader extends Component<LoaderProps>  {
+declare class ReactLoader extends Component<LoaderProps> {
 }
 
 declare namespace ReactLoader {
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx
index 73db47068..63d5d673a 100644
--- a/packages/ui/src/badge/ProBadge.tsx
+++ b/packages/ui/src/badge/ProBadge.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { Badge, Icon } from '../';
+import { Badge, Icon } from '..';
 import { Theme } from '../../../theme';
 import { IWithStyle } from '../typings/generic';
 
@@ -34,13 +34,8 @@ const styles = (theme: Theme) => ({
 
 class ProBadgeComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      badgeClasses,
-      iconClasses,
-      inverted,
-      className,
-    } = this.props;
+    const { classes, badgeClasses, iconClasses, inverted, className } =
+      this.props;
 
     return (
       <Badge
diff --git a/packages/ui/src/badge/index.tsx b/packages/ui/src/badge/index.tsx
index 0ba383673..5dd735879 100644
--- a/packages/ui/src/badge/index.tsx
+++ b/packages/ui/src/badge/index.tsx
@@ -13,7 +13,7 @@ interface IProps extends IWithStyle {
 
 const badgeStyles = (theme: Theme) => {
   const styles = {};
-  Object.keys(theme.styleTypes).map((style) => {
+  Object.keys(theme.styleTypes).map(style => {
     Object.assign(styles, {
       [style]: {
         background: theme.styleTypes[style].accent,
@@ -51,12 +51,7 @@ class BadgeComponent extends Component<IProps> {
   };
 
   render() {
-    const {
-      classes,
-      children,
-      type,
-      className,
-    } = this.props;
+    const { classes, children, type, className } = this.props;
 
     return (
       <div
diff --git a/packages/ui/src/headline/index.tsx b/packages/ui/src/headline/index.tsx
index 11b6125cd..bf3d4418c 100644
--- a/packages/ui/src/headline/index.tsx
+++ b/packages/ui/src/headline/index.tsx
@@ -37,13 +37,7 @@ const styles = (theme: Theme) => ({
 
 class HeadlineComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      level,
-      className,
-      children,
-      id,
-    } = this.props;
+    const { classes, level, className, children, id } = this.props;
 
     return React.createElement(
       `h${level}`,
@@ -63,7 +57,12 @@ class HeadlineComponent extends Component<IProps> {
 
 const Headline = injectStyle(styles)(HeadlineComponent);
 
-const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) => <Headline level={level} {...props}>{props.children}</Headline>;
+const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) =>
+  (
+    <Headline level={level} {...props}>
+      {props.children}
+    </Headline>
+  );
 
 export const H1 = createH(1);
 export const H2 = createH(2);
diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx
index ed55eccfe..b644a9234 100644
--- a/packages/ui/src/icon/index.tsx
+++ b/packages/ui/src/icon/index.tsx
@@ -24,12 +24,7 @@ class IconComponent extends Component<IProps> {
   };
 
   render() {
-    const {
-      classes,
-      icon,
-      size,
-      className,
-    } = this.props;
+    const { classes, icon, size, className } = this.props;
 
     if (!icon) {
       console.warn('No Icon specified');
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index bd62fc4ea..961262001 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -3,8 +3,8 @@ import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
+import { Icon } from '..';
 import { Theme } from '../../../theme';
-import { Icon } from '../';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
@@ -27,7 +27,7 @@ interface IState {
 
 const buttonStyles = (theme: Theme) => {
   const styles = {};
-  Object.keys(theme.styleTypes).map((style) => {
+  Object.keys(theme.styleTypes).map(style => {
     Object.assign(styles, {
       [style]: {
         background: theme.styleTypes[style].accent,
@@ -73,18 +73,21 @@ const styles = (theme: Theme) => ({
     marginRight: 10,
   },
   close: {
-    color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    color: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
     marginRight: -5,
     border: 0,
     background: 'none',
   },
   cta: {
-    borderColor: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    borderColor: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
     borderRadius: theme.borderRadiusSmall,
     borderStyle: 'solid',
     borderWidth: 1,
     background: 'none',
-    color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    color: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
     marginLeft: 15,
     padding: [4, 10],
     fontSize: theme.uiFontSize,
@@ -113,9 +116,7 @@ class InfoboxComponent extends Component<IProps, IState> {
   };
 
   dismiss() {
-    const {
-      onDismiss,
-    } = this.props;
+    const { onDismiss } = this.props;
 
     this.setState({
       isDismissing: true,
@@ -129,7 +130,7 @@ class InfoboxComponent extends Component<IProps, IState> {
       this.setState({
         dismissed: true,
       });
-    },         3000);
+    }, 3000);
   }
 
   componentWillUnmount(): void {
@@ -144,26 +145,24 @@ class InfoboxComponent extends Component<IProps, IState> {
       icon,
       type,
       ctaLabel,
-      ctaLoading,
       ctaOnClick,
       dismissable,
       className,
     } = this.props;
 
-    const {
-      isDismissing,
-      dismissed,
-    } = this.state;
+    const { isDismissing, dismissed } = this.state;
 
     if (dismissed) {
       return null;
     }
 
     return (
-      <div className={classnames({
-        [classes.wrapper]: true,
-        [`${className}`]: className,
-      })}>
+      <div
+        className={classnames({
+          [classes.wrapper]: true,
+          [`${className}`]: className,
+        })}
+      >
         <div
           className={classnames({
             [classes.infobox]: true,
@@ -172,18 +171,10 @@ class InfoboxComponent extends Component<IProps, IState> {
           })}
           data-type="franz-infobox"
         >
-          {icon && (
-            <Icon icon={icon} className={classes.icon} />
-          )}
-          <div className={classes.content}>
-            {children}
-          </div>
+          {icon && <Icon icon={icon} className={classes.icon} />}
+          <div className={classes.content}>{children}</div>
           {ctaLabel && (
-            <button
-              className={classes.cta}
-              onClick={ctaOnClick}
-              type="button"
-            >
+            <button className={classes.cta} onClick={ctaOnClick} type="button">
               {ctaLabel}
             </button>
           )}
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx
index e2701a8e9..244aa9dc9 100644
--- a/packages/ui/src/loader/index.tsx
+++ b/packages/ui/src/loader/index.tsx
@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import injectStyle, { withTheme } from 'react-jss';
 import ReactLoader from 'react-loader';
 
-import { Theme } from '../../../theme';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
@@ -11,7 +10,7 @@ interface IProps extends IWithStyle {
   color?: string;
 }
 
-const styles = (theme: Theme) => ({
+const styles = () => ({
   container: {
     position: 'relative',
     height: 60,
@@ -20,12 +19,7 @@ const styles = (theme: Theme) => ({
 
 class LoaderComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      className,
-      color,
-      theme,
-    } = this.props;
+    const { classes, className, color, theme } = this.props;
 
     return (
       <div
diff --git a/packages/ui/tslint.json b/packages/ui/tslint.json
deleted file mode 100644
index 0946f2096..000000000
--- a/packages/ui/tslint.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../../tslint.json"
-}
diff --git a/src/actions/lib/actions.js b/src/actions/lib/actions.js
index b38db9946..7be40f1cf 100644
--- a/src/actions/lib/actions.js
+++ b/src/actions/lib/actions.js
@@ -8,12 +8,12 @@ export const createActionsFromDefinitions = (actionDefinitions, validate) => {
     };
     actions[actionName] = action;
     action.listeners = [];
-    action.listen = listener => action.listeners.push(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;
 };
diff --git a/src/api/server/LocalApi.js b/src/api/server/LocalApi.js
index 4b1f03f22..2d5bd8b80 100644
--- a/src/api/server/LocalApi.js
+++ b/src/api/server/LocalApi.js
@@ -2,7 +2,7 @@ import { ipcRenderer } from 'electron';
 import { session } from '@electron/remote';
 import du from 'du';
 
-import { getServicePartitionsDirectory } from '../../helpers/service-helpers.js';
+import { getServicePartitionsDirectory } from '../../helpers/service-helpers';
 
 const debug = require('debug')('Ferdi:LocalApi');
 
@@ -41,11 +41,23 @@ export default class LocalApi {
   }
 
   async clearCache(serviceId = null) {
-    const s = serviceId ? session.fromPartition(`persist:service-${serviceId}`) : session.defaultSession;
+    const s = serviceId
+      ? session.fromPartition(`persist:service-${serviceId}`)
+      : session.defaultSession;
 
-    debug('LocalApi::clearCache resolves', (serviceId || 'clearAppCache'));
+    debug('LocalApi::clearCache resolves', serviceId || 'clearAppCache');
     await s.clearStorageData({
-      storages: ['appcache', 'cookies', 'filesystem', 'indexdb', 'localstorage', 'shadercache', 'websql', 'serviceworkers', 'cachestorage'],
+      storages: [
+        'appcache',
+        'cookies',
+        'filesystem',
+        'indexdb',
+        'localstorage',
+        'shadercache',
+        'websql',
+        'serviceworkers',
+        'cachestorage',
+      ],
       quotas: ['temporary', 'persistent', 'syncable'],
     });
     return s.clearCache();
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index 78a98e544..bc1d665b1 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -23,16 +23,11 @@ import {
   loadRecipeConfig,
 } from '../../helpers/recipe-helpers';
 
-import {
-  removeServicePartitionDirectory,
-} from '../../helpers/service-helpers.js';
+import { removeServicePartitionDirectory } from '../../helpers/service-helpers';
 
 const debug = require('debug')('Ferdi:ServerApi');
 
-module.paths.unshift(
-  getDevRecipeDirectory(),
-  getRecipeDirectory(),
-);
+module.paths.unshift(getDevRecipeDirectory(), getRecipeDirectory());
 
 const { default: fetch } = remoteRequire('electron-fetch');
 
@@ -43,12 +38,16 @@ export default class ServerApi {
 
   // User
   async login(email, passwordHash) {
-    const request = await sendAuthRequest(`${apiBase()}/auth/login`, {
-      method: 'POST',
-      headers: {
-        Authorization: `Basic ${window.btoa(`${email}:${passwordHash}`)}`,
+    const request = await sendAuthRequest(
+      `${apiBase()}/auth/login`,
+      {
+        method: 'POST',
+        headers: {
+          Authorization: `Basic ${window.btoa(`${email}:${passwordHash}`)}`,
+        },
       },
-    }, false);
+      false,
+    );
     if (!request.ok) {
       throw request;
     }
@@ -59,10 +58,14 @@ export default class ServerApi {
   }
 
   async signup(data) {
-    const request = await sendAuthRequest(`${apiBase()}/auth/signup`, {
-      method: 'POST',
-      body: JSON.stringify(data),
-    }, false);
+    const request = await sendAuthRequest(
+      `${apiBase()}/auth/signup`,
+      {
+        method: 'POST',
+        body: JSON.stringify(data),
+      },
+      false,
+    );
     if (!request.ok) {
       throw request;
     }
@@ -86,12 +89,16 @@ export default class ServerApi {
   }
 
   async retrievePassword(email) {
-    const request = await sendAuthRequest(`${apiBase()}/auth/password`, {
-      method: 'POST',
-      body: JSON.stringify({
-        email,
-      }),
-    }, false);
+    const request = await sendAuthRequest(
+      `${apiBase()}/auth/password`,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          email,
+        }),
+      },
+      false,
+    );
     if (!request.ok) {
       throw request;
     }
@@ -128,7 +135,9 @@ export default class ServerApi {
     }
     const updatedData = await request.json();
 
-    const user = Object.assign(updatedData, { data: new UserModel(updatedData.data) });
+    const user = Object.assign(updatedData, {
+      data: new UserModel(updatedData.data),
+    });
     debug('ServerApi::updateUserInfo resolves', user);
     return user;
   }
@@ -159,7 +168,7 @@ export default class ServerApi {
     const data = await request.json();
 
     let services = await this._mapServiceModels(data);
-    services = services.filter(service => service !== null);
+    services = services.filter((service) => service !== null);
     debug('ServerApi::getServices resolves', services);
     return services;
   }
@@ -175,12 +184,17 @@ export default class ServerApi {
     const serviceData = await request.json();
 
     if (data.iconFile) {
-      const iconData = await this.uploadServiceIcon(serviceData.data.id, data.iconFile);
+      const iconData = await this.uploadServiceIcon(
+        serviceData.data.id,
+        data.iconFile,
+      );
 
       serviceData.data = iconData;
     }
 
-    const service = Object.assign(serviceData, { data: await this._prepareServiceModel(serviceData.data) });
+    const service = Object.assign(serviceData, {
+      data: await this._prepareServiceModel(serviceData.data),
+    });
 
     debug('ServerApi::createService resolves', service);
     return service;
@@ -204,7 +218,9 @@ export default class ServerApi {
 
     const serviceData = await request.json();
 
-    const service = Object.assign(serviceData, { data: await this._prepareServiceModel(serviceData.data) });
+    const service = Object.assign(serviceData, {
+      data: await this._prepareServiceModel(serviceData.data),
+    });
 
     debug('ServerApi::updateService resolves', service);
     return service;
@@ -221,7 +237,10 @@ export default class ServerApi {
 
     delete requestData.headers['Content-Type'];
 
-    const request = await window.fetch(`${apiBase()}/service/${serviceId}`, requestData);
+    const request = await window.fetch(
+      `${apiBase()}/service/${serviceId}`,
+      requestData,
+    );
 
     if (!request.ok) {
       throw request;
@@ -292,18 +311,21 @@ export default class ServerApi {
   // Recipes
   async getInstalledRecipes() {
     const recipesDirectory = getRecipeDirectory();
-    const paths = fs.readdirSync(recipesDirectory)
-      .filter(file => (
-        fs.statSync(path.join(recipesDirectory, file)).isDirectory()
-        && file !== 'temp'
-        && file !== 'dev'
-      ));
-
-    this.recipes = paths.map((id) => {
-      // eslint-disable-next-line
-      const Recipe = require(id)(RecipeModel);
-      return new Recipe(loadRecipeConfig(id));
-    }).filter(recipe => recipe.id);
+    const paths = fs
+      .readdirSync(recipesDirectory)
+      .filter(
+        (file) => fs.statSync(path.join(recipesDirectory, file)).isDirectory()
+          && file !== 'temp'
+          && file !== 'dev',
+      );
+
+    this.recipes = paths
+      .map((id) => {
+        // eslint-disable-next-line
+        const Recipe = require(id)(RecipeModel);
+        return new Recipe(loadRecipeConfig(id));
+      })
+      .filter((recipe) => recipe.id);
 
     this.recipes = this.recipes.concat(this._getDevRecipes());
 
@@ -373,7 +395,9 @@ export default class ServerApi {
         console.log('[ServerApi::getRecipePackage] Using internal recipe file');
         archivePath = internalRecipeFile;
       } else {
-        console.log('[ServerApi::getRecipePackage] Downloading recipe from server');
+        console.log(
+          '[ServerApi::getRecipePackage] Downloading recipe from server',
+        );
         archivePath = tempArchivePath;
 
         const packageUrl = `${apiBase()}/recipes/download/${recipeId}`;
@@ -393,12 +417,14 @@ export default class ServerApi {
         preservePaths: true,
         unlink: true,
         preserveOwner: false,
-        onwarn: x => console.log('warn', recipeId, x),
+        onwarn: (x) => console.log('warn', recipeId, x),
       });
 
       await sleep(10);
 
-      const { id } = fs.readJsonSync(path.join(recipeTempDirectory, 'package.json'));
+      const { id } = fs.readJsonSync(
+        path.join(recipeTempDirectory, 'package.json'),
+      );
       const recipeDirectory = path.join(recipesDirectory, id);
       fs.copySync(recipeTempDirectory, recipeDirectory);
       fs.remove(recipeTempDirectory);
@@ -414,7 +440,9 @@ export default class ServerApi {
 
   // News
   async getLatestNews() {
-    const url = `${apiBase(true)}/news?platform=${osPlatform}&arch=${osArch}&version=${app.getVersion()}`;
+    const url = `${apiBase(
+      true,
+    )}/news?platform=${osPlatform}&arch=${osArch}&version=${app.getVersion()}`;
     const request = await sendAuthRequest(url);
     if (!request.ok) throw request;
     const data = await request.json();
@@ -435,9 +463,13 @@ export default class ServerApi {
       throw new Error('Server not loaded');
     }
 
-    const request = await sendAuthRequest(`${apiBase(false)}/health`, {
-      method: 'GET',
-    }, false);
+    const request = await sendAuthRequest(
+      `${apiBase(false)}/health`,
+      {
+        method: 'GET',
+      },
+      false,
+    );
     if (!request.ok) {
       throw request;
     }
@@ -445,23 +477,31 @@ export default class ServerApi {
   }
 
   async getLegacyServices() {
-    const file = path.join(app.getPath('userData'), 'settings', 'services.json');
+    const file = path.join(
+      app.getPath('userData'),
+      'settings',
+      'services.json',
+    );
 
     try {
       const config = fs.readJsonSync(file);
 
       if (Object.prototype.hasOwnProperty.call(config, 'services')) {
-        const services = await Promise.all(config.services.map(async (s) => {
-          const service = s;
-          const request = await sendAuthRequest(`${apiBase()}/recipes/${s.service}`);
-
-          if (request.status === 200) {
-            const data = await request.json();
-            service.recipe = new RecipePreviewModel(data);
-          }
-
-          return service;
-        }));
+        const services = await Promise.all(
+          config.services.map(async (s) => {
+            const service = s;
+            const request = await sendAuthRequest(
+              `${apiBase()}/recipes/${s.service}`,
+            );
+
+            if (request.status === 200) {
+              const data = await request.json();
+              service.recipe = new RecipePreviewModel(data);
+            }
+
+            return service;
+          }),
+        );
 
         debug('ServerApi::getLegacyServices resolves', services);
         return services;
@@ -475,17 +515,19 @@ export default class ServerApi {
 
   // Helper
   async _mapServiceModels(services) {
-    const recipes = services.map(s => s.recipeId);
+    const recipes = services.map((s) => s.recipeId);
     await this._bulkRecipeCheck(recipes);
     /* eslint-disable no-return-await */
-    return Promise.all(services.map(async service => await this._prepareServiceModel(service)));
+    return Promise.all(
+      services.map(async (service) => await this._prepareServiceModel(service)),
+    );
     /* eslint-enable no-return-await */
   }
 
   async _prepareServiceModel(service) {
     let recipe;
     try {
-      recipe = this.recipes.find(r => r.id === service.recipeId);
+      recipe = this.recipes.find((r) => r.id === service.recipeId);
 
       if (!recipe) {
         console.warn(`Recipe ${service.recipeId} not loaded`);
@@ -501,21 +543,25 @@ export default class ServerApi {
 
   async _bulkRecipeCheck(unfilteredRecipes) {
     // Filter recipe duplicates as we don't need to download 3 Slack recipes
-    const recipes = unfilteredRecipes.filter((elem, pos, arr) => arr.indexOf(elem) === pos);
+    const recipes = unfilteredRecipes.filter(
+      (elem, pos, arr) => arr.indexOf(elem) === pos,
+    );
 
-    return Promise.all(recipes
-      .map(async (recipeId) => {
-        let recipe = this.recipes.find(r => r.id === recipeId);
+    return Promise.all(
+      recipes.map(async (recipeId) => {
+        let recipe = this.recipes.find((r) => r.id === recipeId);
 
         if (!recipe) {
-          console.warn(`Recipe '${recipeId}' not installed, trying to fetch from server`);
+          console.warn(
+            `Recipe '${recipeId}' not installed, trying to fetch from server`,
+          );
 
           await this.getRecipePackage(recipeId);
 
           debug('Rerun ServerAPI::getInstalledRecipes');
           await this.getInstalledRecipes();
 
-          recipe = this.recipes.find(r => r.id === recipeId);
+          recipe = this.recipes.find((r) => r.id === recipeId);
 
           if (!recipe) {
             console.warn(`Could not load recipe ${recipeId}`);
@@ -524,69 +570,83 @@ export default class ServerApi {
         }
 
         return recipe;
-      })).catch(err => console.error('Can\'t load recipe', err));
+      }),
+    ).catch((err) => console.error("Can't load recipe", err));
   }
 
   _mapRecipePreviewModel(recipes) {
-    return recipes.map((recipe) => {
-      try {
-        return new RecipePreviewModel(recipe);
-      } catch (e) {
-        console.error(e);
-        return null;
-      }
-    }).filter(recipe => recipe !== null);
+    return recipes
+      .map((recipe) => {
+        try {
+          return new RecipePreviewModel(recipe);
+        } catch (e) {
+          console.error(e);
+          return null;
+        }
+      })
+      .filter((recipe) => recipe !== null);
   }
 
   _mapNewsModels(news) {
-    return news.map((newsItem) => {
-      try {
-        return new NewsModel(newsItem);
-      } catch (e) {
-        console.error(e);
-        return null;
-      }
-    }).filter(newsItem => newsItem !== null);
+    return news
+      .map((newsItem) => {
+        try {
+          return new NewsModel(newsItem);
+        } catch (e) {
+          console.error(e);
+          return null;
+        }
+      })
+      .filter((newsItem) => newsItem !== null);
   }
 
   _mapOrderModels(orders) {
-    return orders.map((orderItem) => {
-      try {
-        return new OrderModel(orderItem);
-      } catch (e) {
-        console.error(e);
-        return null;
-      }
-    }).filter(orderItem => orderItem !== null);
+    return orders
+      .map((orderItem) => {
+        try {
+          return new OrderModel(orderItem);
+        } catch (e) {
+          console.error(e);
+          return null;
+        }
+      })
+      .filter((orderItem) => orderItem !== null);
   }
 
   _getDevRecipes() {
     const recipesDirectory = getDevRecipeDirectory();
     try {
-      const paths = fs.readdirSync(recipesDirectory)
-        .filter(file => fs.statSync(path.join(recipesDirectory, file)).isDirectory() && file !== 'temp');
-
-      const recipes = paths.map((id) => {
-        let Recipe;
-        try {
-          // eslint-disable-next-line
-          Recipe = require(id)(RecipeModel);
-          return new Recipe(loadRecipeConfig(id));
-        } catch (err) {
-          console.error(err);
-        }
+      const paths = fs
+        .readdirSync(recipesDirectory)
+        .filter(
+          (file) => fs.statSync(path.join(recipesDirectory, file)).isDirectory()
+            && file !== 'temp',
+        );
+
+      const recipes = paths
+        .map((id) => {
+          let Recipe;
+          try {
+            // eslint-disable-next-line
+            Recipe = require(id)(RecipeModel);
+            return new Recipe(loadRecipeConfig(id));
+          } catch (err) {
+            console.error(err);
+          }
 
-        return false;
-      }).filter(recipe => recipe.id).map((data) => {
-        const recipe = data;
+          return false;
+        })
+        .filter((recipe) => recipe.id)
+        .map((data) => {
+          const recipe = data;
 
-        recipe.icons = {
-          svg: `${recipe.path}/icon.svg`,
-        };
-        recipe.local = true;
+          recipe.icons = {
+            svg: `${recipe.path}/icon.svg`,
+          };
+          recipe.local = true;
 
-        return data;
-      });
+          return data;
+        });
 
       return recipes;
     } catch (err) {
diff --git a/src/app.js b/src/app.js
index aab1729d7..a2d60dbe4 100644
--- a/src/app.js
+++ b/src/app.js
@@ -59,7 +59,7 @@ window.addEventListener('load', () => {
 });
 
 // Prevent drag and drop into window from redirecting
-window.addEventListener('dragover', event => event.preventDefault());
-window.addEventListener('drop', event => event.preventDefault());
-window.addEventListener('dragover', event => event.stopPropagation());
-window.addEventListener('drop', event => event.stopPropagation());
+window.addEventListener('dragover', (event) => event.preventDefault());
+window.addEventListener('drop', (event) => event.preventDefault());
+window.addEventListener('dragover', (event) => event.stopPropagation());
+window.addEventListener('drop', (event) => event.stopPropagation());
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 6fa3adf92..c0e6b982b 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -7,14 +7,19 @@ import { TitleBar } from 'electron-react-titlebar';
 import Link from '../ui/Link';
 import InfoBar from '../ui/InfoBar';
 
-import { oneOrManyChildElements, globalError as globalErrorPropType } from '../../prop-types';
+import {
+  oneOrManyChildElements,
+  globalError as globalErrorPropType,
+} from '../../prop-types';
 import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import { GITHUB_FERDI_URL } from '../../config';
 
-export default @observer class AuthLayout extends Component {
+export default
+@observer
+class AuthLayout extends Component {
   static propTypes = {
     children: oneOrManyChildElements.isRequired,
     error: globalErrorPropType.isRequired,
@@ -30,7 +35,7 @@ export default @observer class AuthLayout extends Component {
 
   state = {
     shouldShowAppUpdateInfoBar: true,
-  }
+  };
 
   static defaultProps = {
     nextAppReleaseVersion: null,
@@ -57,12 +62,15 @@ export default @observer class AuthLayout extends Component {
 
     return (
       <>
-        {isWindows && !isFullScreen && <TitleBar menu={window.ferdi.menu.template} icon="assets/images/logo.svg" />}
+        {isWindows && !isFullScreen && (
+          <TitleBar
+            menu={window.ferdi.menu.template}
+            icon="assets/images/logo.svg"
+          />
+        )}
         <div className="auth">
           {!isOnline && (
-            <InfoBar
-              type="warning"
-            >
+            <InfoBar type="warning">
               <span className="mdi mdi-flash" />
               {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
             </InfoBar>
@@ -95,7 +103,11 @@ export default @observer class AuthLayout extends Component {
             })}
           </div>
           {/* </div> */}
-          <Link to={`${GITHUB_FERDI_URL}/ferdi`} className="auth__adlk" target="_blank">
+          <Link
+            to={`${GITHUB_FERDI_URL}/ferdi`}
+            className="auth__adlk"
+            target="_blank"
+          >
             <img src="./assets/images/adlk.svg" alt="" />
           </Link>
         </div>
diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js
index 0dedd825a..7bab80280 100644
--- a/src/components/auth/ChangeServer.js
+++ b/src/components/auth/ChangeServer.js
@@ -100,7 +100,7 @@ export default @observer class ChangeServer extends Component {
     const { intl } = this.context;
     return (
       <div className="auth__container">
-        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+        <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
           <h1>{intl.formatMessage(messages.headline)}</h1>
           {form.$('server').value === this.franzServer
           && (
@@ -113,7 +113,7 @@ export default @observer class ChangeServer extends Component {
           && (
             <Input
               placeholder="Custom Server"
-              onChange={e => this.submit(e)}
+              onChange={(e) => this.submit(e)}
               field={form.$('customServer')}
             />
           )}
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js
index 1fdbea595..2ad8a2409 100644
--- a/src/components/auth/Locked.js
+++ b/src/components/auth/Locked.js
@@ -102,7 +102,7 @@ export default @observer class Locked extends Component {
 
     return (
       <div className="auth__container">
-        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+        <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
           <img
             src="./assets/images/logo.svg"
             className="auth__logo"
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 52b09eab6..9e6a8d046 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -135,7 +135,7 @@ export default @inject('actions') @observer class Login extends Component {
 
     return (
       <div className="auth__container">
-        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+        <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
           <img
             src="./assets/images/logo.svg"
             className="auth__logo"
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js
index ad34e39af..eafc48502 100644
--- a/src/components/auth/Password.js
+++ b/src/components/auth/Password.js
@@ -86,7 +86,7 @@ export default @observer class Password extends Component {
 
     return (
       <div className="auth__container">
-        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+        <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
           <img
             src="./assets/images/logo.svg"
             className="auth__logo"
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js
index e03cf9101..bd9069eb7 100644
--- a/src/components/auth/SetupAssistant.js
+++ b/src/components/auth/SetupAssistant.js
@@ -34,7 +34,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     width: '500px !important',
     textAlign: 'center',
@@ -161,7 +161,7 @@ class SetupAssistant extends Component {
     const sanitizedWorkspace = slackWorkspace.trim().replace(/^https?:\/\//, '');
 
     if (sanitizedWorkspace) {
-      const index = services.findIndex(s => s.id === SLACK_ID);
+      const index = services.findIndex((s) => s.id === SLACK_ID);
 
       if (index === -1) {
         const newServices = services;
@@ -215,11 +215,11 @@ class SetupAssistant extends Component {
               <button
                 className={classnames({
                   [classes.serviceContainer]: true,
-                  [classes.selected]: this.state.services.findIndex(s => s.id === id) !== -1,
+                  [classes.selected]: this.state.services.findIndex((s) => s.id === id) !== -1,
                 })}
                 key={id}
                 onClick={() => {
-                  const index = this.state.services.findIndex(s => s.id === id);
+                  const index = this.state.services.findIndex((s) => s.id === id);
                   if (index === -1) {
                     if (id === SLACK_ID) {
                       this.setState({ isSlackModalOpen: true });
@@ -283,7 +283,7 @@ class SetupAssistant extends Component {
               <Input
                 suffix=".slack.com"
                 placeholder="workspace-url"
-                onChange={e => this.setState({ slackWorkspace: e.target.value })}
+                onChange={(e) => this.setState({ slackWorkspace: e.target.value })}
                 value={slackWorkspace}
               />
               <div className={classes.modalActionContainer}>
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index 140867ea1..411b6697b 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -138,7 +138,7 @@ export default @inject('actions') @observer class Signup extends Component {
     return (
       <div className="auth__scroll-container">
         <div className="auth__container auth__container--signup">
-          <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+          <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
             <img
               src="./assets/images/logo.svg"
               className="auth__logo"
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 5f2fac64b..cb522e26e 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -84,7 +84,7 @@ export default @inject('actions') @observer class Login extends Component {
           </Link>
         </div>
         <div className="welcome__featured-services">
-          {recipes.map(recipe => (
+          {recipes.map((recipe) => (
             <div
               key={recipe.id}
               className="welcome__featured-service"
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 7e4d0e53e..6e1d7c9a0 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -44,7 +44,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   appContent: {
     // width: `calc(100% + ${theme.workspaces.drawer.width}px)`,
     width: '100%',
@@ -124,7 +124,7 @@ class AppLayout extends Component {
             {sidebar}
             <div className="app__service">
               <WorkspaceSwitchingIndicator />
-              {news.length > 0 && news.map(item => (
+              {news.length > 0 && news.map((item) => (
                 <InfoBar
                   key={item.id}
                   position="top"
diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js
index e54a88faa..0b9d3122c 100644
--- a/src/components/services/content/ConnectionLostBanner.js
+++ b/src/components/services/content/ConnectionLostBanner.js
@@ -26,7 +26,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     background: theme.colorBackground,
     borderRadius: theme.borderRadius,
diff --git a/src/components/services/content/ErrorHandlers/styles.js b/src/components/services/content/ErrorHandlers/styles.js
index 9e2509ee5..72d62f5e3 100644
--- a/src/components/services/content/ErrorHandlers/styles.js
+++ b/src/components/services/content/ErrorHandlers/styles.js
@@ -1,4 +1,4 @@
-export default theme => ({
+export default (theme) => ({
   component: {
     left: 0,
     position: 'absolute',
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 6e46a60d2..fbf884f0a 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -167,7 +167,7 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
             </div>
           </Appear>
         )}
-        {services.filter(service => !service.isTodosService).map(service => (
+        {services.filter((service) => !service.isTodosService).map((service) => (
           <ServiceView
             key={service.id}
             service={service}
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index b62940c06..10ff0bbbb 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -47,7 +47,7 @@ export default @observer class WebviewCrashHandler extends Component {
     const { reload } = this.props;
 
     this.countdownInterval = setInterval(() => {
-      this.setState(prevState => ({
+      this.setState((prevState) => ({
         countdown: prevState.countdown - this.countdownIntervalTimeout,
       }));
 
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index db7a69bfc..0f608c415 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -33,7 +33,7 @@ export default @observer class TabBar extends Component {
     reorder({ oldIndex, newIndex });
   };
 
-  shouldPreventSorting = event => event.target.tagName !== 'LI';
+  shouldPreventSorting = (event) => event.target.tagName !== 'LI';
 
   toggleService = ({ serviceId, isEnabled }) => {
     const { updateService } = this.props;
@@ -95,10 +95,10 @@ export default @observer class TabBar extends Component {
           toggleNotifications={toggleNotifications}
           toggleAudio={toggleAudio}
           deleteService={deleteService}
-          disableService={args => this.disableService(args)}
-          enableService={args => this.enableService(args)}
-          hibernateService={args => this.hibernateService(args)}
-          wakeUpService={args => this.wakeUpService(args)}
+          disableService={(args) => this.disableService(args)}
+          enableService={(args) => this.enableService(args)}
+          hibernateService={(args) => this.hibernateService(args)}
+          wakeUpService={(args) => this.wakeUpService(args)}
           openSettings={openSettings}
           distance={20}
           axis="y"
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 56e5f9c94..5e424fdd5 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -266,7 +266,7 @@ export default @observer class EditServiceForm extends Component {
           </span>
         </div>
         <div className="settings__body">
-          <form onSubmit={e => this.submit(e)} id="form">
+          <form onSubmit={(e) => this.submit(e)} id="form">
             <div className="service-name">
               <Input field={form.$('name')} focus />
             </div>
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index a05af5da0..11d3eaa79 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -96,7 +96,7 @@ export default @observer class ServicesDashboard extends Component {
           {(services.length !== 0 || searchNeedle) && !isLoading && (
             <SearchInput
               placeholder={intl.formatMessage(messages.searchService)}
-              onChange={needle => filterServices({ needle })}
+              onChange={(needle) => filterServices({ needle })}
               onReset={() => resetFilter()}
               autoFocus
             />
@@ -163,7 +163,7 @@ export default @observer class ServicesDashboard extends Component {
           ) : (
             <table className="service-table">
               <tbody>
-                {services.map(service => (
+                {services.map((service) => (
                   <ServiceItem
                     key={service.id}
                     service={service}
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 7ac644446..339e2dff6 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -266,8 +266,8 @@ export default @observer class EditSettingsForm extends Component {
         </div>
         <div className="settings__body">
           <form
-            onSubmit={e => this.submit(e)}
-            onChange={e => this.submit(e)}
+            onSubmit={(e) => this.submit(e)}
+            onChange={(e) => this.submit(e)}
             id="form"
           >
             {/* Titles */}
@@ -367,7 +367,7 @@ export default @observer class EditSettingsForm extends Component {
                           <div>
                             <Input
                               placeholder="Todo Server"
-                              onChange={e => this.submit(e)}
+                              onChange={(e) => this.submit(e)}
                               field={form.$('customTodoServer')}
                             />
                             <p
@@ -401,7 +401,7 @@ export default @observer class EditSettingsForm extends Component {
                       >
                         <Input
                           placeholder="17:00"
-                          onChange={e => this.submit(e)}
+                          onChange={(e) => this.submit(e)}
                           field={form.$('scheduledDNDStart')}
                           type="time"
                         />
@@ -413,7 +413,7 @@ export default @observer class EditSettingsForm extends Component {
                       >
                         <Input
                           placeholder="09:00"
-                          onChange={e => this.submit(e)}
+                          onChange={(e) => this.submit(e)}
                           field={form.$('scheduledDNDEnd')}
                           type="time"
                         />
@@ -480,7 +480,7 @@ export default @observer class EditSettingsForm extends Component {
 
                 <Input
                   placeholder="Accent Color"
-                  onChange={e => this.submit(e)}
+                  onChange={(e) => this.submit(e)}
                   field={form.$('accentColor')}
                 />
                 <p>
@@ -515,7 +515,7 @@ export default @observer class EditSettingsForm extends Component {
 
                     <Input
                       placeholder={intl.formatMessage(messages.lockedPassword)}
-                      onChange={e => this.submit(e)}
+                      onChange={(e) => this.submit(e)}
                       field={form.$('lockedPassword')}
                       type="password"
                       scorePassword
@@ -527,7 +527,7 @@ export default @observer class EditSettingsForm extends Component {
 
                     <Input
                       placeholder="Lock after inactivity"
-                      onChange={e => this.submit(e)}
+                      onChange={(e) => this.submit(e)}
                       field={form.$('inactivityLock')}
                       autoFocus
                     />
@@ -570,6 +570,7 @@ export default @observer class EditSettingsForm extends Component {
                   href={FRANZ_TRANSLATION}
                   target="_blank"
                   className="link"
+                  rel="noreferrer"
                 >
                   {intl.formatMessage(messages.translationHelp)}
                   {' '}
@@ -588,7 +589,7 @@ export default @observer class EditSettingsForm extends Component {
 
                 <Input
                   placeholder="User Agent"
-                  onChange={e => this.submit(e)}
+                  onChange={(e) => this.submit(e)}
                   field={form.$('userAgentPref')}
                 />
                 <p className="settings__help">{intl.formatMessage(globalMessages.userAgentHelp)}</p>
@@ -674,12 +675,12 @@ export default @observer class EditSettingsForm extends Component {
 
                   Ferdi is based on
                   {' '}
-                  <a href={`${GITHUB_FRANZ_URL}/franz`} target="_blank">Franz</a>
+                  <a href={`${GITHUB_FRANZ_URL}/franz`} target="_blank" rel="noreferrer">Franz</a>
 
                   , a project published
                   under the
                   {' '}
-                  <a href={`${GITHUB_FRANZ_URL}/franz/blob/master/LICENSE`} target="_blank">Apache-2.0 License</a>
+                  <a href={`${GITHUB_FRANZ_URL}/franz/blob/master/LICENSE`} target="_blank" rel="noreferrer">Apache-2.0 License</a>
                 </span>
                 <br />
                 <span className="mdi mdi-information" />
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.js b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
index 36c126565..b84e06739 100644
--- a/src/components/settings/supportFerdi/SupportFerdiDashboard.js
+++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
@@ -94,10 +94,10 @@ class SupportFerdiDashboard extends Component {
           <h1>{intl.formatMessage(messages.title)}</h1>
           <div>
             <p className="settings__support-badges">
-              <a href="https://github.com/getferdi/ferdi" target="_blank"><img alt="GitHub Stars" src="https://img.shields.io/github/stars/getferdi/ferdi?style=social" /></a>
-              <a href="https://twitter.com/getferdi/" target="_blank"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/getferdi?label=Follow&style=social" /></a>
-              <a href="https://opencollective.com/getferdi#section-contributors" target="_blank"><img alt="Open Collective backers" src="https://img.shields.io/opencollective/backers/getferdi?logo=open-collective" /></a>
-              <a href="https://opencollective.com/getferdi#section-contributors" target="_blank"><img alt="Open Collective sponsors" src="https://img.shields.io/opencollective/sponsors/getferdi?logo=open-collective" /></a>
+              <a href="https://github.com/getferdi/ferdi" target="_blank" rel="noreferrer"><img alt="GitHub Stars" src="https://img.shields.io/github/stars/getferdi/ferdi?style=social" /></a>
+              <a href="https://twitter.com/getferdi/" target="_blank" rel="noreferrer"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/getferdi?label=Follow&style=social" /></a>
+              <a href="https://opencollective.com/getferdi#section-contributors" target="_blank" rel="noreferrer"><img alt="Open Collective backers" src="https://img.shields.io/opencollective/backers/getferdi?logo=open-collective" /></a>
+              <a href="https://opencollective.com/getferdi#section-contributors" target="_blank" rel="noreferrer"><img alt="Open Collective sponsors" src="https://img.shields.io/opencollective/sponsors/getferdi?logo=open-collective" /></a>
             </p>
             <FormattedHTMLMessage {...messages.aboutIntro} />
             <br />
@@ -109,7 +109,7 @@ class SupportFerdiDashboard extends Component {
             </p>
             <p>
               {intl.formatMessage(messages.textListContributors)}
-              <a href="https://github.com/getferdi/ferdi#contributors-" target="_blank" className="link">
+              <a href="https://github.com/getferdi/ferdi#contributors-" target="_blank" className="link" rel="noreferrer">
                 {' '}
                 {intl.formatMessage(messages.textListContributorsHere)}
                 <i className="mdi mdi-open-in-new" />
@@ -122,7 +122,7 @@ class SupportFerdiDashboard extends Component {
             </p>
             <p>
               {intl.formatMessage(messages.textSupportWelcome)}
-              <a href="https://help.getferdi.com/general/support" target="_blank" className="link">
+              <a href="https://help.getferdi.com/general/support" target="_blank" className="link" rel="noreferrer">
                 {' '}
                 {intl.formatMessage(messages.textSupportWelcomeHere)}
                 <i className="mdi mdi-open-in-new" />
@@ -130,7 +130,7 @@ class SupportFerdiDashboard extends Component {
             </p>
             <p>
               {intl.formatMessage(messages.textExpenses)}
-              <a href="https://opencollective.com/getferdi#section-budget" target="_blank" className="link">
+              <a href="https://opencollective.com/getferdi#section-budget" target="_blank" className="link" rel="noreferrer">
                 {' '}
                 {intl.formatMessage(messages.textOpenCollective)}
                 <i className="mdi mdi-open-in-new" />
@@ -138,14 +138,14 @@ class SupportFerdiDashboard extends Component {
             </p>
             <p>
               {intl.formatMessage(messages.textDonation)}
-              <a href="https://opencollective.com/getferdi#section-contribute" target="_blank" className="link">
+              <a href="https://opencollective.com/getferdi#section-contribute" target="_blank" className="link" rel="noreferrer">
                 {' '}
                 {intl.formatMessage(messages.textOpenCollective)}
                 <i className="mdi mdi-open-in-new" />
               </a>
               {' '}
               {intl.formatMessage(messages.textDonationAnd)}
-              <a href="https://github.com/sponsors/getferdi" target="_blank" className="link">
+              <a href="https://github.com/sponsors/getferdi" target="_blank" className="link" rel="noreferrer">
                 {' '}
                 {intl.formatMessage(messages.textGitHubSponsors)}
                 <i className="mdi mdi-open-in-new" />
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index a1a353e57..db78acb69 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -84,7 +84,7 @@ export default @observer class EditUserForm extends Component {
           </span>
         </div>
         <div className="settings__body">
-          <form onSubmit={e => this.submit(e)} id="form">
+          <form onSubmit={(e) => this.submit(e)} id="form">
             {status.length > 0 && status.includes('data-updated') && (
               <Infobox
                 type="success"
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
index a7f6f4545..31d7ca249 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.js
@@ -37,7 +37,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
 
   componentDidMount() {
     this.interval = setInterval(() => {
-      this.setState(prevState => ({
+      this.setState((prevState) => ({
         step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1,
       }));
     }, 2500);
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
index 4926df470..646cf56ca 100644
--- a/src/components/ui/FeatureItem.js
+++ b/src/components/ui/FeatureItem.js
@@ -4,7 +4,7 @@ import { Icon } from '@meetfranz/ui';
 import classnames from 'classnames';
 import { mdiCheckCircle } from '@mdi/js';
 
-const styles = theme => ({
+const styles = (theme) => ({
   featureItem: {
     borderBottom: [1, 'solid', theme.defaultContentBorder],
     padding: [8, 0],
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
index ada15244b..cf2664830 100644
--- a/src/components/ui/FeatureList.js
+++ b/src/components/ui/FeatureList.js
@@ -92,7 +92,7 @@ export class FeatureList extends Component {
 
     return (
       <ul className={className}>
-        {features.map(feature => <FeatureItem name={intl.formatMessage(feature)} className={featureClassName} />)}
+        {features.map((feature) => <FeatureItem name={intl.formatMessage(feature)} className={featureClassName} />)}
       </ul>
     );
   }
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index 7930d98b4..fd14b7018 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -48,7 +48,7 @@ export default @inject('stores') @observer class Link extends Component {
         href={router.history.createHref(to)}
         className={linkClasses}
         style={style}
-        onClick={e => this.onClick(e)}
+        onClick={(e) => this.onClick(e)}
       >
         {children}
       </a>
diff --git a/src/components/ui/Modal/styles.js b/src/components/ui/Modal/styles.js
index c2bebf9bb..f32c075ce 100644
--- a/src/components/ui/Modal/styles.js
+++ b/src/components/ui/Modal/styles.js
@@ -1,4 +1,4 @@
-export default theme => ({
+export default (theme) => ({
   component: {
     zIndex: 500,
     position: 'absolute',
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.js
index ba13aca63..e77714eb7 100644
--- a/src/components/ui/Radio.js
+++ b/src/components/ui/Radio.js
@@ -54,7 +54,7 @@ export default @observer class Radio extends Component {
           </label>
         )}
         <div className="franz-form__radio-wrapper">
-          {field.options.map(type => (
+          {field.options.map((type) => (
             <label
               key={type.value}
               htmlFor={`${field.id}-${type.value}`}
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js
index 78d6aae8b..0b25734dd 100644
--- a/src/components/ui/SearchInput.js
+++ b/src/components/ui/SearchInput.js
@@ -96,7 +96,7 @@ export default @observer class SearchInput extends Component {
             type="text"
             placeholder={placeholder}
             value={value}
-            onChange={e => this.onChange(e)}
+            onChange={(e) => this.onChange(e)}
             ref={(ref) => { this.input = ref; }}
           />
         </label>
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js
index b4511433c..e7a5eafa8 100644
--- a/src/components/ui/Select.js
+++ b/src/components/ui/Select.js
@@ -82,7 +82,7 @@ export default @observer class Select extends Component {
           </label>
         )}
         <select
-          onChange={multiple ? e => this.multipleChange(e) : field.onChange}
+          onChange={multiple ? (e) => this.multipleChange(e) : field.onChange}
           id={field.id}
           defaultValue={selected}
           className="franz-form__select"
@@ -90,7 +90,7 @@ export default @observer class Select extends Component {
           multiple={multiple}
           ref={this.element}
         >
-          {field.options.map(type => (
+          {field.options.map((type) => (
             <option
               key={type.value}
               value={type.value}
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.js
index 0b9155a4e..b2dadeac3 100644
--- a/src/components/ui/ServiceIcon.js
+++ b/src/components/ui/ServiceIcon.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 
 import ServiceModel from '../../models/Service';
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     height: 'auto',
   },
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.js
index b00a6a3f8..f344449a0 100644
--- a/src/components/ui/Slider.js
+++ b/src/components/ui/Slider.js
@@ -53,7 +53,7 @@ export default @observer class Slider extends Component {
               value={field.value}
               min="1"
               max="100"
-              onChange={e => (!disabled ? this.onChange(e) : null)}
+              onChange={(e) => (!disabled ? this.onChange(e) : null)}
             />
           </div>
 
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js
index 546b05a4e..d0ef4e798 100644
--- a/src/components/ui/Tabs/TabItem.js
+++ b/src/components/ui/Tabs/TabItem.js
@@ -1,17 +1,15 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 
 import { oneOrManyChildElements } from '../../../prop-types';
 
 export default class TabItem extends Component {
   static propTypes = {
     children: oneOrManyChildElements.isRequired,
-  }
+  };
 
   render() {
     const { children } = this.props;
 
-    return (
-      <>{children}</>
-    );
+    return <>{children}</>;
   }
 }
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
index e68dc3a1d..56c76f215 100644
--- a/src/components/ui/Tabs/Tabs.js
+++ b/src/components/ui/Tabs/Tabs.js
@@ -28,7 +28,7 @@ class Tab extends Component {
 
   render() {
     const { children: childElements } = this.props;
-    const children = childElements.filter(c => !!c);
+    const children = childElements.filter((c) => !!c);
 
     if (children.length === 1) {
       return <div>{children}</div>;
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js
index 78fb77cbe..14330e5c7 100644
--- a/src/components/ui/Toggle.js
+++ b/src/components/ui/Toggle.js
@@ -59,7 +59,7 @@ export default @observer class Toggle extends Component {
             name={field.name}
             value={field.name}
             checked={field.value}
-            onChange={e => (!disabled ? this.onChange(e) : null)}
+            onChange={(e) => (!disabled ? this.onChange(e) : null)}
           />
         </label>
         {field.error && <div className={field.error}>{field.error}</div>}
diff --git a/src/components/ui/ToggleRaw.js b/src/components/ui/ToggleRaw.js
index dcaf664e1..4700127d4 100644
--- a/src/components/ui/ToggleRaw.js
+++ b/src/components/ui/ToggleRaw.js
@@ -64,7 +64,7 @@ export default @observer class ToggleRaw extends Component {
             name={field.name}
             value={field.name}
             checked={field.value}
-            onChange={e => (!disabled ? this.onChange(e) : null)}
+            onChange={(e) => (!disabled ? this.onChange(e) : null)}
           />
         </label>
         {field.error && <div className={field.error}>{field.error}</div>}
diff --git a/src/components/ui/WebviewLoader/styles.js b/src/components/ui/WebviewLoader/styles.js
index dbd75db8a..5d58011fe 100644
--- a/src/components/ui/WebviewLoader/styles.js
+++ b/src/components/ui/WebviewLoader/styles.js
@@ -1,4 +1,4 @@
-export default theme => ({
+export default (theme) => ({
   component: {
     background: theme.colorWebviewLoaderBackground,
     padding: 20,
diff --git a/src/components/util/ErrorBoundary/styles.js b/src/components/util/ErrorBoundary/styles.js
index 0960546ff..51b36fdf3 100644
--- a/src/components/util/ErrorBoundary/styles.js
+++ b/src/components/util/ErrorBoundary/styles.js
@@ -1,4 +1,4 @@
-export default theme => ({
+export default (theme) => ({
   component: {
     display: 'flex',
     width: '100%',
diff --git a/src/containers/auth/SetupAssistantScreen.js b/src/containers/auth/SetupAssistantScreen.js
index eaf3fda8a..d14085f63 100644
--- a/src/containers/auth/SetupAssistantScreen.js
+++ b/src/containers/auth/SetupAssistantScreen.js
@@ -102,7 +102,7 @@ export default @inject('stores', 'actions') @observer class SetupAssistantScreen
   render() {
     return (
       <SetupAssistant
-        onSubmit={config => this.setupServices(config)}
+        onSubmit={(config) => this.setupServices(config)}
         services={this.services}
         embed={false}
         isSettingUpServices={this.state.isSettingUpServices}
diff --git a/src/containers/auth/SignupScreen.js b/src/containers/auth/SignupScreen.js
index eeab63a0c..38c5dfb43 100644
--- a/src/containers/auth/SignupScreen.js
+++ b/src/containers/auth/SignupScreen.js
@@ -24,7 +24,7 @@ export default @inject('stores', 'actions') @observer class SignupScreen extends
 
     return (
       <Signup
-        onSubmit={values => this.onSignup(values)}
+        onSubmit={(values) => this.onSignup(values)}
         isSubmitting={stores.user.signupRequest.isExecuting}
         loginRoute={stores.user.loginRoute}
         changeServerRoute={stores.user.changeServerRoute}
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 21be9d9d1..fff628946 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -92,8 +92,8 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
 
     const workspacesDrawer = (
       <WorkspaceDrawer
-        getServicesForWorkspace={workspace => (
-          workspace ? workspaceStore.getWorkspaceServices(workspace).map(s => s.name) : services.all.map(s => s.name)
+        getServicesForWorkspace={(workspace) => (
+          workspace ? workspaceStore.getWorkspaceServices(workspace).map((s) => s.name) : services.all.map((s) => s.name)
         )}
       />
     );
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 4ee932895..8d92b01be 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -46,10 +46,7 @@ class AccountScreen extends Component {
   }
 
   render() {
-    const {
-      user,
-      settings,
-    } = this.props.stores;
+    const { user, settings } = this.props.stores;
     const { user: userActions } = this.props.actions;
 
     const isLoadingUserInfo = user.getUserInfoRequest.isExecuting;
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index 0fe84792f..c880e97ae 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -394,9 +394,9 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
           status={services.actionStatus}
           isSaving={services.updateServiceRequest.isExecuting || services.createServiceRequest.isExecuting}
           isDeleting={services.deleteServiceRequest.isExecuting}
-          onSubmit={d => this.onSubmit(d)}
+          onSubmit={(d) => this.onSubmit(d)}
           onDelete={() => this.deleteService()}
-          openRecipeFile={file => this.openRecipeFile(file)}
+          openRecipeFile={(file) => this.openRecipeFile(file)}
           isProxyFeatureEnabled={proxyFeature.isEnabled}
         />
       </ErrorBoundary>
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 764078cb8..e0a648095 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -652,7 +652,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           isUpdateAvailable={updateStatus === updateStatusTypes.AVAILABLE}
           noUpdateAvailable={updateStatus === updateStatusTypes.NOT_AVAILABLE}
           updateIsReadyToInstall={updateStatus === updateStatusTypes.DOWNLOADED}
-          onSubmit={d => this.onSubmit(d)}
+          onSubmit={(d) => this.onSubmit(d)}
           getCacheSize={() => app.cacheSize}
           isClearingAllCache={isClearingAllCache}
           onClearAllCache={clearAllCache}
diff --git a/src/containers/settings/EditUserScreen.js b/src/containers/settings/EditUserScreen.js
index 8e93164de..820b5e4d3 100644
--- a/src/containers/settings/EditUserScreen.js
+++ b/src/containers/settings/EditUserScreen.js
@@ -141,7 +141,7 @@ export default @inject('stores', 'actions') @observer class EditUserScreen exten
           status={user.actionStatus}
           form={form}
           isSaving={user.updateUserInfoRequest.isExecuting}
-          onSubmit={d => this.onSubmit(d)}
+          onSubmit={(d) => this.onSubmit(d)}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js
index 9a16fd064..0d6506705 100644
--- a/src/containers/settings/RecipesScreen.js
+++ b/src/containers/settings/RecipesScreen.js
@@ -82,7 +82,7 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
     return recipes
     // Filter out duplicate recipes
       .filter((recipe, index, self) => {
-        const ids = self.map(rec => rec.id);
+        const ids = self.map((rec) => rec.id);
         return ids.indexOf(recipe.id) === index;
 
         // Sort alphabetically
@@ -95,7 +95,7 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
 
   // Create an array of RecipePreviews from an array of recipe objects
   createPreviews(recipes) {
-    return recipes.map(recipe => new RecipePreview(recipe));
+    return recipes.map((recipe) => new RecipePreview(recipe));
   }
 
   resetSearch() {
@@ -134,11 +134,11 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
       // All search recipes from local recipes
       ...this.createPreviews(
         this.customRecipes
-          .filter(service => service.name.toLowerCase().includes(this.state.needle.toLowerCase())),
+          .filter((service) => service.name.toLowerCase().includes(this.state.needle.toLowerCase())),
       ),
     ]) : recipeFilter;
 
-    const customWebsiteRecipe = recipePreviews.all.find(service => service.id === CUSTOM_WEBSITE_RECIPE_ID);
+    const customWebsiteRecipe = recipePreviews.all.find((service) => service.id === CUSTOM_WEBSITE_RECIPE_ID);
 
     const isLoading = recipePreviews.featuredRecipePreviewsRequest.isExecuting
       || recipePreviews.allRecipePreviewsRequest.isExecuting
@@ -156,7 +156,7 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
           addedServiceCount={services.all.length}
           hasLoadedRecipes={recipePreviews.featuredRecipePreviewsRequest.wasExecuted}
           showAddServiceInterface={serviceActions.showAddServiceInterface}
-          searchRecipes={e => this.searchRecipes(e)}
+          searchRecipes={(e) => this.searchRecipes(e)}
           resetSearch={() => this.resetSearch()}
           searchNeedle={this.state.needle}
           serviceStatus={services.actionStatus}
diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js
index 21964b108..315843db3 100644
--- a/src/features/announcements/components/AnnouncementScreen.js
+++ b/src/features/announcements/components/AnnouncementScreen.js
@@ -25,7 +25,7 @@ const messages = defineMessages({
 
 const smallScreen = '1000px';
 
-const styles = theme => ({
+const styles = (theme) => ({
   container: {
     background: theme.colorBackground,
     position: 'relative',
diff --git a/src/features/communityRecipes/store.js b/src/features/communityRecipes/store.js
index acc1e52f6..b115a53e1 100644
--- a/src/features/communityRecipes/store.js
+++ b/src/features/communityRecipes/store.js
@@ -19,7 +19,7 @@ export class CommunityRecipesStore extends FeatureStore {
     if (!this.stores) return [];
 
     return this.stores.recipePreviews.dev.map((r) => {
-      r.isDevRecipe = !!r.author.find(a => a.email === this.stores.user.data.email);
+      r.isDevRecipe = !!r.author.find((a) => a.email === this.stores.user.data.email);
 
       return r;
     });
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js
index f97a7c750..5387bd358 100644
--- a/src/features/publishDebugInfo/Component.js
+++ b/src/features/publishDebugInfo/Component.js
@@ -46,7 +46,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   container: {
     minWidth: '70vw',
   },
@@ -186,10 +186,10 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
             <>
               <p className={classes.info}>{intl.formatMessage(messages.info)}</p>
 
-              <a href={`${DEBUG_API}/privacy.html`} target="_blank" className={classes.link}>
+              <a href={`${DEBUG_API}/privacy.html`} target="_blank" className={classes.link} rel="noreferrer">
                 {intl.formatMessage(messages.privacy)}
               </a>
-              <a href={`${DEBUG_API}/terms.html`} target="_blank" className={classes.link}>
+              <a href={`${DEBUG_API}/terms.html`} target="_blank" className={classes.link} rel="noreferrer">
                 {intl.formatMessage(messages.terms)}
               </a>
 
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js
index 04822db71..812f2c04b 100644
--- a/src/features/quickSwitch/Component.js
+++ b/src/features/quickSwitch/Component.js
@@ -28,7 +28,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   modal: {
     width: '80%',
     maxWidth: 600,
@@ -139,7 +139,7 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
     if (this.state.search && compact(invoke(this.state.search, 'match', /^[a-z0-9]/i)).length > 0) {
       // Apply simple search algorythm to list of all services
       services = this.props.stores.services.allDisplayed;
-      services = services.filter(service => service.name.toLowerCase().search(this.state.search.toLowerCase()) !== -1);
+      services = services.filter((service) => service.name.toLowerCase().search(this.state.search.toLowerCase()) !== -1);
     } else {
       // Add the currently active service first
       const currentService = this.props.stores.services.active;
diff --git a/src/features/shareFranz/Component.js b/src/features/shareFranz/Component.js
index b66375453..cc2e81b70 100644
--- a/src/features/shareFranz/Component.js
+++ b/src/features/shareFranz/Component.js
@@ -44,7 +44,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   modal: {
     width: '80%',
     maxWidth: 600,
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
index 6425746e6..d05e24e56 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.js
@@ -24,10 +24,10 @@ class TodosScreen extends Component {
           isVisible={todosStore.isTodosPanelVisible}
           togglePanel={todoActions.toggleTodosPanel}
           handleClientMessage={todoActions.handleClientMessage}
-          setTodosWebview={webview => todoActions.setTodosWebview({ webview })}
+          setTodosWebview={(webview) => todoActions.setTodosWebview({ webview })}
           width={todosStore.width}
           minWidth={TODOS_MIN_WIDTH}
-          resize={width => todoActions.resize({ width })}
+          resize={(width) => todoActions.resize({ width })}
           userAgent={todosStore.userAgent}
           todoUrl={todosStore.todoUrl}
           isTodoUrlValid={todosStore.isTodoUrlValid}
diff --git a/src/features/utils/ActionBinding.js b/src/features/utils/ActionBinding.js
index 497aa071b..787166d44 100644
--- a/src/features/utils/ActionBinding.js
+++ b/src/features/utils/ActionBinding.js
@@ -24,6 +24,6 @@ export default class ActionBinding {
   }
 }
 
-export const createActionBindings = actions => (
-  actions.map(a => new ActionBinding(a))
+export const createActionBindings = (actions) => (
+  actions.map((a) => new ActionBinding(a))
 );
diff --git a/src/features/utils/FeatureStore.js b/src/features/utils/FeatureStore.js
index 0bc10e176..4d4e217a9 100644
--- a/src/features/utils/FeatureStore.js
+++ b/src/features/utils/FeatureStore.js
@@ -16,11 +16,11 @@ export class FeatureStore {
   }
 
   _startActions(actions = this._actions) {
-    actions.forEach(a => a.start());
+    actions.forEach((a) => a.start());
   }
 
   _stopActions(actions = this._actions) {
-    actions.forEach(a => a.stop());
+    actions.forEach((a) => a.stop());
   }
 
   // REACTIONS
@@ -31,10 +31,10 @@ export class FeatureStore {
   }
 
   _startReactions(reactions = this._reactions) {
-    reactions.forEach(r => r.start());
+    reactions.forEach((r) => r.start());
   }
 
   _stopReactions(reactions = this._reactions) {
-    reactions.forEach(r => r.stop());
+    reactions.forEach((r) => r.stop());
   }
 }
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js
index b9403bd0d..1cdd14e55 100644
--- a/src/features/webControls/components/WebControls.js
+++ b/src/features/webControls/components/WebControls.js
@@ -32,7 +32,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     background: theme.colorBackground,
     position: 'relative',
@@ -197,7 +197,7 @@ class WebControls extends Component {
         <input
           value={editUrl ? inputUrl : url}
           className={classes.input}
-          onChange={event => this.setState({
+          onChange={(event) => this.setState({
             inputUrl: event.target.value,
           })}
           onFocus={(event) => {
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js
index d638b831c..e1e1b9991 100644
--- a/src/features/webControls/containers/WebControlsScreen.js
+++ b/src/features/webControls/containers/WebControlsScreen.js
@@ -114,7 +114,7 @@ class WebControlsScreen extends Component {
         goBack={() => this.goBack()}
         canGoForward={this.canGoForward}
         goForward={() => this.goForward()}
-        navigate={url => this.navigate(url)}
+        navigate={(url) => this.navigate(url)}
         url={this.url}
       />
     );
diff --git a/src/features/workspaces/api.js b/src/features/workspaces/api.js
index 30fbd84be..322695ed2 100644
--- a/src/features/workspaces/api.js
+++ b/src/features/workspaces/api.js
@@ -14,7 +14,7 @@ export const workspaceApi = {
     debug('getUserWorkspaces RESULT', result);
     if (!result.ok) throw result;
     const workspaces = await result.json();
-    return workspaces.map(data => new Workspace(data));
+    return workspaces.map((data) => new Workspace(data));
   },
 
   createWorkspace: async (name) => {
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 3ddc9cf16..1138f23d7 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -34,7 +34,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   drawer: {
     background: theme.workspaces.drawer.background,
     width: `${theme.workspaces.drawer.width}px`,
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index 2e58b70d6..a3fdf4f47 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -18,7 +18,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   item: {
     height: '67px',
     padding: `15px ${theme.workspaces.drawer.padding}px`,
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.js
index cc4b1a3ba..85fc02d51 100644
--- a/src/features/workspaces/components/WorkspaceItem.js
+++ b/src/features/workspaces/components/WorkspaceItem.js
@@ -6,7 +6,7 @@ import injectSheet from 'react-jss';
 
 import Workspace from '../models/Workspace';
 
-const styles = theme => ({
+const styles = (theme) => ({
   row: {
     height: theme.workspaces.settings.listItems.height,
     borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`,
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.js b/src/features/workspaces/components/WorkspaceServiceListItem.js
index e05b21440..f6e2a2786 100644
--- a/src/features/workspaces/components/WorkspaceServiceListItem.js
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.js
@@ -8,7 +8,7 @@ import { Toggle } from '@meetfranz/forms';
 import Service from '../../../models/Service';
 import ServiceIcon from '../../../components/ui/ServiceIcon';
 
-const styles = theme => ({
+const styles = (theme) => ({
   listItem: {
     height: theme.workspaces.settings.listItems.height,
     borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`,
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index a70d1d66f..b46959e91 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -15,7 +15,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   wrapper: {
     display: 'flex',
     alignItems: 'flex-start',
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 0c2588c42..8319d3bc6 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -175,11 +175,11 @@ class WorkspacesDashboard extends Component {
                     <table className={classes.table}>
                       {/* ===== Workspaces list ===== */}
                       <tbody>
-                        {workspaces.map(workspace => (
+                        {workspaces.map((workspace) => (
                           <WorkspaceItem
                             key={workspace.id}
                             workspace={workspace}
-                            onItemClick={w => onWorkspaceClick(w)}
+                            onItemClick={(w) => onWorkspaceClick(w)}
                           />
                         ))}
                       </tbody>
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index c241cd622..4828658f9 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -30,8 +30,8 @@ class WorkspacesScreen extends Component {
           createWorkspaceRequest={createWorkspaceRequest}
           deleteWorkspaceRequest={deleteWorkspaceRequest}
           updateWorkspaceRequest={updateWorkspaceRequest}
-          onCreateWorkspaceSubmit={data => actions.workspaces.create(data)}
-          onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })}
+          onCreateWorkspaceSubmit={(data) => actions.workspaces.create(data)}
+          onWorkspaceClick={(w) => actions.workspaces.edit({ workspace: w })}
         />
       </ErrorBoundary>
     );
diff --git a/src/features/workspaces/models/Workspace.js b/src/features/workspaces/models/Workspace.js
index 77c4e05f4..11ee377cd 100644
--- a/src/features/workspaces/models/Workspace.js
+++ b/src/features/workspaces/models/Workspace.js
@@ -22,13 +22,13 @@ export default class Workspace {
     this.name = data.name;
     this.order = data.order;
 
-    let services = data.services;
+    let { services } = data;
     if (data.saving && data.keepLoaded) {
       // Keep workspaces loaded
       services.push(KEEP_WS_LOADED_USID);
     } else if (data.saving && data.services.includes(KEEP_WS_LOADED_USID)) {
       // Don't keep loaded
-      services = services.filter(e => e !== KEEP_WS_LOADED_USID);
+      services = services.filter((e) => e !== KEEP_WS_LOADED_USID);
     }
     this.services.replace(services);
 
diff --git a/src/helpers/array-helpers.js b/src/helpers/array-helpers.js
index ffb3b63dc..5e592b7f7 100644
--- a/src/helpers/array-helpers.js
+++ b/src/helpers/array-helpers.js
@@ -1,4 +1,4 @@
-export const shuffleArray = arr => arr
-  .map(a => [Math.random(), a])
+export const shuffleArray = (arr) => arr
+  .map((a) => [Math.random(), a])
   .sort((a, b) => a[0] - b[0])
-  .map(a => a[1]);
+  .map((a) => a[1]);
diff --git a/src/helpers/async-helpers.js b/src/helpers/async-helpers.js
index 2ef01ee09..c6c57e28e 100644
--- a/src/helpers/async-helpers.js
+++ b/src/helpers/async-helpers.js
@@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
 
 export function sleep(ms = 0) {
-  return new Promise(r => setTimeout(r, ms));
+  return new Promise((r) => setTimeout(r, ms));
 }
diff --git a/src/helpers/service-helpers.js b/src/helpers/service-helpers.js
index f6363aca8..28d483182 100644
--- a/src/helpers/service-helpers.js
+++ b/src/helpers/service-helpers.js
@@ -14,5 +14,5 @@ export function removeServicePartitionDirectory(id = '', addServicePrefix = fals
 
 export async function getServiceIdsFromPartitions() {
   const files = await fs.readdir(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.js
index f489ec65e..116f19905 100644
--- a/src/helpers/validation-helpers.js
+++ b/src/helpers/validation-helpers.js
@@ -61,7 +61,7 @@ export function minLength(length) {
 
 export function oneRequired(targets) {
   return ({ field, form }) => {
-    const invalidFields = targets.filter(target => form.$(target).value === '');
+    const invalidFields = targets.filter((target) => form.$(target).value === '');
     return [targets.length !== invalidFields.length, window.ferdi.intl.formatMessage(messages.required, { field: field.label })];
   };
 }
diff --git a/src/models/Recipe.js b/src/models/Recipe.js
index 4db056f26..106b4a56a 100644
--- a/src/models/Recipe.js
+++ b/src/models/Recipe.js
@@ -89,7 +89,7 @@ export default class Recipe {
   get author() {
     try {
       const addresses = emailParser.parse(this.rawAuthor);
-      return addresses.map(a => ({ email: a.address, name: a.phrase }));
+      return addresses.map((a) => ({ email: a.address, name: a.phrase }));
     } catch (err) {
       console.warn(`Not a valid author for ${this.name}`);
     }
diff --git a/src/models/Service.js b/src/models/Service.js
index 36b310da1..79181186a 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -277,7 +277,7 @@ export default class Service {
 
     this.webview.addEventListener('ipc-message', async (e) => {
       if (e.channel === 'inject-js-unsafe') {
-        await Promise.all(e.args.map(script => this.webview.executeJavaScript(`"use strict"; (() => { ${script} })();`)));
+        await Promise.all(e.args.map((script) => this.webview.executeJavaScript(`"use strict"; (() => { ${script} })();`)));
       } else {
         handleIPCMessage({
           serviceId: this.id,
diff --git a/src/models/UserAgent.js b/src/models/UserAgent.js
index 6f91d4ed0..930ae19ef 100644
--- a/src/models/UserAgent.js
+++ b/src/models/UserAgent.js
@@ -95,10 +95,10 @@ export default class UserAgent {
   _addWebviewEvents(webview) {
     debug('Adding event handlers');
 
-    this._willNavigateListener = event => this._handleNavigate(event.url, true);
+    this._willNavigateListener = (event) => this._handleNavigate(event.url, true);
     webview.addEventListener('will-navigate', this._willNavigateListener);
 
-    this._didNavigateListener = event => this._handleNavigate(event.url);
+    this._didNavigateListener = (event) => this._handleNavigate(event.url);
     webview.addEventListener('did-navigate', this._didNavigateListener);
   }
 
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index bbb5e6305..6b5ca7c9a 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -1,6 +1,11 @@
 import { ipcRenderer, shell } from 'electron';
 import {
-  app, screen, powerMonitor, nativeTheme, getCurrentWindow, process as remoteProcess,
+  app,
+  screen,
+  powerMonitor,
+  nativeTheme,
+  getCurrentWindow,
+  process as remoteProcess,
 } from '@electron/remote';
 import { action, computed, observable } from 'mobx';
 import moment from 'moment';
@@ -14,13 +19,20 @@ import Store from './lib/Store';
 import Request from './lib/Request';
 import { CHECK_INTERVAL } from '../config';
 import {
-  DEFAULT_APP_SETTINGS, isMac, ferdiVersion, electronVersion, osRelease,
+  DEFAULT_APP_SETTINGS,
+  isMac,
+  ferdiVersion,
+  electronVersion,
+  osRelease,
 } from '../environment';
 import locales from '../i18n/translations';
 import { onVisibilityChange } from '../helpers/visibility-helper';
 import { getLocale } from '../helpers/i18n-helpers';
 
-import { getServiceIdsFromPartitions, removeServicePartitionDirectory } from '../helpers/service-helpers.js';
+import {
+  getServiceIdsFromPartitions,
+  removeServicePartitionDirectory,
+} from '../helpers/service-helpers';
 import { isValidExternalURL } from '../helpers/url-helpers';
 import { sleep } from '../helpers/async-helpers';
 
@@ -49,7 +61,10 @@ export default class AppStore extends Store {
 
   @observable healthCheckRequest = new Request(this.api.app, 'health');
 
-  @observable getAppCacheSizeRequest = new Request(this.api.local, 'getAppCacheSize');
+  @observable getAppCacheSizeRequest = new Request(
+    this.api.local,
+    'getAppCacheSize',
+  );
 
   @observable clearAppCacheRequest = new Request(this.api.local, 'clearCache');
 
@@ -93,7 +108,9 @@ export default class AppStore extends Store {
     this.actions.app.openExternalUrl.listen(this._openExternalUrl.bind(this));
     this.actions.app.checkForUpdates.listen(this._checkForUpdates.bind(this));
     this.actions.app.installUpdate.listen(this._installUpdate.bind(this));
-    this.actions.app.resetUpdateStatus.listen(this._resetUpdateStatus.bind(this));
+    this.actions.app.resetUpdateStatus.listen(
+      this._resetUpdateStatus.bind(this),
+    );
     this.actions.app.healthCheck.listen(this._healthCheck.bind(this));
     this.actions.app.muteApp.listen(this._muteApp.bind(this));
     this.actions.app.toggleMuteApp.listen(this._toggleMuteApp.bind(this));
@@ -183,9 +200,7 @@ export default class AppStore extends Store {
     // Handle deep linking (ferdi://)
     ipcRenderer.on('navigateFromDeepLink', (event, data) => {
       debug('Navigate from deep link', data);
-      let {
-        url,
-      } = data;
+      let { url } = data;
       if (!url) return;
 
       url = url.replace(/\/$/, '');
@@ -221,7 +236,10 @@ export default class AppStore extends Store {
       debug('System resumed, last suspended on', this.timeSuspensionStart);
       this.actions.service.resetLastPollTimer();
 
-      if (this.timeSuspensionStart.add(10, 'm').isBefore(moment()) && this.stores.settings.app.get('reloadAfterResume')) {
+      if (
+        this.timeSuspensionStart.add(10, 'm').isBefore(moment())
+        && this.stores.settings.app.get('reloadAfterResume')
+      ) {
         debug('Reloading services, user info and features');
 
         setInterval(() => {
@@ -266,15 +284,15 @@ export default class AppStore extends Store {
       ferdi: {
         version: ferdiVersion,
         electron: electronVersion,
-        installedRecipes: this.stores.recipes.all.map(recipe => ({
+        installedRecipes: this.stores.recipes.all.map((recipe) => ({
           id: recipe.id,
           version: recipe.version,
         })),
-        devRecipes: this.stores.recipePreviews.dev.map(recipe => ({
+        devRecipes: this.stores.recipePreviews.dev.map((recipe) => ({
           id: recipe.id,
           version: recipe.version,
         })),
-        services: this.stores.services.all.map(service => ({
+        services: this.stores.services.all.map((service) => ({
           id: service.id,
           recipe: service.recipe.id,
           isAttached: service.isAttached,
@@ -285,11 +303,13 @@ export default class AppStore extends Store {
           isDarkModeEnabled: service.isDarkModeEnabled,
         })),
         messages: this.stores.globalError.messages,
-        workspaces: this.stores.workspaces.workspaces.map(workspace => ({
+        workspaces: this.stores.workspaces.workspaces.map((workspace) => ({
           id: workspace.id,
           services: workspace.services,
         })),
-        windowSettings: readJsonSync(path.join(app.getPath('userData'), 'window-state.json')),
+        windowSettings: readJsonSync(
+          path.join(app.getPath('userData'), 'window-state.json'),
+        ),
         settings,
         features: this.stores.features.features,
         user: this.stores.user.data.id,
@@ -299,10 +319,7 @@ export default class AppStore extends Store {
 
   // Actions
   @action _notify({
-    title,
-    options,
-    notificationId,
-    serviceId = null,
+    title, options, notificationId, serviceId = null,
   }) {
     if (this.stores.settings.all.app.isAppMuted) return;
 
@@ -339,15 +356,15 @@ export default class AppStore extends Store {
     };
   }
 
-  @action _setBadge({
-    unreadDirectMessageCount,
-    unreadIndirectMessageCount,
-  }) {
+  @action _setBadge({ unreadDirectMessageCount, unreadIndirectMessageCount }) {
     let indicator = unreadDirectMessageCount;
 
     if (indicator === 0 && unreadIndirectMessageCount !== 0) {
       indicator = '•';
-    } else if (unreadDirectMessageCount === 0 && unreadIndirectMessageCount === 0) {
+    } else if (
+      unreadDirectMessageCount === 0
+      && unreadIndirectMessageCount === 0
+    ) {
       indicator = 0;
     } else {
       indicator = parseInt(indicator, 10);
@@ -358,9 +375,7 @@ export default class AppStore extends Store {
     });
   }
 
-  @action _launchOnStartup({
-    enable,
-  }) {
+  @action _launchOnStartup({ enable }) {
     this.autoLaunchOnStart = enable;
 
     try {
@@ -376,9 +391,7 @@ export default class AppStore extends Store {
     }
   }
 
-  @action _openExternalUrl({
-    url,
-  }) {
+  @action _openExternalUrl({ url }) {
     const parsedUrl = new URL(url);
     debug('open external url', parsedUrl);
 
@@ -414,10 +427,7 @@ export default class AppStore extends Store {
     this.healthCheckRequest.execute();
   }
 
-  @action _muteApp({
-    isMuted,
-    overrideSystemMute = true,
-  }) {
+  @action _muteApp({ isMuted, overrideSystemMute = true }) {
     this.isSystemMuteOverridden = overrideSystemMute;
     this.actions.settings.update({
       type: 'app',
@@ -437,16 +447,24 @@ export default class AppStore extends Store {
     this.isClearingAllCache = true;
     const clearAppCache = this.clearAppCacheRequest.execute();
     const allServiceIds = await getServiceIdsFromPartitions();
-    const allOrphanedServiceIds = allServiceIds.filter(id => !this.stores.services.all.find(s => id.replace('service-', '') === s.id));
+    const allOrphanedServiceIds = allServiceIds.filter(
+      (id) => !this.stores.services.all.find(
+        (s) => id.replace('service-', '') === s.id,
+      ),
+    );
 
     try {
-      await Promise.all(allOrphanedServiceIds.map(id => removeServicePartitionDirectory(id)));
+      await Promise.all(
+        allOrphanedServiceIds.map((id) => removeServicePartitionDirectory(id)),
+      );
     } catch (ex) {
       console.log('Error while deleting service partition directory - ', ex);
     }
-    await Promise.all(this.stores.services.all.map(s => this.actions.service.clearCache({
-      serviceId: s.id,
-    })));
+    await Promise.all(
+      this.stores.services.all.map((s) => this.actions.service.clearCache({
+        serviceId: s.id,
+      })),
+    );
 
     await clearAppCache._promise;
 
@@ -476,7 +494,11 @@ export default class AppStore extends Store {
       locale = this.stores.user.data.locale;
     }
 
-    if (locale && Object.prototype.hasOwnProperty.call(locales, locale) && locale !== this.locale) {
+    if (
+      locale
+      && Object.prototype.hasOwnProperty.call(locales, locale)
+      && locale !== this.locale
+    ) {
       this.locale = locale;
     } else if (!locale) {
       this.locale = this._getDefaultLocale();
@@ -553,7 +575,10 @@ export default class AppStore extends Store {
     const dnd = await ipcRenderer.invoke('get-dnd');
     debug('Do not disturb mode is', dnd);
     // ipcRenderer.on('autoUpdate', (event, data) => {
-    if (dnd !== this.stores.settings.all.app.isAppMuted && !this.isSystemMuteOverridden) {
+    if (
+      dnd !== this.stores.settings.all.app.isAppMuted
+      && !this.isSystemMuteOverridden
+    ) {
       this.actions.app.muteApp({
         isMuted: dnd,
         overrideSystemMute: false,
diff --git a/src/stores/NewsStore.js b/src/stores/NewsStore.js
index 86e092592..66a17cb29 100644
--- a/src/stores/NewsStore.js
+++ b/src/stores/NewsStore.js
@@ -38,7 +38,7 @@ export default class NewsStore extends Store {
 
     this.latestNewsRequest.invalidate().patch((result) => {
       // TODO: check if we can use mobx.array remove
-      remove(result, n => n.id === newsId);
+      remove(result, (n) => n.id === newsId);
     });
   }
 
diff --git a/src/stores/RecipePreviewsStore.js b/src/stores/RecipePreviewsStore.js
index 989e1124a..10c170e81 100644
--- a/src/stores/RecipePreviewsStore.js
+++ b/src/stores/RecipePreviewsStore.js
@@ -31,7 +31,7 @@ export default class RecipePreviewsStore extends Store {
   }
 
   @computed get dev() {
-    return this.stores.recipes.all.filter(r => r.local);
+    return this.stores.recipes.all.filter((r) => r.local);
   }
 
   // Actions
diff --git a/src/stores/RecipesStore.js b/src/stores/RecipesStore.js
index b49fb72d9..c7c4c1deb 100644
--- a/src/stores/RecipesStore.js
+++ b/src/stores/RecipesStore.js
@@ -54,11 +54,11 @@ export default class RecipesStore extends Store {
   }
 
   @computed get recipeIdForServices() {
-    return this.stores.services.all.map(s => s.recipe.id);
+    return this.stores.services.all.map((s) => s.recipe.id);
   }
 
   one(id) {
-    return this.all.find(recipe => recipe.id === id);
+    return this.all.find((recipe) => recipe.id === id);
   }
 
   isInstalled(id) {
@@ -78,7 +78,7 @@ export default class RecipesStore extends Store {
     const recipes = {};
 
     // Hackfix, reference this.all to fetch services
-    debug(`Check Recipe updates for ${this.all.map(recipe => recipe.id)}`);
+    debug(`Check Recipe updates for ${this.all.map((recipe) => recipe.id)}`);
 
     recipeIds.forEach((r) => {
       const recipe = this.one(r);
@@ -98,7 +98,7 @@ export default class RecipesStore extends Store {
       const version = recipes[recipe];
 
       // Find recipe in local recipe repository
-      const localRecipe = allJson.find(r => r.id === recipe);
+      const localRecipe = allJson.find((r) => r.id === recipe);
 
       if (localRecipe && semver.lt(version, localRecipe.version)) {
         localUpdates.push(recipe);
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index fa31dc292..fefcb5080 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -216,7 +216,7 @@ export default class ServicesStore extends Store {
   }
 
   @computed get enabled() {
-    return this.all.filter(service => service.isEnabled);
+    return this.all.filter((service) => service.isEnabled);
   }
 
   @computed get allDisplayed() {
@@ -229,7 +229,7 @@ export default class ServicesStore extends Store {
     const { showDisabledServices } = this.stores.settings.all.app;
     const { keepAllWorkspacesLoaded } = this.stores.workspaces.settings;
     const services = this.allServicesRequest.execute().result || [];
-    const filteredServices = showDisabledServices ? services : services.filter(service => service.isEnabled);
+    const filteredServices = showDisabledServices ? services : services.filter((service) => service.isEnabled);
 
     let displayedServices;
     if (keepAllWorkspacesLoaded) {
@@ -244,8 +244,8 @@ export default class ServicesStore extends Store {
         // Check if workspace needs to be kept loaded
         if (workspace.services.includes(KEEP_WS_LOADED_USID)) {
           // Get services for workspace
-          const serviceIDs = workspace.services.filter(i => i !== KEEP_WS_LOADED_USID);
-          const wsServices = filteredServices.filter(service => serviceIDs.includes(service.id));
+          const serviceIDs = workspace.services.filter((i) => i !== KEEP_WS_LOADED_USID);
+          const wsServices = filteredServices.filter((service) => serviceIDs.includes(service.id));
 
           displayedServices = [
             ...displayedServices,
@@ -262,11 +262,11 @@ export default class ServicesStore extends Store {
   }
 
   @computed get filtered() {
-    return this.all.filter(service => service.name.toLowerCase().includes(this.filterNeedle.toLowerCase()));
+    return this.all.filter((service) => service.name.toLowerCase().includes(this.filterNeedle.toLowerCase()));
   }
 
   @computed get active() {
-    return this.all.find(service => service.isActive);
+    return this.all.find((service) => service.isActive);
   }
 
   @computed get activeSettings() {
@@ -284,7 +284,7 @@ export default class ServicesStore extends Store {
   }
 
   @computed get isTodosServiceAdded() {
-    return this.allDisplayed.find(service => service.isTodosService && service.isEnabled) || false;
+    return this.allDisplayed.find((service) => service.isTodosService && service.isEnabled) || false;
   }
 
   @computed get isTodosServiceActive() {
@@ -292,7 +292,7 @@ export default class ServicesStore extends Store {
   }
 
   one(id) {
-    return this.all.find(service => service.id === id);
+    return this.all.find((service) => service.id === id);
   }
 
   async _showAddServiceInterface({ recipeId }) {
@@ -400,7 +400,7 @@ export default class ServicesStore extends Store {
         newData.iconUrl = data.customIconUrl;
       }
 
-      Object.assign(result.find(c => c.id === serviceId), newData);
+      Object.assign(result.find((c) => c.id === serviceId), newData);
     });
 
     await request._promise;
@@ -434,7 +434,7 @@ export default class ServicesStore extends Store {
     }
 
     this.allServicesRequest.patch((result) => {
-      remove(result, c => c.id === serviceId);
+      remove(result, (c) => c.id === serviceId);
     });
 
     await request._promise;
@@ -493,7 +493,7 @@ export default class ServicesStore extends Store {
     }
 
     // Update list of last used services
-    this.lastUsedServices = this.lastUsedServices.filter(id => id !== serviceId);
+    this.lastUsedServices = this.lastUsedServices.filter((id) => id !== serviceId);
     this.lastUsedServices.unshift(serviceId);
 
     this._focusActiveService();
@@ -505,7 +505,7 @@ export default class ServicesStore extends Store {
   }
 
   @action _setActiveNext() {
-    const nextIndex = this._wrapIndex(this.allDisplayed.findIndex(service => service.isActive), 1, this.allDisplayed.length);
+    const nextIndex = this._wrapIndex(this.allDisplayed.findIndex((service) => service.isActive), 1, this.allDisplayed.length);
 
     // TODO: simplify this;
     this.all.forEach((s, index) => {
@@ -515,7 +515,7 @@ export default class ServicesStore extends Store {
   }
 
   @action _setActivePrev() {
-    const prevIndex = this._wrapIndex(this.allDisplayed.findIndex(service => service.isActive), -1, this.allDisplayed.length);
+    const prevIndex = this._wrapIndex(this.allDisplayed.findIndex((service) => service.isActive), -1, this.allDisplayed.length);
 
     // TODO: simplify this;
     this.all.forEach((s, index) => {
@@ -689,7 +689,7 @@ export default class ServicesStore extends Store {
   }
 
   @action _sendIPCMessageToAllServices({ channel, args }) {
-    this.all.forEach(s => this.actions.service.sendIPCMessage({
+    this.all.forEach((s) => this.actions.service.sendIPCMessage({
       serviceId: s.id,
       channel,
       args,
@@ -740,7 +740,7 @@ export default class ServicesStore extends Store {
   }
 
   @action _reloadAll() {
-    this.enabled.forEach(s => this._reload({
+    this.enabled.forEach((s) => this._reload({
       serviceId: s.id,
     }));
   }
@@ -859,7 +859,7 @@ export default class ServicesStore extends Store {
     };
 
     if (!serviceId) {
-      this.allDisplayed.forEach(service => resetTimer(service));
+      this.allDisplayed.forEach((service) => resetTimer(service));
     } else {
       const service = this.one(serviceId);
       if (service) {
@@ -893,7 +893,7 @@ export default class ServicesStore extends Store {
   _mapActiveServiceToServiceModelReaction() {
     const { activeService } = this.stores.settings.all.service;
     if (this.allDisplayed.length) {
-      this.allDisplayed.map(service => Object.assign(service, {
+      this.allDisplayed.map((service) => Object.assign(service, {
         isActive: activeService ? activeService === service.id : this.allDisplayed[0].id === service.id,
       }));
     }
@@ -904,13 +904,13 @@ export default class ServicesStore extends Store {
     const { showMessageBadgesEvenWhenMuted } = this.stores.ui;
 
     const unreadDirectMessageCount = this.allDisplayed
-      .filter(s => (showMessageBadgeWhenMuted || s.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && s.isBadgeEnabled)
-      .map(s => s.unreadDirectMessageCount)
+      .filter((s) => (showMessageBadgeWhenMuted || s.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && s.isBadgeEnabled)
+      .map((s) => s.unreadDirectMessageCount)
       .reduce((a, b) => a + b, 0);
 
     const unreadIndirectMessageCount = this.allDisplayed
-      .filter(s => (showMessageBadgeWhenMuted && showMessageBadgesEvenWhenMuted) && (s.isBadgeEnabled && s.isIndirectMessageBadgeEnabled))
-      .map(s => s.unreadIndirectMessageCount)
+      .filter((s) => (showMessageBadgeWhenMuted && showMessageBadgesEvenWhenMuted) && (s.isBadgeEnabled && s.isIndirectMessageBadgeEnabled))
+      .map((s) => s.unreadIndirectMessageCount)
       .reduce((a, b) => a + b, 0);
 
     // We can't just block this earlier, otherwise the mobx reaction won't be aware of the vars to watch in some cases
@@ -975,7 +975,7 @@ export default class ServicesStore extends Store {
       return;
     }
 
-    if (this.allDisplayed.findIndex(service => service.isActive) === -1 && this.allDisplayed.length !== 0) {
+    if (this.allDisplayed.findIndex((service) => service.isActive) === -1 && this.allDisplayed.length !== 0) {
       debug('No active service found, setting active service to index 0');
 
       this._setActive({ serviceId: this.allDisplayed[0].id });
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
index 0ca61046a..adcd776c1 100644
--- a/src/stores/UIStore.js
+++ b/src/stores/UIStore.js
@@ -71,7 +71,7 @@ export default class UIStore extends Store {
 
   @computed get theme() {
     const themeId = (this.isDarkThemeActive || this.stores.settings.app.darkMode) ? 'dark' : 'default';
-    const accentColor = this.stores.settings.app.accentColor;
+    const { accentColor } = this.stores.settings.app;
     return theme(themeId, accentColor);
   }
 
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 8a525c2ef..2e009893a 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -205,7 +205,7 @@ export default class UserStore extends Store {
   }
 
   @action async _invite({ invites }) {
-    const data = invites.filter(invite => invite.email !== '');
+    const data = invites.filter((invite) => invite.email !== '');
 
     const response = await this.inviteRequest.execute(data)._promise;
 
@@ -250,7 +250,7 @@ export default class UserStore extends Store {
     this.isImportLegacyServicesExecuting = true;
 
     // Reduces recipe duplicates
-    const recipes = services.filter((obj, pos, arr) => arr.map(mapObj => mapObj.recipe.id).indexOf(obj.recipe.id) === pos).map(s => s.recipe.id);
+    const recipes = services.filter((obj, pos, arr) => arr.map((mapObj) => mapObj.recipe.id).indexOf(obj.recipe.id) === pos).map((s) => s.recipe.id);
 
     // Install recipes
     for (const recipe of recipes) { // eslint-disable-line no-unused-vars
diff --git a/src/stores/lib/CachedRequest.js b/src/stores/lib/CachedRequest.js
index 31c7ce241..94f615144 100644
--- a/src/stores/lib/CachedRequest.js
+++ b/src/stores/lib/CachedRequest.js
@@ -92,7 +92,7 @@ export default class CachedRequest extends Request {
   }
 
   removeCacheForCallWith(...args) {
-    remove(this._apiCalls, c => isEqual(c.args, args));
+    remove(this._apiCalls, (c) => isEqual(c.args, args));
   }
 
   _addApiCall(args) {
@@ -102,6 +102,6 @@ export default class CachedRequest extends Request {
   }
 
   _findApiCall(args) {
-    return this._apiCalls.find(c => isEqual(c.args, args));
+    return this._apiCalls.find((c) => isEqual(c.args, args));
   }
 }
diff --git a/src/stores/lib/Reaction.js b/src/stores/lib/Reaction.js
index f8009b7f6..7e1bc685e 100644
--- a/src/stores/lib/Reaction.js
+++ b/src/stores/lib/Reaction.js
@@ -26,6 +26,6 @@ export default class Reaction {
   }
 }
 
-export const createReactions = reactions => (
-  reactions.map(r => new Reaction(r))
+export const createReactions = (reactions) => (
+  reactions.map((r) => new Reaction(r))
 );
diff --git a/src/stores/lib/Request.js b/src/stores/lib/Request.js
index cfc857c2e..32ffe4367 100644
--- a/src/stores/lib/Request.js
+++ b/src/stores/lib/Request.js
@@ -107,7 +107,7 @@ export default class Request {
   }
 
   _triggerHooks() {
-    Request._hooks.forEach(hook => hook(this));
+    Request._hooks.forEach((hook) => hook(this));
   }
 
   reset = () => {
diff --git a/src/stores/lib/Store.js b/src/stores/lib/Store.js
index 8d2fb4066..b03a7e725 100644
--- a/src/stores/lib/Store.js
+++ b/src/stores/lib/Store.js
@@ -28,18 +28,18 @@ export default class Store {
   }
 
   registerReactions(reactions) {
-    reactions.forEach(reaction => this._reactions.push(new Reaction(reaction)));
+    reactions.forEach((reaction) => this._reactions.push(new Reaction(reaction)));
   }
 
   setup() {}
 
   initialize() {
     this.setup();
-    this._reactions.forEach(reaction => reaction.start());
+    this._reactions.forEach((reaction) => reaction.start());
   }
 
   teardown() {
-    this._reactions.forEach(reaction => reaction.stop());
+    this._reactions.forEach((reaction) => reaction.stop());
   }
 
   resetStatus() {
diff --git a/src/webview/contextMenuBuilder.js b/src/webview/contextMenuBuilder.js
index 63eed2ebe..2598dbf03 100644
--- a/src/webview/contextMenuBuilder.js
+++ b/src/webview/contextMenuBuilder.js
@@ -61,7 +61,7 @@ module.exports = class ContextMenuBuilder {
    * @param  {function} processMenu If passed, this method will be passed the menu to change
    *                                it prior to display. Signature: (menu, info) => menu
    */
-  constructor(webContents, debugMode = false, processMenu = m => m) {
+  constructor(webContents, debugMode = false, processMenu = (m) => m) {
     this.debugMode = debugMode;
     this.processMenu = processMenu;
     this.menu = null;
@@ -320,7 +320,7 @@ module.exports = class ContextMenuBuilder {
       label: this.stringTable.copyImage(),
       click: () => {
         const result = this.convertImageToBase64(menuInfo.srcURL,
-          dataURL => clipboard.writeImage(nativeImage.createFromDataURL(dataURL)));
+          (dataURL) => clipboard.writeImage(nativeImage.createFromDataURL(dataURL)));
 
         this._sendNotificationOnClipboardEvent(menuInfo.clipboardNotifications, () => `Image copied from URL: ${menuInfo.srcURL}`);
         return result;
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index 3bb9352f6..305e79882 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -75,7 +75,7 @@ class RecipeWebview {
       debug('Script not found', file);
       return null;
     })).then(async (scripts) => {
-      const scriptsFound = scripts.filter(script => script !== null);
+      const scriptsFound = scripts.filter((script) => script !== null);
       if (scriptsFound.length > 0) {
         debug('Inject scripts to main world', scriptsFound);
         ipcRenderer.sendToHost('inject-js-unsafe', ...scriptsFound);
diff --git a/src/webview/notifications.js b/src/webview/notifications.js
index 39a515143..205a3220c 100644
--- a/src/webview/notifications.js
+++ b/src/webview/notifications.js
@@ -4,7 +4,7 @@ import uuidV1 from 'uuid/v1';
 const debug = require('debug')('Ferdi:Notifications');
 
 export class NotificationsHandler {
-  onNotify = data => data;
+  onNotify = (data) => data;
 
   displayNotification(title, options) {
     return new Promise((resolve) => {
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index 58a04b728..b59319495 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -9,7 +9,7 @@ const [defaultLocale] = webContents.session.getSpellCheckerLanguages();
 debug('Spellchecker default locale is', defaultLocale);
 
 export function getSpellcheckerLocaleByFuzzyIdentifier(identifier) {
-  const locales = Object.keys(SPELLCHECKER_LOCALES).filter(key => key.toLocaleLowerCase() === identifier.toLowerCase() || key.split('-')[0] === identifier.toLowerCase());
+  const locales = Object.keys(SPELLCHECKER_LOCALES).filter((key) => key.toLocaleLowerCase() === identifier.toLowerCase() || key.split('-')[0] === identifier.toLowerCase());
 
   if (locales.length >= 1) {
     return locales[0];
diff --git a/tsconfig.settings.json b/tsconfig.settings.json
index 35f2cd80e..8fb9ab041 100644
--- a/tsconfig.settings.json
+++ b/tsconfig.settings.json
@@ -12,6 +12,9 @@
     "experimentalDecorators": true,
     "composite": true,
     "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "importHelpers": true,
+    "removeComments": true,
     "typeRoots": ["packages/typings/types", "node_modules/@types"],
     "paths": {
       "@types/*": ["packages/typings/types/*.d.ts"],
diff --git a/tslint.json b/tslint.json
deleted file mode 100644
index 975089ab0..000000000
--- a/tslint.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "extends": ["tslint-config-airbnb"],
-  "rules": {
-    "import-name": false,
-    "variable-name": false,
-    "class-name": false,
-    "prefer-array-literal": false,
-    "semicolon": [true, "always"],
-    "max-line-length": false,
-    "ordered-imports": true
-  }
-}
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx
index 41930e805..ecc7020c1 100644
--- a/uidev/src/app.tsx
+++ b/uidev/src/app.tsx
@@ -5,6 +5,7 @@ import DevTools from 'mobx-react-devtools';
 import React from 'react';
 import injectSheet from 'react-jss';
 
+import { theme, ThemeType } from '@meetfranz/theme';
 import { WithTheme } from './withTheme';
 
 import './stories/badge.stories';
@@ -20,7 +21,6 @@ import './stories/toggle.stories';
 
 import { store } from './stores';
 
-import { theme, ThemeType } from '@meetfranz/theme';
 const defaultTheme = theme(ThemeType.default);
 
 const styles = {
diff --git a/uidev/src/stores/stories.ts b/uidev/src/stores/stories.ts
index 6a98c9fd3..12bacdd59 100644
--- a/uidev/src/stores/stories.ts
+++ b/uidev/src/stores/stories.ts
@@ -1,5 +1,3 @@
-import { store } from './index';
-
 export type StorySectionName = string;
 export type StoryName = string;
 export type StoryComponent = () => JSX.Element;
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx
index 5c1c9246d..5ca657238 100644
--- a/uidev/src/stories/button.stories.tsx
+++ b/uidev/src/stories/button.stories.tsx
@@ -27,20 +27,18 @@ const styles = {
   },
 };
 
-const createStore = (args?: any) => {
-  return observable(Object.assign({}, defaultProps, args));
-};
+const createStore = (args?: any) => observable({ ...defaultProps, ...args });
 
 const WithStoreButton = observer(({ store }: { store: any }) => (
   <>
     <Button
-      {...Object.assign({}, defaultProps, store)}
+      {...({ ...defaultProps, ...store })}
       onClick={!store.onClick ? () => {
         store.busy = !store.busy;
 
         window.setTimeout(() => {
           store.busy = !store.busy;
-        },                1000);
+        }, 1000);
       } : store.onClick}
     />
   </>
@@ -53,58 +51,69 @@ storiesOf('Button')
   .add('Secondary', () => (
     <WithStoreButton store={createStore({
       buttonType: 'secondary',
-    })} />
+    })}
+    />
   ))
   .add('Success', () => (
     <WithStoreButton store={createStore({
       buttonType: 'success',
-    })} />
+    })}
+    />
   ))
   .add('Warning', () => (
     <WithStoreButton store={createStore({
       buttonType: 'warning',
-    })} />
+    })}
+    />
   ))
   .add('Danger', () => (
     <WithStoreButton store={createStore({
       buttonType: 'danger',
-    })} />
+    })}
+    />
   ))
   .add('Inverted', () => (
     <WithStoreButton store={createStore({
       buttonType: 'inverted',
-    })} />
+    })}
+    />
   ))
   .add('Full width', () => (
     <WithStoreButton store={createStore({
       stretch: true,
-    })} />
+    })}
+    />
   ))
   .add('Disabled', () => (
     <WithStoreButton store={createStore({
       disabled: true,
-    })} />
+    })}
+    />
   ))
   .add('With loader', () => (
     <WithStoreButton store={createStore({
       busy: true,
-    })} />
+    })}
+    />
   ))
   .add('With icon', () => (
     <WithStoreButton store={createStore({
       icon: mdiInformation,
-    })} />
+    })}
+    />
   ))
   .add('As link', () => (
     <WithStoreButton store={createStore({
       href: 'https://meetfranz.com',
-    })} />
+    })}
+    />
   ))
   .add('As link (target=_blank)', () => (
     <WithStoreButton store={createStore({
       href: 'https://meetfranz.com',
       target: '_blank',
-    })} />
+    })}
+    />
   ))
   .add('As link (with onClick)', () => (
     <WithStoreButton store={createStore({
@@ -113,26 +122,27 @@ storiesOf('Button')
         e.preventDefault();
         alert('Click event');
       },
-    })}/>
+    })}
+    />
   ))
   .add('Long multi-line button', () => (
     <WithStoreButton store={createStore({
       label: 'But there is something that I must say to my people, who stand on the warm threshold which leads into the palace of justice: In the process of gaining our rightful place, we must not be guilty of wrongful deeds. Let us not seek to satisfy our thirst for freedom by drinking from the cup of bitterness and hatred. We must forever conduct our struggle on the high plane of dignity and discipline. We must not allow our creative protest to degenerate into physical violence. Again and again, we must rise to the majestic heights of meeting physical force with soul force.',
-    })} />
+    })}
+    />
   ))
   .add('Button with Input', injectSheet(styles)(observer(({ classes }: { classes: Classes }) => (
-      <div className={classes.combinedElements}>
-        <Input showLabel={false} className={classes.input} noMargin />
-        <WithStoreButton store={createStore({})} />
-      </div>
-    )),
-  ))
+    <div className={classes.combinedElements}>
+      <Input showLabel={false} className={classes.input} noMargin />
+      <WithStoreButton store={createStore({})} />
+    </div>
+    ))))
   .add('Icon Button with Input', injectSheet(styles)(observer(({ classes }: { classes: Classes }) => (
-      <div className={classes.combinedElements}>
-        <Input showLabel={false} className={classes.input} noMargin />
-        <WithStoreButton store={createStore({
+    <div className={classes.combinedElements}>
+      <Input showLabel={false} className={classes.input} noMargin />
+      <WithStoreButton store={createStore({
           icon: mdiInformation,
-        })} />
-      </div>
-    )),
-  ));
+        })}
+      />
+    </div>
+    ))));
diff --git a/uidev/src/stories/headline.stories.tsx b/uidev/src/stories/headline.stories.tsx
index f42771cae..320ac832f 100644
--- a/uidev/src/stories/headline.stories.tsx
+++ b/uidev/src/stories/headline.stories.tsx
@@ -1,7 +1,4 @@
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
 import React from 'react';
-import uuid from 'uuid/v4';
 
 import { H1, H2, H3, H4 } from '@meetfranz/ui';
 import { storiesOf } from '../stores/stories';
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx
index b0416b844..fe4aaab06 100644
--- a/uidev/src/stories/infobox.stories.tsx
+++ b/uidev/src/stories/infobox.stories.tsx
@@ -14,14 +14,11 @@ interface IStoreArgs {
   className?: string;
 }
 
-const createStore = (args?: IStoreArgs) => {
-  return observable(Object.assign({
-    type: 'primary',
+const createStore = (args?: IStoreArgs) => observable({ type: 'primary',
     ctaOnClick: () => {
       alert('on click handler');
     },
-  },                              args));
-};
+...args });
 
 const WithStoreInfobox = observer(({ store, children }: { store: any, children: string | React.ReactNode }) => (
   <>
@@ -130,7 +127,8 @@ storiesOf('Infobox')
   .add('With className', () => (
     <WithStoreInfobox store={createStore({
       className: 'franz-is-awesome',
-    })}>
+    })}
+    >
       Welcome to the world of tomorrow
     </WithStoreInfobox>
   ));
diff --git a/uidev/src/stories/input.stories.tsx b/uidev/src/stories/input.stories.tsx
index af5e791d0..889539266 100644
--- a/uidev/src/stories/input.stories.tsx
+++ b/uidev/src/stories/input.stories.tsx
@@ -10,7 +10,7 @@ const defaultProps = () => {
     label: 'Label',
     id: `test-${id}`,
     name: `test-${id}`,
-    onChange: (e: React.ChangeEvent<HTMLInputElement>)  => console.log('changed event', e),
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e),
   };
 };
 
@@ -21,7 +21,7 @@ const defaultPasswordProps = () => {
     id: `test-${id}`,
     name: `test-${id}`,
     type: 'password',
-    onChange: (e: React.ChangeEvent<HTMLInputElement>)  => console.log('changed event', e),
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e),
   };
 };
 
diff --git a/uidev/src/stories/loader.stories.tsx b/uidev/src/stories/loader.stories.tsx
index 84e813c04..50eb7b9e1 100644
--- a/uidev/src/stories/loader.stories.tsx
+++ b/uidev/src/stories/loader.stories.tsx
@@ -1,7 +1,4 @@
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
 import React from 'react';
-import uuid from 'uuid/v4';
 
 import { Loader } from '@meetfranz/ui';
 import { storiesOf } from '../stores/stories';
diff --git a/uidev/src/stories/select.stories.tsx b/uidev/src/stories/select.stories.tsx
index 81f7f08a6..51ec6ed88 100644
--- a/uidev/src/stories/select.stories.tsx
+++ b/uidev/src/stories/select.stories.tsx
@@ -282,7 +282,7 @@ const defaultProps = () => {
     },
     actionText: 'Select country',
     // defaultValue: 'AT',
-    onChange: (e: React.ChangeEvent<HTMLInputElement>)  => console.log('changed event', e),
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e),
   };
 };
 
diff --git a/uidev/src/stories/textarea.stories.tsx b/uidev/src/stories/textarea.stories.tsx
index c2dd74e24..1ab21820b 100644
--- a/uidev/src/stories/textarea.stories.tsx
+++ b/uidev/src/stories/textarea.stories.tsx
@@ -11,7 +11,7 @@ const defaultProps = () => {
     id: `test-${id}`,
     name: `test-${id}`,
     rows: 5,
-    onChange: (e: React.ChangeEvent<HTMLInputElement>)  => console.log('changed event', e),
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e),
   };
 };
 
diff --git a/uidev/src/stories/toggle.stories.tsx b/uidev/src/stories/toggle.stories.tsx
index 091342496..af6b282bc 100644
--- a/uidev/src/stories/toggle.stories.tsx
+++ b/uidev/src/stories/toggle.stories.tsx
@@ -16,17 +16,14 @@ interface IStoreArgs {
   error?: string;
 }
 
-const createStore = (args?: IStoreArgs) => {
-  return observable(Object.assign({
-    id: `element-${uuid()}`,
+const createStore = (args?: IStoreArgs) => observable({ id: `element-${uuid()}`,
     name: 'toggle',
     label: 'Label',
     value: true,
     checked: false,
     disabled: false,
     error: '',
-  },                              args));
-};
+...args });
 
 const WithStoreToggle = observer(({ store }: { store: any }) => (
   <>
@@ -50,21 +47,25 @@ storiesOf('Toggle')
   .add('Checked', () => (
     <WithStoreToggle store={createStore({
       checked: true,
-    })} />
+    })}
+    />
   ))
   .add('Disabled', () => (
     <WithStoreToggle store={createStore({
       checked: true,
       disabled: true,
-    })} />
+    })}
+    />
   ))
   .add('Long label', () => (
     <WithStoreToggle store={createStore({
       label: 'Hello world, this is an insanely long label for this toggle. We need to make sure that it will be displayed correctly.',
-    })} />
+    })}
+    />
   ))
   .add('With error', () => (
     <WithStoreToggle store={createStore({
       error: 'Something went wrong',
-    })} />
+    })}
+    />
   ));
diff --git a/uidev/src/withTheme/index.tsx b/uidev/src/withTheme/index.tsx
index 17a1074d3..4ef649367 100644
--- a/uidev/src/withTheme/index.tsx
+++ b/uidev/src/withTheme/index.tsx
@@ -37,14 +37,12 @@ const Container = injectSheet(styles)(({ name, classes, story }: { name: string,
   </article>
 ));
 
-export const WithTheme = ({ children }: {children: React.ReactChild}) => {
-  return (
-      <>
-        {themes.map((theme, key) => (
-          <ThemeProvider key={key} theme={theme.variables}>
-            <Container story={children} name={theme.name} />
-          </ThemeProvider>
+export const WithTheme = ({ children }: { children: React.ReactChild }) => (
+  <>
+    {themes.map((theme, key) => (
+      <ThemeProvider key={key} theme={theme.variables}>
+        <Container story={children} name={theme.name} />
+      </ThemeProvider>
         ))}
-      </>
+  </>
   );
-};
diff --git a/uidev/tslint.json b/uidev/tslint.json
deleted file mode 100644
index ec365f164..000000000
--- a/uidev/tslint.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../tslint.json"
-}