added popup of content and workspace creation

src/component/PopupContent/FileContent.jsx

@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+
+class fileContent extends Component {
+  render () {
+    return (
+      <div className='filecontent p-3'>
+        <div className='filecontent__close d-flex justify-content-end'>
+          <i className='fa fa-times' />
+        </div>
+        <div className='filecontent__contentname d-flex align-items-center mb-4'>
+          <div className='filecontent__contentname__icon mr-3'>
+            <i className='fa fa-file-text-o' />
+          </div>
+          <div className='filecontent__contentname__title'>
+            Fichier de prévisualisation
+          </div>
+        </div>
+
+        <div className='filecontent__text'>Importer votre fichier :</div>
+        <div className='filecontent__form mb-4' drop='true'>
+          <div className='filecontent__form__icon d-flex justify-content-center'>
+            <label htmlFor='filecontentUpload' type='file'>
+              <i className='fa fa-download' />
+            </label>
+            <input type='file' className='d-none' id='filecontentUpload' />
+          </div>
+          <div className='filecontent__form__instruction text-center'>
+            Glisser votre fichier ici
+          </div>
+          <div className='filecontent__form__text text-center'>
+            Vous pouvez également importer votre fichier en cliquant sur l'icon
+          </div>
+        </div>
+        <div className='filecontent__button d-flex justify-content-end'>
+          <button className='filecontent__form__button btn btn-outline-primary'>
+            Créer et Valider
+          </button>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default fileContent

src/component/PopupContent/GenericContent.jsx

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+
+class GenericContent extends Component {
+  render () {
+    return (
+      <div className='genericcontent p-3'>
+        <div className='genericcontent__close d-flex justify-content-end'>
+          <i className='fa fa-times' />
+        </div>
+        <div className='genericcontent__contentname d-flex align-items-center mb-4'>
+          <div className='genericcontent__contentname__icon mr-3'>
+            <i className='fa fa-file-word-o' />
+          </div>
+          <div className='genericcontent__contentname__title'>
+            Fichier Texte
+          </div>
+        </div>
+        <form className='genericcontent__form'>
+          <div className='genericcontent__form__input mb-2'>
+            <input type='text' placeholder='Titre du document' />
+          </div>
+          <div className='genericcontent__form__button d-flex justify-content-end p-3'>
+            <button className='genericcontent__form__button btn btn-outline-primary' type='submit'>
+              Créer et Valider
+            </button>
+          </div>
+        </form>
+      </div>
+    )
+  }
+}
+
+export default GenericContent

src/component/PopupContent/WksContent.jsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+
+class wksContent extends Component {
+  render () {
+    return (
+      <div className='wkscontent p-3'>
+        <div className='wkscontent__close d-flex justify-content-end'>
+          <i className='fa fa-times' />
+        </div>
+        <div className='wkscontent__contentname d-flex align-items-center mb-4'>
+          <div className='wkscontent__contentname__title'>
+            Création d'un espace de travail
+          </div>
+        </div>
+        <form className='wkscontent__form'>
+          <div className='wkscontent__form__input mb-2'>
+            <input type='text' placeholder='Titre du document' />
+          </div>
+          <div className='wkscontent__form__button d-flex justify-content-end p-3'>
+            <button className='wkscontent__form__button btn btn-outline-primary' type='submit'>
+              Créer et Valider
+            </button>
+          </div>
+        </form>
+      </div>
+    )
+  }
+}
+
+export default wksContent

src/container/PopupCreateContainer.jsx

@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import GenericContent from '../Component/PopupContent/GenericContent.jsx'
+import FileContent from '../Component/PopupContent/FileContent.jsx'
+import WksContent from '../Component/PopupContent/WksContent.jsx'
+
+class PopupCreateContainer extends Component {
+  render () {
+    return (
+      <div className='popupcontent'>
+        <div className='popupcontent__container card'>
+          <div className='popupcontent__container__header' />
+          <div className='card-body nopadding'>
+            <FileContent />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default PopupCreateContainer

src/css/FileContent.styl

@@ -0,0 +1,37 @@
+.filecontent
+  &__close
+    cursor pointer
+  &__contentname
+    &__icon
+      font-size 30px
+      color fileColor
+    &__title
+      font-size 20px
+      color fileColor
+  &__text
+    margin-bottom 15px
+    font-size 20px
+  &__form
+    border 1px dashed grey
+    padding 10px 15px
+    &__icon
+      margin-top 15px
+      font-size 30px
+      color fileColor
+      & > label
+        cursor pointer
+    &__instruction
+      font-size 20px
+      color fileColor
+    &__text
+      margin-bottom 20px
+  &__button
+    margin 15px 0
+    & > button
+      border-color fileColor
+      color fileColor
+      cursor pointer
+      &:focus, &:hover
+        border-color grey
+        background-color fileColor
+        color off-white

src/css/Generic.styl

@@ -154,3 +154,21 @@
       border 1px solid grey
       border-radius 10px
       padding 15px 25px
+
+.genericcontent
+  &__close
+    cursor pointer
+  &__contentname
+    &__icon
+      font-size 30px
+    &__title
+      font-size 20px
+      color htmlColor
+  &__form
+    &__input
+      & > input
+        border: 1px solid grey;
+        border-radius: 5px;
+        padding: 5px;
+        width: 353PX;
+

src/css/PopupCreateContainer.styl

@@ -0,0 +1,19 @@
+.popupcontent
+  position fixed
+  display flex
+  justify-content center
+  width 100%
+  z-index 3
+  &__container
+    margin-top 120px
+    border 0
+    border-radius 10px
+    width 400px
+    background lightGrey
+    box-shadow shadow-all
+    &__header
+      border-top-right-radius 10px
+      border-top-left-radius 10px
+      width 100%
+      height 8px
+      background-color fileColor

src/css/Variable.styl

@@ -38,7 +38,7 @@ darkHtmlColor = darken(htmlColor, 15%)
 
 markdownColor = #e0082b
 
-fileColor = #263462
+fileColor = #FF9900
 lightFileColor = lighten(fileColor, 15%)
 
 taskColor = #2d5a88

src/css/WksContent.styl

@@ -0,0 +1,14 @@
+.wkscontent
+  &__close
+    cursor pointer
+  &__contentname
+    &__title
+      font-size 20px
+      color htmlColor
+  &__form
+    &__input
+      & > input
+        border: 1px solid grey;
+        border-radius: 5px;
+        padding: 5px;
+        width: 353PX;

src/css/index.styl

@@ -27,3 +27,7 @@ html, body, #content
 @import 'ProgressBar'
 
 @import 'FlashMessage'
+
+@import 'PopupCreateContainer'
+@import 'FileContent'
+@import 'WksContent'