Changing css for index dossier counting, wording

app/assets/stylesheets/dossiers.scss

@@ -56,6 +56,9 @@ h5 span {
     padding: 15px 40px 15px 20px;
     cursor: pointer;
     line-height: 1.8em;
+    .progress-bar-warning {
+      background-color: #E4594F;
+    }
   }
   .procedure_list_element:hover, .notification:hover {
     background-color: #668ABD;

app/assets/stylesheets/left_pannel.scss

@@ -14,23 +14,51 @@
     font-family: Arial;
     font-size: 16px;
     line-height: 18px;
+    margin-top: 20px;
     .infos {
       font-size: 25px;
       text-align: center;
-      margin: 20px 10px 30px 0;
+      margin: 10px 10px 30px 0;
       .projet-name {
         font-size: 25px;
         line-height: normal;
         padding: 5px;
       }
     }
+    .count {
+      display: inline-block;
+      padding: 3px;
+      border-radius: 25px;
+      min-width: 40px;
+      text-align: center;
+      line-height: 23px;
+    }
+    .text {
+      display: inline-block;
+      width: 30px;
+      margin: 0 0 0 8px;
+    }
     .dossiers-en-cours, .en-cours {
       margin-top: 20px;
     }
+    .dossiers-en-cours {
+      .count {
+        border: 1px solid #FFFFFF;
+      }
+    }
+    .nouveaux-dossiers {
+      .count {
+        background-color: #5CB85C;
+      }
+    }
+    .nouvelles-notifications {
+      .count {
+        background-color: #E4594F;
+      }
+    }
     .dossiers-en-cours, .nouveaux-dossiers, .nouvelles-notifications, .en-cours {
-      line-height: initial;
-      text-align: center;
-      margin-right: 10px;
+      margin: 5px auto 0 20px;
+      width: 150px;
     }
   }
   #action-block {

app/views/layouts/left_panels/_left_panel_backoffice_dossierscontroller_index.html.haml

@@ -1,16 +1,18 @@
 %div#first-block
   %div.dossiers-en-cours
-    = @facade_data_view.total_dossier
-    DOSSIERS SUIVIS
+    .count= @facade_data_view.total_dossier
+    .text= "SUIVIS"
   %div.nouveaux-dossiers
-    = @facade_data_view.total_new_dossier
-    NOUVEAUX DOSSIERS
+    .count= @facade_data_view.total_new_dossier
+    .text= "NOUVEAUX"
   %div.nouvelles-notifications
     - new_notifications = @facade_data_view.dossiers_with_unread_notifications.count
     - if new_notifications > 1
-      = "#{new_notifications} DOSSIERS MODIFIÉS"
+      .count= new_notifications
+      .text= "MODIFIÉS"
     - elsif new_notifications == 1
-      1 DOSSIER MODIFIÉ
+      .count 1
+      .text= "MODIFIÉ"
 
 %div#action-block