17 files changed, 115 insertions, 118 deletions

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 });