6 files changed, 97 insertions, 121 deletions

diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.tsx
index e00960200..c7c290a57 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.tsx
@@ -1,5 +1,4 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import injectSheet, { withTheme } from 'react-jss';
 import classnames from 'classnames';
 
@@ -19,15 +18,15 @@ const textList = shuffleArray([
   'Fixing bugs',
 ]);
 
+type Props = {
+  classes: typeof styles;
+  theme: any;
+  texts: string[];
+};
+
 @injectSheet(styles)
 @withTheme
-class AppLoader extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    theme: PropTypes.object.isRequired,
-    texts: PropTypes.array,
-  };
-
+class AppLoader extends Component<Props> {
   static defaultProps = {
     texts: textList,
   };
@@ -36,18 +35,20 @@ class AppLoader extends Component {
     step: 0,
   };
 
-  interval = null;
+  interval: NodeJS.Timeout | null = null;
 
   componentDidMount() {
     this.interval = setInterval(() => {
-      this.setState(prevState => ({
+      this.setState((prevState: { step: number }) => ({
         step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1,
       }));
     }, 2500);
   }
 
   componentWillUnmount() {
-    clearInterval(this.interval);
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
   }
 
   render() {
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
deleted file mode 100644
index 67c801d98..000000000
--- a/src/components/ui/Button.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, inject } from 'mobx-react';
-import Loader from 'react-loader';
-import classnames from 'classnames';
-
-@inject('stores')
-@observer
-class Button extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    label: PropTypes.string.isRequired,
-    disabled: PropTypes.bool,
-    onClick: PropTypes.func,
-    type: PropTypes.string,
-    buttonType: PropTypes.string,
-    loaded: PropTypes.bool,
-    htmlForm: PropTypes.string,
-    stores: PropTypes.shape({
-      settings: PropTypes.shape({
-        app: PropTypes.shape({
-          accentColor: PropTypes.string.isRequired,
-        }).isRequired,
-      }).isRequired,
-    }).isRequired,
-  };
-
-  static defaultProps = {
-    className: null,
-    disabled: false,
-    onClick: () => {},
-    type: 'button',
-    buttonType: '',
-    loaded: true,
-    htmlForm: '',
-  };
-
-  element = null;
-
-  render() {
-    const {
-      label,
-      className,
-      disabled,
-      onClick,
-      type,
-      buttonType,
-      loaded,
-      htmlForm,
-    } = this.props;
-
-    const buttonProps = {
-      className: classnames({
-        'franz-form__button': true,
-        [`franz-form__button--${buttonType}`]: buttonType,
-        [`${className}`]: className,
-      }),
-      type,
-    };
-
-    if (disabled) {
-      buttonProps.disabled = true;
-    }
-
-    if (onClick) {
-      buttonProps.onClick = onClick;
-    }
-
-    if (htmlForm) {
-      buttonProps.form = htmlForm;
-    }
-
-    return (
-      // disabling rule as button has type defined in `buttonProps`
-      /* eslint-disable react/button-has-type */
-      <button {...buttonProps}>
-        <Loader
-          loaded={loaded}
-          lines={10}
-          scale={0.4}
-          color={
-            buttonType !== 'secondary'
-              ? '#FFF'
-              : this.props.stores.settings.app.accentColor
-          }
-          component="span"
-        />
-        {label}
-      </button>
-      /* eslint-enable react/button-has-type */
-    );
-  }
-}
-
-export default Button;
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 000000000..aac080fda
--- /dev/null
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,73 @@
+import { Component } from 'react';
+import { observer, inject } from 'mobx-react';
+import Loader from 'react-loader';
+import classnames from 'classnames';
+import { FerdiStores } from '../../stores.types';
+
+type Props = {
+  className: string;
+  label: string;
+  disabled: boolean;
+  onClick: () => void;
+  type: 'button' | 'submit' | 'reset';
+  buttonType: string;
+  loaded: boolean;
+  htmlForm: string;
+  stores: FerdiStores;
+};
+
+@inject('stores')
+@observer
+class Button extends Component<Props> {
+  static defaultProps = {
+    className: null,
+    disabled: false,
+    onClick: () => {},
+    type: 'button',
+    buttonType: '',
+    loaded: true,
+    htmlForm: '',
+  };
+
+  render() {
+    const {
+      label,
+      className,
+      disabled,
+      onClick,
+      type,
+      buttonType,
+      loaded,
+      htmlForm,
+    } = this.props;
+
+    return (
+      <button
+        className={classnames({
+          'franz-form__button': true,
+          [`franz-form__button--${buttonType}`]: buttonType,
+          [`${className}`]: className,
+        })}
+        disabled={disabled}
+        type={type}
+        onClick={onClick}
+        form={htmlForm}
+      >
+        <Loader
+          loaded={loaded}
+          lines={10}
+          scale={0.4}
+          color={
+            buttonType !== 'secondary'
+              ? '#FFF'
+              : this.props.stores.settings.app.accentColor
+          }
+          component="span"
+        />
+        {label}
+      </button>
+    );
+  }
+}
+
+export default Button;
diff --git a/src/components/ui/FullscreenLoader/styles.js b/src/components/ui/FullscreenLoader/styles.ts
index 64d24e4ce..64d24e4ce 100644
--- a/src/components/ui/FullscreenLoader/styles.js
+++ b/src/components/ui/FullscreenLoader/styles.ts
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.tsx
index c4e47748a..0bb0aaa61 100644
--- a/src/components/ui/Modal/index.js
+++ b/src/components/ui/Modal/index.tsx
@@ -1,6 +1,5 @@
-import { Component } from 'react';
+import { Component, ReactChildren } from 'react';
 import ReactModal from 'react-modal';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import injectCSS from 'react-jss';
 import { Icon } from '@meetfranz/ui';
@@ -8,21 +7,19 @@ import { Icon } from '@meetfranz/ui';
 import { mdiClose } from '@mdi/js';
 import styles from './styles';
 
-// ReactModal.setAppElement('#root');
+type Props = {
+  children: ReactChildren;
+  className: string;
+  classes: any;
+  isOpen: boolean;
+  portal: string;
+  close: () => void;
+  shouldCloseOnOverlayClick: boolean;
+  showClose: boolean;
+};
 
 @injectCSS(styles)
-class Modal extends Component {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    className: PropTypes.string,
-    classes: PropTypes.object.isRequired,
-    isOpen: PropTypes.bool.isRequired,
-    portal: PropTypes.string,
-    close: PropTypes.func.isRequired,
-    shouldCloseOnOverlayClick: PropTypes.bool,
-    showClose: PropTypes.bool,
-  };
-
+class Modal extends Component<Props> {
   static defaultProps = {
     className: null,
     portal: 'modal-portal',
diff --git a/src/components/ui/Modal/styles.js b/src/components/ui/Modal/styles.ts
index f32c075ce..f32c075ce 100644
--- a/src/components/ui/Modal/styles.js
+++ b/src/components/ui/Modal/styles.ts