https://github.com/tracim/tracim/issues/797, added color on jsx files with the classes in index.html

frontend/src/component/Account/Password.jsx

@@ -17,16 +17,16 @@ export const Password = props => {
           {props.t('Password')}
         </div>
         <input
-          className='personaldata__form__txtinput form-control'
+          className='personaldata__form__txtinput primaryColorBorderLighten form-control'
           type='password'
           placeholder={props.t('Old password')}
         />
         <input
-          className='personaldata__form__txtinput form-control mt-4'
+          className='personaldata__form__txtinput primaryColorBorderLighten form-control mt-4'
           type='password'
           placeholder={props.t('New password')}
         />
-        <button type='submit' className='personaldata__form__button btn btn-outline-primary mt-4'>
+        <button type='submit' className='personaldata__form__button primaryColorBorderLighten btn btn-outline-primary mt-4'>
           {props.t('Send')}
         </button>
       </form>

frontend/src/component/Account/PersonalData.jsx

@@ -19,7 +19,7 @@ export const PersonalData = props => {
         </div>
         <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
           <input
-            className='personaldata__form__txtinput form-control mt-3 mt-sm-0'
+            className='personaldata__form__txtinput primaryColorBorderLighten form-control mt-3 mt-sm-0'
             type='text'
             placeholder={props.t('Change your name')}
           />
@@ -29,12 +29,12 @@ export const PersonalData = props => {
         </div>
         <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
           <input
-            className='personaldata__form__txtinput form-control mt-3 mt-sm-0'
+            className='personaldata__form__txtinput primaryColorBorderLighten form-control mt-3 mt-sm-0'
             type='email'
             placeholder={props.t('Change your email')}
           />
         </div>
-        <button type='submit' className='personaldata__form__button btn btn-outline-primary'>
+        <button type='submit' className='personaldata__form__button primaryColorBorderLighten btn btn-outline-primary'>
           {props.t('Send')}
         </button>
       </form>

frontend/src/component/Account/UserInfo.jsx

@@ -10,7 +10,7 @@ export const UserInfo = props => {
         <div className='account__userinformation__name mb-3'>
           {`${props.user.firstname} ${props.user.lastname}`}
         </div>
-        <a href={`mailto:${props.user.email}`} className='account__userinformation__email d-block mb-3'>
+        <a href={`mailto:${props.user.email}`} className='account__userinformation__email d-block primaryColorFontLighten mb-3'>
           {props.user.email}
         </a>
         <div className='account__userinformation__role mb-3'>
@@ -19,7 +19,7 @@ export const UserInfo = props => {
         { /* <div className='account__userinformation__job mb-3'>
           {props.user.job}
         </div>
-        <a href='http://www.algoo.fr' className='account__userinformation__company'>
+        <a href='http://www.algoo.fr' className='account__userinformation__company primaryColorFontLighten'>
           {props.user.company}
         </a> */ }
       </div>

frontend/src/component/Dashboard/MoreInfo.jsx

@@ -6,7 +6,7 @@ export const MoreInfo = props =>
   <div className='moreinfo'>
     <div className='moreinfo__webdav genericBtnInfoDashboard'>
       <div
-        className='moreinfo__webdav__btn genericBtnInfoDashboard__btn'
+        className='moreinfo__webdav__btn genericBtnInfoDashboard__btn primaryColorBorderLighten primaryColorFontLighten'
         onClick={props.onClickToggleWebdav}
       >
         <div className='moreinfo__webdav__btn__icon genericBtnInfoDashboard__btn__icon'>

frontend/src/component/Dashboard/UserStatus.jsx

@@ -40,7 +40,7 @@ export const UserStatus = props =>
         ? (
           <div className='userstatus__notification__subscribe dropdown'>
             <button
-              className='userstatus__notification__subscribe__btn btn btn-outline-primary dropdown-toggle'
+              className='userstatus__notification__subscribe__btn btn btn-outline-primary dropdown-toggle primaryColorBorderLighten'
               type='button'
               id='dropdownMenuButton'
               data-toggle='dropdown'
@@ -62,7 +62,7 @@ export const UserStatus = props =>
         )
         : (
           <div
-            className='userstatus__notification__btn btn btn-outline-primary'
+            className='userstatus__notification__btn btn btn-outline-primary primaryColorBorderLighten'
             onClick={props.onClickToggleNotifBtn}
           >
             {props.t('Change your status')}

frontend/src/component/Dashboard/UserStatus.styl

@@ -16,13 +16,15 @@
     font-size 18px
     &__btn
       margin 20px 0
-      border 1px solid thirdColor
+      border-width 1px
+      border-style solid
       padding 10px 15px
       cursor pointer
     &__subscribe
       &__btn
         margin 20px 0
-        border 1px solid thirdColor
+        border-width 1px
+        border-style solid
         padding 10px 15px
       &__submenu
         padding 0

frontend/src/component/Header/MenuActionListItem/Search.jsx

@@ -14,7 +14,7 @@ const Search = props => {
           onChange={props.onChangeInput}
         />
         <button
-          className='search__addonsearch input-group-addon'
+          className='search__addonsearch input-group-addon primaryColorBgLightenHover primaryColorFontHover'
           id='headerInputSearch'
           onClick={props.onClickSubmit}
         >

frontend/src/container/Dashboard.jsx

@@ -218,7 +218,7 @@ class Dashboard extends React.Component {
           <PageContent>
             <div className='dashboard__workspace-wrapper'>
               <div className='dashboard__workspace'>
-                <div className='dashboard__workspace__title'>
+                <div className='dashboard__workspace__title primaryColorFont'>
                   {props.curWs.label}
                 </div>
 

frontend/src/container/Login.jsx

@@ -84,7 +84,7 @@ class Login extends React.Component {
               <div className='col-12 col-sm-11 col-md-8 col-lg-6 col-xl-4'>
 
                 <Card customClass='loginpage__connection'>
-                  <CardHeader customClass='connection__header text-center'>{this.props.t('Connection')}</CardHeader>
+                  <CardHeader customClass='connection__header primaryColorBgLighten text-center'>{this.props.t('Connection')}</CardHeader>
 
                   <CardBody formClass='connection__form'>
                     <div>

frontend/src/container/ProgressBar.jsx

@@ -13,7 +13,7 @@ class ProgressBar extends Component {
               <span className='progress-right'>
                 <span className='progress-bar' />
               </span>
-              <div className='progress-value'>
+              <div className='progress-value primaryColorBg'>
                 90%
               </div>
             </div>

frontend/src/css/AccountPage.styl

@@ -69,11 +69,8 @@ settingText()
         height 150px
     &__name
       font-size 22px
-    &__email
-      color thirdColor
     &__company
       font-size 20px
-      color thirdColor
   &__delimiter
     position relative
     top 3px
@@ -133,11 +130,13 @@ settingText()
           &__txtinput
             display block
             width auto
-            border 1px solid thirdColor
+            border-width 1px
+            border-style solid
             border-radius 5px
           &__button
             vertical-align top
-            border 1px solid thirdColor
+            border-width 1px
+            border-style solid
             border-radius 5px
             padding 8px 25px
             cursor pointer

frontend/src/css/Generic.styl

@@ -202,10 +202,10 @@ a
   &__btn
     display flex
     margin-bottom 30px
-    border 1px solid thirdColor
+    border-width 1px
+    border-style solid
     border-radius 10px
     padding 15px 25px
-    color thirdColor
     cursor pointer
     &:hover, &:focus
       background-color thirdColor

frontend/src/css/Header.styl

@@ -33,9 +33,6 @@
           .search__addonsearch
             background-color transparent
             cursor pointer
-            &:hover
-              background-color thirdColor
-              color mainColor
       .btnnavbar
         border 1px solid grey
         background-color transparent

frontend/src/css/Login.styl

@@ -15,8 +15,7 @@
     border none
     box-shadow shadow-right
     .connection__header
-      background-color thirdColor
-      color #FFF
+      color off-white
       font-size 25px
   .connection__form
     &__rememberme

frontend/src/css/ProgressBar.styl

@@ -64,7 +64,6 @@
     height 90%
     border 10px solid off-white
     border-radius 50%
-    background darkBlue
     font-size 24px
     color off-white
     line-height 135px