Redesign the tabs so that they look more like tabs

app/assets/stylesheets/new_design/procedures_show.scss

@@ -16,50 +16,52 @@
   .dossiers-categories {
     li {
       display: inline-block;
-      height: 56px;
+      line-height: 36px;
-      width: 130px;
-      line-height: 17px;
       position: relative;
       text-align: center;
       font-size: 14px;
+      padding-left: 20px;
+      padding-right: 20px;
+      border-radius: 3px 3px 0 0;
+      border: 1px solid transparent;
 
       a {
         color: $black;
       }
 
-      &::before,
-      &:last-child::after {
-        content: "";
-        position: absolute;
-        height: 36px;
-        width: 1px;
-        background-color: $border-grey;
-        margin-right: $default-padding;
-      }
-
-      &::before {
-        left: 0px;
-      }
-
-      &:last-child::after {
-        right: 0px;
-        top: 0px;
-        margin-right: 0px;
-      }
-
       &.active {
-        border-bottom: 2px solid $blue;
+        background-color: white;
+        border-top: 1px solid $border-grey;
+        border-left: 1px solid $border-grey;
+        border-right: 1px solid $border-grey;
 
         a {
           color: $blue;
         }
+
+        .dossiers-count {
+          color: $blue;
+        }
+      }
+
+      &:hover {
+        a {
+          color: $blue;
+        }
+
+        .dossiers-count {
+          color: $blue;
+        }
       }
 
       .dossiers-count {
-        position: relative;
+        background-color: rgba(0,0,0,0.08);
-        display: block;
+        padding-left: 5px;
-        font-size: 16px;
+        padding-right: 5px;
+        border-radius: 100px;
         font-weight: bold;
+        color: rgba(0,0,0,0.6);
+        font-size: 14px;
       }
     }
   }

app/views/new_gestionnaire/procedures/show.html.haml

@@ -9,28 +9,28 @@
         %ul.dossiers-categories
           %li{ class: (@statut == 'a-suivre') ? 'active' : nil }>
             = link_to(procedure_path(@procedure, statut: 'a-suivre')) do
-              %span.dossiers-count= @a_suivre_dossiers.count
               à suivre
+              %span.dossiers-count= @a_suivre_dossiers.count
 
           %li{ class: (@statut == 'suivis') ? 'active' : nil }>
             = link_to(procedure_path(@procedure, statut: 'suivis')) do
-              %span.dossiers-count= @followed_dossiers.count
               = t('pluralize.followed', count: @followed_dossiers.count)
+              %span.dossiers-count= @followed_dossiers.count
 
           %li{ class: (@statut == 'traites') ? 'active' : nil }>
             = link_to(procedure_path(@procedure, statut: 'traites')) do
-              %span.dossiers-count= @termines_dossiers.count
               = t('pluralize.processed', count: @termines_dossiers.count)
+              %span.dossiers-count= @termines_dossiers.count
 
           %li{ class: (@statut == 'tous') ? 'active' : nil }>
             = link_to(procedure_path(@procedure, statut: 'tous')) do
-              %span.dossiers-count= @all_state_dossiers.count
               tous les dossiers
+              %span.dossiers-count= @all_state_dossiers.count
 
           %li{ class: (@statut == 'archives') ? 'active' : nil }>
             = link_to(procedure_path(@procedure, statut: 'archives')) do
-              %span.dossiers-count= @archived_dossiers.count
               = t('pluralize.archived', count: @archived_dossiers.count)
+              %span.dossiers-count= @archived_dossiers.count
 
   .container
     - if @dossiers.present?