style(demande): improve global readability

app/assets/stylesheets/demande.scss

@@ -1,25 +1,29 @@
 @import "colors";
 @import "constants";
 
-.fr-container {
+.dossier-show {
   @media (max-width: 48em) {
     .d-block-sm {
       display: block;
     }
   }
-}
 
-.champ-content {
-  padding: 0 0 ,5rem;
+  .champ-label {
+    font-weight: 600;
+    margin-bottom: 0;
+    color: var(--text-action-high-grey);
+  }
 
-  p {
-    padding: 0;
-    margin: 0;
+  .champ-content {
+    padding: 0 0 0.5rem;
+
+    p {
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  .top-bordered {
+    border-top: 1px solid var(--border-default-grey);
   }
 }
-
-.top-bordered {
-  border-top: 1px solid var(--border-default-grey);
-}
-
-

app/components/dossiers/champ_row_show_component/champ_row_show_component.html.haml

@@ -1,13 +1,13 @@
 - @champs.each do |champ|
   .fr-px-4v.fr-my-2v
     - if champ.repetition?
-      = champ.libelle
+      %p.champ-label= "#{champ.libelle} :"
       - champ.rows.each do |row|
         = render Dossiers::ChampRowShowComponent.new(champs: row, demande_seen_at: @demande_seen_at, profile: @profile, repetition: true)
 
     - else
       .flex.d-block-sm
-        %p.flex-grow.fr-text-action-high--grey.fr-mb-0= "#{champ.libelle} :"
+        %p.champ-label.flex-grow= "#{champ.libelle} :"
         %p.fr-mb-0.fr-text--sm
           - if updated_after_deposer?(champ)
             %span{ class: highlight_if_unseen_class(@demande_seen_at, champ.updated_at) }
@@ -16,7 +16,7 @@
         .champ-content.fr-text-mention--grey{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
           %p= t('.blank')
       - else
-        .champ-content.fr-text-action-high--grey{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
+        .champ-content{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
           - case champ.type_champ
           - when TypeDeChamp.type_champs.fetch(:carte)
             = render partial: "shared/champs/carte/show", locals: { champ: champ }

app/views/shared/dossiers/_champs.html.haml

@@ -2,13 +2,13 @@
   .fr-my-4v.fr-px-4v
     .flex
 
-      %p.flex-grow.fr-text-action-high--grey.fr-mb-0= dossier.procedure.routing_criteria_name
+      %p.champ-label.flex-grow= dossier.procedure.routing_criteria_name
       %p.fr-mb-0.fr-text--xs
         - if demande_seen_at&.<(dossier.groupe_instructeur_updated_at)
           %span{ class: highlight_if_unseen_class(demande_seen_at, dossier.groupe_instructeur_updated_at) }
             = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: try_format_datetime(dossier.updated_at))
 
-    .champ-content.fr-text-action-high--grey{ class: highlight_if_unseen_class(demande_seen_at, dossier.groupe_instructeur_updated_at) }
+    .champ-content{ class: highlight_if_unseen_class(demande_seen_at, dossier.groupe_instructeur_updated_at) }
       %p= dossier.groupe_instructeur.label
 
 

app/views/shared/dossiers/_demande.html.haml

@@ -2,9 +2,9 @@
   - content_for(:notice_info) do
     = render partial: "shared/dossiers/france_connect_informations_notice", locals: { user_information: dossier.france_connect_information }
 
-.fr-container.counter-start-header-section
-  .fr-grid-row
-    .fr-col-12.fr-col-offset-lg-2.fr-col-lg-8
+.fr-container.counter-start-header-section.dossier-show
+  .fr-grid-row.fr-grid-row--center
+    .fr-col-12.fr-col-lg-10.fr-col-xl-8
       %h2.fr-h6.fr-background-alt--grey.fr-mb-0
         .flex-grow.fr-py-3v.fr-px-4v= t('views.shared.dossiers.demande.en_construction')
 

app/views/shared/dossiers/_identite_entreprise.html.haml

@@ -6,46 +6,46 @@
         %p
           Il nʼest pas possible dʼaccepter ou de refuser un dossier sans cette étape.
   .fr-my-2v
-    %p.fr-text-action-high--grey.fr-mb-0 SIRET :
-    .champ-content.fr-text-action-high--grey
+    %p.champ-label SIRET :
+    .champ-content
       %p= etablissement.siret
 - else
   - if etablissement.diffusable_commercialement == false && profile != 'instructeur'
     .fr-my-2v
-      .champ-content.fr-text-action-high--grey
+      .champ-content
         %p= t('warning_for_private_info', scope: 'views.shared.dossiers.identite_entreprise', siret: pretty_siret(etablissement.siret))
   - else
     .fr-my-2v
-      %p.fr-text-action-high--grey.fr-mb-0 Dénomination :
-      .champ-content.fr-text-action-high--grey
+      %p.champ-label Dénomination :
+      .champ-content
         %p= raison_sociale_or_name(etablissement)
     .fr-my-2v
-      %p.fr-text-action-high--grey.fr-mb-0 SIRET :
-      .champ-content.fr-text-action-high--grey
+      %p.champ-label SIRET :
+      .champ-content
         %p #{pretty_siret(etablissement.siret)} #{ render Dsfr::CopyButtonComponent.new(text: etablissement.siret, title: "Copier le siret dans le presse-papier", success: "Le siret a été copié dans le presse-papier") }
 
 
     - unless local_assigns[:short_identity]
       - if etablissement.siret != etablissement.entreprise.siret_siege_social
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 SIRET du siège social:
-          .champ-content.fr-text-action-high--grey
+          %p.champ-label SIRET du siège social:
+          .champ-content
             %p= etablissement.entreprise.siret_siege_social
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Forme juridique :
-        .champ-content.fr-text-action-high--grey
+        %p.champ-label Forme juridique :
+        .champ-content
           %p= sanitize(etablissement.entreprise.forme_juridique)
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Libellé NAF :
-        .champ-content.fr-text-action-high--grey
+        %p.champ-label Libellé NAF :
+        .champ-content
           %p= etablissement.libelle_naf
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Code NAF :
-        .champ-content.fr-text-action-high--grey
+        %p.champ-label Code NAF :
+        .champ-content
           %p= etablissement.naf
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Date de création :
-        .champ-content.fr-text-action-high--grey
+        %p.champ-label Date de création :
+        .champ-content
           %p
           = try_format_date(etablissement.entreprise.date_creation)
 
@@ -54,42 +54,42 @@
 
       - if profile == 'instructeur'
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0
+          %p.champ-label
             Effectif mensuel
             = try_format_mois_effectif(etablissement)
             (URSSAF) :
-          .champ-content.fr-text-action-high--grey
+          .champ-content
             %p= etablissement.entreprise_effectif_mensuel
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0
+          %p.champ-label
             Effectif moyen annuel
             = etablissement.entreprise_effectif_annuel_annee
             (URSSAF) :
-          .champ-content.fr-text-action-high--grey
+          .champ-content
             %p= etablissement.entreprise_effectif_annuel
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Effectif de l'organisation (INSEE) :
-        .champ-content.fr-text-action-high--grey
+        %p.champ-label Effectif de l'organisation (INSEE) :
+        .champ-content
           %p
           = effectif(etablissement)
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Numéro de TVA intracommunautaire :
-        .champ-content.fr-text-action-high--grey
+        %p.champ-label Numéro de TVA intracommunautaire :
+        .champ-content
           %p= etablissement.entreprise.numero_tva_intracommunautaire
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Adresse :
-        .champ-content.fr-text-action-high--grey
+        %p.champ-label Adresse :
+        .champ-content
           %p
           - etablissement.adresse.split("\n").each do |line|
             = line
             %br
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Capital social :
-        .champ-content.fr-text-action-high--grey
+        %p.champ-label Capital social :
+        .champ-content
           %p= pretty_currency(etablissement.entreprise.capital_social)
       .fr-my-2v
-        %p.fr-text-action-high--grey.fr-mb-0 Chiffre d’affaires :
-        .champ-content.fr-text-action-high--grey
+        %p.champ-label Chiffre d’affaires :
+        .champ-content
           %p
           - if profile == 'instructeur'
             %details
@@ -115,12 +115,12 @@
           = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
             locals: { libelle: 'Besoin en fonds de roulement', key: 'besoin_en_fonds_de_roulement', etablissement: etablissement }
           .fr-my-2v
-            %p.fr-text-action-high--grey.fr-mb-0
+            %p.champ-label
               Chiffres financiers clés (Banque de France)
               = "en #{pretty_currency_unit(etablissement.entreprise_bilans_bdf_monnaie)} :"
 
             - if controller.is_a?(Instructeurs::AvisController)
-              .champ-content.fr-text-action-high--grey
+              .champ-content
                 %p
                 Les consulter
                 = link_to "au format csv", bilans_bdf_instructeur_avis_path(@avis, format: 'csv')
@@ -129,7 +129,7 @@
                 ou
                 = link_to "au format ods", bilans_bdf_instructeur_avis_path(@avis, format: 'ods')
             - else
-              .champ-content.fr-text-action-high--grey
+              .champ-content
                 %p
                 Les consulter
                 = link_to "au format csv", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'csv')
@@ -139,54 +139,54 @@
                 = link_to "au format ods", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'ods')
         - else
           .fr-my-2v
-            %p.fr-text-action-high--grey.fr-mb-0
+            %p.champ-label
               Bilans Banque de France :
-            .champ-content.fr-text-action-high--grey
+            .champ-content
               %p Les 3 derniers bilans connus de votre entreprise par la Banque de France ont été joints à votre dossier.
       - if etablissement.entreprise_attestation_sociale.attached?
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Attestation sociale :
+          %p.champ-label Attestation sociale :
           - if profile == 'instructeur'
-            .champ-content.fr-text-action-high--grey
+            .champ-content
               %p= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_sociale)
           - else
-            .champ-content.fr-text-action-high--grey
+            .champ-content
               %p Une attestation de vigilance délivrée par l'ACOSS a été jointe à votre dossier.
 
       - if etablissement.entreprise_attestation_fiscale.attached?
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Attestation fiscale :
+          %p.champ-label Attestation fiscale :
           - if profile == 'instructeur'
-            .champ-content.fr-text-action-high--grey
+            .champ-content
               %p= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_fiscale)
           - else
-            .champ-content.fr-text-action-high--grey
+            .champ-content
               %p Une attestation fiscale délivrée par l'URSSAF a été jointe à votre dossier.
 
       - if etablissement.association?
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Numéro RNA :
-          .champ-content.fr-text-action-high--grey
+          %p.champ-label Numéro RNA :
+          .champ-content
             %p= etablissement.association_rna
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Titre :
-          .champ-content.fr-text-action-high--grey
+          %p.champ-label Titre :
+          .champ-content
             %p= etablissement.association_titre
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Objet :
-          .champ-content.fr-text-action-high--grey
+          %p.champ-label Objet :
+          .champ-content
             %p= etablissement.association_objet
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Date de création :
-          .champ-content.fr-text-action-high--grey
+          %p.champ-label Date de création :
+          .champ-content
             %p= try_format_date(etablissement.association_date_creation)
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Date de publication :
-          .champ-content.fr-text-action-high--grey
+          %p.champ-label Date de publication :
+          .champ-content
             %p= try_format_date(etablissement.association_date_publication)
         .fr-my-2v
-          %p.fr-text-action-high--grey.fr-mb-0 Date de déclaration :
-          .champ-content.fr-text-action-high--grey
+          %p.champ-label Date de déclaration :
+          .champ-content
             %p= try_format_date(etablissement.association_date_declaration)
 
 - unless local_assigns[:short_identity]

app/views/shared/dossiers/_identite_individual.html.haml

@@ -1,18 +1,18 @@
 
 .fr-my-2v
-  %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.civility')
-  .champ-content.fr-text-action-high--grey
+  %p.champ-label= t('views.users.dossiers.identite.civility')
+  .champ-content
     %p= individual.gender
 .fr-my-2v
-  %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.first_name')
-  .champ-content.fr-text-action-high--grey
+  %p.champ-label= t('views.users.dossiers.identite.first_name')
+  .champ-content
     %p= individual.prenom
 .fr-my-2v
-  %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.last_name')
-  .champ-content.fr-text-action-high--grey
+  %p.champ-label= t('views.users.dossiers.identite.last_name')
+  .champ-content
     %p= individual.nom
 - if individual.birthdate.present?
   .fr-my-2v
-    %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.birthdate')
-    .champ-content.fr-text-action-high--grey
+    %p.champ-label= t('views.users.dossiers.identite.birthdate')
+    .champ-content
       %p= try_format_date(individual.birthdate)

app/views/shared/dossiers/_user_infos.html.haml

@@ -1,4 +1,4 @@
 .fr-my-2v
-  %p.fr-text-action-high--grey.fr-mb-0 Email :
-  .champ-content.fr-text-action-high--grey
+  %p.champ-label Email :
+  .champ-content
     %p= user_deleted ? "#{email} (l’usager a supprimé son compte)" : email

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

@@ -3,21 +3,21 @@
 - content_for :footer do
   = render partial: "users/procedure_footer", locals: { procedure: @dossier.procedure, dossier: @dossier }
 
-.dossier-container.mb-4
+.dossier-container.fr-mb-4w
   = render partial: 'users/dossiers/show/header', locals: { dossier: @dossier }
 
   - if @dossier.en_construction?
     .fr-container
       .fr-grid-row.fr-grid-row--center
-        .fr-col-md-10.fr-col-lg-9
+        .fr-col-md-10.fr-col-xl-9
           = render Dossiers::EnConstructionNotSubmittedComponent.new(dossier: @dossier, user: current_user)
 
   = render partial: 'shared/dossiers/demande', locals: { dossier: @dossier, demande_seen_at: nil, profile: 'usager' }
 
 
-  .fr-container
-    .fr-grid-row
-      .fr-col-12.fr-col-offset-lg-2.fr-col-lg-8
+  .fr-container.fr-mt-2w
+    .fr-grid-row.fr-grid-row--center
+      .fr-col-12.fr-col-lg-10.fr-col-xl-8
         - if !@dossier.read_only?
           = link_to t('views.users.dossiers.demande.edit_dossier'), modifier_dossier_path(@dossier), class: 'fr-btn fr-btn-sm', 'title'=> "Modifier mon dossier tant qu'il n'est pas passé en instruction"
           .clearfix