refactor: various improvements (#1296)

* refactor: various improvements

- enable no-use-before-define eslint rule
- shuffle code to conform to no-use-before-define eslint rule
- remove btoa dependency which is deprecated and replace with Buffer.from(string).toString('base64')
- convert some any types into useful ones
- add type annotations where possible
- remove unused @types/expect.js
- install @types/semver and ts-node which were missing
- repair and rewrite add-crowdin-contributors script
- remove export keyword from variables which are never consumed in another file
- remove unity indicator hack where linked issue was closed
- remove module declaration for kebab-case which is unused
- add missing state interface for certain components
- remove default exports for files which already have a named export
- export IRecipePreview so it can be used throughout codebase
- remove unused removeCacheForCallWith method from CachedRequest.ts
- cleanup unused colors and styles inside legacy theme

* - improve ColorPickerInput
- fix invalid DOM nesting with div inside p in EditSettingsForm
- fix progressbarAccentColor color picker not updating input when using slider
- install missing @types/react-color dependency

43 files changed, 254 insertions, 268 deletions

diff --git a/.eslintrc.js b/.eslintrc.js
index db66bbc4a..ef8af48c8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -47,6 +47,9 @@ module.exports = {
       parser: '@typescript-eslint/parser',
       plugins: [],
       rules: {
+        // eslint
+        'no-use-before-define': 2,
+
         // @typescript-eslint
         // This is necessary as workaround for window.ferdium vs window['ferdium']
         '@typescript-eslint/dot-notation': 0,
diff --git a/package.json b/package.json
index 45628a99d..e3e4a4f44 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,6 @@
     "@sentry/electron": "4.1.2",
     "@superwf/mobx-react-router": "7.4.0",
     "auto-launch": "5.0.6",
-    "btoa": "1.2.1",
     "classnames": "2.3.2",
     "color": "4.2.3",
     "csstype": "3.1.2",
@@ -137,7 +136,6 @@
     "@formatjs/cli": "6.1.3",
     "@jest/types": "29.6.1",
     "@types/color": "3.0.3",
-    "@types/expect.js": "0.3.29",
     "@types/fs-extra": "11.0.1",
     "@types/jest": "29.5.3",
     "@types/lodash": "4.14.195",
@@ -145,10 +143,12 @@
     "@types/node": "18.15.3",
     "@types/prop-types": "15.7.5",
     "@types/react": "18.2.12",
+    "@types/react-color": "3.0.6",
     "@types/react-dom": "18.2.5",
     "@types/react-loader": "2.4.5",
     "@types/react-transition-group": "4.4.6",
     "@types/route-parser": "0.1.4",
+    "@types/semver": "7.5.0",
     "@types/tar": "6.1.5",
     "@types/uuid": "9.0.2",
     "@types/validator": "13.7.17",
@@ -184,6 +184,7 @@
     "rimraf": "5.0.1",
     "simple-git": "3.19.1",
     "tiny-glob": "0.2.9",
+    "ts-node": "10.9.1",
     "typescript": "5.0.4",
     "wait-on": "7.0.1"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c96e3e65..17b636a08 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,9 +68,6 @@ dependencies:
   auto-launch:
     specifier: 5.0.6
     version: 5.0.6
-  btoa:
-    specifier: 1.2.1
-    version: 1.2.1
   classnames:
     specifier: 2.3.2
     version: 2.3.2
@@ -276,9 +273,6 @@ devDependencies:
   '@types/color':
     specifier: 3.0.3
     version: 3.0.3
-  '@types/expect.js':
-    specifier: 0.3.29
-    version: 0.3.29
   '@types/fs-extra':
     specifier: 11.0.1
     version: 11.0.1
@@ -300,6 +294,9 @@ devDependencies:
   '@types/react':
     specifier: 18.2.12
     version: 18.2.12
+  '@types/react-color':
+    specifier: 3.0.6
+    version: 3.0.6
   '@types/react-dom':
     specifier: 18.2.5
     version: 18.2.5
@@ -312,6 +309,9 @@ devDependencies:
   '@types/route-parser':
     specifier: 0.1.4
     version: 0.1.4
+  '@types/semver':
+    specifier: 7.5.0
+    version: 7.5.0
   '@types/tar':
     specifier: 6.1.5
     version: 6.1.5
@@ -417,6 +417,9 @@ devDependencies:
   tiny-glob:
     specifier: 0.2.9
     version: 0.2.9
+  ts-node:
+    specifier: 10.9.1
+    version: 10.9.1(@types/node@18.15.3)(typescript@5.0.4)
   typescript:
     specifier: 5.0.4
     version: 5.0.4
@@ -2421,10 +2424,6 @@ packages:
       '@types/ms': 0.7.31
     dev: true
 
-  /@types/expect.js@0.3.29:
-    resolution: {integrity: sha512-zLlr7lW52PKk7GAMJc2v8zaVJUgkrOJBa+6/aGbzq/TYsrqrNT719kkf/98lrgCiV+VO/uwJM0E328NGtcB5yQ==}
-    dev: true
-
   /@types/fs-extra@11.0.1:
     resolution: {integrity: sha512-MxObHvNl4A69ofaTRU8DFqvgzzv8s9yRtaPPm5gud9HDNvpB3GPQFvNuTWAI59B9huVGV5jXYJwbCsmBsOGYWA==}
     dependencies:
@@ -2531,6 +2530,13 @@ packages:
   /@types/prop-types@15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
 
+  /@types/react-color@3.0.6:
+    resolution: {integrity: sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w==}
+    dependencies:
+      '@types/react': 18.2.12
+      '@types/reactcss': 1.2.6
+    dev: true
+
   /@types/react-dom@18.2.5:
     resolution: {integrity: sha512-sRQsOS/sCLnpQhR4DSKGTtWFE3FZjpQa86KPVbhUqdYMRZ9FEFcfAytKhR/vUG2rH1oFbOOej6cuD7MFSobDRQ==}
     dependencies:
@@ -2556,6 +2562,12 @@ packages:
       '@types/scheduler': 0.16.2
       csstype: 3.1.2
 
+  /@types/reactcss@1.2.6:
+    resolution: {integrity: sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==}
+    dependencies:
+      '@types/react': 18.2.12
+    dev: true
+
   /@types/responselike@1.0.0:
     resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
     dependencies:
@@ -2568,13 +2580,8 @@ packages:
   /@types/scheduler@0.16.2:
     resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
 
-  /@types/semver@7.3.13:
-    resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==}
-    dev: false
-
   /@types/semver@7.5.0:
     resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
-    dev: true
 
   /@types/stack-trace@0.0.29:
     resolution: {integrity: sha512-TgfOX+mGY/NyNxJLIbDWrO9DjGoVSW9+aB8H2yy1fy32jsvxijhmyJI9fDFgvz3YP4lvJaq9DzdR/M1bOgVc9g==}
@@ -3771,12 +3778,6 @@ packages:
     engines: {node: '>=0.6.19'}
     dev: false
 
-  /btoa@1.2.1:
-    resolution: {integrity: sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==}
-    engines: {node: '>= 0.4.0'}
-    hasBin: true
-    dev: false
-
   /buffer-alloc-unsafe@1.1.0:
     resolution: {integrity: sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==}
     dev: false
@@ -5106,7 +5107,7 @@ packages:
   /electron-updater@5.3.0:
     resolution: {integrity: sha512-iKEr7yQBcvnQUPnSDYGSWC9t0eF2YbZWeYYYZzYxdl+HiRejXFENjYMnYjoOm2zxyD6Cr2JTHZhp9pqxiXuCOw==}
     dependencies:
-      '@types/semver': 7.3.13
+      '@types/semver': 7.5.0
       builder-util-runtime: 9.1.1
       fs-extra: 10.1.0
       js-yaml: 4.1.0
diff --git a/scripts/add-crowdin-contributors.ts b/scripts/add-crowdin-contributors.ts
index 242d338ce..7a0d0e769 100644
--- a/scripts/add-crowdin-contributors.ts
+++ b/scripts/add-crowdin-contributors.ts
@@ -53,7 +53,7 @@ console.log(JSON.stringify(members));
  * 5. Regenerate the README table using the CLI ('all-contributors generate')
  * Please check if the generated data is ok and no data is lost.
 */
-const list: any[] = [
+const list: { name: string; login: string; avatar_url: string }[] = [
   {
     name: 'vantezzen_',
     login: 'vantezzen_',
@@ -1064,21 +1064,27 @@ const list: any[] = [
   },
 ];
 
-const infoPath = path.join(__dirname, '..', '.all-contributorsrc');
-const info = fs.readJSONSync(infoPath);
-for (const user of list) {
-  if (user.login) {
-    info.contributors = allContributors.addContributorWithDetails({
-      ...user,
-      contributions: ['translation'],
-      profile: `https://crowdin.com/profile/${user.login}`,
-      options: {
-        contributors: info.contributors,
-      },
-    });
-  }
-}
+const allContributorsFile = path.join(__dirname, '..', '.all-contributorsrc');
+const allContributorsJSON = fs.readJSONSync(allContributorsFile);
 
-fs.writeJSONSync(infoPath, info, {
-  spaces: 2,
-});
+// eslint-disable-next-line unicorn/prefer-top-level-await
+(async () => {
+  allContributorsJSON.contributors = await Promise.all(
+    list
+      .filter(user => user.login)
+      .map(user => {
+        return allContributors.addContributorWithDetails({
+          ...user,
+          contributions: ['translation'],
+          profile: `https://crowdin.com/profile/${user.login}`,
+          options: {
+            contributors: allContributorsJSON.contributors,
+          },
+        });
+      }),
+  );
+
+  fs.writeJSONSync(allContributorsFile, allContributorsJSON, {
+    spaces: 2,
+  });
+})();
diff --git a/src/@types/kebab-case.d.ts b/src/@types/kebab-case.d.ts
deleted file mode 100644
index 712405ac0..000000000
--- a/src/@types/kebab-case.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module 'kebab-case';
diff --git a/src/@types/mobx-form.types.ts b/src/@types/mobx-form.types.ts
index 07234a47a..aa274b9db 100644
--- a/src/@types/mobx-form.types.ts
+++ b/src/@types/mobx-form.types.ts
@@ -1,17 +1,17 @@
-import { File } from 'electron-dl';
 import { ChangeEventHandler, FocusEventHandler } from 'react';
 import { GlobalError } from './ferdium-components.types';
 
-export interface FormFieldOptions {
-  value?: string;
-  label?: string;
+interface SelectOptions {
   disabled?: boolean;
+  label?: string;
+  value?: string;
 }
 
-export interface FormFields {
-  fields: {
-    [key: string]: Field;
-  };
+interface Listeners {
+  onChange?: ChangeEventHandler<HTMLInputElement | HTMLSelectElement>;
+  onBlur?: FocusEventHandler<HTMLElement>;
+  onFocus?: FocusEventHandler<HTMLElement>;
+  onDrop?: (file: File) => void;
 }
 
 export interface Field extends Listeners {
@@ -29,16 +29,8 @@ export interface Field extends Listeners {
   set?: (value: any) => void;
   [key: string]: any;
 }
-
-export interface SelectOptions {
-  disabled?: boolean;
-  label?: string;
-  value?: string;
-}
-
-export interface Listeners {
-  onChange?: ChangeEventHandler<HTMLInputElement | HTMLSelectElement>;
-  onBlur?: FocusEventHandler<HTMLElement>;
-  onFocus?: FocusEventHandler<HTMLElement>;
-  onDrop?: (file: File) => void;
+export interface FormFields {
+  fields: {
+    [key: string]: Field;
+  };
 }
diff --git a/src/@types/stores.types.ts b/src/@types/stores.types.ts
index ff8f127ed..dc5da563f 100644
--- a/src/@types/stores.types.ts
+++ b/src/@types/stores.types.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-use-before-define */
 import Workspace from '../features/workspaces/models/Workspace';
 import Recipe from '../models/Recipe';
 import Service from '../models/Service';
@@ -201,7 +202,7 @@ interface RouterStore {
   replace: () => void;
 }
 
-export interface ServicesStore extends TypedStore {
+interface ServicesStore extends TypedStore {
   clearCacheRequest: () => void;
   createServiceRequest: CachedRequest;
   deleteServiceRequest: () => void;
@@ -227,7 +228,7 @@ interface ISettings {
   [key: string]: any;
 }
 
-export interface SettingsStore extends TypedStore {
+interface SettingsStore extends TypedStore {
   update: (value: any) => void;
   remove: (value: any) => void;
   fileSystemSettingsTypes: any[];
@@ -288,7 +289,7 @@ interface UIStore extends TypedStore {
   theme: () => void;
 }
 
-export interface UserStore extends TypedStore {
+interface UserStore extends TypedStore {
   BASE_ROUTE: '/auth';
   CHANGE_SERVER_ROUTE: '/auth/server';
   IMPORT_ROUTE: '/auth/signup/import';
@@ -338,7 +339,7 @@ export interface UserStore extends TypedStore {
   team: () => void;
 }
 
-export interface WorkspacesStore extends TypedStore {
+interface WorkspacesStore extends TypedStore {
   activeWorkspace: () => void;
   delete: ({ workspace }) => void;
   update: ({ workspace }) => void;
diff --git a/src/actions/index.ts b/src/actions/index.ts
index 983afa64b..5297a7a7b 100644
--- a/src/actions/index.ts
+++ b/src/actions/index.ts
@@ -10,7 +10,7 @@ import user from './user';
 import settings from './settings';
 import requests from './requests';
 import workspaces from '../features/workspaces/actions';
-import todos from '../features/todos/actions';
+import { todoActions } from '../features/todos/actions';
 
 const actions = {
   service,
@@ -26,5 +26,5 @@ const actions = {
 export default Object.assign(
   defineActions(actions, PropTypes.checkPropTypes),
   { workspaces },
-  { todos },
+  { todos: todoActions },
 );
diff --git a/src/api/server/ServerApi.ts b/src/api/server/ServerApi.ts
index 860b7b76e..de8e0a85c 100644
--- a/src/api/server/ServerApi.ts
+++ b/src/api/server/ServerApi.ts
@@ -15,8 +15,8 @@ import {
 } from 'fs-extra';
 
 import ServiceModel from '../../models/Service';
-import RecipePreviewModel from '../../models/RecipePreview';
-import RecipeModel from '../../models/Recipe';
+import RecipePreviewModel, { IRecipePreview } from '../../models/RecipePreview';
+import RecipeModel, { IRecipe } from '../../models/Recipe';
 import UserModel from '../../models/User';
 
 import sleep from '../../helpers/async-helpers';
@@ -44,9 +44,9 @@ const debug = require('../../preload-safe-debug')('Ferdium:ServerApi');
 module.paths.unshift(getDevRecipeDirectory(), getRecipeDirectory());
 
 export default class ServerApi {
-  recipePreviews: any[] = [];
+  recipePreviews: IRecipePreview[] = [];
 
-  recipes: any[] = [];
+  recipes: IRecipe[] = [];
 
   // User
   async login(email: string, passwordHash: string) {
@@ -55,7 +55,9 @@ export default class ServerApi {
       {
         method: 'POST',
         headers: {
-          Authorization: `Basic ${window.btoa(`${email}:${passwordHash}`)}`,
+          Authorization: `Basic ${Buffer.from(
+            `${email}:${passwordHash}`,
+          ).toString('base64')}`,
         },
       },
       false,
@@ -346,6 +348,7 @@ export default class ServerApi {
       })
       .filter(recipe => recipe.id);
 
+    // @ts-expect-error Type 'boolean' is not assignable to type 'ConcatArray<IRecipe>'.
     // eslint-disable-next-line unicorn/prefer-spread
     this.recipes = this.recipes.concat(this._getDevRecipes());
 
@@ -515,9 +518,8 @@ export default class ServerApi {
   }
 
   async _prepareServiceModel(service: { recipeId: string }) {
-    let recipe: undefined;
     try {
-      recipe = this.recipes.find(r => r.id === service.recipeId);
+      const recipe = this.recipes.find(r => r.id === service.recipeId);
 
       if (!recipe) {
         console.warn(`Recipe ${service.recipeId} not loaded`);
@@ -531,11 +533,10 @@ export default class ServerApi {
     }
   }
 
-  async _bulkRecipeCheck(unfilteredRecipes: any[]) {
+  async _bulkRecipeCheck(unfilteredRecipes: string[]) {
     // Filter recipe duplicates as we don't need to download 3 Slack recipes
     const recipes = unfilteredRecipes.filter(
-      (elem: any, pos: number, arr: string | any[]) =>
-        arr.indexOf(elem) === pos,
+      (elem: string, pos: number, arr: string[]) => arr.indexOf(elem) === pos,
     );
 
     return Promise.all(
@@ -565,7 +566,7 @@ export default class ServerApi {
     ).catch(error => console.error("Can't load recipe", error));
   }
 
-  _mapRecipePreviewModel(recipes: any[]) {
+  _mapRecipePreviewModel(recipes: IRecipePreview[]) {
     return recipes
       .map(recipe => {
         try {
@@ -575,7 +576,7 @@ export default class ServerApi {
           return null;
         }
       })
-      .filter(recipe => recipe !== null);
+      .filter(Boolean);
   }
 
   _getDevRecipes() {
@@ -589,15 +590,14 @@ export default class ServerApi {
 
       const recipes = paths
         .map(id => {
-          let Recipe;
           try {
             // eslint-disable-next-line import/no-dynamic-require
-            Recipe = require(id)(RecipeModel);
+            const Recipe = require(id)(RecipeModel);
+
             return new Recipe(loadRecipeConfig(id));
           } catch (error) {
             console.error(error);
           }
-
           return false;
         })
         .filter(recipe => recipe.id)
diff --git a/src/components/auth/Login.tsx b/src/components/auth/Login.tsx
index eaa04256c..cf7abe654 100644
--- a/src/components/auth/Login.tsx
+++ b/src/components/auth/Login.tsx
@@ -99,7 +99,7 @@ class Login extends Component<IProps> {
   submit(e: FormEvent<HTMLFormElement>): void {
     e.preventDefault();
     this.form.submit({
-      onSuccess: form => {
+      onSuccess: (form: Form) => {
         this.props.onSubmit(form.values());
       },
       onError: noop,
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index ceb9cfff9..6fd911a24 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -80,6 +80,7 @@ interface IProps extends WrappedComponentProps {
   showServiceNameSetting: boolean;
   showMessageBadgesEvenWhenMuted: boolean;
   isAppMuted: boolean;
+  // eslint-disable-next-line react/no-unused-prop-types
   isMenuCollapsed: boolean;
   isWorkspaceDrawerOpen: boolean;
   isTodosServiceActive: boolean;
@@ -90,6 +91,7 @@ interface IProps extends WrappedComponentProps {
   toggleCollapseMenu: () => void;
   toggleWorkspaceDrawer: () => void;
   openSettings: (args: { path: string }) => void;
+  // eslint-disable-next-line react/no-unused-prop-types
   closeSettings: () => void;
   setActive: (args: { serviceId: string }) => void;
   reorder: (args: { oldIndex: number; newIndex: number }) => void;
diff --git a/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
index ff7c45bb1..9b17e551c 100644
--- a/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
+++ b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { IntlShape, defineMessages, injectIntl } from 'react-intl';
 import Markdown from 'markdown-to-jsx';
 import { ferdiumVersion } from '../../../environment-remote';
 import {
@@ -26,14 +26,14 @@ const messages = defineMessages({
 });
 
 interface IProps {
-  intl: any;
+  intl: IntlShape;
 }
 
-class ReleaseNotesDashboard extends Component<IProps> {
-  state = {
-    data: '',
-  };
+interface IState {
+  data: string;
+}
 
+class ReleaseNotesDashboard extends Component<IProps, IState> {
   constructor(props) {
     super(props);
 
diff --git a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
index bc38aa603..4a6fe54f4 100644
--- a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
+++ b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
@@ -19,6 +19,7 @@ const messages = defineMessages({
 
 interface IProps extends WrappedComponentProps {
   actions?: Actions;
+  // eslint-disable-next-line react/no-unused-prop-types
   children?: React.ReactNode;
 }
 
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx
index 11ae63737..099a27ebe 100644
--- a/src/components/settings/settings/EditSettingsForm.tsx
+++ b/src/components/settings/settings/EditSettingsForm.tsx
@@ -333,7 +333,7 @@ class EditSettingsForm extends Component<IProps, IState> {
     }
 
     this.props.form.submit({
-      onSuccess: form => {
+      onSuccess: (form: Form) => {
         const values = form.values();
         const { accentColor } = values;
         if (accentColor.trim().length === 0) {
@@ -386,8 +386,9 @@ class EditSettingsForm extends Component<IProps, IState> {
     const { lockingFeatureEnabled, scheduledDNDEnabled, reloadAfterResume } =
       window['ferdium'].stores.settings.all.app;
 
-    let cacheSize;
-    let notCleared;
+    let cacheSize: string;
+    let notCleared: boolean;
+
     if (this.state.activeSetttingsTab === 'advanced') {
       const cacheSizeBytes = getCacheSize();
       debug('cacheSizeBytes:', cacheSizeBytes);
@@ -740,38 +741,35 @@ class EditSettingsForm extends Component<IProps, IState> {
                     defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor,
                   })}
                 </p>
-                <p>
-                  {intl.formatMessage(messages.overallTheme)}
-                  <div className="settings__settings-group__apply-color">
-                    <ColorPickerInput
-                      {...form.$('accentColor').bind()}
-                      onColorChange={this.submit.bind(this)}
-                      className="color-picker-input"
-                    />
-                  </div>
-                </p>
-                <p>
-                  {intl.formatMessage(messages.progressbarTheme)}
-                  <div className="settings__settings-group__apply-color">
-                    <ColorPickerInput
-                      {...form.$('progressbarAccentColor').bind()}
-                      onColorChange={this.submit.bind(this)}
-                      className="color-picker-input"
-                    />
-                  </div>
-                </p>
-                <p>
-                  <div className="settings__settings-group__apply-color">
-                    <Button
-                      buttonType="secondary"
-                      className="settings__settings-group__apply-color__button"
-                      label="Apply color"
-                      onClick={e => {
-                        this.submit(e);
-                      }}
-                    />
-                  </div>
-                </p>
+                <p>{intl.formatMessage(messages.overallTheme)}</p>
+                <div className="settings__settings-group__apply-color">
+                  <ColorPickerInput
+                    {...form.$('accentColor').bind()}
+                    name="accentColor"
+                    onColorChange={e => this.submit(e)}
+                    className="color-picker-input"
+                  />
+                </div>
+                <p>{intl.formatMessage(messages.progressbarTheme)}</p>
+                <div className="settings__settings-group__apply-color">
+                  <ColorPickerInput
+                    {...form.$('progressbarAccentColor').bind()}
+                    name="progressbarAccentColor"
+                    onColorChange={e => this.submit(e)}
+                    className="color-picker-input"
+                  />
+                </div>
+
+                <div className="settings__settings-group__apply-color">
+                  <Button
+                    buttonType="secondary"
+                    className="settings__settings-group__apply-color__button"
+                    label="Apply color"
+                    onClick={e => {
+                      this.submit(e);
+                    }}
+                  />
+                </div>
                 <HrSections />
 
                 <H2 className="settings__section_header">
diff --git a/src/components/ui/badge/ProBadge.tsx b/src/components/ui/badge/ProBadge.tsx
index 62c45b77c..a5947d3a8 100644
--- a/src/components/ui/badge/ProBadge.tsx
+++ b/src/components/ui/badge/ProBadge.tsx
@@ -7,13 +7,6 @@ import { Theme } from '../../../themes';
 import Icon from '../icon';
 import Badge from './index';
 
-interface IProps extends WithStylesProps<typeof styles> {
-  badgeClasses?: string;
-  iconClasses?: string;
-  inverted?: boolean;
-  className?: string;
-}
-
 const styles = (theme: Theme) => ({
   badge: {
     height: 'auto',
@@ -32,6 +25,13 @@ const styles = (theme: Theme) => ({
   },
 });
 
+interface IProps extends WithStylesProps<typeof styles> {
+  badgeClasses?: string;
+  iconClasses?: string;
+  inverted?: boolean;
+  className?: string;
+}
+
 class ProBadgeComponent extends Component<IProps> {
   render() {
     const { classes, badgeClasses, iconClasses, inverted, className } =
diff --git a/src/components/ui/badge/index.tsx b/src/components/ui/badge/index.tsx
index 33e2f5d53..44fbf2d4a 100644
--- a/src/components/ui/badge/index.tsx
+++ b/src/components/ui/badge/index.tsx
@@ -4,23 +4,17 @@ import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
 
-interface IProps extends WithStylesProps<typeof styles> {
-  type: string;
-  className?: string;
-  children: ReactNode;
-}
-
 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,
         color: theme.styleTypes[style].contrast,
         border: theme.styleTypes[style].border,
       },
-    });
-  });
+    }),
+  );
 
   return styles;
 };
@@ -44,6 +38,12 @@ const styles = (theme: Theme) => ({
   ...badgeStyles(theme),
 });
 
+interface IProps extends WithStylesProps<typeof styles> {
+  type: string;
+  className?: string;
+  children: ReactNode;
+}
+
 class BadgeComponent extends Component<IProps> {
   public static defaultProps = {
     type: 'primary',
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index 1b648b1d5..3c31ca952 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-use-before-define */
 import Icon from '@mdi/react';
 import classnames from 'classnames';
 import { Property } from 'csstype';
@@ -135,7 +136,7 @@ interface IProps extends IFormField, WithStylesProps<typeof styles> {
   label?: string;
   disabled?: boolean;
   id?: string;
-  type?: 'button' | 'reset' | 'submit' | undefined;
+  type?: 'button' | 'reset' | 'submit';
   onClick?: MouseEventHandler<HTMLInputElement>;
   buttonType?: ButtonType;
   loaded?: boolean;
diff --git a/src/components/ui/colorPickerInput/index.tsx b/src/components/ui/colorPickerInput/index.tsx
index 2367175bd..39fd0220a 100644
--- a/src/components/ui/colorPickerInput/index.tsx
+++ b/src/components/ui/colorPickerInput/index.tsx
@@ -1,21 +1,18 @@
 import {
+  ChangeEvent,
   Component,
   createRef,
   InputHTMLAttributes,
-  ReactElement,
   RefObject,
 } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import { SliderPicker } from 'react-color';
+import { Color, ColorResult, SliderPicker } from 'react-color';
 import { noop } from 'lodash';
 import { FormFields } from '../../../@types/mobx-form.types';
 
 interface IProps extends InputHTMLAttributes<HTMLInputElement>, FormFields {
-  className?: string;
-  focus?: boolean;
-  onColorChange?: () => void;
-  error: string;
+  onColorChange: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
 @observer
@@ -23,20 +20,13 @@ class ColorPickerInput extends Component<IProps> {
   private inputElement: RefObject<HTMLInputElement> =
     createRef<HTMLInputElement>();
 
-  componentDidMount(): void {
-    const { focus = false } = this.props;
-    if (focus && this.inputElement?.current) {
-      this.inputElement.current.focus();
-    }
+  onChange(color: ColorResult, event: ChangeEvent<HTMLInputElement>): void {
+    const { onColorChange, onChange = noop } = this.props;
+    onColorChange(event);
+    onChange(color.hex);
   }
 
-  onChange({ hex }: { hex: string }): void {
-    const { onColorChange = noop, onChange = noop } = this.props;
-    onColorChange();
-    onChange(hex);
-  }
-
-  render(): ReactElement {
+  render() {
     const {
       id,
       name,
@@ -45,7 +35,6 @@ class ColorPickerInput extends Component<IProps> {
       disabled = false,
       className = null,
       type = 'text',
-      error = '',
       onChange = noop,
     } = this.props;
 
@@ -53,20 +42,14 @@ class ColorPickerInput extends Component<IProps> {
       <div
         className={classnames({
           'franz-form__field': true,
-          'has-error': error,
           [`${className}`]: className,
         })}
         ref={this.inputElement}
       >
         <SliderPicker
-          color={value}
-          onChange={this.onChange.bind(this)}
-          id={`${id}-SliderPicker`}
-          type={type}
+          color={value as Color}
+          onChange={(color, event) => this.onChange(color, event)}
           className="franz-form__input"
-          name={name}
-          placeholder={placeholder}
-          disabled={disabled}
         />
         <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker">
           <input
diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx
index 424190a6a..8e40fa896 100644
--- a/src/components/ui/headline/index.tsx
+++ b/src/components/ui/headline/index.tsx
@@ -11,14 +11,6 @@ import injectStyle, { WithStylesProps } from 'react-jss';
 import { Theme } from '../../../themes';
 import { Omit } from '../typings/generic';
 
-interface IProps extends WithStylesProps<typeof styles> {
-  children: ReactNode;
-  level?: number;
-  className?: string;
-  id?: string;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-}
-
 const styles = (theme: Theme) => ({
   headline: {
     fontWeight: 'lighter',
@@ -45,6 +37,14 @@ const styles = (theme: Theme) => ({
   },
 });
 
+interface IProps extends WithStylesProps<typeof styles> {
+  children: ReactNode;
+  level?: number;
+  className?: string;
+  id?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
 class HeadlineComponent extends Component<IProps> {
   render(): ReactElement {
     const { classes, level, className, children, id, onClick } = this.props;
diff --git a/src/components/ui/icon/index.tsx b/src/components/ui/icon/index.tsx
index 5b432a194..04a00d0e0 100644
--- a/src/components/ui/icon/index.tsx
+++ b/src/components/ui/icon/index.tsx
@@ -5,18 +5,18 @@ import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
 
-interface IProps extends WithStylesProps<typeof styles> {
-  icon: string;
-  size?: number;
-  className?: string;
-}
-
 const styles = (theme: Theme) => ({
   icon: {
     fill: theme.colorText,
   },
 });
 
+interface IProps extends WithStylesProps<typeof styles> {
+  icon: string;
+  size?: number;
+  className?: string;
+}
+
 class IconComponent extends Component<IProps> {
   render(): ReactElement {
     const { classes, icon, size = 1, className } = this.props;
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx
index 28ec2ff90..a1c4f9d21 100644
--- a/src/components/ui/infobox/index.tsx
+++ b/src/components/ui/infobox/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-use-before-define */
 import { mdiClose } from '@mdi/js';
 import classnames from 'classnames';
 import { noop } from 'lodash';
diff --git a/src/components/ui/loader/index.tsx b/src/components/ui/loader/index.tsx
index 361fc477b..957899bdc 100644
--- a/src/components/ui/loader/index.tsx
+++ b/src/components/ui/loader/index.tsx
@@ -2,13 +2,9 @@ import classnames from 'classnames';
 import { Component } from 'react';
 import injectStyle, { WithStylesProps } from 'react-jss';
 import ReactLoader from 'react-loader';
+import { Theme } from '../../../themes';
 
-interface IProps extends WithStylesProps<typeof styles> {
-  className?: string;
-  color?: string;
-}
-
-const styles = theme => ({
+const styles = (theme: Theme) => ({
   container: {
     position: 'relative',
     height: 60,
@@ -17,6 +13,11 @@ const styles = theme => ({
   color: theme.colorText,
 });
 
+interface IProps extends WithStylesProps<typeof styles> {
+  className?: string;
+  color?: string;
+}
+
 class LoaderComponent extends Component<IProps> {
   render() {
     const { classes, className, color } = this.props;
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx
index 48f68943b..275d28bf6 100644
--- a/src/components/ui/toggle/index.tsx
+++ b/src/components/ui/toggle/index.tsx
@@ -9,13 +9,6 @@ import Label from '../label';
 import { IFormField } from '../typings/generic';
 import Wrapper from '../wrapper';
 
-interface IProps
-  extends InputHTMLAttributes<HTMLInputElement>,
-    IFormField,
-    WithStylesProps<typeof styles> {
-  className?: string;
-}
-
 const buttonTransition: string = window?.matchMedia(
   '(prefers-reduced-motion: no-preference)',
 )
@@ -62,6 +55,13 @@ const styles = (theme: Theme) => ({
   },
 });
 
+interface IProps
+  extends InputHTMLAttributes<HTMLInputElement>,
+    IFormField,
+    WithStylesProps<typeof styles> {
+  className?: string;
+}
+
 class Toggle extends Component<IProps> {
   render(): ReactElement {
     const {
diff --git a/src/components/ui/typings/generic.ts b/src/components/ui/typings/generic.ts
index 3aec0bc40..bf45e4ce0 100644
--- a/src/components/ui/typings/generic.ts
+++ b/src/components/ui/typings/generic.ts
@@ -6,5 +6,5 @@ export interface IFormField {
   noMargin?: boolean;
 }
 
-export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
diff --git a/src/components/ui/wrapper/index.tsx b/src/components/ui/wrapper/index.tsx
index d733d050e..450d09fd1 100644
--- a/src/components/ui/wrapper/index.tsx
+++ b/src/components/ui/wrapper/index.tsx
@@ -2,10 +2,12 @@ import classnames from 'classnames';
 import { Component, ReactNode } from 'react';
 import injectStyle, { WithStylesProps } from 'react-jss';
 
+// eslint-disable-next-line no-use-before-define
 interface IProps extends WithStylesProps<typeof styles> {
   children: ReactNode;
   className?: string;
   identifier: string;
+  // eslint-disable-next-line react/no-unused-prop-types
   noMargin?: boolean;
 }
 
diff --git a/src/components/util/ErrorBoundary/index.tsx b/src/components/util/ErrorBoundary/index.tsx
index bef211ef9..66f860835 100644
--- a/src/components/util/ErrorBoundary/index.tsx
+++ b/src/components/util/ErrorBoundary/index.tsx
@@ -23,10 +23,18 @@ interface ErrorBoundaryProps extends WithStylesProps<typeof styles> {
   children?: React.ReactNode;
 }
 
-class ErrorBoundary extends Component<ErrorBoundaryProps> {
-  state = {
-    hasError: false,
-  };
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hasError: false,
+    };
+  }
 
   componentDidCatch(): void {
     this.setState({ hasError: true });
diff --git a/src/config.ts b/src/config.ts
index 336085685..21a7462b9 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -92,9 +92,9 @@ export const NAVIGATION_BAR_BEHAVIOURS = {
   never: 'Never show navigation bar',
 };
 
-export const SEARCH_ENGINE_STARTPAGE = 'startPage';
-export const SEARCH_ENGINE_GOOGLE = 'google';
-export const SEARCH_ENGINE_DDG = 'duckDuckGo';
+const SEARCH_ENGINE_STARTPAGE = 'startPage';
+const SEARCH_ENGINE_GOOGLE = 'google';
+const SEARCH_ENGINE_DDG = 'duckDuckGo';
 export const SEARCH_ENGINE_NAMES = {
   [SEARCH_ENGINE_STARTPAGE]: 'Startpage',
   [SEARCH_ENGINE_GOOGLE]: 'Google',
diff --git a/src/containers/auth/AuthReleaseNotesScreen.tsx b/src/containers/auth/AuthReleaseNotesScreen.tsx
index c717529fa..c9d2286e1 100644
--- a/src/containers/auth/AuthReleaseNotesScreen.tsx
+++ b/src/containers/auth/AuthReleaseNotesScreen.tsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 
-import { defineMessages, injectIntl } from 'react-intl';
+import { IntlShape, defineMessages, injectIntl } from 'react-intl';
 import Markdown from 'markdown-to-jsx';
 import { mdiArrowLeftCircle } from '@mdi/js';
 import { openExternalUrl } from '../../helpers/url-helpers';
@@ -20,14 +20,14 @@ const messages = defineMessages({
 });
 
 interface IProps {
-  intl: any;
+  intl: IntlShape;
 }
 
-class AuthReleaseNotesScreen extends Component<IProps> {
-  state = {
-    data: '',
-  };
+interface IState {
+  data: string;
+}
 
+class AuthReleaseNotesScreen extends Component<IProps, IState> {
   constructor(props) {
     super(props);
 
diff --git a/src/containers/settings/EditSettingsScreen.tsx b/src/containers/settings/EditSettingsScreen.tsx
index 7cdff7fde..b9732ead0 100644
--- a/src/containers/settings/EditSettingsScreen.tsx
+++ b/src/containers/settings/EditSettingsScreen.tsx
@@ -319,12 +319,23 @@ const messages = defineMessages({
 
 interface EditSettingsScreenProps extends StoresProps, WrappedComponentProps {}
 
+interface EditSettingsScreenState {
+  lockedPassword: string;
+}
+
 @inject('stores', 'actions')
 @observer
-class EditSettingsScreen extends Component<EditSettingsScreenProps> {
-  state = {
-    lockedPassword: '',
-  };
+class EditSettingsScreen extends Component<
+  EditSettingsScreenProps,
+  EditSettingsScreenState
+> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      lockedPassword: '',
+    };
+  }
 
   onSubmit(settingsData) {
     const { todos, workspaces } = this.props.stores;
diff --git a/src/containers/settings/EditUserScreen.tsx b/src/containers/settings/EditUserScreen.tsx
index 10c308524..62df170fc 100644
--- a/src/containers/settings/EditUserScreen.tsx
+++ b/src/containers/settings/EditUserScreen.tsx
@@ -1,6 +1,6 @@
 import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { IntlShape, defineMessages, injectIntl } from 'react-intl';
 
 import { StoresProps } from '../../@types/ferdium-components.types';
 import { FormFields } from '../../@types/mobx-form.types';
@@ -50,7 +50,7 @@ const messages = defineMessages({
 });
 
 interface EditUserScreenProps extends StoresProps {
-  intl: any;
+  intl: IntlShape;
 }
 
 class EditUserScreen extends Component<EditUserScreenProps> {
diff --git a/src/features/communityRecipes/store.ts b/src/features/communityRecipes/store.ts
index d3b3318fa..1c21908e2 100644
--- a/src/features/communityRecipes/store.ts
+++ b/src/features/communityRecipes/store.ts
@@ -37,5 +37,3 @@ export class CommunityRecipesStore extends FeatureStore {
     );
   }
 }
-
-export default CommunityRecipesStore;
diff --git a/src/features/todos/actions.ts b/src/features/todos/actions.ts
index 31b14d40b..5273cc858 100644
--- a/src/features/todos/actions.ts
+++ b/src/features/todos/actions.ts
@@ -44,5 +44,3 @@ export const todoActions = createActionsFromDefinitions<TodoActionsType>(
   },
   PropTypes.checkPropTypes,
 );
-
-export default todoActions;
diff --git a/src/features/workspaces/actions.ts b/src/features/workspaces/actions.ts
index 5f3fefec4..cfe4f9e8e 100644
--- a/src/features/workspaces/actions.ts
+++ b/src/features/workspaces/actions.ts
@@ -3,7 +3,8 @@ import Workspace from './models/Workspace';
 import { createActionsFromDefinitions } from '../../actions/lib/actions';
 
 type WorkspaceArg = { workspace: Workspace };
-export interface WorkspaceActions {
+
+interface WorkspaceActions {
   openWorkspaceSettings: () => void;
   toggleWorkspaceDrawer: () => void;
   deactivate: () => void;
diff --git a/src/i18n/languages.ts b/src/i18n/languages.ts
index 6a4101bc0..209848b37 100644
--- a/src/i18n/languages.ts
+++ b/src/i18n/languages.ts
@@ -145,5 +145,3 @@ export const SPELLCHECKER_LOCALES = {
   uk: 'Українська (Ukrainian)',
   vi: 'Tiếng Việt',
 };
-
-export default APP_LOCALES;
diff --git a/src/index.ts b/src/index.ts
index 0487d692c..1c616b499 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -156,16 +156,6 @@ if (gotTheLock) {
   app.quit();
 }
 
-// Fix Unity indicator issue
-// https://github.com/electron/electron/issues/9046
-if (
-  isLinux &&
-  process.env.XDG_CURRENT_DESKTOP &&
-  ['Pantheon', 'Unity:Unity7'].includes(process.env.XDG_CURRENT_DESKTOP)
-) {
-  process.env.XDG_CURRENT_DESKTOP = 'Unity';
-}
-
 // Disable GPU acceleration
 if (
   !retrieveSettingValue(
@@ -674,8 +664,11 @@ ipcMain.handle('get-desktop-capturer-sources', () =>
 );
 
 ipcMain.on('window.toolbar-double-clicked', () => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-  mainWindow?.isMaximized() ? mainWindow.unmaximize() : mainWindow?.maximize();
+  if (mainWindow?.isMaximized()) {
+    mainWindow.unmaximize();
+  } else {
+    mainWindow?.maximize();
+  }
 });
 
 // Quit when all windows are closed.
diff --git a/src/internal-server/app/Controllers/Http/UserController.js b/src/internal-server/app/Controllers/Http/UserController.js
index a9c67a1b2..43d925119 100644
--- a/src/internal-server/app/Controllers/Http/UserController.js
+++ b/src/internal-server/app/Controllers/Http/UserController.js
@@ -4,7 +4,6 @@ const Service = use('App/Models/Service');
 const Workspace = use('App/Models/Workspace');
 const { validateAll } = use('Validator');
 
-const btoa = require('btoa');
 const fetch = require('node-fetch');
 const { v4: uuid } = require('uuid');
 const crypto = require('crypto');
@@ -152,7 +151,9 @@ class UserController {
     // Try to get an authentication token
     let token;
     try {
-      const basicToken = btoa(`${email}:${hashedPassword}`);
+      const basicToken = Buffer.from(`${email}:${hashedPassword}`).toString(
+        'base64',
+      );
 
       const rawResponse = await fetch(`${server}/${API_VERSION}/auth/login`, {
         method: 'POST',
diff --git a/src/models/RecipePreview.ts b/src/models/RecipePreview.ts
index 33b5e1432..8ace01a33 100644
--- a/src/models/RecipePreview.ts
+++ b/src/models/RecipePreview.ts
@@ -1,4 +1,4 @@
-interface IRecipePreview {
+export interface IRecipePreview {
   id: string;
   name: string;
   icon: string;
diff --git a/src/stores/ServicesStore.ts b/src/stores/ServicesStore.ts
index 7f4693cad..82f3b95ce 100644
--- a/src/stores/ServicesStore.ts
+++ b/src/stores/ServicesStore.ts
@@ -594,7 +594,7 @@ export default class ServicesStore extends TypedStore {
       this.stores.router.push(redirect);
     }
 
-    this.allServicesRequest.patch(result => {
+    this.allServicesRequest.patch((result: Service[]) => {
       remove(result, (c: Service) => c.id === serviceId);
     });
 
@@ -606,7 +606,7 @@ export default class ServicesStore extends TypedStore {
     // Get directory for recipe
     const normalDirectory = getRecipeDirectory(recipe);
     const devDirectory = getDevRecipeDirectory(recipe);
-    let directory;
+    let directory: string;
 
     if (pathExistsSync(normalDirectory)) {
       directory = normalDirectory;
@@ -1028,7 +1028,7 @@ export default class ServicesStore extends TypedStore {
     }
 
     this.reorderServicesRequest.execute(services);
-    this.allServicesRequest.patch(data => {
+    this.allServicesRequest.patch((data: Service[]) => {
       for (const s of data) {
         s.order = services[s.id];
       }
@@ -1172,7 +1172,7 @@ export default class ServicesStore extends TypedStore {
     );
 
     // eslint-disable-next-line unicorn/consistent-function-scoping
-    const resetTimer = service => {
+    const resetTimer = (service: Service) => {
       service.lastPollAnswer = Date.now();
       service.lastPoll = Date.now();
     };
@@ -1306,7 +1306,7 @@ export default class ServicesStore extends TypedStore {
     });
   }
 
-  _cleanUpTeamIdAndCustomUrl(recipeId, data): any {
+  _cleanUpTeamIdAndCustomUrl(recipeId: string, data: Service): any {
     const serviceData = data;
     const recipe = this.stores.recipes.one(recipeId);
 
@@ -1318,6 +1318,7 @@ export default class ServicesStore extends TypedStore {
       data.team &&
       data.customUrl
     ) {
+      // @ts-expect-error The operand of a 'delete' operator must be optional.
       delete serviceData.team;
     }
 
@@ -1343,7 +1344,7 @@ export default class ServicesStore extends TypedStore {
   }
 
   // Helper
-  _initializeServiceRecipeInWebview(serviceId) {
+  _initializeServiceRecipeInWebview(serviceId: string) {
     const service = this.one(serviceId);
 
     if (service.webview) {
@@ -1362,7 +1363,7 @@ export default class ServicesStore extends TypedStore {
     }
   }
 
-  _initRecipePolling(serviceId) {
+  _initRecipePolling(serviceId: string) {
     const service = this.one(serviceId);
 
     const delay = ms('2s');
@@ -1385,7 +1386,7 @@ export default class ServicesStore extends TypedStore {
     }
   }
 
-  _wrapIndex(index, delta, size) {
+  _wrapIndex(index: number, delta: number, size: number) {
     return (((index + delta) % size) + size) % size;
   }
 }
diff --git a/src/stores/lib/CachedRequest.ts b/src/stores/lib/CachedRequest.ts
index 25cc365e2..b24336fe6 100644
--- a/src/stores/lib/CachedRequest.ts
+++ b/src/stores/lib/CachedRequest.ts
@@ -1,5 +1,5 @@
 import { action } from 'mobx';
-import { isEqual, remove } from 'lodash';
+import { isEqual } from 'lodash';
 import Request from './Request';
 
 export default class CachedRequest extends Request {
@@ -110,10 +110,6 @@ export default class CachedRequest extends Request {
     });
   }
 
-  removeCacheForCallWith(...args: any): void {
-    remove(this._apiCalls, c => isEqual(c.args, args));
-  }
-
   _addApiCall(args: any) {
     const newCall = { args, result: null };
     this._apiCalls.push(newCall);
diff --git a/src/stores/lib/Request.ts b/src/stores/lib/Request.ts
index f9424ac99..911c5ccfb 100644
--- a/src/stores/lib/Request.ts
+++ b/src/stores/lib/Request.ts
@@ -1,6 +1,7 @@
 import { observable, action, computed, makeObservable } from 'mobx';
 import { isEqual } from 'lodash/fp';
 
+// eslint-disable-next-line no-use-before-define
 type Hook = (request: Request) => void;
 
 export default class Request {
diff --git a/src/themes/default/index.ts b/src/themes/default/index.ts
index 2e18e1307..31c6cbd63 100644
--- a/src/themes/default/index.ts
+++ b/src/themes/default/index.ts
@@ -15,7 +15,7 @@ export default (brandPrimary: string) => {
   const uiFontSize = 14;
   const colorBackground = legacyStyles.themeGrayLighter;
   const colorContentBackground = '#FFFFFF';
-  const colorText = legacyStyles.themeTextColor;
+  const colorText = legacyStyles.themeGrayDark;
   const inputColor = legacyStyles.themeGray;
   const inputBackground = legacyStyles.themeGrayLightest;
   const inputHeight = 40;
diff --git a/src/themes/legacy/index.ts b/src/themes/legacy/index.ts
index ca3216e7f..9caefc698 100644
--- a/src/themes/legacy/index.ts
+++ b/src/themes/legacy/index.ts
@@ -1,10 +1,7 @@
 /* legacy config, injected into sass */
 export { DEFAULT_ACCENT_COLOR as themeBrandPrimary } from '../../config';
 
-export const themeBrandSuccess = '#5cb85c';
 export const themeBrandInfo = '#5bc0de';
-export const themeBrandWarning = '#FF9F00';
-export const themeBrandDanger = '#d9534f';
 
 export const themeGrayDark = '#373a3c';
 export const themeGray = '#55595c';
@@ -15,14 +12,6 @@ export const themeGrayLightest = '#f7f7f9';
 export const themeBorderRadius = '6px';
 export const themeBorderRadiusSmall = '3px';
 
-export const themeSidebarWidth = '68px';
-
-export const themeTextColor = themeGrayDark;
-
-export const themeTransitionTime = '.5s';
-
-export const themeInsetShadow = 'inset 0 2px 5px rgba(0, 0, 0, .03)';
-
 export const darkThemeBlack = '#1A1A1A';
 
 export const darkThemeGrayDarkest = '#1E1E1E';
diff --git a/src/webview/contextMenuBuilder.ts b/src/webview/contextMenuBuilder.ts
index 0d8b659f0..93dfbebb6 100644
--- a/src/webview/contextMenuBuilder.ts
+++ b/src/webview/contextMenuBuilder.ts
@@ -675,7 +675,7 @@ export class ContextMenuBuilder {
       const clickHandler = menuInfo.srcURL.startsWith('blob:')
         ? () => {
             const urlWithoutBlob = menuInfo.srcURL.slice(5);
-            this.convertImageToBase64(menuInfo.srcURL, (dataURL: any) => {
+            this.convertImageToBase64(menuInfo.srcURL, (dataURL: string) => {
               const url = new window.URL(urlWithoutBlob);
               const fileName = url.pathname.slice(1);
               ipcRenderer.send('download-file', {
@@ -834,9 +834,8 @@ export class ContextMenuBuilder {
   convertImageToBase64(
     url: string,
     callback: {
-      (dataURL: any): void;
-      (dataURL: any): void;
-      // eslint-disable-next-line @typescript-eslint/unified-signatures
+      (dataURL: string): void;
+      (dataURL: string): void;
       (arg0: string): void;
     },
     outputFormat: string = 'image/png',