Add icon of title modification and move icon option on the right

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "mockapi": "node jsonserver/server.js",
     "servdev": "NODE_ENV=development webpack-dev-server --watch --colors --inline --hot --progress",
+    "servdevwindoz": "webpack-dev-server --watch --colors --inline --hot --progress",
     "servdev-dashboard": "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"

src/component/common/PopinFixed/PopinFixedHeader.jsx

@@ -13,6 +13,10 @@ const PopinFixedHeader = props => {
         {props.name}
       </div>
 
+      <div className={classnames('wsFileGeneric__header__changetitle', `${props.customClass}__header__changetitle`)}>
+        <i className='fa fa-pencil' />
+      </div>
+
       <div className={classnames('wsFileGeneric__header__close', `${props.customClass}__header__close`)}>
         <i className='fa fa-times' />
       </div>

src/component/common/PopinFixed/PopinFixedOption.jsx

@@ -7,9 +7,6 @@ const PopinFixedOption = props => {
     <div className='wsFileGeneric__option'>
       <div className='wsFileGeneric__option__menu'>
         <div className='wsFileGeneric__option__menu__action'>
-          <i className='fa fa-pencil' />
-        </div>
-        <div className='wsFileGeneric__option__menu__action'>
           <i className='fa fa-archive' />
         </div>
         <div className='wsFileGeneric__option__menu__action'>

src/css/Generic.styl

@@ -100,6 +100,11 @@
       text-overflow ellipsis
       overflow hidden
       white-space nowrap
+    &__changetitle
+      margin 0 15px
+      color white
+      font-size 20px
+      cursor pointer
     &__close
       border 1px solid white
       border-radius 5px
@@ -112,6 +117,7 @@
     border-bottom 1px solid grey
     padding 15px
     height 58px
+    text-align right
     background-color off-white
     & > i
       vertical-align middle
@@ -129,3 +135,23 @@
   &__wrapper
     display flex
     flex-direction column
+
+// // in Variable.styl
+// pageHtmlColor = #...
+// pageHtmlColor-hover = darken(pageHtmlColor)
+
+// darken = function (color) {
+//   return color * #... // check doc stylus
+// }
+
+// //////////////////////////
+
+// // .btn .btnGeneric .pageHtml
+// .btnGeneric
+//   padding 5px
+
+// .pageHtml
+//   background-color pageHtmlColor
+//   color white
+//   &:hover
+//     color pageHtmlColor-hover