use backoffice-header in views

app/assets/stylesheets/new_design/procedures_show.scss

@@ -3,72 +3,63 @@
 @import "constants";
 
 #procedure-show {
-  .header {
+  .procedure-logo {
-    background-color: $light-grey;
+    margin-right: $default-padding;
-    padding-top: $default-padding;
+  }
 
-    .container {
+  h1 {
-      display: flex;
+    color: $black;
-    }
+    font-size: 22px;
+    margin-bottom: 2 * $default-padding;
+  }
 
-    .procedure-logo {
+  .dossiers-categories {
-      margin-right: $default-padding;
+    li {
-    }
+      display: inline-block;
+      height: 56px;
+      width: 130px;
+      line-height: 17px;
+      position: relative;
+      text-align: center;
+      font-size: 14px;
 
-    h1 {
+      a {
-      color: $black;
+        color: $black;
-      font-size: 22px;
+      }
-      margin-bottom: 2 * $default-padding;
-    }
 
-    .dossiers-categories {
+      &::before,
-      li {
+      &:last-child::after {
-        display: inline-block;
+        content: "";
-        height: 56px;
+        position: absolute;
-        width: 130px;
+        height: 36px;
-        line-height: 17px;
+        width: 1px;
-        position: relative;
+        background-color: $border-grey;
-        text-align: center;
+        margin-right: $default-padding;
-        font-size: 14px;
+      }
+
+      &::before {
+        left: 0px;
+      }
+
+      &:last-child::after {
+        right: 0px;
+        top: 0px;
+        margin-right: 0px;
+      }
+
+      &.active {
+        border-bottom: 2px solid $blue;
 
         a {
-          color: $black;
+          color: $blue;
         }
+      }
 
-        &::before,
+      .dossiers-count {
-        &:last-child::after {
+        position: relative;
-          content: "";
+        display: block;
-          position: absolute;
+        font-size: 16px;
-          height: 36px;
+        font-weight: bold;
-          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;
-
-          a {
-            color: $blue;
-          }
-        }
-
-        .dossiers-count {
-          position: relative;
-          display: block;
-          font-size: 16px;
-          font-weight: bold;
-        }
       }
     }
   }

app/views/new_gestionnaire/dossiers/_header.html.haml

@@ -1,10 +1,11 @@
-.container
+.backoffice-header
-  %ul.tabs
+  .container
-    %li
+    %ul.tabs
-      = link_to "Demande", "#", class: ("selected" if request.path == dossier_path(dossier.procedure, dossier))
+      %li
-    %li
+        = link_to "Demande", "#", class: ("selected" if current_page?(dossier_path(dossier.procedure, dossier)))
-      = link_to "Instruction", "#"
+      %li
-    %li
+        = link_to "Instruction", "#"
-      = link_to "Messagerie", "#"
+      %li
-    %li
+        = link_to "Messagerie", "#"
-      = link_to "Historique", "#"
+      %li
+        = link_to "Historique", "#"

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

@@ -1,6 +1,6 @@
 #procedure-show
-  .header
+  .backoffice-header
-    .container
+    .container.flex
       - if @procedure.logo.present?
         = image_tag @procedure.logo, height: 40, class: 'procedure-logo'