update theming tracimv2

src/component/Workspace/FileItem.jsx

@@ -7,13 +7,13 @@ const FileItem = props => {
   const iconStatus = (() => {
     switch (props.status) {
       case 'current':
-        return 'fa fa-cogs'
+        return 'fa fa-fw fa-cogs'
       case 'validated':
-        return 'fa fa-check'
+        return 'fa fa-fw fa-check'
       case 'canceled':
-        return 'fa fa-times'
+        return 'fa fa-fw fa-times'
       case 'outdated':
-        return 'fa fa-ban'
+        return 'fa fa-fw fa-ban'
     }
   })()
 
@@ -78,8 +78,8 @@ const FileItem = props => {
       </div>
 
       <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2'>
-        <div className={classnames('file__status d-flex align-items-center justify-content-center') + colorStatus}>
-          <div className='file__status__icon d-block mr-3'>
+        <div className={classnames('file__status d-flex align-items-center justify-content-start') + colorStatus}>
+          <div className='file__status__icon d-block '>
             <i className={iconStatus} />
           </div>
           <div className='file__status__text d-none d-xl-block'>

src/component/common/Input/DropdownCreateButton.jsx

@@ -6,7 +6,7 @@ const DropdownCreateButton = props => {
   return (
     <div className={classnames(props.parentClass, props.customClass, 'dropdownCreateBtn')}>
       <button
-        className={classnames(`${props.parentClass}__label`, 'dropdownCreateBtn__label btn btn-succes dropdown-toggle')}
+        className={classnames(`${props.parentClass}__label`, 'dropdownCreateBtn__label btn btn-primary dropdown-toggle')}
         type='button'
         id='dropdownCreateBtn'
         data-toggle='dropdown'

src/container/Header.jsx

@@ -9,7 +9,7 @@ import MenuActionListItemSearch from '../component/Header/MenuActionListItem/Sea
 import MenuActionListItemDropdownLang from '../component/Header/MenuActionListItem/DropdownLang.jsx'
 import MenuActionListItemHelp from '../component/Header/MenuActionListItem/Help.jsx'
 import MenuActionListItemMenuProfil from '../component/Header/MenuActionListItem/MenuProfil.jsx'
-import logoHeader from '../img/logoHeader.svg'
+import logoHeader from '../img/logo-tracim.png'
 import { setLangActive } from '../action-creator.sync.js'
 
 class Header extends React.Component {

src/container/Sidebar.jsx

@@ -90,7 +90,7 @@ class Sidebar extends React.Component {
           </nav>
 
           <div className='sidebar__btnnewworkspace'>
-            <button className='sidebar__btnnewworkspace__btn btn btn-success'>
+            <button className='sidebar__btnnewworkspace__btn btn btn-primary'>
               {t('Sidebar.create_new_workspace')}
             </button>
           </div>

src/css/Dashboard.styl

@@ -32,25 +32,6 @@ coloricon()
 
 .dashboard
   margin-left 20px
-  .btn-primary
-    background-color thirdColor
-    color off-white
-    border-color secondColor
-    &:hover, &:focus, &:active
-      color off-white
-      border-color secondColor
-      background-color secondColor
-      box-shadow 0 0 1px 2px fifthColor
-      outline fifthColor
-  .btn-outline-primary
-    color thirdColor
-    border-color thirdColor
-    &:hover, &:focus, &:active
-      color off-white
-      border-color thirdColor
-      background-color thirdColor
-      box-shadow 0 0 1px 2px fifthColor
-      outline fifthColor
   &__header
     flexwrap()
     align-items center
@@ -210,7 +191,7 @@ coloricon()
             font-size 18px
         &__delete
           font-size 20px
-          color thirdColor
+          color darkGrey
           cursor pointer
     &__btnadd
       border-top 1px solid grey
@@ -233,7 +214,7 @@ coloricon()
             font-size 25px
         &__text
           font-size 18px
-          color thirdColor
+          color fontColor
           cursor pointer
     &__form
       padding 15px

src/css/ExtandedAction.styl

@@ -1,7 +1,7 @@
 .extandedaction
   .btn-outline-primary
-    color thirdColor
-    border-color thirdColor
+    color fontColor
+    border-color secondColor
     &:hover, &:focus, &:active
       color off-white
       border-color thirdColor

src/css/FileItem.styl

@@ -16,7 +16,7 @@
   border-bottom 0
   cursor pointer
   &:hover
-    background-color fourthColor
+    background-color hover-theme
   &__type
     font-size 30px
     text-align center
@@ -29,6 +29,7 @@
       font-size 17px
   &__status
     &__text
+      margin-left 15px
       font-size 20px
     &__icon
       font-size 30px

src/css/Folder.styl

@@ -16,7 +16,7 @@ border-style = 1px solid secondColor
 // @Info: the very last line of file or folder has it's border bottom added in js
 // -----------------------------------------------------
 
-.folder.active > .folder__content > .file, .folder.active > .folder__content > .extandedaction
+.folder > .folder__content > .file, .folder > .folder__content > .extandedaction
   padding-right 7px
 
 folderclose()
@@ -58,9 +58,9 @@ folderopen()
     background-color lightGrey
     cursor pointer
     &:hover
-      background-color fourthColor
+      background-color hover-theme
       .folder__header__triangleborder__triangle
-        border-color fourthColor transparent transparent transparent
+        border-color hover-theme transparent transparent transparent
     &__triangleborder
       display none
       position absolute
@@ -77,7 +77,7 @@ folderopen()
         left -30px
         border-style solid
         border-width 25px 30px 0 30px
-        border-color lightGrey transparent transparent transparent
+        border-color fourthColor transparent transparent transparent
     &__name
       display flex
       &__icon
@@ -103,8 +103,8 @@ folderopen()
           .addbtn
             &__text
               font-size 17px
-              color thirdColor
-              border-color thirdColor
+              color fontColor
+              border-color secondColor
               &:hover, &:focus, &:active
                 color off-white
                 border-color thirdColor

src/css/Generic.styl

@@ -3,34 +3,36 @@
   &__content
     height 100%
 
-.btn-outline-primary
-  &:hover, &:focus, &:active, &:visited
-    color off-white
-    border-color thirdColor
-    background-color thirdColor
-    box-shadow 0 0 1px 2px fifthColor
-    outline fifthColor
-
-.btn-outline-primary.dropdown-toggle
-  &:hover, &:focus, &:active, &:visited
-    color off-white
-    border-color thirdColor
-    background-color thirdColor
-    box-shadow 0 0 1px 2px fifthColor
-    outline fifthColor
 
 .btn-primary
-  &:hover, &:focus, &:active, &:visited
-    color off-white
-    border-color secondColor
-    background-color secondColor
-    box-shadow 0 0 1px 2px fifthColor
-    outline fifthColor
-
-.dropdown-item
-  &:hover, &:focus, &:active, &:visited
-    background-color fourthColor
-    color off-white
+  background-color thirdColor
+  border-color secondColor
+  &:hover, &:focus, &:active, &:visited, &:focus-within
+    background-color hover-button
+    border-color hover-button
+    box-shadow 0 0 1px 2px secondColor
+    outline secondColor solid 1px
+
+.btn-outline-primary
+  color fontColor
+  border-color secondColor
+  &:hover, &:focus, &:active, &:visited, &:focus-within
+    background-color hover-button
+    border-color hover-button
+    box-shadow 0 0 1px 2px secondColor
+    outline secondColor solid 1px
+
+.btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle
+  background-color hover-button
+  border-color hover-button
+  box-shadow 0 0 1px 2px secondColor
+  outline secondColor solid 1px
+
+.btn-outline-primary.active, .btn-outline-primary:active, .show>.btn-outline-primary.dropdown-toggle
+  background-color hover-button
+  border-color hover-button
+  box-shadow 0 0 1px 2px secondColor
+  outline secondColor solid 1px
 
 .sidebarpagecontainer
   display flex
@@ -93,7 +95,7 @@
   margin-left 10px
   &__label
     padding 10px 65px
-    background-color green
+    background-color thirdColor
     cursor pointer
     &__text
       display inline-block

src/css/Header.styl

@@ -100,6 +100,8 @@
             padding 0
             left inherit
             right 0
+            .dropdown-item
+              color fontColor
             &__link
               padding 10px 0
 

src/css/Sidebar.styl

@@ -60,6 +60,11 @@ leftside()
       display block
       margin 0 auto
       padding 15px 30px
+      background-color thirdColor
+      border-color thirdColor
+      &:hover, &:focus, &:active, &:visited
+        background-color fifthColor
+        border-color fifthColor
   &__navigation
     padding 0
     overflow hidden

src/css/Variable.styl

@@ -9,6 +9,9 @@ thirdColor = lighten(secondColor, 25%) // #2571fe bg workspace name
 fourthColor = lighten(secondColor, 55%) // #82b2cc bg filter sidebar
 fifthColor = lighten(secondColor, 10%)
 
+hover-theme = lighten(secondColor, 75%)
+hover-button = lighten(secondColor, 10%)
+
 fontColor = #252525
 
 darkGrey = #252525