Refactor color

jsonserver/static_db.json

         "status": "current"
       },
       {
+        "id": 6,
+        "title": "La prommation fonctionnelle est-elle vraiment utile ?",
+        "type": "file",
+        "status": "current"
+      },
+      {
+        "id": 10,
+        "title": "La prommation fonctionnelle est-elle vraiment utile ?",
+        "type": "pageMarkdown",
+        "status": "current"
+      },
+      {
+        "id": 7,
+        "title": "La prommation fonctionnelle est-elle vraiment utile ?",
+        "type": "task",
+        "status": "current"
+      },
+      {
+        "id": 8,
+        "title": "La prommation fonctionnelle est-elle vraiment utile ?",
+        "type": "issue",
+        "status": "current"
+      },
+      {
         "id": 3,
         "title": "Programmation objet",
         "type": "folder",

src/component/Sidebar/WorkspaceListItem.jsx

         id={`sidebarSubMenu_${props.number}`}
       >
         <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
+
+          <div className='dropdown__icon'>
+            <i className='fa fa-th' />
+          </div>
+
           <div
             className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
             role='button'
             aria-haspopup='true'
             aria-expanded='false'
           >
-            <div className='dropdown__icon'>
-              <i className='fa fa-th' />
-            </div>
 
             <div className='dropdown__title' id='navbarDropdown'>
               <div className='dropdown__title__text'>
         </li>
 
         <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
+
+          <div className='dropdown__icon'>
+            <i className='fa fa-signal dashboard-color' />
+          </div>
+
           <div
             className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
             role='button'
             aria-haspopup='true'
             aria-expanded='false'
           >
-            <div className='dropdown__icon'>
-              <i className='fa fa-signal dashboard-color' />
-            </div>
 
             <div className='dropdown__title' id='navbarDropdown'>
               <div className='dropdown__title__text'>
         </li>
 
         <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
+
+          <div className='dropdown__icon'>
+            <i className='fa fa-list-ul task-color' />
+          </div>
+
           <div
             className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
             role='button'
             aria-haspopup='true'
             aria-expanded='false'
           >
-            <div className='dropdown__icon'>
-              <i className='fa fa-list-ul task-color' />
-            </div>
 
             <div className='dropdown__title' id='navbarDropdown'>
               <div className='dropdown__title__text'>
         </li>
 
         <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
+
+          <div className='dropdown__icon'>
+            <i className='fa fa-folder-o docandfile-color' />
+          </div>
+
           <div
             className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
             role='button'
             aria-haspopup='true'
             aria-expanded='false'
           >
-            <div className='dropdown__icon'>
-              <i className='fa fa-folder-o docandfile-color' />
-            </div>
 
             <div className='dropdown__title' id='navbarDropdown'>
               <div className='dropdown__title__text'>
         </li>
 
         <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
+
+          <div className='dropdown__icon'>
+            <i className='fa fa-comments talk-color' />
+          </div>
+
           <div
             className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
             role='button'
             aria-haspopup='true'
             aria-expanded='false'
           >
-            <div className='dropdown__icon'>
-              <i className='fa fa-comments talk-color' />
-            </div>
 
             <div className='dropdown__title' id='navbarDropdown'>
               <div className='dropdown__title__text'>
         </li>
 
         <li className='sidebar__navigation__workspace__item__submenu__dropdown'>
+
+          <div className='dropdown__icon'>
+            <i className='fa fa-calendar calendar-color' />
+          </div>
+
           <div
             className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
             role='button'
             aria-haspopup='true'
             aria-expanded='false'
           >
-            <div className='dropdown__icon'>
-              <i className='fa fa-calendar calendar-color' />
-            </div>
 
             <div className='dropdown__title' id='navbarDropdown'>
               <div className='dropdown__title__text'>

src/component/Workspace/FileItem.jsx

   const iconType = (() => {
     switch (props.type) {
       case FILE_TYPE.PAGE_HTML:
-        return 'fa fa-exclamation-triangle'
+        return 'fa fa-file-word-o'
       case FILE_TYPE.PAGE_MARKDOWN:
-        return 'fa fa-exclamation-triangle'
+        return 'fa fa-file-code-o'
       case FILE_TYPE.FILE:
         return 'fa fa-file-text-o docandfile-color'
       case FILE_TYPE.THREAD:
-        return 'fa fa-comments talk-color'
+        return 'fa fa-comments-o talk-color'
       case FILE_TYPE.TASK:
         return 'fa fa-list-ul task-color'
       case FILE_TYPE.ISSUE:
-        return 'fa fa-exclamation-triangle'
+        return 'fa fa-ticket'
     }
   })()
 

src/container/PageText.jsx

       <PopinFixed customClass={'wsFileText'}>
         <PopinFixedHeader
           customClass='wsFileText'
-          icon='fa fa-file-text-o'
+          icon='fa fa-file-word-o'
           name='Facture 57840 - Jean-michel Chevalier - 04/09/2017'
         />
 

src/container/WorkspaceContent.jsx

 import Folder from '../component/Workspace/Folder.jsx'
 import FileItem from '../component/Workspace/FileItem.jsx'
 import FileItemHeader from '../component/Workspace/FileItemHeader.jsx'
-// import Thread from './Thread.jsx'
-import PageText from './PageText.jsx'
+import Thread from './Thread.jsx'
+// import PageText from './PageText.jsx'
 import PageWrapper from '../component/common/layout/PageWrapper.jsx'
 import PageTitle from '../component/common/layout/PageTitle.jsx'
 import PageContent from '../component/common/layout/PageContent.jsx'
                 name={c.title}
                 type={c.type}
                 status={c.status}
-                onClickItem={() => this.setState({activeFileType: 'file'})}
+                onClickItem={() => this.setState({activeFileType: 'thread'})}
                 key={c.id}
               />
             )}
 
           <DropdownCreateButton customClass='workspace__content__button mb-5' />
 
-          <PageText visible={this.state.activeFileType === 'file'} />
+          <Thread visible={this.state.activeFileType === 'thread'} />
           {/*
-          <Thread visible={this.state.activeFileType === 'chat'} />
+          <PageText visible={this.state.activeFileType === 'file'} />
           */}
         </PageContent>
 

src/css/FileItem.styl

   display flex
   border-bottom 0
   &:hover
-    background-color hover-files
+    background-color files-hover
   &__type
     font-size 30px
     text-align center

src/css/Folder.styl

 // -----------------------------------------------------
 // border management for Workspace container
-border-style = 1px solid dark-blue
+border-style = 1px solid darkBlue
 .folder__header
   border border-style
 .file
     justify-content space-between
     margin-left -30px
     border-bottom 0
-    background-color light-grey
+    background-color lightGrey
     cursor pointer
     &:hover
-      background-color hover-folder
+      background-color folder-hover
       .folder__header__triangleborder__triangle
         border-color hover-folder transparent transparent transparent
     &__triangleborder
       left -1px
       border-style solid
       border-width 25px 30px 0 30px
-      border-color dark-blue transparent transparent transparent
+      border-color darkBlue transparent transparent transparent
       z-index 1
       &__triangle
         display none
         left -30px
         border-style solid
         border-width 25px 30px 0 30px
-        border-color light-grey transparent transparent transparent
+        border-color lightGrey transparent transparent transparent
     &__name
       display flex
       padding-left 5px
       &__icon
         margin auto 15px
         font-size 25px
-        color dark-blue
+        color darkBlue
       &__text
         margin auto 15px
         font-size 17px
-        color dark-blue
+        color darkBlue
       &__addbtn
         margin auto 0
         cursor pointer
         &:hover > .folder__header__name__addbtn__text
           color white
         &__text
-          border 1px solid dark-blue
+          border 1px solid darkBlue
           background-color transparent
-          color dark-blue
+          color darkBlue
           font-size 17px
     &__contenttype
       display flex
       &__text
         padding 18px 15px
         font-size 17px
-        color dark-blue
+        color darkBlue
       &__icon
         padding 18px 5px
         font-size 17px
-        color dark-blue
+        color darkBlue
         & > i
           margin-right 15px
 

src/css/Footer.styl

 .footer
   border-top 1px solid grey
   width 100%
-  background-color light-grey
+  background-color lightGrey
   &__text
     display none
     vertical-align middle

src/css/Generic.styl

   &__title
     margin-left 10px
     font-size 30px
-    color dark-grey
+    color darkGrey
 @media (max-width: max-xs)
   .pageTitleGeneric
     display block
       padding 5px 65px 5px 10px
 
 
+.fa-file-text-o
+  color fileColor
+
+.fa-comments-o
+  color threadColor
+
+.fa-list-ul
+  color taskColor
+
+.fa-file-code-o
+  color markdownColor
+
+.fa-file-word-o
+  color htmlColor
+
+.fa-ticket
+  color issueColor
+
+
 .wsFileGeneric
   position fixed
   top 85px
   right 0
   border 1px solid grey
   height 100%
-  background-color light-grey
+  background-color lightGrey
   box-shadow shadow-page
   visibility hidden
   &.visible

src/css/Header.styl

   position fixed
   width 100%
   box-shadow shadow-bottom
-  background off-white
+  background mainColor
   z-index 3
   &__logo
     &__img
           .languagedropdown
             &__btnlanguage
               margin-right 25px
-              color dark-grey
+              color darkGrey
               &:focus
                 box-shadow shadow-all-side-blue
                 border-radius 5px
             padding 0 5px
             background-color transparent
             &:hover
-              background-color light-grey
+              background-color lightGrey
             &:focus
               box-shadow shadow-all-side-blue
-              background-color light-grey
+              background-color lightGrey
             &::after //bootstrap overrides
               vertical-align middle
-              color dark-grey
+              color darkGrey
             &__imgprofil
               display inline-block
               margin-right 10px
               display inline-block
               vertical-align middle
               margin-right 10px
-              color dark-grey
+              color darkGrey
           .profilgroup__sub
             color dark-grey
             cursor pointer

src/css/Login.styl

 .loginpage
   padding-top 85px // 85 = header height
   min-height calc(100% - 50px)
-  background dark-blue url('../img/tracimLogoAsBg.png') no-repeat 25% 3px
+  background darkBlue url('../img/tracimLogoAsBg.png') no-repeat 25% 3px
   background-size contain
   width 100%
   &__logo
       display block
       margin 0 auto
       &:hover
-        background-color dark-green
+        background-color btnCallAction-hover
       &:focus
         box-shadow shadow-all-side-green
     &__pwforgot
         right 15px
         width 130px
         padding-bottom 2px
-        border-bottom 1px solid dark-grey
+        border-bottom 1px solid darkGrey
 
 @media (min-width: min-lg) and (max-width: max-lg)
   .loginpage__content

src/css/PageText.styl

   height calc(100% - 85px)
   overflow-Y auto
   &__header
-    background-color orange
+    background-color htmlColor
+    &__icon
+      .fa-file-word-o
+        color white
   &__contentpage
     display flex
     overflow-Y auto
       &__title
         margin 10px 0
         font-size 30px
-        color orange
+        color htmlColor
       &__data
         flex-grow 1
         flex-shrink 1
       text-align center
       font-size 20px
       color dark-grey
-      background-color hover-grey
+      background-color grey-hover
     &__messagelist
       min-height 300px
       &__item
           color dark-grey
       &__version
         margin-top 40px
-        background-color hover-grey
+        background-color grey-hover
         &__btn
           padding 5px 25px
           border-radius 5px
           width 145px
           color white
           font-size 17px
-          background-color orange
+          background-color htmlColor
           & > i
             margin-right 10px
             color dark-grey
             font-size 22px
           &:hover
-            background-color dark-orange
+            background-color darkHtmlColor
           &:focus
-            background-color dark-orange
+            background-color darkHtmlColor
         &__date
-          color orange
+          color fontColor
           font-size 17px
     &__texteditor
       &__simpletext
         &__input
           &:focus
-            color orange
-            border-color orange
+            color htmlColor
+            border-color htmlColor
       &__submit
         &__btn
-          border-color orange
-          background-color orange
+          border-color htmlColor
+          background-color htmlColor
           color white
           &:hover
-            border-color orange
-            background-color orange
+            border-color htmlColor
+            background-color htmlColor
           &:focus
-            border-color orange
-            background-color orange
+            border-color htmlColor
+            background-color htmlColor
 
 /***** CLASS MESSAGELISTSIZE *****/
 
 
 .received
   .wsFileText__contentpage__messagelist__item__content
-      background-color orange
+      background-color htmlColor
 
 /*****************************/
 

src/css/Sidebar.styl

   position absolute
   left 0
   display none
-  border 1px solid dark-blue
+  border 1px solid darkBlue
   border-top-width 2px
   padding 11px 15px
   background-color blue
 .sidebar
   display none
   min-height 100%
-  background-color dark-blue
+  background-color secondColor
   z-index 1
 
 sidebar-width = 300px
         position relative
         margin-top 2px
         width sidebar-width
-        background-color blue
+        background-color thirdColor
         cursor pointer
         &__number
           display inline-block
-          padding 5px 0 5px 0
+          padding 10px 0
           width 50px
           font-size 20px
           letter-spacing 2px
           text-align center
-          background-color light-blue
+          background-color rgba(253,253,253,0.3)
         &__name
           display inline-block
           vertical-align top
-          padding 5px 5px
+          padding 10px 5px
           width 220px
           font-size 20px
           color white
           padding-left 0
           height 0 // height is handled is js
           list-style none
-          background-color opacity-blue
+          background-color fourthColor
           overflow hidden
           transition height 0.5s
           &__dropdown
-            border-top 1px solid dark-blue
+            border-top 1px solid darkBlue
             &:hover
-              background-color light-blue
+              background-color lightBlue
             &__showdropdown
-              padding 10px 0
+              display inline-block
+              padding 10px 15px
             .dropdown__icon
               display inline-block
-              margin 0 35px 0 15px
+              padding 10px 15px
+              width 50px
+              text-align center
+              background-color rgba(253,253,253,0.3)
               font-size 20px
             .dropdown__title
               position relative
               display inline-block
               font-size 18px
               font-weight 400
-              color dark-grey
+              color darkGrey
               cursor pointer
               &::after //bootstrap override
                 position absolute
                 display inline-block
                 width 200px
             .dropdown__subdropdown
+              margin 0
               border-radius 0
               padding 0
               .alignname
                 font-size 18px
               &__item
                 cursor pointer
-                border-top 1px solid dark-blue
+                border-top 1px solid darkBlue
                 padding 13px 0
                 &__iconfile
                   padding-left 18px

src/css/Thread.styl

   width 550px
   &__header
     color white
-    background-color blue
+    background-color threadColor
   &__wrapper
     height calc(100% - 209px) /* height of chat__header + height of option + top of chat */
   &__messagelist
     padding 15px 35px
     &__item
       &__content
-        color dark-blue
+        color darkBlue
   &__texteditor
     &__simpletext
       &__input
         &:focus
-          color dark-blue
-          border-color dark-blue
+          color darkBlue
+          border-color darkBlue
     &__submit
       &__btn
-        color dark-blue
+        color darkBlue
 
 .received
   .wsFileThread__messagelist__item__content
-      background-color dark-blue
+      background-color darkBlue
+      color white
 
 @media (min-width: max-xs) and (max-width: max-lg)
   .wsFileThread

src/css/Variable.styl

 /**** VARIABLES ****/
 /*** COULEURS ****/
-dark-blue = #215E8E // #215E8E dark-blue
-hover-blue = #205AED // #205AED color blue use in hover rules
-blue = #2571FE // #2571FE blue
-light-blue = #569EDE // #569EDE light-blue
-opacity-blue = #82B2CC // #82B2CC  blue with light opacity
-off-white = #FDFDFD // #FDFDFD off-white
-dark-grey = #252525 // #252525 dark-grey
-hover-folder = #9BC1EB // #9BC1EB hover on folder
-hover-files = rgba(155,193,235,0.2) // hover on files
-grey = #ABABAB // #ABABAB grey
-light-grey = #f0f0f0 // #f0f0f0 light grey
-hover-grey = #E0E0E0 // #E0E0E0 color for hover files
-green = #28a745 // #28a745 green
-dark-green = #65A833 // #65A833 dark-green
-purple = #7E36A0 // color icon on the sidebar menu workspace
-orange = #D95620 // color icon on the sidebar menu workspace
-red = #D9352B // color icon on the sidebar menu workspace
+
+mainColor = #fdfdfd // Bg header
+secondColor = #215e8e // bg sidebar
+thirdColor = #2571fe // bg workspace name
+fourthColor = #82b2cc // bg filter sidebar
+
+fontColor = #252525
+
+darkGrey = #252525
+grey = #ababab
+lightGrey = #f0f0f0
+grey-hover = #e0e0e0
+
+folder-hover = #9BC1eb
+files-hover = rgba(155,193,235,0.2)
+
+off-white = #fdfdfd
+
+darkBlue = #215e8e
+blue = #2571fe
+lightBlue = #569EDE
+
+btnCallAction = #28a745 // couleur des boutons call2action dans le contexte generale (tout contexte sauf celui d'un type de contenu particulier)
+btnCallAction-hover = darken(btnCallAction, 15%)
+
+threadColor = #2674d3
+
+htmlColor = #65c7f2
+darkHtmlColor = darken(htmlColor, 15%)
+
+markdownColor = #e0082b
+
+fileColor = #263462
+
+taskColor = #2d5a88
+
+issueColor = #a4835e
+
+// calendarColor =
+// dashboard =
+
 
 /*************************/
 /**** BOX SHADOW ****/
 shadow-bottom = 0px 0px 5px 1px #606060
 shadow-right = 2px 2px 5px 0px #404040
-shadow-all = 1px 1px 5px 2px #ABABAB
+shadow-all = 1px 1px 5px 2px #ababab
 shadow-all-side-blue = 0px 0px 1px 1px light-blue
 shadow-all-side-green = 0 0 1px 2px green
 
 max-lg = 1199px
 
 min-xl = 1200px
-/***********************/
 
-.dashboard-color
-  color purple
-.task-color
-  color green
-.docandfile-color
-  color orange
-.talk-color
-  color blue
-.calendar-color
-  color red
-.current-color
-  color blue
-.canceled-color
-  color dark-grey
-.validated-color
-  color green

webpack.config.js

       new webpack.optimize.CommonsChunkPlugin({
         name: 'vendor',
         filename: 'tracim.vendor.bundle.js'
-      }),
-      new dashboardPlugin()
+      })
+      // new dashboardPlugin()
     ],
     ...(isProduction
       ? [ // production specific plugins