2 files changed, 25 insertions, 28 deletions

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 dcf7a4784..0ba295369 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -51,7 +51,8 @@ const messages = defineMessages({
   },
   customRecipeIntro: {
     id: 'settings.recipes.customService.intro',
-    defaultMessage: 'To add a custom service, copy the service recipe to:',
+    defaultMessage:
+      'To add a custom service, copy the service recipe folder inside:',
   },
   openFolder: {
     id: 'settings.recipes.customService.openFolder',
@@ -104,8 +105,6 @@ const styles = {
   },
 };
 
-@injectSheet(styles)
-@observer
 class RecipesDashboard extends Component {
   static propTypes = {
     recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -236,28 +235,6 @@ class RecipesDashboard extends Component {
                 <H3>{intl.formatMessage(messages.headlineCommunityRecipes)}</H3>
               )}
               <div className="recipes__list">
-                {recipes.length === 0 && recipeFilter !== 'dev' && (
-                  <div className="align-middle settings__empty-state">
-                    <span className="emoji">
-                      <img src="./assets/images/emoji/dontknow.png" alt="" />
-                    </span>
-
-                    <p className="settings__empty-state-text">
-                      {intl.formatMessage(messages.nothingFound)}
-                    </p>
-
-                    <RecipeItem
-                      key={customWebsiteRecipe.id}
-                      recipe={customWebsiteRecipe}
-                      onClick={() =>
-                        isLoggedIn &&
-                        showAddServiceInterface({
-                          recipeId: customWebsiteRecipe.id,
-                        })
-                      }
-                    />
-                  </div>
-                )}
                 {communityRecipes.map(recipe => (
                   <RecipeItem
                     key={recipe.id}
@@ -269,6 +246,25 @@ class RecipesDashboard extends Component {
                   />
                 ))}
               </div>
+              {recipes.length === 0 && recipeFilter !== 'dev' && (
+                <div className="align-middle settings__empty-state">
+                  {customWebsiteRecipe && customWebsiteRecipe.id && (
+                    <RecipeItem
+                      key={customWebsiteRecipe.id}
+                      recipe={customWebsiteRecipe}
+                      onClick={() =>
+                        isLoggedIn &&
+                        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>
@@ -294,4 +290,6 @@ class RecipesDashboard extends Component {
   }
 }
 
-export default injectIntl(RecipesDashboard);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(RecipesDashboard)),
+);