11 files changed, 226 insertions, 244 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx
index 8ccad9e49..0a05cb0e1 100644
--- a/src/components/settings/settings/EditSettingsForm.tsx
+++ b/src/components/settings/settings/EditSettingsForm.tsx
@@ -650,7 +650,7 @@ class EditSettingsForm extends Component<IProps, IState> {
                   <>
                     <Slider
                       type="number"
-                      onChange={e => this.submit(e)}
+                      onSliderChange={e => this.submit(e)}
                       field={form.$('grayscaleServicesDim')}
                     />
                     <Hr />
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.tsx
index 538a9a10c..3ef55fac6 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.tsx
@@ -1,11 +1,9 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
-import injectSheet from 'react-jss';
+import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
-
 import Loader from '../../ui/Loader';
 import Button from '../../ui/button';
 import Infobox from '../../ui/Infobox';
@@ -99,17 +97,17 @@ const styles = {
   },
 };
 
-class TeamDashboard extends Component {
-  static propTypes = {
-    isLoading: PropTypes.bool.isRequired,
-    userInfoRequestFailed: PropTypes.bool.isRequired,
-    retryUserInfoRequest: PropTypes.func.isRequired,
-    openTeamManagement: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
-    server: PropTypes.string.isRequired,
-  };
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  isLoading: boolean;
+  userInfoRequestFailed: boolean;
+  retryUserInfoRequest: () => void;
+  openTeamManagement: () => void;
+  server: string;
+}
 
-  render() {
+@observer
+class TeamDashboard extends Component<IProps> {
+  render(): ReactElement {
     const {
       isLoading,
       userInfoRequestFailed,
@@ -117,68 +115,65 @@ class TeamDashboard extends Component {
       openTeamManagement,
       classes,
       server,
+      intl,
     } = this.props;
-    const { intl } = this.props;
 
-    if (server === LIVE_FRANZ_API) {
-      return (
-        <div className="settings__main">
-          <div className="settings__header">
-            <span className="settings__header-item">
-              {intl.formatMessage(messages.headline)}
-            </span>
-          </div>
-          <div className="settings__body">
-            {isLoading && <Loader />}
+    return server === LIVE_FRANZ_API ? (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            {intl.formatMessage(messages.headline)}
+          </span>
+        </div>
+        <div className="settings__body">
+          {isLoading && <Loader />}
 
-            {!isLoading && userInfoRequestFailed && (
-              <Infobox
-                icon="alert"
-                type="danger"
-                ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
-                ctaLoading={isLoading}
-                ctaOnClick={retryUserInfoRequest}
-              >
-                {intl.formatMessage(messages.userInfoRequestFailed)}
-              </Infobox>
-            )}
+          {!isLoading && userInfoRequestFailed && (
+            <Infobox
+              icon="alert"
+              type="danger"
+              ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
+              ctaLoading={isLoading}
+              ctaOnClick={retryUserInfoRequest}
+            >
+              {intl.formatMessage(messages.userInfoRequestFailed)}
+            </Infobox>
+          )}
 
-            {!userInfoRequestFailed && !isLoading && (
-              <>
-                <H1
-                  className={classnames({
-                    [classes.headline]: true,
-                    [classes.headlineWithSpacing]: true,
-                  })}
-                >
-                  {intl.formatMessage(messages.contentHeadline)}
-                </H1>
-                <div className={classes.container}>
-                  <div className={classes.content}>
-                    <p>{intl.formatMessage(messages.intro)}</p>
-                    <p>{intl.formatMessage(messages.copy)}</p>
-                  </div>
-                  <img
-                    className={classes.image}
-                    src="https://cdn.franzinfra.com/announcements/assets/teams.png"
-                    alt="Ferdium for Teams"
-                  />
-                </div>
-                <div className={classes.buttonContainer}>
-                  <Button
-                    label={intl.formatMessage(messages.manageButton)}
-                    onClick={openTeamManagement}
-                    className={classes.cta}
-                  />
+          {!userInfoRequestFailed && !isLoading && (
+            <>
+              <H1
+                className={classnames({
+                  [classes.headline]: true,
+                  [classes.headlineWithSpacing]: true,
+                })}
+              >
+                {intl.formatMessage(messages.contentHeadline)}
+              </H1>
+              <div className={classes.container}>
+                <div className={classes.content}>
+                  <p>{intl.formatMessage(messages.intro)}</p>
+                  <p>{intl.formatMessage(messages.copy)}</p>
                 </div>
-              </>
-            )}
-          </div>
-          <ReactTooltip place="right" type="dark" effect="solid" />
+                <img
+                  className={classes.image}
+                  src="https://cdn.franzinfra.com/announcements/assets/teams.png"
+                  alt="Ferdium for Teams"
+                />
+              </div>
+              <div className={classes.buttonContainer}>
+                <Button
+                  label={intl.formatMessage(messages.manageButton)}
+                  onClick={openTeamManagement}
+                  className={classes.cta}
+                />
+              </div>
+            </>
+          )}
         </div>
-      );
-    }
-    return (
+        <ReactTooltip place="right" type="dark" effect="solid" />
+      </div>
+    ) : (
       <div className="settings__main">
         <div className="settings__header">
           <span className="settings__header-item">
@@ -205,5 +200,5 @@ class TeamDashboard extends Component {
 }
 
 export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(observer(TeamDashboard)),
+  withStyles(styles, { injectTheme: true })(TeamDashboard),
 );
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
deleted file mode 100644
index f8c6b92ee..000000000
--- a/src/components/ui/FullscreenLoader/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
-import injectStyle from 'react-jss';
-import classnames from 'classnames';
-
-import Loader from '../Loader';
-
-import styles from './styles';
-import { H1 } from '../headline';
-
-class FullscreenLoader extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    title: PropTypes.string,
-    classes: PropTypes.object.isRequired,
-    theme: PropTypes.object.isRequired,
-    spinnerColor: PropTypes.string,
-    children: PropTypes.node,
-  };
-
-  static defaultProps = {
-    className: null,
-    spinnerColor: null,
-    children: null,
-    title: null,
-  };
-
-  render() {
-    const { classes, title, children, spinnerColor, className, theme } =
-      this.props;
-
-    return (
-      <div className={classes.wrapper}>
-        <div
-          className={classnames({
-            [`${classes.component}`]: true,
-            [`${className}`]: className,
-          })}
-        >
-          <H1 className={classes.title}>{title}</H1>
-          <Loader color={spinnerColor || theme.colorFullscreenLoaderSpinner} />
-          {children && <div className={classes.content}>{children}</div>}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default injectStyle(styles, { injectTheme: true })(
-  observer(FullscreenLoader),
-);
diff --git a/src/components/ui/FullscreenLoader/index.tsx b/src/components/ui/FullscreenLoader/index.tsx
new file mode 100644
index 000000000..002ee7932
--- /dev/null
+++ b/src/components/ui/FullscreenLoader/index.tsx
@@ -0,0 +1,54 @@
+import { Component, ReactElement, ReactNode } from 'react';
+import { observer } from 'mobx-react';
+import withStyles, { WithStylesProps } from 'react-jss';
+import classnames from 'classnames';
+import Loader from '../Loader';
+import styles from './styles';
+import { H1 } from '../headline';
+import { Theme } from '../../../themes';
+
+interface IProps extends WithStylesProps<typeof styles> {
+  className?: string;
+  title?: string;
+  theme?: Theme;
+  spinnerColor?: string;
+  loaded?: boolean;
+  children?: ReactNode;
+}
+
+@observer
+class FullscreenLoader extends Component<IProps> {
+  render(): ReactElement {
+    const {
+      classes,
+      theme = '',
+      className = '',
+      spinnerColor = '',
+      children = null,
+      title = '',
+      loaded = false,
+    } = this.props;
+
+    return (
+      <div className={classes.wrapper}>
+        <div
+          className={classnames({
+            [`${classes.component}`]: true,
+            [`${className}`]: className,
+          })}
+        >
+          <H1 className={classes.title}>{title}</H1>
+          <Loader
+            color={
+              spinnerColor || (theme && theme.colorFullscreenLoaderSpinner)
+            }
+            loaded={loaded}
+          />
+          {children && <div className={classes.content}>{children}</div>}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles, { injectTheme: true })(FullscreenLoader);
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx
index 5e78ed47a..ebb437d9d 100644
--- a/src/components/ui/Loader.tsx
+++ b/src/components/ui/Loader.tsx
@@ -1,4 +1,4 @@
-import { Component, PropsWithChildren } from 'react';
+import { Component, ReactElement, ReactNode } from 'react';
 import { observer, inject } from 'mobx-react';
 import Loader from 'react-loader';
 
@@ -9,31 +9,30 @@ interface IProps {
   color?: string;
   loaded?: boolean;
   stores?: FerdiumStores;
+  children?: ReactNode;
 }
 
 // Can this file be merged into the './loader/index.tsx' file?
 @inject('stores')
 @observer
-class LoaderComponent extends Component<PropsWithChildren<IProps>> {
-  static defaultProps = {
-    loaded: false,
-    color: 'ACCENT',
-  };
+class LoaderComponent extends Component<IProps> {
+  render(): ReactElement {
+    const {
+      loaded = false,
+      color = 'ACCENT',
+      className,
+      children,
+    } = this.props;
 
-  render() {
-    const { children, loaded, className } = this.props;
-
-    const color =
-      this.props.color !== 'ACCENT'
-        ? this.props.color
-        : this.props.stores!.settings.app.accentColor;
+    const loaderColor =
+      color !== 'ACCENT' ? color : this.props.stores!.settings.app.accentColor;
 
     return (
       <Loader
         loaded={loaded}
         width={4}
         scale={0.6}
-        color={color}
+        color={loaderColor}
         component="span"
         className={className}
       >
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.tsx
index b05d791be..39a32e44d 100644
--- a/src/components/ui/ServiceIcon.js
+++ b/src/components/ui/ServiceIcon.tsx
@@ -1,9 +1,7 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, ReactNode } from 'react';
 import { observer } from 'mobx-react';
-import injectSheet from 'react-jss';
+import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
-
 import ServiceModel from '../../models/Service';
 
 const styles = theme => ({
@@ -24,20 +22,16 @@ const styles = theme => ({
   },
 });
 
-// Should this file be converted into the coding style similar to './toggle/index.tsx'?
-class ServiceIcon extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    service: PropTypes.instanceOf(ServiceModel).isRequired,
-    className: PropTypes.string,
-  };
-
-  static defaultProps = {
-    className: '',
-  };
+interface IProps extends WithStylesProps<typeof styles> {
+  service: ServiceModel;
+  className?: string;
+}
 
-  render() {
-    const { classes, className, service } = this.props;
+// TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
+@observer
+class ServiceIcon extends Component<IProps> {
+  render(): ReactNode {
+    const { classes, className = '', service } = this.props;
 
     return (
       <div className={classnames([classes.root, className])}>
@@ -55,6 +49,4 @@ class ServiceIcon extends Component {
   }
 }
 
-export default injectSheet(styles, { injectTheme: true })(
-  observer(ServiceIcon),
-);
+export default withStyles(styles, { injectTheme: true })(ServiceIcon);
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.tsx
index 90f4df1c4..ed9fe9073 100644
--- a/src/components/ui/Slider.js
+++ b/src/components/ui/Slider.tsx
@@ -1,32 +1,34 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { ChangeEvent, Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import { Field } from 'mobx-react-form';
+import { noop } from 'lodash';
 
-// Should this file be converted into the coding style similar to './toggle/index.tsx'?
-class Slider extends Component {
-  static propTypes = {
-    field: PropTypes.instanceOf(Field).isRequired,
-    className: PropTypes.string,
-    showLabel: PropTypes.bool,
-    disabled: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    className: '',
-    showLabel: true,
-    disabled: false,
-  };
-
-  onChange(e) {
-    const { field } = this.props;
+interface IProps {
+  field: any;
+  className?: string;
+  showLabel?: boolean;
+  disabled?: boolean;
+  type?: 'range' | 'number';
+  onSliderChange?: (e: ChangeEvent) => void;
+}
 
+// TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
+@observer
+class Slider extends Component<IProps> {
+  onChange(e: ChangeEvent<HTMLInputElement>): void {
+    const { field, onSliderChange = noop } = this.props;
     field.onChange(e);
+    onSliderChange(e);
   }
 
-  render() {
-    const { field, className, showLabel, disabled } = this.props;
+  render(): ReactElement {
+    const {
+      field,
+      className = '',
+      showLabel = true,
+      disabled = false,
+      type = 'range',
+    } = this.props;
 
     if (field.value === '' && field.default !== '') {
       field.value = field.default;
@@ -43,7 +45,7 @@ class Slider extends Component {
         <div className="slider-container">
           <input
             className="slider"
-            type="range"
+            type={type}
             id={field.id}
             name={field.name}
             value={field.value}
@@ -64,4 +66,4 @@ class Slider extends Component {
   }
 }
 
-export default observer(Slider);
+export default Slider;
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.tsx
index 3e0c98c5d..7b053f410 100644
--- a/src/components/ui/StatusBarTargetUrl.js
+++ b/src/components/ui/StatusBarTargetUrl.tsx
@@ -1,24 +1,18 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-
 import Appear from './effects/Appear';
 
-// Should this file be converted into the coding style similar to './toggle/index.tsx'?
-class StatusBarTargetUrl extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    text: PropTypes.string,
-  };
-
-  static defaultProps = {
-    className: '',
-    text: '',
-  };
+interface IProps {
+  className?: string;
+  text?: string;
+}
 
+// TODO - [TS DEBT] Should this file be converted into the coding style similar to './toggle/index.tsx'?
+@observer
+class StatusBarTargetUrl extends Component<IProps> {
   render() {
-    const { className, text } = this.props;
+    const { className = '', text = '' } = this.props;
 
     return (
       <Appear
@@ -33,4 +27,4 @@ class StatusBarTargetUrl extends Component {
   }
 }
 
-export default observer(StatusBarTargetUrl);
+export default StatusBarTargetUrl;
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
deleted file mode 100644
index 20945d191..000000000
--- a/src/components/ui/WebviewLoader/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
-import injectSheet from 'react-jss';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import FullscreenLoader from '../FullscreenLoader';
-import styles from './styles';
-
-const messages = defineMessages({
-  loading: {
-    id: 'service.webviewLoader.loading',
-    defaultMessage: 'Loading {service}',
-  },
-});
-
-class WebviewLoader extends Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    classes: PropTypes.object.isRequired,
-  };
-
-  render() {
-    const { classes, name } = this.props;
-    const { intl } = this.props;
-    return (
-      <FullscreenLoader
-        className={classes.component}
-        title={`${intl.formatMessage(messages.loading, { service: name })}`}
-      />
-    );
-  }
-}
-
-export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(observer(WebviewLoader)),
-);
diff --git a/src/components/ui/WebviewLoader/index.tsx b/src/components/ui/WebviewLoader/index.tsx
new file mode 100644
index 000000000..81923b6ca
--- /dev/null
+++ b/src/components/ui/WebviewLoader/index.tsx
@@ -0,0 +1,44 @@
+import { Component, ReactElement } from 'react';
+import { observer } from 'mobx-react';
+import injectSheet, { WithStylesProps } from 'react-jss';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import FullscreenLoader from '../FullscreenLoader';
+
+const messages = defineMessages({
+  loading: {
+    id: 'service.webviewLoader.loading',
+    defaultMessage: 'Loading {service}',
+  },
+});
+
+const styles = theme => ({
+  component: {
+    background: theme.colorWebviewLoaderBackground,
+    padding: 20,
+    width: 'auto',
+    margin: [0, 'auto'],
+    borderRadius: 6,
+  },
+});
+
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  name: string;
+  loaded?: boolean;
+}
+
+class WebviewLoader extends Component<IProps> {
+  render(): ReactElement {
+    const { classes, name, loaded = false, intl } = this.props;
+    return (
+      <FullscreenLoader
+        className={classes.component}
+        title={`${intl.formatMessage(messages.loading, { service: name })}`}
+        loaded={loaded}
+      />
+    );
+  }
+}
+
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(WebviewLoader)),
+);
diff --git a/src/components/ui/WebviewLoader/styles.ts b/src/components/ui/WebviewLoader/styles.ts
deleted file mode 100644
index dbd75db8a..000000000
--- a/src/components/ui/WebviewLoader/styles.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export default theme => ({
-  component: {
-    background: theme.colorWebviewLoaderBackground,
-    padding: 20,
-    width: 'auto',
-    margin: [0, 'auto'],
-    borderRadius: 6,
-  },
-});