From eec1c53f8a08a08d455cb0be98f90484ef123169 Mon Sep 17 00:00:00 2001
From: newick <erick@entre-quote.com>
Date: Fri, 4 Oct 2019 15:40:17 +0200
Subject: [PATCH] fix(suggestions): add no suggestions message

---
 .../SuggestionsScreen/Suggestions.stories.tsx |  7 +++++++
 .../SuggestionsScreen/SuggestionsScreen.tsx   | 20 ++++++++++++-------
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/app/options/App/Settings/SuggestionsScreen/Suggestions.stories.tsx b/src/app/options/App/Settings/SuggestionsScreen/Suggestions.stories.tsx
index d6c653793..874b425e6 100644
--- a/src/app/options/App/Settings/SuggestionsScreen/Suggestions.stories.tsx
+++ b/src/app/options/App/Settings/SuggestionsScreen/Suggestions.stories.tsx
@@ -17,4 +17,11 @@ storiesOf('screens/SuggestionsScreen', module)
       subscribe={() => action('subscribe')}
       unsubscribe={() => action('unsubscribe')}
     />
+  ))
+  .add('no suggestions', () => (
+    <SuggestionsScreen
+      suggestions={[]}
+      subscribe={() => action('subscribe')}
+      unsubscribe={() => action('unsubscribe')}
+    />
   ));
diff --git a/src/app/options/App/Settings/SuggestionsScreen/SuggestionsScreen.tsx b/src/app/options/App/Settings/SuggestionsScreen/SuggestionsScreen.tsx
index 7b9ea3097..5b862d9a1 100644
--- a/src/app/options/App/Settings/SuggestionsScreen/SuggestionsScreen.tsx
+++ b/src/app/options/App/Settings/SuggestionsScreen/SuggestionsScreen.tsx
@@ -3,17 +3,19 @@ import styled from 'styled-components';
 import { StatefulContributor } from 'app/lmem/contributor';
 import ContributorLarge from 'components/organisms/Contributor/ContributorLarge';
 
-const ContributorsWidth = styled.section`
-  padding-bottom: 250px;
-`;
-
-const ContributorsList = styled.div`
+const ContributorsList = styled.section`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   grid-column-gap: 40px;
   grid-row-gap: 40px;
 `;
 
+const ContributorsListEmpty = styled.p`
+  text-align: center;
+  font-size: 18px;
+  color: ${props => props.theme.primaryColor};
+`;
+
 export interface SuggestionsScreenProps {
   suggestions: StatefulContributor[];
   subscribe: (contributor: StatefulContributor) => () => void;
@@ -30,7 +32,7 @@ const SuggestionsScreen = ({
   highlightExampleLink
 }: SuggestionsScreenProps) => (
   <>
-    <ContributorsWidth>
+    {suggestions.length > 0 ? (
       <ContributorsList>
         {suggestions.map(contributor => (
           <ContributorLarge
@@ -43,7 +45,11 @@ const SuggestionsScreen = ({
           />
         ))}
       </ContributorsList>
-    </ContributorsWidth>
+    ) : (
+      <ContributorsListEmpty>
+        Pas de suggestions pour le moment.
+      </ContributorsListEmpty>
+    )}
   </>
 );