feat(BrowserExtensionPage): New design and video

app/API/matomo.js

@@ -31,6 +31,7 @@ export const pushEvent = (context, action, name, value) => {
   } catch (e) {
     // Ignore errors
   }
+  return true
 }
 
 /**
@@ -41,5 +42,5 @@ export const pushEvent = (context, action, name, value) => {
  * @param {string} name The name of the link / button (eg. signin, register...)
  */
 export const registerClick = (context, type, name) => {
-  pushEvent(context, 'Click', `${type}-${name}`)
+  return pushEvent(context, 'Click', `${type}-${name}`)
 }

app/components/Pages/BrowserExtensionsPage.jsx

@@ -2,86 +2,110 @@ import React from 'react'
 import { withNamespaces, Trans } from 'react-i18next'
 import { Link } from 'react-router'
 import ReactPlayer from 'react-player'
-import Icon from '../Utils/Icon'
+import styled from 'styled-components'
+import { Flex, Box } from '@rebass/grid'
+import { PlusCircle } from 'styled-icons/boxicons-solid/PlusCircle'
+
+import { registerClick } from '../../API/matomo'
+import Button from '../Utils/Button'
 import ExternalLinkNewTab from '../Utils/ExternalLinkNewTab'
+
 import chromeLogo from '../../assets/browsers/chrome.png'
 import firefoxLogo from '../../assets/browsers/firefox.png'
 import ieLogo from '../../assets/browsers/internet_explorer.png'
+import demoExtensionVideo from '../../assets/demos/demo-extension.mp4'
+
+const PresentationBox = styled(Box)`
+  background: white;
+  padding: 2.5em 2em;
+  border-radius: 0.25em;
+  box-shadow: -1px 7px 14px #9c9c9c;
+  flex-basis: 475px;
+`
+
+const MainContainer = styled(Flex)`
+  max-width: 1400px;
+`
+
+const Presentation = ({ t }) => (
+  <p>
+    {t('description')}{' '}
+    <Trans i18nKey="moreInfo">
+      [Is]
+      <ExternalLinkNewTab href="https://github.com/CaptainFact">
+        open-source
+      </ExternalLinkNewTab>
+      [Respect]<Link to="/help/extension">[Privacy]</Link>.
+    </Trans>
+  </p>
+)
+
+const BrowserExtensionInstall = ({ label, img, url, name, disabled = false }) => (
+  <Flex mb="0.75em" flexWrap="wrap" justifyContent={['center', 'flex-start']}>
+    <Box width="50px" flexBasis="50px" mr={['1em', '1.5em']}>
+      <img src={img} alt={name} />
+    </Box>
+    <Box>
+      <ExternalLinkNewTab
+        href={url}
+        onClick={() => registerClick('ExtensionPage', 'Button', `Install-${name}`)}
+      >
+        <Button style={{ width: '235px' }} className="is-large" disabled={disabled}>
+          <PlusCircle size="1em" />
+          &nbsp;&nbsp;{label}
+        </Button>
+      </ExternalLinkNewTab>
+    </Box>
+  </Flex>
+)
 
 export const BrowserExtensionsPage = withNamespaces('extension')(({ t }) => (
   <div className="browser-extension-page">
-    <section className="section">
-      <div className="columns">
-        <BrowserExtension
-          browser="Google Chrome"
-          image={chromeLogo}
-          buttonLabel={`${t('addTo')} Chrome`}
-          onClick={chromeInstall}
+    <section className="hero is-gradient-primary is-medium is-bold">
+      <section className="hero-body">
+        <div className="container">
+          <h1 className="title is-2">{t('title')}</h1>
+          <h2 className="subtitle is-3">{t('subtitle')}</h2>
+        </div>
+      </section>
+    </section>
+    <MainContainer
+      mt={['-3.5em', '-8em']}
+      p="1em"
+      flexWrap="wrap"
+      mx="auto"
+      alignItems="center"
+      justifyContent="space-around"
+    >
+      <PresentationBox width={[1, 1, 0.4]} mr={['0em', '5em']} mb="2em" fontSize={4}>
+        <Presentation t={t} />
+        <br />
+        <BrowserExtensionInstall
+          img={chromeLogo}
+          label={`${t('addTo')} Chrome`}
           url="https://chrome.google.com/webstore/detail/fnnhlmbnlbgomamcolcpgncflofhjckm"
+          name="Chrome"
         />
-        <BrowserExtension
-          browser="Mozilla Firefox"
-          image={firefoxLogo}
-          buttonLabel={`${t('addTo')} Firefox`}
+        <BrowserExtensionInstall
+          img={firefoxLogo}
           url="https://addons.mozilla.org/addon/captainfact/"
+          label={`${t('addTo')} Firefox`}
+          name="Firefox"
         />
-        <BrowserExtension
-          browser="Internet Explorer"
-          image={ieLogo}
-          buttonLabel="Just kidding"
-          disabled
-          url="https://www.mozilla.org/fr/firefox/"
+        <BrowserExtensionInstall img={ieLogo} label="Just kidding" name="IE" disabled />
+      </PresentationBox>
+      <Box width={[1, 1, 0.4]} style={{ flexGrow: 1 }}>
+        <ReactPlayer
+          controls
+          width="600px"
+          height="338px"
+          className="video"
+          muted
+          playing
+          loop
+          url={demoExtensionVideo}
         />
-      </div>
-    </section>
-    <section className="section content has-text-centered box">
-      <h2>
-        {t('description')}
-        <br />
-        <br />
-        <Trans i18nKey="moreInfo">
-          [Is]
-          <ExternalLinkNewTab href="https://github.com/CaptainFact/captain-fact-extension">
-            open-source
-          </ExternalLinkNewTab>
-          [Respect]<Link to="/help/extension">[Privacy]</Link>.
-        </Trans>
-      </h2>
-    </section>
-    <section className="has-text-centered section">
-      <ReactPlayer controls className="video" url="https://youtu.be/4-_nnwgqw9c" />
-    </section>
+      </Box>
+    </MainContainer>
   </div>
 ))
-
-const BrowserExtension = ({
-  browser,
-  image,
-  buttonLabel,
-  url,
-  onClick,
-  disabled = false
-}) => (
-  <div className="column">
-    <ExternalLinkNewTab href={url} onClick={onClick} disabled={disabled}>
-      <figure className="image is-128x128">
-        <img src={image} alt={browser} />
-      </figure>
-      <span className="button is-large is-info is-inverted" disabled={disabled}>
-        <Icon name="plus" />
-        <span>{buttonLabel}</span>
-      </span>
-    </ExternalLinkNewTab>
-  </div>
-)
-
-function chromeInstall(e) {
-  if (typeof chrome !== 'undefined') {
-    // eslint-disable-next-line no-undef
-    chrome.webstore.install(
-      'https://chrome.google.com/webstore/detail/fnnhlmbnlbgomamcolcpgncflofhjckm'
-    )
-    e.preventDefault()
-    return false
-  }
-}

app/i18n/en/extension.js

@@ -1,4 +1,6 @@
 export default {
+  title: 'The browser extension',
+  subtitle: 'To fact-check YouTube',
   description:
     "The web extension injects CaptainFact's data directly on the content you're watching.",
   moreInfo: 'It is 100% <1>open-source</1> and <3>respects your privacy</3>.',

app/i18n/fr/extension.js

@@ -1,4 +1,6 @@
 export default {
+  title: "L'extension navigateur",
+  subtitle: 'Pour vérifier les vidéos Youtube',
   description:
     "L'extension pour navigateur permet d'incruster les informations fournies sur CaptainFact directement sur le contenu que vous regardez.",
   moreInfo: 'Elle est 100 % <1>open-source</1> et <3>respecte votre vie privée</3>.',

app/styles/_components/Pages/browser_extensions.sass

@@ -1,7 +1,13 @@
 .browser-extension-page
-  padding: 1em
-  .columns
-    flex-wrap: wrap
+  background: whitesmoke
+  min-height: 100vh
+  .hero
+    .title, .subtitle
+      color: $white-bis
+    .hero-body
+      padding-top: 6rem
+      +mobile
+        padding-top: 3rem
   .video, .image
     margin: 0 auto
     max-width: 100%

app/styles/theme.js

@@ -1,5 +1,6 @@
 const theme = {
   breakpoints: ['768px', '1024px', '1216px', '1408px'],
+  fontSizes: ['3rem', '2.5rem', '1.8rem', '1.5rem', '1.25rem', '1rem', '0.75rem'],
   colors: {
     green: '#39b714',
     red: '#e0454e',