diff --git a/src/app/profiles/App/Pages/Profiles/NotConnectedPopin.tsx b/src/app/profiles/App/Pages/Profiles/NotConnectedPopin.tsx index 405cd36a4..54e55fdd1 100644 --- a/src/app/profiles/App/Pages/Profiles/NotConnectedPopin.tsx +++ b/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 ( - + 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 - - + + ); }; diff --git a/src/assets/img/contributors/logo-bordeaux.png b/src/assets/img/contributors/logo-bordeaux.png new file mode 100755 index 000000000..56c6f129f Binary files /dev/null and b/src/assets/img/contributors/logo-bordeaux.png differ diff --git a/src/assets/img/contributors/logo-colibri-ecolo.png b/src/assets/img/contributors/logo-colibri-ecolo.png new file mode 100755 index 000000000..e2cf77408 Binary files /dev/null and b/src/assets/img/contributors/logo-colibri-ecolo.png differ diff --git a/src/assets/img/contributors/logo-le-monde.png b/src/assets/img/contributors/logo-le-monde.png new file mode 100755 index 000000000..15923df07 Binary files /dev/null and b/src/assets/img/contributors/logo-le-monde.png differ diff --git a/src/assets/img/contributors/logo-les-inrocks.png b/src/assets/img/contributors/logo-les-inrocks.png new file mode 100755 index 000000000..0dd41118d Binary files /dev/null and b/src/assets/img/contributors/logo-les-inrocks.png differ diff --git a/src/assets/img/contributors/logo-micode.png b/src/assets/img/contributors/logo-micode.png new file mode 100755 index 000000000..f97c5c846 Binary files /dev/null and b/src/assets/img/contributors/logo-micode.png differ diff --git a/src/assets/img/contributors/logo-que-choisir.png b/src/assets/img/contributors/logo-que-choisir.png new file mode 100755 index 000000000..b97fdda76 Binary files /dev/null and b/src/assets/img/contributors/logo-que-choisir.png differ diff --git a/src/components/molecules/Popin/PopinBottomBar.tsx b/src/components/molecules/Popin/PopinBottomBar.tsx index 86115d272..7f82f9156 100644 --- a/src/components/molecules/Popin/PopinBottomBar.tsx +++ b/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( - 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 ( - - En savoir plus sur DisMoi et ses sources - - {contributors - .filter(c => POPULAR_CONTRIBUTORS_IDS.includes(c.id)) - .map(contributor => ( - - onContributorClick(contributor)} - contributor={contributor} - size="small" - /> - - ))} - - - ); -}; +const PopinBottomBar = () => ( + + En savoir plus sur DisMoi{' '} + et ses sources + + + + + + + + + + + + + + + + + + + + + +); export default PopinBottomBar;