36 files changed, 111 insertions, 129 deletions

diff --git a/src/components/ui/AppLoader/index.tsx b/src/components/ui/AppLoader/index.tsx
index c7c290a57..0bb9cb50f 100644
--- a/src/components/ui/AppLoader/index.tsx
+++ b/src/components/ui/AppLoader/index.tsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
-import injectSheet, { withTheme } from 'react-jss';
 import classnames from 'classnames';
 
+import injectStyle from 'react-jss';
 import FullscreenLoader from '../FullscreenLoader';
 import { shuffleArray } from '../../../helpers/array-helpers';
 
@@ -24,8 +24,6 @@ type Props = {
   texts: string[];
 };
 
-@injectSheet(styles)
-@withTheme
 class AppLoader extends Component<Props> {
   static defaultProps = {
     texts: textList,
@@ -77,4 +75,4 @@ class AppLoader extends Component<Props> {
   }
 }
 
-export default AppLoader;
+export default injectStyle(styles, { injectTheme: true })(AppLoader);
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
index d90a8d62d..a52f1cadb 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -4,8 +4,6 @@ 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,
@@ -90,4 +88,4 @@ class Button extends Component {
   }
 }
 
-export default Button;
+export default inject('stores')(observer(Button));
diff --git a/src/components/ui/FAB.tsx b/src/components/ui/FAB.tsx
index 0d871e948..cb9c5f126 100644
--- a/src/components/ui/FAB.tsx
+++ b/src/components/ui/FAB.tsx
@@ -14,7 +14,6 @@ type Props = {
   htmlForm: string;
 };
 
-@observer
 class Button extends Component<Props> {
   static defaultProps = {
     disabled: false,
@@ -46,4 +45,4 @@ class Button extends Component<Props> {
   }
 }
 
-export default Button;
+export default observer(Button);
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index f5943f3f3..39b6c5a4c 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -1,16 +1,13 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import injectSheet, { withTheme } from 'react-jss';
+import injectStyle from 'react-jss';
 import classnames from 'classnames';
 
 import Loader from '../Loader';
 
 import styles from './styles';
 
-@withTheme
-@injectSheet(styles)
-@observer
 class FullscreenLoader extends Component {
   static propTypes = {
     className: PropTypes.string,
@@ -48,4 +45,6 @@ class FullscreenLoader extends Component {
   }
 }
 
-export default FullscreenLoader;
+export default injectStyle(styles, { injectTheme: true })(
+  observer(FullscreenLoader),
+);
diff --git a/src/components/ui/ImageUpload.tsx b/src/components/ui/ImageUpload.tsx
index 52c097ef0..b07e211c2 100644
--- a/src/components/ui/ImageUpload.tsx
+++ b/src/components/ui/ImageUpload.tsx
@@ -15,7 +15,6 @@ type Props = {
   textUpload: string;
 };
 
-@observer
 class ImageUpload extends Component<Props> {
   static defaultProps = {
     multiple: false,
@@ -102,4 +101,4 @@ class ImageUpload extends Component<Props> {
   }
 }
 
-export default ImageUpload;
+export default observer(ImageUpload);
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js
index 89b085907..c1a6013c2 100644
--- a/src/components/ui/InfoBar.js
+++ b/src/components/ui/InfoBar.js
@@ -16,7 +16,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class InfoBar extends Component {
   static propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
@@ -102,4 +101,4 @@ class InfoBar extends Component {
   }
 }
 
-export default injectIntl(InfoBar);
+export default injectIntl(observer(InfoBar));
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index c0ba8f13c..6634a6808 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -19,7 +19,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class Infobox extends Component {
   static propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
@@ -112,4 +111,4 @@ class Infobox extends Component {
   }
 }
 
-export default injectIntl(Infobox);
+export default injectIntl(observer(Infobox));
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
index 8d37d7a05..fa1b44699 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.js
@@ -5,7 +5,9 @@ import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
 
+import { mdiEye, mdiEyeOff } from '@mdi/js';
 import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers';
+import { Icon } from './icon';
 
 const messages = defineMessages({
   passwordToggle: {
@@ -14,7 +16,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class Input extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
@@ -115,9 +116,6 @@ class Input extends Component {
               type="button"
               className={classnames({
                 'franz-form__input-modifier': true,
-                mdi: true,
-                'mdi-eye': !this.state.showPassword,
-                'mdi-eye-off': this.state.showPassword,
               })}
               onClick={() =>
                 this.setState(prevState => ({
@@ -126,7 +124,9 @@ class Input extends Component {
               }
               tabIndex={-1}
               aria-label={intl.formatMessage(messages.passwordToggle)}
-            />
+            >
+              <Icon icon={this.state.showPassword ? mdiEye : mdiEyeOff} />
+            </button>
           )}
           {scorePassword && (
             <div className="franz-form__password-score">
@@ -152,4 +152,4 @@ class Input extends Component {
   }
 }
 
-export default injectIntl(Input);
+export default injectIntl(observer(Input));
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index 40766c984..565547736 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -9,8 +9,6 @@ import { matchRoute } from '../../helpers/routing-helpers';
 import { openExternalUrl } from '../../helpers/url-helpers';
 
 // TODO: create container component for this component
-@inject('stores')
-@observer
 class Link extends Component {
   onClick(e) {
     if (this.props.disabled) {
@@ -60,7 +58,7 @@ class Link extends Component {
   }
 }
 
-Link.wrappedComponent.propTypes = {
+Link.propTypes = {
   stores: PropTypes.shape({
     router: PropTypes.instanceOf(RouterStore).isRequired,
   }).isRequired,
@@ -75,7 +73,7 @@ Link.wrappedComponent.propTypes = {
   disabled: PropTypes.bool,
 };
 
-Link.wrappedComponent.defaultProps = {
+Link.defaultProps = {
   className: '',
   activeClassName: '',
   strictFilter: false,
@@ -84,4 +82,4 @@ Link.wrappedComponent.defaultProps = {
   style: {},
 };
 
-export default Link;
+export default inject('stores')(observer(Link));
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx
index 1173c11e7..171d0e290 100644
--- a/src/components/ui/Loader.tsx
+++ b/src/components/ui/Loader.tsx
@@ -12,8 +12,6 @@ type Props = {
   stores: FerdiStores;
 };
 
-@inject('stores')
-@observer
 class LoaderComponent extends Component<Props> {
   static defaultProps = {
     loaded: false,
@@ -43,4 +41,4 @@ class LoaderComponent extends Component<Props> {
   }
 }
 
-export default LoaderComponent;
+export default inject('stores')(observer(LoaderComponent));
diff --git a/src/components/ui/Modal/index.tsx b/src/components/ui/Modal/index.tsx
index f2f4461b8..c3c78b419 100644
--- a/src/components/ui/Modal/index.tsx
+++ b/src/components/ui/Modal/index.tsx
@@ -18,7 +18,6 @@ type Props = {
   showClose: boolean;
 };
 
-@injectCSS(styles)
 class Modal extends Component<Props> {
   static defaultProps = {
     className: null,
@@ -64,4 +63,4 @@ class Modal extends Component<Props> {
   }
 }
 
-export default Modal;
+export default injectCSS(styles)(Modal);
diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx
index 594ea70e4..a033a5fe0 100644
--- a/src/components/ui/Radio.tsx
+++ b/src/components/ui/Radio.tsx
@@ -10,7 +10,6 @@ type Props = {
   showLabel: boolean;
 };
 
-@observer
 class Radio extends Component<Props> {
   static defaultProps = {
     focus: false,
@@ -74,4 +73,4 @@ class Radio extends Component<Props> {
   }
 }
 
-export default Radio;
+export default observer(Radio);
diff --git a/src/components/ui/SearchInput.tsx b/src/components/ui/SearchInput.tsx
index 49a50a4a0..6a6a1692e 100644
--- a/src/components/ui/SearchInput.tsx
+++ b/src/components/ui/SearchInput.tsx
@@ -17,7 +17,6 @@ type Props = {
   autoFocus: boolean;
 };
 
-@observer
 class SearchInput extends Component<Props> {
   static defaultProps = {
     value: '',
@@ -115,4 +114,4 @@ class SearchInput extends Component<Props> {
   }
 }
 
-export default SearchInput;
+export default observer(SearchInput);
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js
index a560da332..0fc32e573 100644
--- a/src/components/ui/Select.js
+++ b/src/components/ui/Select.js
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 
-@observer
 class Select extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
@@ -98,4 +97,4 @@ class Select extends Component {
   }
 }
 
-export default Select;
+export default observer(Select);
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.js
index f067f8955..d403d107d 100644
--- a/src/components/ui/ServiceIcon.js
+++ b/src/components/ui/ServiceIcon.js
@@ -24,8 +24,6 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles)
-@observer
 class ServiceIcon extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -56,4 +54,6 @@ class ServiceIcon extends Component {
   }
 }
 
-export default ServiceIcon;
+export default injectSheet(styles, { injectTheme: true })(
+  observer(ServiceIcon),
+);
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.js
index dea6e0563..a581e7a65 100644
--- a/src/components/ui/Slider.js
+++ b/src/components/ui/Slider.js
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { Field } from 'mobx-react-form';
 
-@observer
 class Slider extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
@@ -64,4 +63,4 @@ class Slider extends Component {
   }
 }
 
-export default Slider;
+export default observer(Slider);
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js
index 38b436742..d8d329d52 100644
--- a/src/components/ui/StatusBarTargetUrl.js
+++ b/src/components/ui/StatusBarTargetUrl.js
@@ -5,7 +5,6 @@ import classnames from 'classnames';
 
 import Appear from './effects/Appear';
 
-@observer
 class StatusBarTargetUrl extends Component {
   static propTypes = {
     className: PropTypes.string,
@@ -33,4 +32,4 @@ class StatusBarTargetUrl extends Component {
   }
 }
 
-export default StatusBarTargetUrl;
+export default observer(StatusBarTargetUrl);
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
index 77803974b..5d2da6293 100644
--- a/src/components/ui/Tabs/Tabs.js
+++ b/src/components/ui/Tabs/Tabs.js
@@ -5,7 +5,6 @@ import classnames from 'classnames';
 
 import { oneOrManyChildElements } from '../../../prop-types';
 
-@observer
 class Tab extends Component {
   constructor(props) {
     super(props);
@@ -69,4 +68,4 @@ class Tab extends Component {
   }
 }
 
-export default Tab;
+export default observer(Tab);
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js
index dfc319735..a82be690e 100644
--- a/src/components/ui/Toggle.js
+++ b/src/components/ui/Toggle.js
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { Field } from 'mobx-react-form';
 
-@observer
 class Toggle extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
@@ -69,4 +68,4 @@ class Toggle extends Component {
   }
 }
 
-export default Toggle;
+export default observer(Toggle);
diff --git a/src/components/ui/ToggleRaw.js b/src/components/ui/ToggleRaw.js
index 74292a870..e482b97b4 100644
--- a/src/components/ui/ToggleRaw.js
+++ b/src/components/ui/ToggleRaw.js
@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 
-@observer
 class ToggleRaw extends Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
@@ -74,4 +73,4 @@ class ToggleRaw extends Component {
   }
 }
 
-export default ToggleRaw;
+export default observer(ToggleRaw);
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
index 8d4513172..20945d191 100644
--- a/src/components/ui/WebviewLoader/index.js
+++ b/src/components/ui/WebviewLoader/index.js
@@ -14,8 +14,6 @@ const messages = defineMessages({
   },
 });
 
-@injectSheet(styles)
-@observer
 class WebviewLoader extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
@@ -34,4 +32,6 @@ class WebviewLoader extends Component {
   }
 }
 
-export default injectIntl(WebviewLoader);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(WebviewLoader)),
+);
diff --git a/src/components/ui/badge/ProBadge.tsx b/src/components/ui/badge/ProBadge.tsx
index dc1e76f7f..410748a64 100644
--- a/src/components/ui/badge/ProBadge.tsx
+++ b/src/components/ui/badge/ProBadge.tsx
@@ -1,14 +1,13 @@
 import { mdiStar } from '@mdi/js';
 import classnames from 'classnames';
 import { Component } from 'react';
-import injectStyle from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
 import { Icon } from '../icon';
 import { Badge } from './index';
-import { IWithStyle } from '../typings/generic';
 
-interface IProps extends IWithStyle {
+interface IProps extends WithStylesProps<typeof styles> {
   badgeClasses?: string;
   iconClasses?: string;
   inverted?: boolean;
@@ -61,4 +60,6 @@ class ProBadgeComponent extends Component<IProps> {
   }
 }
 
-export const ProBadge = injectStyle(styles)(ProBadgeComponent);
+export const ProBadge = injectStyle(styles, { injectTheme: true })(
+  ProBadgeComponent,
+);
diff --git a/src/components/ui/badge/index.tsx b/src/components/ui/badge/index.tsx
index 61bede937..a7ed866a5 100644
--- a/src/components/ui/badge/index.tsx
+++ b/src/components/ui/badge/index.tsx
@@ -1,11 +1,10 @@
 import classnames from 'classnames';
 import { Component, ReactNode } from 'react';
-import injectStyle from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
-import { IWithStyle } from '../typings/generic';
 
-interface IProps extends IWithStyle {
+interface IProps extends WithStylesProps<typeof styles> {
   type: string;
   className?: string;
   children: ReactNode;
@@ -68,4 +67,4 @@ class BadgeComponent extends Component<IProps> {
   }
 }
 
-export const Badge = injectStyle(styles)(BadgeComponent);
+export const Badge = injectStyle(styles, { injectTheme: true })(BadgeComponent);
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index 12e5e4449..d91b1ee19 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -2,11 +2,11 @@ import Icon from '@mdi/react';
 import classnames from 'classnames';
 import { Property } from 'csstype';
 import { Component, MouseEvent } from 'react';
-import injectStyle, { withTheme } from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 import Loader from 'react-loader';
 
 import { Theme } from '../../../themes';
-import { IFormField, IWithStyle } from '../typings/generic';
+import { IFormField } from '../typings/generic';
 
 type ButtonType =
   | 'primary'
@@ -16,7 +16,7 @@ type ButtonType =
   | 'warning'
   | 'inverted';
 
-interface IProps extends IFormField, IWithStyle {
+interface IProps extends IFormField, WithStylesProps<typeof styles> {
   className?: string;
   disabled?: boolean;
   id?: string;
@@ -179,7 +179,7 @@ class ButtonComponent extends Component<IProps> {
     const {
       classes,
       className,
-      theme,
+      // theme,
       disabled,
       id,
       label,
@@ -213,7 +213,7 @@ class ButtonComponent extends Component<IProps> {
               loaded={false}
               width={4}
               scale={0.45}
-              color={theme.buttonLoaderColor[buttonType!]}
+              // color={theme.buttonLoaderColor[buttonType!]}
               parentClassName={classes.loader}
             />
           )}
@@ -262,4 +262,6 @@ class ButtonComponent extends Component<IProps> {
   }
 }
 
-export const Button = injectStyle(styles)(withTheme(ButtonComponent));
+export const Button = injectStyle(styles, { injectTheme: true })(
+  ButtonComponent,
+);
diff --git a/src/components/ui/error/index.tsx b/src/components/ui/error/index.tsx
index 8439bfc8b..ff3bc31c6 100644
--- a/src/components/ui/error/index.tsx
+++ b/src/components/ui/error/index.tsx
@@ -17,4 +17,4 @@ class ErrorComponent extends Component<IProps> {
   }
 }
 
-export const Error = injectSheet(styles)(ErrorComponent);
+export const Error = injectSheet(styles, { injectTheme: true })(ErrorComponent);
diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx
index ea2949102..d9954c38f 100644
--- a/src/components/ui/headline/index.tsx
+++ b/src/components/ui/headline/index.tsx
@@ -1,11 +1,11 @@
 import classnames from 'classnames';
 import { Component, createElement, ReactNode } from 'react';
-import injectStyle from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
-import { IWithStyle, Omit } from '../typings/generic';
+import { Omit } from '../typings/generic';
 
-interface IProps extends IWithStyle {
+interface IProps extends WithStylesProps<typeof styles> {
   level?: number;
   className?: string;
   children: string | ReactNode;
@@ -55,9 +55,9 @@ class HeadlineComponent extends Component<IProps> {
   }
 }
 
-const Headline = injectStyle(styles)(HeadlineComponent);
+const Headline = injectStyle(styles, { injectTheme: true })(HeadlineComponent);
 
-const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) =>
+const createH = (level: number) => (props: Omit<IProps, 'classes'>) =>
   (
     <Headline level={level} {...props}>
       {props.children}
diff --git a/src/components/ui/icon/index.tsx b/src/components/ui/icon/index.tsx
index 85bb61d13..52f61d2d7 100644
--- a/src/components/ui/icon/index.tsx
+++ b/src/components/ui/icon/index.tsx
@@ -1,12 +1,11 @@
 import MdiIcon from '@mdi/react';
 import classnames from 'classnames';
 import { Component } from 'react';
-import injectStyle from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
-import { IWithStyle } from '../typings/generic';
 
-interface IProps extends IWithStyle {
+interface IProps extends WithStylesProps<typeof styles> {
   icon: string;
   size?: number;
   className?: string;
@@ -43,4 +42,4 @@ class IconComponent extends Component<IProps> {
   }
 }
 
-export const Icon = injectStyle(styles)(IconComponent);
+export const Icon = injectStyle(styles, { injectTheme: true })(IconComponent);
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx
index 87940c4d4..7b2ce527b 100644
--- a/src/components/ui/infobox/index.tsx
+++ b/src/components/ui/infobox/index.tsx
@@ -1,13 +1,12 @@
 import { mdiClose } from '@mdi/js';
 import classnames from 'classnames';
 import { Component, ReactNode } from 'react';
-import injectStyle from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
 import { Icon } from '../icon';
-import { IWithStyle } from '../typings/generic';
 
-interface IProps extends IWithStyle {
+interface IProps extends WithStylesProps<typeof styles> {
   icon?: string;
   type?: string;
   dismissable?: boolean;
@@ -202,4 +201,6 @@ class InfoboxComponent extends Component<IProps, IState> {
   }
 }
 
-export const Infobox = injectStyle(styles)(InfoboxComponent);
+export const Infobox = injectStyle(styles, { injectTheme: true })(
+  InfoboxComponent,
+);
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index c46cafc5c..bfbee33b9 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -2,9 +2,9 @@ import { mdiEye, mdiEyeOff } from '@mdi/js';
 import Icon from '@mdi/react';
 import classnames from 'classnames';
 import { Component, createRef, InputHTMLAttributes } from 'react';
-import injectSheet from 'react-jss';
+import injectSheet, { WithStylesProps } from 'react-jss';
 
-import { IFormField, IWithStyle } from '../typings/generic';
+import { IFormField } from '../typings/generic';
 
 import { Error } from '../error';
 import { Label } from '../label';
@@ -20,7 +20,7 @@ interface IData {
 interface IProps
   extends InputHTMLAttributes<HTMLInputElement>,
     IFormField,
-    IWithStyle {
+    WithStylesProps<typeof styles> {
   focus?: boolean;
   prefix?: string;
   suffix?: string;
@@ -205,4 +205,4 @@ class InputComponent extends Component<IProps, IState> {
   }
 }
 
-export const Input = injectSheet(styles)(InputComponent);
+export const Input = injectSheet(styles, { injectTheme: true })(InputComponent);
diff --git a/src/components/ui/label/index.tsx b/src/components/ui/label/index.tsx
index 4d86f23f7..dcc14bff4 100644
--- a/src/components/ui/label/index.tsx
+++ b/src/components/ui/label/index.tsx
@@ -1,15 +1,16 @@
 import classnames from 'classnames';
-import { Classes } from 'jss';
 import { Component, LabelHTMLAttributes } from 'react';
-import injectSheet from 'react-jss';
+import injectSheet, { WithStylesProps } from 'react-jss';
 
 import { IFormField } from '../typings/generic';
 
 import styles from './styles';
 
-interface ILabel extends IFormField, LabelHTMLAttributes<HTMLLabelElement> {
-  classes: Classes;
-  isRequired: boolean;
+interface ILabel
+  extends IFormField,
+    LabelHTMLAttributes<HTMLLabelElement>,
+    WithStylesProps<typeof styles> {
+  isRequired?: boolean;
 }
 
 class LabelComponent extends Component<ILabel> {
@@ -49,4 +50,4 @@ class LabelComponent extends Component<ILabel> {
   }
 }
 
-export const Label = injectSheet(styles)(LabelComponent);
+export const Label = injectSheet(styles, { injectTheme: true })(LabelComponent);
diff --git a/src/components/ui/loader/index.tsx b/src/components/ui/loader/index.tsx
index 0607bd48b..d56995ccc 100644
--- a/src/components/ui/loader/index.tsx
+++ b/src/components/ui/loader/index.tsx
@@ -1,25 +1,25 @@
 import classnames from 'classnames';
 import { Component } from 'react';
-import injectStyle, { withTheme } from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 import ReactLoader from 'react-loader';
 
-import { IWithStyle } from '../typings/generic';
-
-interface IProps extends IWithStyle {
+interface IProps extends WithStylesProps<typeof styles> {
   className?: string;
   color?: string;
 }
 
-const styles = () => ({
+const styles = theme => ({
   container: {
     position: 'relative',
     height: 60,
   },
+  loader: {},
+  color: theme.colorText,
 });
 
 class LoaderComponent extends Component<IProps> {
   render() {
-    const { classes, className, color, theme } = this.props;
+    const { classes, className, color } = this.props;
 
     return (
       <div
@@ -33,7 +33,7 @@ class LoaderComponent extends Component<IProps> {
           loaded={false}
           width={4}
           scale={0.75}
-          color={color || theme.colorText}
+          color={color || classes.color}
           parentClassName={classes.loader}
         />
       </div>
@@ -41,4 +41,6 @@ class LoaderComponent extends Component<IProps> {
   }
 }
 
-export const Loader = injectStyle(styles)(withTheme(LoaderComponent));
+export const Loader = injectStyle(styles, { injectTheme: true })(
+  LoaderComponent,
+);
diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx
index 2605503a3..ac509aa7c 100644
--- a/src/components/ui/select/index.tsx
+++ b/src/components/ui/select/index.tsx
@@ -6,10 +6,10 @@ import {
 import Icon from '@mdi/react';
 import classnames from 'classnames';
 import { ChangeEvent, Component, createRef } from 'react';
-import injectStyle from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
-import { IFormField, IWithStyle } from '../typings/generic';
+import { IFormField } from '../typings/generic';
 
 import { Error } from '../error';
 import { Label } from '../label';
@@ -23,7 +23,7 @@ interface IData {
   [index: string]: string;
 }
 
-interface IProps extends IFormField, IWithStyle {
+interface IProps extends IFormField, WithStylesProps<typeof styles> {
   actionText: string;
   className?: string;
   inputClassName?: string;
@@ -146,6 +146,7 @@ const styles = (theme: Theme) => ({
   disabled: {
     opacity: theme.selectDisabledOpacity,
   },
+  input: {},
 });
 
 class SelectComponent extends Component<IProps> {
@@ -457,4 +458,6 @@ class SelectComponent extends Component<IProps> {
   }
 }
 
-export const Select = injectStyle(styles)(SelectComponent);
+export const Select = injectStyle(styles, { injectTheme: true })(
+  SelectComponent,
+);
diff --git a/src/components/ui/textarea/index.tsx b/src/components/ui/textarea/index.tsx
index 1b16698eb..a47465806 100644
--- a/src/components/ui/textarea/index.tsx
+++ b/src/components/ui/textarea/index.tsx
@@ -1,8 +1,8 @@
 import classnames from 'classnames';
 import { Component, createRef, TextareaHTMLAttributes } from 'react';
-import injectSheet from 'react-jss';
+import injectSheet, { WithStylesProps } from 'react-jss';
 
-import { IFormField, IWithStyle } from '../typings/generic';
+import { IFormField } from '../typings/generic';
 
 import { Error } from '../error';
 import { Label } from '../label';
@@ -17,7 +17,7 @@ interface IData {
 interface IProps
   extends TextareaHTMLAttributes<HTMLTextAreaElement>,
     IFormField,
-    IWithStyle {
+    WithStylesProps<typeof styles> {
   focus?: boolean;
   data: IData;
   textareaClassName?: string;
@@ -123,4 +123,6 @@ class TextareaComponent extends Component<IProps> {
   }
 }
 
-export const Textarea = injectSheet(styles)(TextareaComponent);
+export const Textarea = injectSheet(styles, { injectTheme: true })(
+  TextareaComponent,
+);
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx
index 7b6ba147f..856581a21 100644
--- a/src/components/ui/toggle/index.tsx
+++ b/src/components/ui/toggle/index.tsx
@@ -1,10 +1,10 @@
 import classnames from 'classnames';
 import { Property } from 'csstype';
 import { Component, InputHTMLAttributes } from 'react';
-import injectStyle from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
-import { IFormField, IWithStyle } from '../typings/generic';
+import { IFormField } from '../typings/generic';
 
 import { Error } from '../error';
 import { Label } from '../label';
@@ -13,7 +13,7 @@ import { Wrapper } from '../wrapper';
 interface IProps
   extends InputHTMLAttributes<HTMLInputElement>,
     IFormField,
-    IWithStyle {
+    WithStylesProps<typeof styles> {
   className?: string;
 }
 
@@ -122,4 +122,6 @@ class ToggleComponent extends Component<IProps> {
   }
 }
 
-export const Toggle = injectStyle(styles)(ToggleComponent);
+export const Toggle = injectStyle(styles, { injectTheme: true })(
+  ToggleComponent,
+);
diff --git a/src/components/ui/typings/generic.ts b/src/components/ui/typings/generic.ts
index 65b996d59..3aec0bc40 100644
--- a/src/components/ui/typings/generic.ts
+++ b/src/components/ui/typings/generic.ts
@@ -1,7 +1,3 @@
-import { Classes } from 'jss';
-
-import { Theme } from '../../../themes';
-
 export interface IFormField {
   showLabel?: boolean;
   label?: string;
@@ -10,10 +6,5 @@ export interface IFormField {
   noMargin?: boolean;
 }
 
-export interface IWithStyle {
-  classes: Classes;
-  theme: Theme;
-}
-
 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>>;
diff --git a/src/components/ui/wrapper/index.tsx b/src/components/ui/wrapper/index.tsx
index ffcd6fe0b..bc385d319 100644
--- a/src/components/ui/wrapper/index.tsx
+++ b/src/components/ui/wrapper/index.tsx
@@ -1,9 +1,8 @@
 import classnames from 'classnames';
 import { Component, ReactNode } from 'react';
-import injectStyle from 'react-jss';
-import { IWithStyle } from '../typings/generic';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
-interface IProps extends IWithStyle {
+interface IProps extends WithStylesProps<typeof styles> {
   children: ReactNode;
   className?: string;
   identifier: string;
@@ -34,4 +33,6 @@ class WrapperComponent extends Component<IProps> {
   }
 }
 
-export const Wrapper = injectStyle(styles)(WrapperComponent);
+export const Wrapper = injectStyle(styles, { injectTheme: true })(
+  WrapperComponent,
+);