integration of login page + added webpack dashboard plugin

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "mockapi": "node jsonserver/server.js",
-    "servdev": "NODE_ENV=development webpack-dev-server --watch --colors --inline --hot --progress",
+    "servdev": "NODE_ENV=development webpack-dashboard -- webpack-dev-server --watch --colors --inline --hot --progress",
     "build": "NODE_ENV=production webpack -p",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -43,6 +43,7 @@
   },
   "devDependencies": {
     "json-server": "^0.12.0",
+    "webpack-dashboard": "^1.0.2",
     "webpack-dev-server": "^2.9.2"
   },
   "standard": {

src/component/Login/LoginBtnForgotPw.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const LoginBtnForgotPw = props => {
+  return (
+    <div className={classnames(props.customClass)}>
+      {props.label}
+    </div>
+  )
+}
+
+export default LoginBtnForgotPw
+
+LoginBtnForgotPw.PropTypes = {
+  customClass: PropTypes.string,
+  label: PropTypes.string
+}
+
+LoginBtnForgotPw.defaultProps = {
+  customClass: '',
+  label: ''
+}

src/component/Login/LoginLogo.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Logo = props => {
+  return (
+    <div className='loginpage__content__logo'>
+      <img src={props.logoSrc} />
+    </div>
+  )
+}
+export default Logo
+
+Logo.PropTypes = {
+  logoSrc: PropTypes.string.isRequired
+}

src/component/common/Card/Card.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Card = props => {
+  return (
+    <div className='loginpage__content__connection card'>
+      {props.children}
+    </div>
+  )
+}
+export default Card
+
+Card.PropTypes = {
+  children: PropTypes.element.isRequired
+}

src/component/common/Card/CardBody.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const CardBody = props => {
+  return (
+    <div className='card-body'>
+      <form className={classnames(props.formClass)}>
+        {props.children}
+      </form>
+    </div>
+  )
+}
+
+export default CardBody
+
+CardBody.PropTypes = {
+  children: PropTypes.element.isRequired,
+  formClass: PropTypes.string
+}
+
+CardBody.defaultProps = {
+  formClass: ''
+}

src/component/common/Card/CardHeader.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const CardHeader = props => {
+  return (
+    <div className={classnames('card-header', props.customClass)}>
+      {props.children}
+    </div>
+  )
+}
+
+export default CardHeader
+
+CardHeader.PropTypes = {
+  children: PropTypes.element.isRequired,
+  customClass: PropTypes.string
+}
+
+CardHeader.defaultProps = {
+  customClass: ''
+}

src/component/common/Input/Button.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const Button = props => {
+  return (
+    <button
+      type={props.htmlType}
+      className={classnames(props.customClass, 'btn', `btn-${props.bootstrapType}`)}
+    >
+      {props.label}
+    </button>
+  )
+}
+
+export default Button
+
+Button.PropTypes = {
+  htmlType: PropTypes.oneOf(['button', 'submit', 'reset']).isRequired,
+  bootstrapType: PropTypes.oneOf(
+    ['primary', 'default', 'default', 'success', 'danger', 'warning', 'info', 'light', 'dark']
+  ).isRequired,
+  customClass: PropTypes.string,
+  label: PropTypes.string,
+  onClick: PropTypes.func
+}
+
+Button.defaultProps = {
+  customClass: '',
+  label: '',
+  onClick: () => {}
+}

src/component/common/Input/InputCheckbox.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const InputGroupText = props => {
+  return (
+    <div className={classnames(`${props.parentClassName}`, props.customClass, 'form-check')}>
+      <label className={classnames(`${props.parentClassName}__label`, 'form-check-label')}>
+        <input type='checkbox' className={classnames(`${props.parentClassName}__label__checkbox`, 'form-check-input')} />
+        {props.label}
+      </label>
+    </div>
+  )
+}
+
+export default InputGroupText
+
+InputGroupText.PropTypes = {
+  parentClassName: PropTypes.string.isRequired,
+  customClass: PropTypes.string,
+  label: PropTypes.string
+}
+
+InputGroupText.defaultProps = {
+  customClass: '',
+  label: ''
+}

src/component/common/Input/InputGroupText.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const InputGroupText = props => {
+  return (
+    <div className={classnames(`${props.parentClassName}`, props.customClass, 'form-group')}>
+      <div className={classnames(`${props.parentClassName}__icon`)}>
+        <i className={classnames('fa fa-fw', props.icon)} />
+      </div>
+      <input
+        type={props.type}
+        className={classnames(`${props.parentClassName}__input`, 'form-control')}
+        placeholder={props.placeHolder}
+        onChange={props.onChange}
+      />
+      <div className={classnames(`${props.parentClassName}__msgerror`, 'invalid-feedback')}>
+        {props.invalidMsg}
+      </div>
+    </div>
+  )
+}
+
+export default InputGroupText
+
+InputGroupText.PropTypes = {
+  parentClassName: PropTypes.string.isRequired,
+  customClass: PropTypes.string,
+  icon: PropTypes.string,
+  type: PropTypes.string.isRequired,
+  placeHolder: PropTypes.string,
+  invalidMsg: PropTypes.string,
+  onChange: PropTypes.func
+}
+
+InputGroupText.defaultProps = {
+  customClass: '',
+  icon: false,
+  placeHolder: '',
+  invalidMsg: false,
+  onChange: () => {}
+}

src/container/Header.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { connect } from 'react-redux'
-// import HeaderTpl from '../component/HeaderTpl.jsx'
 import Logo from '../component/Header/Logo.jsx'
 import NavbarToggler from '../component/Header/NavbarToggler.jsx'
 import MenuLinkList from '../component/Header/MenuLinkList.jsx'
@@ -14,10 +13,6 @@ import flagFr from '../img/flagFr.png'
 import flagEn from '../img/flagEn.png'
 // import { updateUserLang } from '../action-creator.async.js'
 
-const HeaderWrapper = props => <header><nav className='header navbar navbar-expand-md navbar-light bg-light'>{props.children}</nav></header>
-const HeaderMenuRightWrapper = props => <div className='header__menu collapse navbar-collapse justify-content-end' id='navbarSupportedContent'>{props.children}</div>
-const MenuActionListWrapper = props => <ul className='header__menu__rightside'>{ props.children }</ul>
-
 class Header extends React.Component {
   // handleChangeLang = newLang => this.props.dispatch(updateUserLang(newLang))
   // handleSubmitSearch = search => console.log('search submited : ', search)
@@ -39,13 +34,6 @@ class Header extends React.Component {
   handleClickLogout = () => {}
 
   render () {
-    // return (
-    //   <HeaderTpl
-    //     user={this.props.user}
-    //     onChangeLang={this.handleChangeLang}
-    //     onSubmitSearch={this.handleSubmitSearch}
-    //   />
-    // )
     const { user } = this.props
     const langList = [{ // @TODO this should come from API
       id: 'fr',
@@ -65,6 +53,9 @@ class Header extends React.Component {
     //   'S_zkvxpAJO0g?size=800x600&size_mode=3'
     // }
 
+    const HeaderWrapper = props => <header><nav className='header navbar navbar-expand-md navbar-light bg-light'>{props.children}</nav></header>
+    const HeaderMenuRightWrapper = props => <div className='header__menu collapse navbar-collapse justify-content-end' id='navbarSupportedContent'>{props.children}</div>
+    const MenuActionListWrapper = props => <ul className='header__menu__rightside'>{ props.children }</ul>
     return (
       <HeaderWrapper>
         <Logo logoSrc={logoHeader} onClickImg={this.handleClickLogo} />

src/container/Login.jsx

@@ -1,7 +1,15 @@
 import React from 'react'
 import { connect } from 'react-redux'
-// import { ConnectionForm } from '../component/ConnectionForm.jsx'
+import LoginLogo from '../component/Login/LoginLogo.jsx'
+import LoginLogoImg from '../img/logoTracimWhite.svg'
 import { userLogin } from '../action-creator.async.js'
+import Card from '../component/common/Card/Card.jsx'
+import CardHeader from '../component/common/Card/CardHeader.jsx'
+import CardBody from '../component/common/Card/CardBody.jsx'
+import InputGroupText from '../component/common/Input/InputGroupText.jsx'
+import InputCheckbox from '../component/common/Input/InputCheckbox.jsx'
+import Button from '../component/common/Input/Button.jsx'
+import LoginBtnForgotPw from '../component/Login/LoginBtnForgotPw.jsx'
 
 class Login extends React.Component {
   constructor (props) {
@@ -29,86 +37,114 @@ class Login extends React.Component {
     //     />
     //   </div>
     // )
-    return (
-      <div>{/*
-        <div className='loginpage'>
-
-          <section className='loginpage__content'>
-            <div className='sidebar'>
-              sidebar
-            </div>
-            <div className='container-fluid contentbody'>
-              <div className='loginpage__content__logo'>
-                <img src={logoAccueil} />
-              </div>
-
-              <div className='row justify-content-center'>
-                <div className='col-12 col-sm-11 col-md-8 col-lg-6 col-xl-5'>
-                  <div className='loginpage__content__connection card'>
-                    <div className='connection__header card-header text-center'>
-                      Connexion
-                    </div>
-
-                    <div className='card-body'>
-                      <form className='connection__form'>
-                        <div className='connection__form__groupemail form-group mb-3 mt-4'>
-                          <div className='connection__form__groupemail__icon'>
-                            <i className='fa fa-fw fa-envelope-open-o' />
-                          </div>
-                          <input type='email' className='connection__form__groupemail__input form-control' placeholder='Adresse Email' />
-                          <div className='connection__form__groupemail__msgerror invalid-feedback'>
-                            Invalid email.
-                          </div>
-                        </div>
-
-                        <div className='connection__form__groupepw form-group'>
-                          <div className='connection__form__groupepw__icon'>
-                            <i className='fa fa-fw fa-lock' />
-                          </div>
-                          <input type='password' className='connection__form__groupepw__pw form-control' id='password-co' placeholder='Mot de passe' />
-                          <div className='connection__form__groupepw__msgerror invalid-feedback'>
-                            Invalid password.
-                          </div>
-                        </div>
-
-                        <div className='row mt-4 mb-4'>
-                          <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
-                            <div className='connection__form__rememberme form-check'>
-                              <label className='connection__form__rememberme__label form-check-label'>
-                                <input type='checkbox' className='connection__form__rememberme__label__checkbox form-check-input' />
-                                Se souvenir de moi
-                              </label>
-                            </div>
-                          </div>
-
-                          <div className='col-12 col-sm-6 col-md-6 col-lg-6 text-sm-right'>
-                            <div className='connection__form__pwforgot'>
-                              Mot de passe oublié ?
-                            </div>
-                          </div>
-                        </div>
-
-                        <button type='submit' className='connection__form__btnsubmit btn btn-primary'>Connexion</button>
-                      </form>
-
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </section>
-
-          <footer className='footer text-right'>
-            <div className='footer__text'>
-              Créer votre propre espace de travail collaboratif sur trac.im - Copyright 2013 - 2017
-            </div>
-            <img className='footer__logo' src={logoFooter} />
-          </footer>
-        </div> */}
+    const LoginWrapper = props => (
+      <div className='loginpage'>
+        <section className='loginpage__content'>
+          <div className='container-fluid contentbody'>
+            {props.children}
+          </div>
+        </section>
+      </div>
+    )
+    const LoginCardWrapper = props => (
+      <div className='row justify-content-center'>
+        <div className='col-12 col-sm-11 col-md-8 col-lg-6 col-xl-5'>
+          {props.children}
+        </div>
       </div>
     )
+    const LoginCardAction = props => (
+      <div className='row mt-4 mb-4'>
+        <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
+          {props.children[0]}
+        </div>
+        <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 text-sm-right'>
+          {props.children[1]}
+        </div>
+      </div>
+    )
+    return (
+      <LoginWrapper>
+        <LoginLogo logoSrc={LoginLogoImg} />
+
+        <LoginCardWrapper>
+          <Card customClass='loginpage__content__connection'>
+            <CardHeader customClass='connection__header text-center'>{'Connexion'}</CardHeader>
+
+            <CardBody formClass='connection__form'>
+              <InputGroupText
+                parentClassName='connection__form__groupemail'
+                customClass='mb-3 mt-4'
+                icon='fa-envelope-open-o'
+                type='email'
+                placeHolder='Adresse Email'
+                invalidMsg='Email invalide.'
+                onChange={this.handleChangeLogin}
+              />
+
+              <InputGroupText
+                parentClassName='connection__form__groupepw'
+                customClass=''
+                icon='fa-lock'
+                type='password'
+                placeHolder='Mot de passe'
+                invalidMsg='Mot de passe invalide.'
+                onChange={this.handleChangePassword}
+              />
+
+              <LoginCardAction>
+                <InputCheckbox
+                  parentClassName='connection__form__rememberme'
+                  customClass=''
+                  label='Se souvenir de moi'
+                />
+
+                <LoginBtnForgotPw
+                  customClass='connection__form__pwforgot'
+                  label='Mot de passe oublié ?'
+                />
+              </LoginCardAction>
+
+              <Button
+                htmlType='button'
+                bootstrapType='primary'
+                customClass='connection__form__btnsubmit'
+                label='Connexion'
+                onClick={this.handleClickSubmit}
+              />
+            </CardBody>
+          </Card>
+        </LoginCardWrapper>
+      </LoginWrapper>
+    )
   }
 }
 
 const mapStateToProps = ({ user }) => ({ user })
 export default connect(mapStateToProps)(Login)
+
+/*
+<form>
+  <div className='row mt-4 mb-4'>
+
+    <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
+      <div className='connection__form__rememberme form-check'>
+        <label className='connection__form__rememberme__label form-check-label'>
+          <input type='checkbox' className='connection__form__rememberme__label__checkbox form-check-input' />
+          Se souvenir de moi
+        </label>
+      </div>
+    </div>
+
+    <div className='col-12 col-sm-6 col-md-6 col-lg-6 text-sm-right'>
+      <div className='connection__form__pwforgot'>
+        Mot de passe oublié ?
+      </div>
+    </div>
+
+  </div>
+
+  <button type='submit' className='connection__form__btnsubmit btn btn-primary'>Connexion</button>
+
+</form>
+*/

src/css/Login.styl

@@ -0,0 +1,102 @@
+.loginpage
+  &__content
+    position relative
+    min-height calc(100vh - 139px)
+    background dark-blue url('../img/tracimLogoAsBg.png') no-repeat 25% 3px
+    background-size contain
+    display table
+    width 100%
+    &__logo
+      margin 0 auto
+      padding 50px 0
+      width 170px
+    &__connection
+      border none
+      box-shadow shadow-right
+      margin-bottom 50px
+      .connection__header
+        background-color blue
+        color #FFF
+        font-size 25px
+    .connection__form
+      width 70%
+      margin 0 auto
+      &__rememberme
+        &__label
+          font-size 13px
+      &__groupemail
+        position relative
+        &__icon
+          position absolute
+          top 6px
+          left 10px
+          width 20px
+        &__input
+          padding-left 45px
+      &__groupepw
+        position relative
+        &__icon
+          font-size 20px
+          width 20px
+          position absolute
+          top 5px
+          left 8px
+        &__input
+          padding-left 45px
+      &__btnsubmit
+        width 150px
+        background-color green
+        border none
+        cursor pointer
+        display block
+        margin 0 auto
+        &:hover
+          background-color dark-green
+        &:focus
+          box-shadow shadow-all-side-green
+      &__pwforgot
+        cursor pointer
+        font-size 13px
+        margin-top 3px
+        &:hover::after
+          content ' '
+          position absolute
+          top 20px
+          right 15px
+          width 130px
+          padding-bottom 2px
+          border-bottom 1px solid dark-grey
+
+
+@media (min-width: min-lg) and (max-width: max-lg)
+  .loginpage__content
+    .connection__form
+      width 100%
+
+@media (min-width: min-md) and (max-width: max-md)
+  .loginpage__content
+    .connection__form
+      width 95%
+
+@media (min-width: min-sm) and (max-width: max-sm)
+  .loginpage__content
+    padding-top 69px
+    display block
+    min-height calc(100vh - 50px)
+    .connection__form
+      width 90%
+
+@media (max-width: max-xs)
+  .loginpage__content
+    padding-top 69px
+    min-height calc(100vh - 50px)
+    background-size cover
+    display block
+    &__connection
+      margin-top 90px
+    &__logo
+      display none
+    .connection__form
+      width 95%
+    .connection__form__pwforgot:hover::after
+      content normal

src/css/index.styl

@@ -1,3 +1,9 @@
-@import "Variable"
-@import "Header"
-@import "Footer"
+body
+  font-family 'Quicksand', sans-serif
+
+@import 'Variable'
+
+@import 'Header'
+@import 'Footer'
+
+@import 'Login'

src/img/logoTracimWhite.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 457.5 133.5" enable-background="new 0 0 457.5 133.5" xml:space="preserve">
+<g id="Background">
+	<rect x="-149.6" y="-13.6" fill="transparent" width="800" height="600"/>
+</g>
+<g id="Logotype">
+	<g>
+		<g>
+			<path fill="#FFFFFF" d="M185.1,27.1v14.8h13.3v11.4h-13.3v24.3c0,3.2,0.6,5.3,1.8,6.4c1.2,1.1,2.9,1.7,5.3,1.7
+				c1.1,0,2.2-0.1,3.3-0.4c1.1-0.3,2.1-0.8,2.9-1.5l1.7,10.6c-1.7,1.5-3.4,2.7-5.2,3.4c-1.8,0.8-4.2,1.1-7.3,1.1
+				c-5.5,0-9.7-1.6-12.6-4.7c-2.8-3.1-4.3-8-4.3-14.6V53.3h-6.5V41.9h6.5v-9.1L185.1,27.1z"/>
+			<path fill="#FFFFFF" d="M239.2,52c-4.2,0-12,2.6-15.7,6.7v38.6h-14.3V41.9h14.3v6c3.7-4.8,10.8-7.3,15.7-7.3"/>
+			<path fill="#FFFFFF" d="M283.8,98.4c-4.4,0-8.9-1.5-10.8-4.6c-3.2,1.9-5.7,3.3-7.7,3.9c-1.9,0.7-3.8,1-5.6,1
+				c-4.4,0-8.1-1.5-11.1-4.6c-3-3-4.5-7.1-4.5-12.2c0-4.8,1.4-8.6,4.2-11.3c2.8-2.7,6.4-4.4,10.8-5.1l11.6-1.9V60
+				c0-2.8-0.8-4.6-2.4-5.5c-1.6-0.9-3.4-1.3-5.3-1.3c-2.4,0-4.7,0.4-7.2,1.2c-2.4,0.8-4.6,1.9-6.5,3.1l-2.3-12.2
+				c6.1-3.2,12.2-4.8,18.3-4.8c2.1,0,4.2,0.2,6.4,0.6c2.2,0.4,4.2,1.2,6,2.4c1.8,1.2,3.2,2.7,4.4,4.7c1.1,1.9,1.7,4.4,1.7,7.3
+				l0,26.1 M264.1,73c-1.9,0.3-3.5,1-4.7,2.3c-1.2,1.2-1.8,3-1.8,5.4c0,4.3,1.9,6.4,5.8,6.4c1.1,0,2.2-0.2,3.2-0.6
+				c1-0.4,2.4-1.1,4-2.1V71.8L264.1,73z"/>
+			<path fill="#FFFFFF" d="M330.4,54.6c-3.2-2.1-6.6-3.1-10.4-3.1c-4.6,0-7.8,1.5-9.8,4.5c-1.9,3-2.9,7-2.9,12.1
+				c0,4.8,0.9,9.1,2.7,12.7c1.8,3.6,5,5.4,9.8,5.4c1.9,0,4-0.3,6.3-0.9c2.3-0.6,4.3-1.6,5.9-3l1.9,10.2c-1.9,2.2-4.5,3.9-7.8,5.2
+				c-3.3,1.2-6.7,1.9-10.3,1.9c-7.1,0-12.6-2.6-16.5-7.7c-3.9-5.1-5.9-12.4-5.9-21.8c0-10,2.2-17.4,6.6-22.4
+				c4.4-5,10.7-7.5,18.7-7.5c5.5,0,10,1,13.5,2.9L330.4,54.6z"/>
+			<path fill="#FFFFFF" d="M349.5,18.9c2.5,0,4.5,0.7,5.9,2c1.5,1.3,2.2,3.4,2.2,6.1c0,2.6-0.7,4.7-2.2,6c-1.5,1.4-3.4,2.1-5.9,2.1
+				c-2.5,0-4.5-0.7-5.9-2.1c-1.5-1.4-2.2-3.4-2.2-6c0-2.8,0.7-4.8,2.2-6.1C345,19.5,347,18.9,349.5,18.9z M356.6,41.9v55.4h-14.3
+				V41.9H356.6z"/>
+			<path fill="#FFFFFF" d="M382.1,41.9v5.6c2.6-1.9,5.4-3.5,8.4-4.8c3-1.2,5.8-1.9,8.6-1.9c5.3,0,8.7,2.5,10.4,7.5
+				c2.8-1.9,5.7-3.7,8.8-5.2c3.1-1.5,6.2-2.3,9.2-2.3c3.6,0,6.4,1.1,8.3,3.4c1.9,2.3,2.9,6.1,2.9,11.3v41.7h-14.3V58.9
+				c0-4-1.4-6-4.2-6c-2.5,0-5.8,1.2-10,3.7v40.7h-14.1V58.9c0-4-1.5-6-4.4-6c-2.6,0-5.9,1.2-9.8,3.7v40.7h-14.3V41.9H382.1z"/>
+		</g>
+	</g>
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M141.8,66.4c2.5,2.9,3.4,7,2,10.8c-1.4,3.9-4.7,6.6-8.6,7.4
+		c0,0-11.5,22.7-33.9,18.5c0,0,15.6-3.4,22.7-21.7c-3-3-4.2-7.4-2.7-11.6c1.5-4.1,5.2-6.9,9.4-7.5c-0.3-2.7-1.1-5.3-2.4-8
+		c-0.8-1.7-1-3.3-0.1-5c0,0,3.3-6,8.3-0.6S141.8,66.4,141.8,66.4z"/>
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M102.7,122.6c-2.3,3.1-6.1,4.9-10.1,4.4c-4.1-0.5-7.4-3.2-9.1-6.8
+		c0,0-24.7-6.3-25.5-29c0,0,6.7,14.5,26.2,17.4c2.2-3.6,6.3-5.7,10.7-5.1c4.3,0.5,7.9,3.6,9.4,7.6c2.5-0.9,5-2.2,7.3-4
+		c1.5-1.2,3-1.7,4.8-1.2c0,0,6.6,1.9,2.4,8C114.5,119.9,102.7,122.6,102.7,122.6z"/>
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M37.4,101.8c-3.5-1.7-5.9-5.1-6.2-9.1c-0.3-4.1,1.7-7.9,5-10.2
+		c0,0,1.6-25.4,23.8-30.4c0,0-13,9.3-12.3,29c3.9,1.5,6.7,5.1,7,9.6C55,95,52.7,99,49,101.2c1.3,2.3,3.1,4.5,5.3,6.4
+		c1.4,1.2,2.2,2.7,2,4.5c0,0-0.6,6.8-7.4,3.8C42.3,112.9,37.4,101.8,37.4,101.8z"/>
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M37.5,38.3c0.1-3.8,2-7.5,5.6-9.5c3.6-2,7.9-1.8,11.3,0.1
+		c0,0,23.7-9.5,37.7,8.4c0,0-14-7.7-31.4,1.3c0.3,4.2-1.7,8.3-5.6,10.5c-3.8,2.1-8.5,1.7-12-0.6c-1.5,2.2-2.7,4.7-3.5,7.5
+		c-0.5,1.8-1.4,3.2-3.2,3.8c0,0-6.4,2.3-6.6-5C29.6,47.4,37.5,38.3,37.5,38.3z"/>
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M97.6,14.3c3.5-1.6,7.7-1.4,11,1c3.3,2.4,5,6.4,4.7,10.3
+		c0,0,18.7,17.4,8.4,37.7c0,0,1-15.9-14.6-27.9c-3.7,2-8.2,2-11.9-0.6c-3.6-2.6-5.2-6.9-4.6-11.2c-2.6-0.4-5.4-0.4-8.3,0.1
+		c-1.8,0.3-3.5,0-4.8-1.3c0,0-4.9-4.8,1.8-8.1C85.9,11,97.6,14.3,97.6,14.3z"/>
+</g>
+</svg>

webpack.config.js

@@ -1,6 +1,7 @@
 const webpack = require('webpack')
 const path = require('path')
 const isProduction = process.env.NODE_ENV === 'production'
+const dashboardPlugin = require('webpack-dashboard/plugin')
 
 module.exports = {
   entry: {
@@ -70,7 +71,7 @@ module.exports = {
       test: /\.(jpg|png|svg)$/,
       loader: 'url-loader',
       options: {
-        limit: 25000
+        limit: 2000
       }
     }]
   },
@@ -82,7 +83,8 @@ module.exports = {
       new webpack.optimize.CommonsChunkPlugin({
         name: 'vendor',
         filename: 'tracim.vendor.bundle.js'
-      })
+      }),
+      new dashboardPlugin()
     ],
     ...(isProduction
       ? [ // production specific plugins