7 files changed, 105 insertions, 77 deletions

diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.jsx
index d70f471d5..dea4bb387 100644
--- a/src/components/settings/SettingsLayout.js
+++ b/src/components/settings/SettingsLayout.jsx
@@ -4,8 +4,8 @@ import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import { mdiClose } from '@mdi/js';
+import { Outlet } from 'react-router-dom';
 import ErrorBoundary from '../util/ErrorBoundary';
-import { oneOrManyChildElements } from '../../prop-types';
 import Appear from '../ui/effects/Appear';
 import Icon from '../ui/icon';
 
@@ -19,7 +19,6 @@ const messages = defineMessages({
 class SettingsLayout extends Component {
   static propTypes = {
     navigation: PropTypes.element.isRequired,
-    children: oneOrManyChildElements.isRequired,
     closeSettings: PropTypes.func.isRequired,
   };
 
@@ -44,7 +43,7 @@ class SettingsLayout extends Component {
   }
 
   render() {
-    const { navigation, children, closeSettings } = this.props;
+    const { navigation, closeSettings } = this.props;
 
     const { intl } = this.props;
 
@@ -60,7 +59,8 @@ class SettingsLayout extends Component {
             />
             <div className="settings franz-form">
               {navigation}
-              {children}
+
+              <Outlet />
               <button
                 type="button"
                 className="settings__close"
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.jsx
index ad1cef1e4..bbbe8d888 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.jsx
@@ -2,10 +2,10 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import { inject, observer } from 'mobx-react';
-import { RouterStore } from 'mobx-react-router';
+import { RouterStore } from '@superwf/mobx-react-router';
 
+import { NavLink } from 'react-router-dom';
 import { LOCAL_SERVER, LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../../config';
-import Link from '../../ui/Link';
 import UIStore from '../../../stores/UIStore';
 import SettingsStore from '../../../stores/SettingsStore';
 import UserStore from '../../../stores/UserStore';
@@ -90,70 +90,94 @@ class SettingsNavigation extends Component {
 
     return (
       <div className="settings-navigation">
-        <Link
+        <NavLink
           to="/settings/recipes"
-          className="settings-navigation__link"
-          activeClassName="is-active"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
         >
           {intl.formatMessage(messages.availableServices)}
-        </Link>
-        <Link
+        </NavLink>
+        <NavLink
           to="/settings/services"
-          className="settings-navigation__link"
-          activeClassName="is-active"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
         >
           {intl.formatMessage(messages.yourServices)}{' '}
           <span className="badge">{serviceCount}</span>
-        </Link>
-        <Link
+        </NavLink>
+        <NavLink
           to="/settings/workspaces"
-          className="settings-navigation__link"
-          activeClassName="is-active"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
         >
           {intl.formatMessage(messages.yourWorkspaces)}{' '}
           <span className="badge">{workspaceCount}</span>
-        </Link>
+        </NavLink>
         {!isUsingWithoutAccount && (
-          <Link
+          <NavLink
             to="/settings/user"
-            className="settings-navigation__link"
-            activeClassName="is-active"
+            className={({ isActive }) =>
+              isActive
+                ? 'settings-navigation__link is-active'
+                : 'settings-navigation__link'
+            }
           >
             {intl.formatMessage(messages.account)}
-          </Link>
+          </NavLink>
         )}
         {isUsingFranzServer && (
-          <Link
+          <NavLink
             to="/settings/team"
-            className="settings-navigation__link"
-            activeClassName="is-active"
+            className={({ isActive }) =>
+              isActive
+                ? 'settings-navigation__link is-active'
+                : 'settings-navigation__link'
+            }
           >
             {intl.formatMessage(messages.team)}
-          </Link>
+          </NavLink>
         )}
-        <Link
+        <NavLink
           to="/settings/app"
-          className="settings-navigation__link"
-          activeClassName="is-active"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
         >
           {intl.formatMessage(globalMessages.settings)}
-          {stores.settings.app.automaticUpdates && (stores.ui.showServicesUpdatedInfoBar ||
-            (stores.app.updateStatus === stores.app.updateStatusTypes.AVAILABLE ||
-              stores.app.updateStatus === stores.app.updateStatusTypes.DOWNLOADED)) && (
-            <span className="update-available">•</span>
-          )}
-        </Link>
-        <Link
+          {stores.settings.app.automaticUpdates &&
+            (stores.ui.showServicesUpdatedInfoBar ||
+              stores.app.updateStatus ===
+                stores.app.updateStatusTypes.AVAILABLE ||
+              stores.app.updateStatus ===
+                stores.app.updateStatusTypes.DOWNLOADED) && (
+              <span className="update-available">•</span>
+            )}
+        </NavLink>
+        <NavLink
           to="/settings/support"
-          className="settings-navigation__link"
-          activeClassName="is-active"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
         >
           {intl.formatMessage(messages.supportFerdium)}
-        </Link>
+        </NavLink>
         <span className="settings-navigation__expander" />
         <button
           type="button"
-          to='/auth/logout'
+          to="/auth/logout"
           className="settings-navigation__link"
           onClick={this.handleLogout.bind(this)}
         >
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.jsx
index c05144117..589b97ecd 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.jsx
@@ -2,7 +2,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router';
+import { NavLink } from 'react-router-dom';
 
 import injectSheet from 'react-jss';
 
@@ -179,30 +179,33 @@ class RecipesDashboard extends Component {
             throttle
           />
           <div className="recipes__navigation">
-            <Link
+            <NavLink
               to="/settings/recipes"
-              className="badge"
-              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              className={() =>
+                recipeFilter === 'featured' ? 'badge badge--primary' : 'badge'
+              }
               onClick={() => resetSearch()}
             >
               {intl.formatMessage(messages.ferdiumPicksRecipes)}
-            </Link>
-            <Link
+            </NavLink>
+            <NavLink
               to="/settings/recipes/all"
-              className="badge"
-              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              className={({ isActive }) =>
+                isActive && recipeFilter === 'all' ? 'badge badge--primary' : 'badge'
+              }
               onClick={() => resetSearch()}
             >
               {intl.formatMessage(messages.allRecipes)}
-            </Link>
-            <Link
+            </NavLink>
+            <NavLink
               to="/settings/recipes/dev"
-              className="badge"
-              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              className={({ isActive }) =>
+                isActive && !searchNeedle ? 'badge badge--primary' : 'badge'
+              }
               onClick={() => resetSearch()}
             >
               {intl.formatMessage(messages.customRecipes)}
-            </Link>
+            </NavLink>
             <a
               href={FERDIUM_SERVICE_REQUEST}
               target="_blank"
@@ -257,24 +260,26 @@ class RecipesDashboard extends Component {
                   />
                 ))}
               </div>
-              {hasLoadedRecipes && recipes.length === 0 && recipeFilter !== 'dev' && (
-                <div className="align-middle settings__empty-state">
-                  {customWebsiteRecipe && customWebsiteRecipe.id && (
-                    <RecipeItem
-                      key={customWebsiteRecipe.id}
-                      recipe={customWebsiteRecipe}
-                      onClick={() =>
-                        showAddServiceInterface({
-                          recipeId: customWebsiteRecipe.id,
-                        })
-                      }
-                    />
-                  )}
-                  <p className="settings__empty-state-text">
-                    {intl.formatMessage(messages.nothingFound)}
-                  </p>
-                </div>
-              )}
+              {hasLoadedRecipes &&
+                recipes.length === 0 &&
+                recipeFilter !== 'dev' && (
+                  <div className="align-middle settings__empty-state">
+                    {customWebsiteRecipe && customWebsiteRecipe.id && (
+                      <RecipeItem
+                        key={customWebsiteRecipe.id}
+                        recipe={customWebsiteRecipe}
+                        onClick={() =>
+                          showAddServiceInterface({
+                            recipeId: customWebsiteRecipe.id,
+                          })
+                        }
+                      />
+                    )}
+                    <p className="settings__empty-state-text">
+                      {intl.formatMessage(messages.nothingFound)}
+                    </p>
+                  </div>
+                )}
               {recipeFilter === 'dev' && devRecipes.length > 0 && (
                 <div className={classes.devRecipeList}>
                   <H3>{intl.formatMessage(messages.headlineDevRecipes)}</H3>
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index f69d86726..73136529a 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
 import normalizeUrl from 'normalize-url';
 
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js
index 991817175..fdcdb54c9 100644
--- a/src/components/settings/services/ServiceError.js
+++ b/src/components/settings/services/ServiceError.js
@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { observer } from 'mobx-react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import Infobox from '../../ui/Infobox';
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index c5bb1433c..ac1c30ecb 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import SearchInput from '../../ui/SearchInput';
@@ -27,8 +27,7 @@ const messages = defineMessages({
   },
   noServiceFound: {
     id: 'settings.services.nothingFound',
-    defaultMessage:
-      'Sorry, but no service matched your search term.',
+    defaultMessage: 'Sorry, but no service matched your search term.',
   },
   discoverServices: {
     id: 'settings.services.discoverServices',
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index 436a6b76b..c2773a47d 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -2,7 +2,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import Input from '../../ui/input/index';
 import Form from '../../../lib/Form';