feat(ContributorCard): added link to see examples

dis-moi · Sep 6, 2019 · 39a6a61 · 39a6a61
1 parent 6d5bef1
commit 39a6a61
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 25 deletions.
diff --git a/src/components/organisms/Contributor/ContributorCompact.tsx b/src/components/organisms/Contributor/ContributorCompact.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import Avatar from 'components/atoms/Avatar/Avatar';
 import UserName from 'components/atoms/UserName/UserName';
-import Like from '../../atoms/icons/types/Like';
 import Stat from 'components/atoms/Stat/Stat';
-import StatType from 'components/atoms/Stat/StatType';
 import ContributorButton from './ContributorButton';
 
 const ContributorWrapper = styled.div`

diff --git a/src/components/organisms/Contributor/ContributorLarge.tsx b/src/components/organisms/Contributor/ContributorLarge.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 
+import Button from 'components/atoms/Button';
 import Avatar from 'components/atoms/Avatar/Avatar';
 import AvatarDefault from 'components/atoms/icons/AvatarDefault';
 import UserName from 'components/atoms/UserName/UserName';
@@ -41,6 +42,12 @@ const ContributorIntro = styled.p`
   color: ${props => props.theme.formBorder};
 `;
 
+const ContributionExample = styled(Button)`
+  margin-top: 25px;
+  font-size: 12px;
+  color: ${props => props.theme.activeColor};
+`;
+
 export const Contributor = () => (
   <ContributorCard>
     <ContributorWrapper>
@@ -67,6 +74,8 @@ export const Contributor = () => (
       </ContributorInfos>
     </ContributorWrapper>
 
+    <ContributionExample>Voir un exemple de ses bulles</ContributionExample>
+
     <ContributorIntro>
       Passionné d’infos et s’intox, je vous préviens parfois (mais pas toujours
       ^^) quand vous êtes en train de consulter un hoax, c’est-à-dire un message

diff --git a/src/components/organisms/ContributorCard/Container.ts b/src/components/organisms/ContributorCard/Container.ts
diff --git a/src/components/organisms/ContributorCard/ContributorCard.tsx b/src/components/organisms/ContributorCard/ContributorCard.tsx
@@ -1,18 +1,17 @@
 import React from 'react';
-import Container from './Container';
-import ContributorDescription from './ContributorDescription';
+import styled from 'styled-components';
 import ContributorLarge from '../Contributor/ContributorLarge';
 
+const Container = styled.article`
+  padding: 10px 15px;
+  background-color: #fff;
+  border: 1px solid #dedede;
+  border-radius: 8px;
+`;
+
 export const ContributorNav = () => (
   <Container>
     <ContributorLarge />
-
-    <ContributorDescription>
-      Passionné d’infos et s’intox, je vous préviens parfois (mais pas toujours
-      ^^) quand vous êtes en train de consulter un hoax, c’est-à-dire un message
-      poignant, révoltant ou alarmant… mais faux ! Mes sources : Hoaxbuster,
-      HoaxKiller, Hoaxteam, Secuser.com.
-    </ContributorDescription>
   </Container>
 );
 

diff --git a/src/components/organisms/ContributorCard/ContributorDescription.tsx b/src/components/organisms/ContributorCard/ContributorDescription.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 
-const Container = styled.p`
+const Description = styled.p`
   margin-top: 20px;
   margin-bottom: 0;
   font-size: 15px;
 `;
 
-const PlaceholderContainer = styled(Container)`
+const PlaceholderDescription = styled(Description)`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -19,11 +19,11 @@ interface Props {
 }
 const ContributorDescription = ({ children }: Props) =>
   children ? (
-    <Container>{children}</Container>
+    <Description>{children}</Description>
   ) : (
-    <PlaceholderContainer>
+    <PlaceholderDescription>
       Cet utilisateur n’a pas encore ajouté une description.
-    </PlaceholderContainer>
+    </PlaceholderDescription>
   );
 
 export default ContributorDescription;