refactored FileItem.jsx and FileItemHeader.jsx into ContentItem and ContentItemHeader

src/component/Workspace/ContentItem.jsx

   })()
 
   return (
-    <div className={classnames('file', 'align-items-center', {'item-last': props.isLast}, props.customClass)} onClick={props.onClickItem}>
-      <div className='file__type'>
+    <div className={classnames('content', 'align-items-center', {'item-last': props.isLast}, props.customClass)} onClick={props.onClickItem}>
+      <div className='content__type'>
         <i className={props.icon} />
       </div>
 
-      <div className='file__name'>
-        <div className='file__name__text'>
+      <div className='content__name'>
+        <div className='content__name__text'>
           { props.name }
         </div>
       </div>
         <BtnExtandedAction onClickExtendedAction={props.onClickExtendedAction} />
       </div>
 
-      <div className={classnames('file__status d-flex align-items-center justify-content-start') + colorStatus}>
-        <div className='file__status__icon d-block '>
+      <div className={classnames('content__status d-flex align-items-center justify-content-start') + colorStatus}>
+        <div className='content__status__icon d-block '>
           <i className={iconStatus} />
         </div>
-        <div className='file__status__text d-none d-xl-block'>
+        <div className='content__status__text d-none d-xl-block'>
           {textStatus}
         </div>
       </div>

src/component/Workspace/ContentItemHeader.jsx

 
 const FileItemHeader = props => {
   return (
-    <div className='file__header'>
-      <div className='file__header__type'>
+    <div className='content__header'>
+      <div className='content__header__type'>
         {props.t('FileItemHeader.type')}
       </div>
-      <div className='file__header__name'>
+      <div className='content__header__name'>
         {props.t('FileItemHeader.document_name')}
       </div>
-      <div className='file__header__status'>
+      <div className='content__header__status'>
         {props.t('FileItemHeader.status')}
       </div>
     </div>

src/css/FileItem.styl → src/css/ContentItem.styl

 .outdateColor
   color outdateColor
 
-.file
+.content
   display flex
   align-items center
   padding 10px 0
 
 
 @media (min-width: max-xs) and (max-width: max-lg)
-  .file
+  .content
     border-right 1px solid grey
     &__name__icons
         margin-top 5px

src/css/FileItemHeader.styl → src/css/ContentItemHeader.styl

-.file__header
+.content__header
   display flex
   font-size 17px
   &__type

src/css/File.styl

+// @Côme - this file is deprecated as its associated jsx file is deprecated
 .wsFileFile
   width 1200px
   height calc(100% - 85px)

src/css/Folder.styl

 border-style = 1px solid secondColor
 .folder__header
   border border-style
-.folder + .file, .file + .file
+.folder + .content, .content + .content
   border-bottom 0
-.folder__content > .file, .folder__content > .folder
+.folder__content > .content, .folder__content > .folder
   border-bottom 0
 .folder:not(.active).item-last
   border-bottom border-style
-.file
+.content
   border border-style
   &.item-last
     border-bottom border-style

src/css/index.styl

 @import 'Login.styl'
 @import 'Workspace.styl'
 
-@import 'FileItem.styl'
-@import 'FileItemHeader.styl'
+@import 'ContentItem.styl'
+@import 'ContentItemHeader.styl'
 @import 'Folder.styl'
 
 @import 'File.styl'