Merge pull request #84 from CaptainFact/fix/misc

*  Update current user when showing own profile (displayed user)
* Replace Gitter by Discord in `/help/contact`
* Fix a bug with user's deleted history actions 
* Use a logout icon instead of text

![selection_253](https://user-images.githubusercontent.com/1556356/36888602-4a85d972-1e4a-11e8-8908-602dcd7cc000.png)

* Add description and styles to browser extension page 

![selection_252](https://user-images.githubusercontent.com/1556356/36888524-f568dd4a-1e49-11e8-9384-ec6624d31f02.png)

.travis.yml

@@ -1,6 +1,5 @@
 stages:
   - name: test
-    if: NOT branch IN (master, staging)
   - name: deploy
     if: branch IN (master, staging) OR tag =~ ^v\d+
 
@@ -11,7 +10,7 @@ jobs:
       node_js: [node]
       cache: {directories: [node_modules]}
       script:
-        - npm test
+        - npm run coverage && cat ./coverage/lcov.info | coveralls
     - stage: deploy
       language: generic
       sudo: required
@@ -20,7 +19,6 @@ jobs:
         - CF_FRONTEND_IMAGE=captainfact/frontend:$TRAVIS_BRANCH
       script:
         - docker build --build-arg BUILD_ENV=$TRAVIS_BRANCH -t $CF_FRONTEND_IMAGE . &&
-          docker run --rm -it $CF_FRONTEND_IMAGE test &&
           if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then
               docker login -u="$DOCKER_USERNAME" -p="$DOCKER_PASSWORD";
               echo "Pushing $CF_FRONTEND_IMAGE";

README.md

@@ -1,6 +1,8 @@
 <p align="center"><img src="app/assets/assets/img/logo.png" height="100"/></p>
 <h1 align="center"><a href="https://captainfact.io">CaptainFact.io</a></h1>
-<p align="center"><a href="https://gitter.im/CaptainFact"><img src="https://badges.gitter.im/Join%20Chat.svg" alt="Join the chat at https://gitter.im/CaptainFact"/></a></p>
+<p align="center"><a href="https://discord.gg/2Qd7hMz" title="Discord"><img src="https://discordapp.com/api/guilds/416782744748687361/widget.png" alt="Discord"></a>
+<a href="https://twitter.com/CaptainFact_io" title="Twitter"><img src="https://img.shields.io/twitter/follow/CaptainFact_io.svg?style=social&label=Follow"></a>
+<a href="./LICENSE"><img src="https://img.shields.io/github/license/CaptainFact/captain-fact-frontend.svg" alt="AGPL3"></a></p>
 <hr/>
 <p align="center">Master: <a href="https://travis-ci.org/CaptainFact/captain-fact-frontend"><img src="https://travis-ci.org/CaptainFact/captain-fact-frontend.svg?branch=travis-configuration" alt="Build Status" /></a> &nbsp;&nbsp;
 Staging: <a href="https://travis-ci.org/CaptainFact/captain-fact-frontend"><img src="https://travis-ci.org/CaptainFact/captain-fact-frontend.svg?branch=staging" alt="Build Status" /></a></p>

app/API/http_api.js

@@ -1,6 +1,6 @@
 import "isomorphic-fetch"
 import trimRight from 'voca/trim_right'
-import fetch from 'isomorphic-fetch'
+import 'isomorphic-fetch'
 
 import { SocketApi } from "./socket_api"
 import { HTTP_API_URL } from "../config"

app/assets/assets/help/en/contact.md

@@ -1,5 +1,5 @@
 You can reach us in English or French:
-  * [Gitter (chat)](https://gitter.im/CaptainFact)
+  * [Discord](https://discord.gg/2Qd7hMz)
   * [Mail](mailto:contact@captainfact.io)
   * [Facebook](https://www.facebook.com/CaptainFact.io)
   * [Twitter](https://twitter.com/CaptainFact_io)

app/assets/assets/help/fr/contact.md

@@ -1,5 +1,5 @@
 Vous pouvez nous contacter en Anglais ou en Français via:
-  * [Gitter (chat)](https://gitter.im/CaptainFact)
+  * [Discord](https://discord.gg/2Qd7hMz)
   * [Mail](mailto:contact@captainfact.io)
   * [Facebook](https://www.facebook.com/CaptainFact.io)
   * [Twitter](https://twitter.com/CaptainFact_io)

app/components/App/Sidebar.jsx

@@ -5,11 +5,8 @@ import { translate } from 'react-i18next'
 import classNames from 'classnames'
 
 import { Icon } from "../Utils"
-import {
-  MOBILE_WIDTH_THRESHOLD,
-  USER_PICTURE_SMALL,
-  MODERATION_REPUTATION_REQUIRED
-} from "../../constants"
+import { MOBILE_WIDTH_THRESHOLD, USER_PICTURE_SMALL } from '../../constants'
+import { MODERATION_REPUTATION_REQUIRED } from "../../constants"
 import { LoadingFrame } from '../Utils/LoadingFrame'
 import ReputationGuard from '../Utils/ReputationGuard'
 import LanguageSelector from './LanguageSelector'
@@ -59,7 +56,7 @@ export default class Sidebar extends React.PureComponent {
     const baseLink = `/u/${username}`
     return (
       <div className="user-section">
-        <nav className="level user-quicklinks">
+        <nav className="level user-quicklinks is-mobile">
           <div className="level-left menu-list">
             <this.MenuLink to={baseLink} className="my-profile-link" onlyActiveOnIndex={true}>
               <div className="current-user-link">
@@ -72,7 +69,10 @@ export default class Sidebar extends React.PureComponent {
             </this.MenuLink>
           </div>
           <div className="level-right">
-            <a className="button" onClick={() => this.props.logout()}>Logout</a>
+            <a className="button" title={this.props.t('menu.logout')}
+               onClick={() => this.props.logout()}>
+              <Icon name="sign-out"/>
+            </a>
           </div>
         </nav>
         <ul className="menu-list user-links">
@@ -166,6 +166,6 @@ export default class Sidebar extends React.PureComponent {
   }
 
   usernameFontSize() {
-    return `${1.5 - this.props.CurrentUser.username.length / 20}em`
+    return `${1.5 - this.props.CurrentUser.username.length / 38}em`
   }
 }

app/components/Pages/BrowserExtensionsPage.jsx

@@ -1,44 +1,56 @@
 import React from "react"
-import { translate } from 'react-i18next'
+import { translate, Trans } from 'react-i18next'
+import { Link } from 'react-router'
 import classNames from 'classnames'
+import ReactPlayer from 'react-player'
+import Icon from '../Utils/Icon'
 
 
-export const BrowserExtensionsPage = translate('main')(({t}) => (
+export const BrowserExtensionsPage = translate('extension')(({t}) => (
   <div className="browser-extension-page">
-    <section className="hero is-info">
-      <div className="hero-body">
-        <div className="container">
-          <h1 className="title is-1">{ t('menu.extension') }</h1>
-        </div>
-      </div>
-    </section>
     <section className="section">
       <div className="container">
         <div className="columns">
           <BrowserExtension browser="Google Chrome" image="/assets/img/chrome.png"
-                            buttonLabel="Add to Chrome"
+                            buttonLabel={`${t('addTo')} Chrome`}
                             onClick={chromeInstall}
                             url="https://chrome.google.com/webstore/detail/fnnhlmbnlbgomamcolcpgncflofhjckm"/>
           <BrowserExtension browser="Mozilla Firefox" image="/assets/img/firefox.png"
-                            buttonLabel="Add to Firefox"
+                            buttonLabel={`${t('addTo')} Firefox`}
                             url="https://addons.mozilla.org/addon/captainfact/"/>
           <BrowserExtension browser="Internet Explorer" image="/assets/img/internet_explorer.png"
                             buttonLabel="Just kidding" disabled={true}
                             url="https://www.mozilla.org/fr/firefox/"/>
         </div>
       </div>
     </section>
+    <section className="container section content has-text-centered box">
+      <h2>
+        {t('description')}
+        <br/><br/>
+        <Trans i18nKey="moreInfo">
+          [Is]<a target="_blank" href="https://github.com/CaptainFact/captain-fact-extension">open-source</a>
+          [Respect]<Link to="/help/extension">[Privacy]</Link>.
+        </Trans>
+      </h2>
+    </section>
+    <section className="has-text-centered container section">
+      <ReactPlayer controls={true}
+                   className="video"
+                   url="https://youtu.be/k4L0fvwsBg0"/>
+    </section>
   </div>
 ))
 
 const BrowserExtension = ({browser, image, buttonLabel, url, onClick, disabled=false}) => (
   <div className="column">
     <a href={url} onClick={onClick} target="_BLANK" className={classNames({'is-disabled': disabled})}>
-      <figure className="image is-128x128" style={{margin: '0 auto'}}>
+      <figure className="image is-128x128">
         <img src={image} alt={browser}/>
       </figure>
-      <span className={"button is-large" + (disabled ? " is-disabled" : "")} style={{display: "flex"}}>
-        {buttonLabel}
+      <span className={classNames('button is-large is-info is-inverted', {"is-disabled": disabled})}>
+        <Icon name="plus"/>
+        <span>{buttonLabel}</span>
       </span>
     </a>
   </div>

app/components/Users/DeleteUserModal.jsx

@@ -13,13 +13,22 @@ const DELETE_FORM = 'deleteAccount'
 class DeleteForm extends React.PureComponent {
   render() {
     return (
-      <div>
+      <div className="delete-account-form">
         <h2 className="title is-2 has-text-centered">
           <Icon size="large" name="exclamation-triangle"/>
           This action is irreversible.
         </h2>
-        <br/>
-        Type your username below to confirm the deletion :
+        <hr/>
+        <h4 className="title is-4">Deleting your account will...</h4>
+        <ul>
+          <li>Delete all your votes</li>
+          <li>Delete all your comments</li>
+          <li>Delete all your flags</li>
+          <li>Delete all your personal data (email, username...etc)</li>
+          <li>Anonymize your actions history</li>
+        </ul>
+        <hr/>
+        <h5 className="title is-5">Type your username below to confirm the deletion :</h5>
         <Field component="input" className="input" name="usernameConfirm"/>
       </div>
     )
@@ -32,13 +41,13 @@ const valueSelector = formValueSelector(DELETE_FORM)
 @connect(state => ({
   isValid: valueSelector(state, 'usernameConfirm') === state.CurrentUser.data.username
 }))
-@translate('main')
+@translate(['main', 'user'])
 export default class DeleteUserModal extends React.PureComponent {
   render() {
     const { t, isValid, ...otherProps } = this.props
     return (
       <ModalFormContainer
-        message="This action is irreversible. All your data (comments, votes...etc) will be deleted."
+        title={t('user:deleteAccount')}
         FormComponent={DeleteForm}
         confirmIcon="trash-o"
         confirmType="danger"