style(dossier): status overview with dsfr class

app/assets/stylesheets/_colors.scss

@@ -25,4 +25,3 @@ $blue-france-500: #000091;
 $blue-france-400: #7F7FC8;
 $blue-cumulus-950: #E6EEFE;
 $g700: #383838;
-$alt-blue-france: rgba(245, 245, 254, 1);

app/assets/stylesheets/landing.scss

@@ -142,7 +142,7 @@ $landing-breakpoint: 1040px;
 .usagers-panel,
 .numbers-panel,
 .cta-panel-2 {
-  background-color: $alt-blue-france;
+  background-color: var(--background-alt-blue-france);
 }
 
 .more-info {

app/assets/stylesheets/status_overview.scss

@@ -1,15 +1,8 @@
 @import "colors";
 @import "constants";
 
-.status-overview {
-  text-align: center;
-  margin-bottom: $default-padding * 2;
-}
-
 .status-timeline {
   display: inline-block;
-  margin-top: $default-padding * 2;
-  margin-bottom: $default-padding * 2;
   border: 1px solid #808080;
   border-radius: 3px;
 
@@ -46,15 +39,6 @@
 }
 
 .status-explanation {
-  text-align: left;
-
-  .brouillon,
-  .en-construction,
-  .en-instruction {
-    max-width: 650px;
-    margin: auto;
-  }
-
   p {
     margin-bottom: $default-padding;
   }

app/assets/stylesheets/sub_header.scss

@@ -2,7 +2,7 @@
 @import "constants";
 
 .sub-header {
-  background-color: $alt-blue-france;
+  background-color: var(--background-alt-blue-france);
   padding-top: $default-padding;
   margin-bottom: $sub-header-bottom-margin;
   border-bottom: 1px solid $border-grey;

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

@@ -6,7 +6,7 @@
 .dossier-container.mb-4
   = render partial: 'users/dossiers/show/header', locals: { dossier: @dossier }
 
-  .container
+  .fr-container
     = render partial: 'users/dossiers/show/status_overview', locals: { dossier: @dossier }
     = render partial: 'users/dossiers/show/papertrail', locals: { dossier: @dossier }
 

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

@@ -1,80 +1,82 @@
-.status-overview
+.fr-mb-4w
   - if !dossier.termine?
-    %ul.status-timeline
+    .fr-grid-row.fr-grid-row--center
-      - if dossier.brouillon?
+      .fr-col-md-8.text-center
-        %li.brouillon{ class: dossier.brouillon? ? 'active' : nil }
+        %ul.status-timeline.fr-mb-4w
-          = t('views.users.dossiers.show.status_overview.status_draft')
+          - if dossier.brouillon?
-      %li.en-construction{ class: dossier.en_construction? ? 'active' : nil }
+            %li.brouillon{ class: dossier.brouillon? ? 'active' : nil }
-        = t('views.users.dossiers.show.status_overview.status_in_progress')
+              = t('views.users.dossiers.show.status_overview.status_draft')
-      %li.en-instruction{ class: dossier.en_instruction? ? 'active' : nil }
+          %li.en-construction{ class: dossier.en_construction? ? 'active' : nil }
-        = t('views.users.dossiers.show.status_overview.status_review')
+            = t('views.users.dossiers.show.status_overview.status_in_progress')
-      %li.termine{ class: dossier.termine? ? 'active' : nil }
+          %li.en-instruction{ class: dossier.en_instruction? ? 'active' : nil }
-        = t('views.users.dossiers.show.status_overview.status_completed')
+            = t('views.users.dossiers.show.status_overview.status_review')
+          %li.termine{ class: dossier.termine? ? 'active' : nil }
+            = t('views.users.dossiers.show.status_overview.status_completed')
+
+  .fr-grid-row.fr-grid-row--center
+    .fr-col-md-10.fr-col-lg-9.status-explanation
+      -# brouillon does not occure
+      - if dossier.en_construction?
+        .en-construction
+          %p{ role: 'status' }
+            = t('views.users.dossiers.show.status_overview.en_construction_html')
+
+          = render partial: 'users/dossiers/show/estimated_delay', locals: { procedure: dossier.procedure }
+
+          %p
+            = t('views.users.dossiers.show.status_overview.use_mailbox_for_questions_html', mailbox_url: messagerie_dossier_url(dossier))
+
+      - elsif dossier.en_instruction?
+        .en-instruction
+          %p{ role: 'status' }
+            = t('views.users.dossiers.show.status_overview.admin_review')
+
+          = render partial: 'users/dossiers/show/estimated_delay', locals: { procedure: dossier.procedure }
+
+          %p
+            = t('views.users.dossiers.show.status_overview.use_mailbox_for_questions_html', mailbox_url: messagerie_dossier_url(dossier))
+
+      - elsif dossier.accepte?
+        .accepte
+          %p.decision{ role: 'status' }
+            %span.icon.accept
+            = t('views.users.dossiers.show.status_overview.acceptee_html')
+
+          - if dossier.motivation.present?
+            %h3= t('views.users.dossiers.show.status_overview.accepte_motivation')
+            %blockquote= dossier.motivation
+
+          = render partial: 'users/dossiers/show/download_justificatif', locals: { dossier: dossier }
+
+          - if dossier.attestation.present?
+            .action
+              = link_to attestation_dossier_path(dossier), target: '_blank', rel: 'noopener', class: 'button primary' do
+                %span.icon.download-white
+                = t('views.users.dossiers.show.status_overview.accepte_attestation')
 
 
-  .status-explanation
+      - elsif dossier.refuse?
-    -# brouillon does not occure
+        .refuse
-    - if dossier.en_construction?
+          %p.decision{ role: 'status' }
-      .en-construction
+            %span.icon.refuse
-        %p{ role: 'status' }
+            = t('views.users.dossiers.show.status_overview.refuse_html')
-          = t('views.users.dossiers.show.status_overview.en_construction_html')
 
-        = render partial: 'users/dossiers/show/estimated_delay', locals: { procedure: dossier.procedure }
+          - if dossier.motivation.present?
+            %h3= t('views.users.dossiers.show.status_overview.refuse_motivation')
+            %blockquote= dossier.motivation
 
-        %p
+          = render partial: 'users/dossiers/show/download_justificatif', locals: { dossier: dossier }
-          = t('views.users.dossiers.show.status_overview.use_mailbox_for_questions_html', mailbox_url: messagerie_dossier_url(dossier))
-
-    - elsif dossier.en_instruction?
-      .en-instruction
-        %p{ role: 'status' }
-          = t('views.users.dossiers.show.status_overview.admin_review')
-
-        = render partial: 'users/dossiers/show/estimated_delay', locals: { procedure: dossier.procedure }
-
-        %p
-          = t('views.users.dossiers.show.status_overview.use_mailbox_for_questions_html', mailbox_url: messagerie_dossier_url(dossier))
-
-    - elsif dossier.accepte?
-      .accepte
-        %p.decision{ role: 'status' }
-          %span.icon.accept
-          = t('views.users.dossiers.show.status_overview.acceptee_html')
-
-        - if dossier.motivation.present?
-          %h3= t('views.users.dossiers.show.status_overview.accepte_motivation')
-          %blockquote= dossier.motivation
-
-        = render partial: 'users/dossiers/show/download_justificatif', locals: { dossier: dossier }
-
-        - if dossier.attestation.present?
           .action
-            = link_to attestation_dossier_path(dossier), target: '_blank', rel: 'noopener', class: 'button primary' do
+            = link_to t('views.users.dossiers.show.status_overview.refuse_reply'), messagerie_dossier_url(dossier, anchor: 'new_commentaire'), class: 'fr-link'
-              %span.icon.download-white
-              = t('views.users.dossiers.show.status_overview.accepte_attestation')
 
+      - elsif dossier.sans_suite?
+        .sans-suite
+          %p.decision{ role: 'status' }
+            %span.icon.without-continuation
+            = t('views.users.dossiers.show.status_overview.sans_suite_html')
 
-    - elsif dossier.refuse?
+          = render partial: 'users/dossiers/show/download_justificatif', locals: { dossier: dossier }
-      .refuse
-        %p.decision{ role: 'status' }
-          %span.icon.refuse
-          = t('views.users.dossiers.show.status_overview.refuse_html')
 
-        - if dossier.motivation.present?
+          - if dossier.motivation.present?
-          %h3= t('views.users.dossiers.show.status_overview.refuse_motivation')
+            %h3= t('views.users.dossiers.show.status_overview.sans_suite_motivation')
-          %blockquote= dossier.motivation
+            %blockquote= dossier.motivation
-
-        = render partial: 'users/dossiers/show/download_justificatif', locals: { dossier: dossier }
-        .action
-          = link_to t('views.users.dossiers.show.status_overview.refuse_reply'), messagerie_dossier_url(dossier, anchor: 'new_commentaire'), class: 'fr-link'
-
-    - elsif dossier.sans_suite?
-      .sans-suite
-        %p.decision{ role: 'status' }
-          %span.icon.without-continuation
-          = t('views.users.dossiers.show.status_overview.sans_suite_html')
-
-        = render partial: 'users/dossiers/show/download_justificatif', locals: { dossier: dossier }
-
-        - if dossier.motivation.present?
-          %h3= t('views.users.dossiers.show.status_overview.sans_suite_motivation')
-          %blockquote= dossier.motivation

spec/views/users/dossiers/show.html.haml_spec.rb

@@ -10,7 +10,7 @@ describe 'users/dossiers/show', type: :view do
 
   it 'renders a summary of the dossier state' do
     expect(rendered).to have_text("Dossier nº #{dossier.id}")
-    expect(rendered).to have_selector('.status-overview')
+    expect(rendered).to have_text('dossier est en construction')
   end
 
   context 'with messages' do