feat(ContributorButton): added checkmark when subscribed

dis-moi · Nov 5, 2019 · 43cbd02 · 43cbd02
1 parent a7216cd
commit 43cbd02
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/components/atoms/icons/CheckSmall.tsx b/src/components/atoms/icons/CheckSmall.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default () => (
+  <svg viewBox="0 0 13.266 10.168" width="13.266" height="10.168">
+    <path
+      fill="#404040"
+      d="M13.027 1.404L11.863.24a.827.827 0 00-1.164 0L5.084 5.863 2.568 3.338a.792.792 0 00-.582-.24.792.792 0 00-.582.24L.24 4.502a.827.827 0 000 1.164l3.1 3.1L4.5 9.928a.827.827 0 001.164 0L6.83 8.764l6.2-6.2a.827.827 0 000-1.164z"
+    />
+  </svg>
+);
diff --git a/src/components/organisms/Contributor/ContributorButton.tsx b/src/components/organisms/Contributor/ContributorButton.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import BackgroundButton from 'components/atoms/Button/BackgroundButton/BackgroundButton';
 import BorderButton from 'components/atoms/Button/BorderButton/BorderButton';
+import Check from 'components/atoms/icons/CheckSmall';
 
 const Container = styled.div`
   display: flex;
@@ -54,7 +55,14 @@ const ContributorButton = ({
           onPointerEnter={() => setSubscribedButtonHovered(true)}
           onPointerLeave={() => setSubscribedButtonHovered(false)}
         >
-          {subscribedButtonHovered ? 'Se désabonner' : 'Abonné·e'}
+          {subscribedButtonHovered ? (
+            'Se désabonner'
+          ) : (
+            <>
+              <Check />
+              &nbsp;Abonné
+            </>
+          )}
         </ContributorBorderButton>
       )}
       {!subscribed && (