fix(suggestions): add no suggestions message

dis-moi · Oct 4, 2019 · eec1c53 · eec1c53
1 parent ff5c40a
commit eec1c53
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git 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
@@ -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>
+    )}
   </>
 );