feat(users/dossiers/*): rework header for consistent design, add some utils spacers

app/assets/stylesheets/dossier_views.scss

@@ -1,9 +1,7 @@
 @import "colors";
 @import "constants";
 
-#dossier-show {
-  margin-bottom: 30px;
-
+.dossier-container {
   .sub-header {
     .label {
       float: right;

app/assets/stylesheets/utils.scss

@@ -50,6 +50,8 @@
   color: $black;
 }
 
+
+
 .mt-1 {
   margin-top: $default-spacer;
 }
@@ -58,6 +60,10 @@
   margin-top: 2 * $default-spacer;
 }
 
+.mt-3 {
+  margin-top: 3 * $default-spacer;
+}
+
 .mt-4 {
   margin-top: 4 * $default-spacer;
 }
@@ -66,10 +72,62 @@
   margin-top: 8 * $default-spacer;
 }
 
+.mb-1 {
+  margin-bottom: $default-spacer;
+}
+
 .mb-2 {
   margin-bottom: 2 * $default-spacer;
 }
 
-.mb-1 {
-  margin-bottom: $default-spacer;
+.mb-3 {
+  margin-bottom: 3 * $default-spacer;
+}
+
+.mb-4 {
+  margin-bottom: 4 * $default-spacer;
+}
+
+.mb-8 {
+  margin-bottom: 8 * $default-spacer;
+}
+
+.pt-1 {
+  padding-top: $default-spacer;
+}
+
+.pt-2 {
+  padding-top: 2 * $default-spacer;
+}
+
+.pt-3 {
+  padding-top: 3 * $default-spacer;
+}
+
+.pt-4 {
+  padding-top: 4 * $default-spacer;
+}
+
+.pt-8 {
+  padding-top: 8 * $default-spacer;
+}
+
+.pb-1 {
+  padding-bottom: $default-spacer;
+}
+
+.pb-2 {
+  padding-bottom: 2 * $default-spacer;
+}
+
+.pb-3 {
+  padding-bottom: 3 * $default-spacer;
+}
+
+.pb-4 {
+  padding-bottom: 4 * $default-spacer;
+}
+
+.pb-8 {
+  padding-bottom: 8 * $default-spacer;
 }

app/views/users/dossiers/brouillon.html.haml

@@ -4,7 +4,7 @@
 - content_for :footer do
   = render partial: "users/procedure_footer", locals: { procedure: @dossier.procedure, dossier: @dossier }
 
-#dossier-draft
+.dossier-container
   .dossier-header.sub-header
     .container
       = render partial: "shared/dossiers/header", locals: { dossier: @dossier, apercu: false }

app/views/users/dossiers/demande.html.haml

@@ -3,7 +3,7 @@
 - content_for :footer do
   = render partial: "users/procedure_footer", locals: { procedure: @dossier.procedure, dossier: @dossier }
 
-#dossier-show
+.dossier-container.mb-4
   = render partial: 'users/dossiers/show/header', locals: { dossier: @dossier }
 
   = render partial: 'shared/dossiers/demande', locals: { dossier: @dossier, demande_seen_at: nil, profile: 'usager' }

app/views/users/dossiers/messagerie.html.haml

@@ -3,7 +3,7 @@
 - content_for :footer do
   = render partial: "users/procedure_footer", locals: { procedure: @dossier.procedure, dossier: @dossier }
 
-#dossier-show
+.dossier-container.mb-4
   = render partial: 'users/dossiers/show/header', locals: { dossier: @dossier }
 
   .container

app/views/users/dossiers/modifier.html.haml

@@ -3,7 +3,7 @@
 - content_for :footer do
   = render partial: "users/procedure_footer", locals: { procedure: @dossier.procedure, dossier: @dossier }
 
-#dossier-show
+.dossier-container.mb-4
   = render partial: 'users/dossiers/show/header', locals: { dossier: @dossier }
 
   .container

app/views/users/dossiers/show.html.haml

@@ -3,7 +3,7 @@
 - content_for :footer do
   = render partial: "users/procedure_footer", locals: { procedure: @dossier.procedure, dossier: @dossier }
 
-#dossier-show
+.dossier-container.mb-4
   = render partial: 'users/dossiers/show/header', locals: { dossier: @dossier }
 
   .container