fix(NotConnectedPopin): adds images for selected contributors

src/app/profiles/App/Pages/Profiles/NotConnectedPopin.tsx

@@ -5,12 +5,18 @@ import Popin, {
   PopinState
 } from 'components/molecules/Popin/Popin';
 import PopinParagraph from 'components/molecules/Popin/PopinParagraph';
-import { BackgroundButton, ExternalLink } from 'components/atoms';
+import { BackgroundButton, Box, ExternalLink } from 'components/atoms';
 import { Contributor, StatefulContributor } from 'app/lmem/contributor';
 import PopinBottomBar from 'components/molecules/Popin/PopinBottomBar';
 import PopinSmallText from 'components/molecules/Popin/PopinSmallText';
 import { WEBSITE_DOMAIN } from 'app/lmem';
 
+const PopinLarge = styled(Popin)`
+  ${Box} {
+    max-width: 720px;
+  }
+`;
+
 const Text = styled(PopinParagraph)`
   text-align: center;
 `;
@@ -37,7 +43,6 @@ const NotConnectedPopin = ({
   setOpened,
   contributor,
   addToBrowser,
-  contributors,
   onContributorClick
 }: NotConnectedPopinProps) => {
   const handleContributorClicked = (contributor: Contributor) => {
@@ -46,7 +51,7 @@ const NotConnectedPopin = ({
   };
 
   return (
-    <Popin opened={opened} setOpened={setOpened}>
+    <PopinLarge opened={opened} setOpened={setOpened}>
       <Text>
         Pour voir les contributions {contributor && `de ${contributor.name}`},
         veuillez d’abord ajouter Dismoi à votre navigateur.
@@ -61,11 +66,8 @@ const NotConnectedPopin = ({
           respecte votre vie privée
         </Link>
       </PopinSmallText>
-      <PopinBottomBar
-        contributors={contributors}
-        onContributorClick={handleContributorClicked}
-      />
-    </Popin>
+      <PopinBottomBar />
+    </PopinLarge>
   );
 };
 

src/components/molecules/Popin/PopinBottomBar.tsx

@@ -1,14 +1,31 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Link } from 'components/atoms';
-import { Contributor, StatefulContributor } from 'app/lmem/contributor';
-import ContributorListItem from 'components/atoms/ContributorListItem';
-import InteractiveAvatar from '../InteractiveAvatar';
-import { asArray } from 'app/utils/env';
+import { ExternalLink } from 'components/atoms';
+import { WEBSITE_DOMAIN } from '../../../app/lmem';
+// eslint-disable-next-line
+// @ts-ignore
+import LogoBordeaux from 'assets/img/contributors/logo-bordeaux.png';
+// eslint-disable-next-line
+// @ts-ignore
+import LogoColibri from 'assets/img/contributors/logo-colibri-ecolo.png';
+// eslint-disable-next-line
+// @ts-ignore
+import LogoLeMonde from 'assets/img/contributors/logo-le-monde.png';
+// eslint-disable-next-line
+// @ts-ignore
+import LogoLesInrocks from 'assets/img/contributors/logo-les-inrocks.png';
+// eslint-disable-next-line
+// @ts-ignore
+import LogoMicode from 'assets/img/contributors/logo-micode.png';
+// eslint-disable-next-line
+// @ts-ignore
+import LogoQueChoisir from 'assets/img/contributors/logo-que-choisir.png';
 
-const POPULAR_CONTRIBUTORS_IDS = asArray<number>(
-  process.env.POPULAR_CONTRIBUTORS_IDS
-);
+const Link = styled(ExternalLink)`
+  color: ${props => props.theme.text};
+  font-weight: normal;
+  text-decoration: underline;
+`;
 
 const PopinBottomBarContainer = styled.div`
   width: 100%;
@@ -30,37 +47,40 @@ const ContributorList = styled.ul`
   list-style-type: none;
 `;
 
-interface PopinBottomBarProps {
-  contributors: StatefulContributor[];
-  onContributorClick: (contributor: Contributor) => void;
-}
+const ContributorItem = styled.li`
+  width: 60px;
+  height: 60px;
 
-const PopinBottomBar = ({
-  contributors,
-  onContributorClick
-}: PopinBottomBarProps) => {
-  if (!contributors) {
-    return null;
+  &:not(:first-child) {
+    margin-left: 16px;
   }
+`;
 
-  return (
-    <PopinBottomBarContainer>
-      <Link to="/sources">En savoir plus</Link> sur DisMoi et ses sources
-      <ContributorList>
-        {contributors
-          .filter(c => POPULAR_CONTRIBUTORS_IDS.includes(c.id))
-          .map(contributor => (
-            <ContributorListItem key={`contributorListItem[${contributor.id}]`}>
-              <InteractiveAvatar
-                onClick={() => onContributorClick(contributor)}
-                contributor={contributor}
-                size="small"
-              />
-            </ContributorListItem>
-          ))}
-      </ContributorList>
-    </PopinBottomBarContainer>
-  );
-};
+const PopinBottomBar = () => (
+  <PopinBottomBarContainer>
+    En savoir plus sur <Link href={`https://${WEBSITE_DOMAIN}/`}>DisMoi</Link>{' '}
+    et ses sources
+    <ContributorList>
+      <ContributorItem>
+        <img src={LogoQueChoisir} alt="" />
+      </ContributorItem>
+      <ContributorItem>
+        <img src={LogoColibri} alt="" />
+      </ContributorItem>
+      <ContributorItem>
+        <img src={LogoLeMonde} alt="" />
+      </ContributorItem>
+      <ContributorItem>
+        <img src={LogoBordeaux} alt="" />
+      </ContributorItem>
+      <ContributorItem>
+        <img src={LogoLesInrocks} alt="" />
+      </ContributorItem>
+      <ContributorItem>
+        <img src={LogoMicode} alt="" />
+      </ContributorItem>
+    </ContributorList>
+  </PopinBottomBarContainer>
+);
 
 export default PopinBottomBar;