71 files changed, 180 insertions, 225 deletions

diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index f26282cfc..94ff5d54d 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -19,7 +19,6 @@ import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import { GITHUB_FERDI_URL } from '../../config';
 import { Icon } from '../ui/icon';
 
-@observer
 class AuthLayout extends Component {
   static propTypes = {
     children: oneOrManyChildElements.isRequired,
@@ -107,4 +106,4 @@ class AuthLayout extends Component {
   }
 }
 
-export default injectIntl(AuthLayout);
+export default injectIntl(observer(AuthLayout));
diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js
index 9aeebc5c8..c284c0d19 100644
--- a/src/components/auth/ChangeServer.js
+++ b/src/components/auth/ChangeServer.js
@@ -34,7 +34,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class ChangeServer extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
@@ -131,4 +130,4 @@ class ChangeServer extends Component {
   }
 }
 
-export default injectIntl(ChangeServer);
+export default injectIntl(observer(ChangeServer));
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index fe2fe9872..8f70318ed 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -28,7 +28,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class Import extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -166,4 +165,4 @@ class Import extends Component {
   }
 }
 
-export default injectIntl(Import);
+export default injectIntl(observer(Import));
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index dd71c2450..a23af7c6b 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -43,7 +43,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class Invite extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
@@ -198,4 +197,4 @@ class Invite extends Component {
   }
 }
 
-export default injectIntl(Invite);
+export default injectIntl(observer(Invite));
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js
index 5b36b9fc2..2ed429199 100644
--- a/src/components/auth/Locked.js
+++ b/src/components/auth/Locked.js
@@ -48,7 +48,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class Locked extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
@@ -149,4 +148,4 @@ class Locked extends Component {
   }
 }
 
-export default injectIntl(Locked);
+export default injectIntl(observer(Locked));
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 0c327d67e..c1602a047 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -71,8 +71,6 @@ const messages = defineMessages({
   },
 });
 
-@inject('actions')
-@observer
 class Login extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
@@ -215,4 +213,4 @@ class Login extends Component {
   }
 }
 
-export default injectIntl(Login);
+export default injectIntl(inject('actions')(observer(Login)));
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js
index d5bc7fa80..b4d51f43d 100644
--- a/src/components/auth/Password.js
+++ b/src/components/auth/Password.js
@@ -38,7 +38,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class Password extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
@@ -119,4 +118,4 @@ class Password extends Component {
   }
 }
 
-export default injectIntl(Password);
+export default injectIntl(observer(Password));
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js
index 47fe88f43..a24f4e4d5 100644
--- a/src/components/auth/SetupAssistant.js
+++ b/src/components/auth/SetupAssistant.js
@@ -131,8 +131,6 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles)
-@observer
 class SetupAssistant extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -327,4 +325,6 @@ class SetupAssistant extends Component {
   }
 }
 
-export default injectIntl(SetupAssistant);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(SetupAssistant)),
+);
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index 00625a3ac..ac86dcdc3 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -75,8 +75,6 @@ const messages = defineMessages({
   },
 });
 
-@inject('actions')
-@observer
 class Signup extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
@@ -217,4 +215,4 @@ class Signup extends Component {
   }
 }
 
-export default injectIntl(Signup);
+export default injectIntl(inject('actions')(observer(Signup)));
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 809ec67a7..794c78987 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -22,8 +22,6 @@ const messages = defineMessages({
   },
 });
 
-@inject('actions')
-@observer
 class Login extends Component {
   static propTypes = {
     loginRoute: PropTypes.string.isRequired,
@@ -93,4 +91,4 @@ class Login extends Component {
   }
 }
 
-export default injectIntl(Login);
+export default injectIntl(inject('actions')(observer(Login)));
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index a31419a5e..084d93ecd 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -74,8 +74,6 @@ const toggleFullScreen = () => {
   ipcRenderer.send('window.toolbar-double-clicked');
 };
 
-@injectSheet(styles)
-@observer
 class AppLayout extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -208,4 +206,6 @@ class AppLayout extends Component {
   }
 }
 
-export default injectIntl(AppLayout);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(AppLayout)),
+);
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 728613f42..4f67a8719 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -66,8 +66,6 @@ const messages = defineMessages({
   },
 });
 
-@inject('stores', 'actions')
-@observer
 class Sidebar extends Component {
   static propTypes = {
     openSettings: PropTypes.func.isRequired,
@@ -262,4 +260,4 @@ class Sidebar extends Component {
   }
 }
 
-export default injectIntl(Sidebar);
+export default injectIntl(inject('stores', 'actions')(observer(Sidebar)));
diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js
index b9e7eca53..5adb22c84 100644
--- a/src/components/services/content/ConnectionLostBanner.js
+++ b/src/components/services/content/ConnectionLostBanner.js
@@ -68,8 +68,6 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles)
-@observer
 class ConnectionLostBanner extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -103,4 +101,4 @@ class ConnectionLostBanner extends Component {
   }
 }
 
-export default injectIntl(ConnectionLostBanner);
+export default injectIntl(injectSheet(styles)(observer(ConnectionLostBanner)));
diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
index 5c93de80f..d605b3a52 100644
--- a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
+++ b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
@@ -31,8 +31,6 @@ const messages = defineMessages({
   },
 });
 
-@injectSheet(styles)
-@observer
 class WebviewErrorHandler extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
@@ -71,4 +69,6 @@ class WebviewErrorHandler extends Component {
   }
 }
 
-export default injectIntl(WebviewErrorHandler);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(WebviewErrorHandler)),
+);
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js
index f60d4bca6..b4658618e 100644
--- a/src/components/services/content/ServiceDisabled.js
+++ b/src/components/services/content/ServiceDisabled.js
@@ -16,7 +16,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class ServiceDisabled extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
@@ -40,4 +39,4 @@ class ServiceDisabled extends Component {
   }
 }
 
-export default injectIntl(ServiceDisabled);
+export default injectIntl(observer(ServiceDisabled));
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 1ffdd2153..6fc1f1400 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -16,8 +16,6 @@ import SettingsStore from '../../../stores/SettingsStore';
 import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 import { CUSTOM_WEBSITE_RECIPE_ID } from '../../../config';
 
-@inject('stores', 'actions')
-@observer
 class ServiceView extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
@@ -163,4 +161,4 @@ class ServiceView extends Component {
   }
 }
 
-export default ServiceView;
+export default inject('stores', 'actions')(observer(ServiceView));
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index c70494edd..713a0c21d 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -9,7 +9,6 @@ import ServiceModel from '../../../models/Service';
 
 const debug = require('debug')('Ferdi:Services');
 
-@observer
 class ServiceWebview extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
@@ -116,4 +115,4 @@ class ServiceWebview extends Component {
   }
 }
 
-export default ServiceWebview;
+export default observer(ServiceWebview);
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 1edf31bd3..0587b553f 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -44,9 +44,6 @@ const styles = {
   },
 };
 
-@injectSheet(styles)
-@inject('actions')
-@observer
 class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
@@ -197,4 +194,8 @@ class Services extends Component {
   }
 }
 
-export default injectIntl(Services);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(
+    inject('actions')(observer(Services)),
+  ),
+);
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index 3607435b3..1ca5ba415 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -26,7 +26,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class WebviewCrashHandler extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
@@ -81,4 +80,4 @@ class WebviewCrashHandler extends Component {
   }
 }
 
-export default injectIntl(WebviewCrashHandler);
+export default injectIntl(observer(WebviewCrashHandler));
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index 3049b6efa..e01461e5c 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -5,7 +5,6 @@ import { SortableContainer } from 'react-sortable-hoc';
 
 import TabItem from './TabItem';
 
-@observer
 class TabBarSortableList extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -75,4 +74,4 @@ class TabBarSortableList extends Component {
   }
 }
 
-export default SortableContainer(TabBarSortableList);
+export default SortableContainer(observer(TabBarSortableList));
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 14be37153..8e163bce6 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -114,9 +114,6 @@ const styles = {
   },
 };
 
-@injectSheet(styles)
-@inject('stores')
-@observer
 class TabItem extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -402,4 +399,10 @@ class TabItem extends Component {
   }
 }
 
-export default injectIntl(SortableElement(TabItem));
+export default injectIntl(
+  SortableElement(
+    injectSheet(styles, { injectTheme: true })(
+      inject('stores')(observer(TabItem)),
+    ),
+  ),
+);
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index 94d6f33c1..d9e11df41 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -4,7 +4,6 @@ import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 
 import TabBarSortableList from './TabBarSortableList';
 
-@observer
 class TabBar extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -120,4 +119,4 @@ class TabBar extends Component {
   }
 }
 
-export default TabBar;
+export default observer(TabBar);
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js
index e9119a944..de13e95ab 100644
--- a/src/components/settings/SettingsLayout.js
+++ b/src/components/settings/SettingsLayout.js
@@ -16,7 +16,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class SettingsLayout extends Component {
   static propTypes = {
     navigation: PropTypes.element.isRequired,
@@ -78,4 +77,4 @@ class SettingsLayout extends Component {
   }
 }
 
-export default injectIntl(SettingsLayout);
+export default injectIntl(observer(SettingsLayout));
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 6c489e64b..d0c56af05 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -64,7 +64,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
@@ -229,4 +228,4 @@ class AccountDashboard extends Component {
   }
 }
 
-export default injectIntl(AccountDashboard);
+export default injectIntl(observer(AccountDashboard));
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index dbb1365b0..2fdb6e574 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -42,8 +42,6 @@ const messages = defineMessages({
   },
 });
 
-@inject('stores', 'actions')
-@observer
 class SettingsNavigation extends Component {
   static propTypes = {
     stores: PropTypes.shape({
@@ -175,4 +173,4 @@ class SettingsNavigation extends Component {
   }
 }
 
-export default injectIntl(SettingsNavigation);
+export default injectIntl(inject('stores', 'actions')(observer(SettingsNavigation)));
diff --git a/src/components/settings/recipes/RecipeItem.js b/src/components/settings/recipes/RecipeItem.js
index 1e910e6dc..df5b42222 100644
--- a/src/components/settings/recipes/RecipeItem.js
+++ b/src/components/settings/recipes/RecipeItem.js
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react';
 
 import RecipePreviewModel from '../../../models/RecipePreview';
 
-@observer
 class RecipeItem extends Component {
   static propTypes = {
     recipe: PropTypes.instanceOf(RecipePreviewModel).isRequired,
@@ -31,4 +30,4 @@ class RecipeItem extends Component {
   }
 }
 
-export default RecipeItem;
+export default observer(RecipeItem);
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 7ec285431..d9f53d74e 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -105,8 +105,6 @@ const styles = {
   },
 };
 
-@injectSheet(styles)
-@observer
 class RecipesDashboard extends Component {
   static propTypes = {
     recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -247,16 +245,18 @@ class RecipesDashboard extends Component {
                       {intl.formatMessage(messages.nothingFound)}
                     </p>
 
-                    <RecipeItem
-                      key={customWebsiteRecipe.id}
-                      recipe={customWebsiteRecipe}
-                      onClick={() =>
-                        isLoggedIn &&
-                        showAddServiceInterface({
-                          recipeId: customWebsiteRecipe.id,
-                        })
-                      }
-                    />
+                    {customWebsiteRecipe && customWebsiteRecipe.id && (
+                      <RecipeItem
+                        key={customWebsiteRecipe.id}
+                        recipe={customWebsiteRecipe}
+                        onClick={() =>
+                          isLoggedIn &&
+                          showAddServiceInterface({
+                            recipeId: customWebsiteRecipe.id,
+                          })
+                        }
+                      />
+                    )}
                   </div>
                 )}
                 {communityRecipes.map(recipe => (
@@ -295,4 +295,6 @@ class RecipesDashboard extends Component {
   }
 }
 
-export default injectIntl(RecipesDashboard);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(RecipesDashboard)),
+);
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 6b4cc721d..f0e791b87 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -134,7 +134,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class EditServiceForm extends Component {
   static propTypes = {
     recipe: PropTypes.instanceOf(Recipe).isRequired,
@@ -500,4 +499,4 @@ class EditServiceForm extends Component {
   }
 }
 
-export default injectIntl(EditServiceForm);
+export default injectIntl(observer(EditServiceForm));
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js
index 6dd53a102..bcbbca3de 100644
--- a/src/components/settings/services/ServiceError.js
+++ b/src/components/settings/services/ServiceError.js
@@ -25,7 +25,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class ServiceError extends Component {
   render() {
     const { intl } = this.props;
@@ -60,4 +59,4 @@ class ServiceError extends Component {
   }
 }
 
-export default injectIntl(ServiceError);
+export default injectIntl(observer(ServiceError));
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
index d83e5fd56..23250ad09 100644
--- a/src/components/settings/services/ServiceItem.js
+++ b/src/components/settings/services/ServiceItem.js
@@ -24,7 +24,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class ServiceItem extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
@@ -91,4 +90,4 @@ class ServiceItem extends Component {
   }
 }
 
-export default injectIntl(ServiceItem);
+export default injectIntl(observer(ServiceItem));
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index aae6eb855..81c5faa70 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -51,7 +51,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class ServicesDashboard extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -188,4 +187,4 @@ class ServicesDashboard extends Component {
   }
 }
 
-export default injectIntl(ServicesDashboard);
+export default injectIntl(observer(ServicesDashboard));
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 9f51b54d5..d9df9c41c 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -188,7 +188,6 @@ const messages = defineMessages({
 
 const Hr = () => <hr style={{ marginBottom: 20 }} />;
 
-@observer
 class EditSettingsForm extends Component {
   static propTypes = {
     checkForUpdates: PropTypes.func.isRequired,
@@ -847,4 +846,4 @@ class EditSettingsForm extends Component {
   }
 }
 
-export default injectIntl(EditSettingsForm);
+export default injectIntl(observer(EditSettingsForm));
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 38d124266..802284051 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -90,8 +90,6 @@ const styles = {
   },
 };
 
-@injectSheet(styles)
-@observer
 class TeamDashboard extends Component {
   static propTypes = {
     isLoading: PropTypes.bool.isRequired,
@@ -197,4 +195,6 @@ class TeamDashboard extends Component {
   }
 }
 
-export default injectIntl(TeamDashboard);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(TeamDashboard)),
+);
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index 1b8a4f25a..95498d9bb 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -37,7 +37,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class EditUserForm extends Component {
   static propTypes = {
     status: MobxPropTypes.observableArray.isRequired,
@@ -128,4 +127,4 @@ class EditUserForm extends Component {
   }
 }
 
-export default injectIntl(EditUserForm);
+export default injectIntl(observer(EditUserForm));
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,
+);
diff --git a/src/components/util/ErrorBoundary/index.js b/src/components/util/ErrorBoundary/index.js
index cddcd91c2..6a8b126f1 100644
--- a/src/components/util/ErrorBoundary/index.js
+++ b/src/components/util/ErrorBoundary/index.js
@@ -18,7 +18,6 @@ const messages = defineMessages({
   },
 });
 
-@injectSheet(styles)
 class ErrorBoundary extends Component {
   state = {
     hasError: false,
@@ -56,4 +55,6 @@ class ErrorBoundary extends Component {
   }
 }
 
-export default injectIntl(ErrorBoundary);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(ErrorBoundary),
+);