improve dark mode for admin user

app/assets/images/icons/move-handle.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fas" data-icon="arrows-alt-v" class="svg-inline--fa fa-arrows-alt-v fa-w-8 fa-lg" width="32" height="32"><path d="M19.04 20.763h-1.656v-9.526h1.656c.768 0 2.494.242.61-1.6l-3.094-3.362a.815.815 0 0 0-1.22 0l-3.093 3.361c-1.643 1.831-.159 1.6.61 1.6h1.655v9.527h-1.655c-.769 0-2.235-.244-.61 1.6l3.093 3.362a.815.815 0 0 0 1.22 0l3.094-3.361c1.884-1.795.158-1.6-.61-1.6z" fill="currentColor"/><rect width="9" height="2" y="11" ry=".402"/><rect ry=".402" y="19" height="2" width="9"/><rect width="9" height="2" y="15" ry=".402"/><rect ry=".402" y="11" x="23" height="2" width="9"/><rect width="9" height="2" x="23" y="19" ry=".402"/><rect ry=".402" y="15" x="23" height="2" width="9"/></svg>

app/assets/stylesheets/forms.scss

@@ -386,7 +386,6 @@
 
   [data-reach-combobox-token] button {
     border: solid 1px $border-grey;
-    color: $black;
     border-radius: 4px;
     padding: $default-spacer;
     margin-right: $default-spacer;
@@ -449,22 +448,6 @@
     margin-bottom: $default-padding;
   }
 
-  .explication-libelle {
-    font-weight: bold;
-    font-size: 20px;
-    margin-bottom: $default-padding;
-  }
-
-  .explication {
-    margin-bottom: $default-fields-spacer;
-    padding: $default-spacer;
-    background-color: $light-grey;
-
-    p:not(:last-child) {
-      margin-bottom: $default-padding;
-    }
-  }
-
   .send-wrapper {
     display: flex;
     width: 100%;
@@ -662,6 +645,11 @@ textarea::placeholder {
   }
 }
 
+[data-fr-theme="dark"] .fixed-footer {
+  border-top: 2px solid var(--background-action-low-blue-france-hover);
+  background-color: var(--background-action-low-blue-france);
+}
+
 .fixed-footer {
   border-top: 2px solid $blue-france-500;
   position: fixed;

app/assets/stylesheets/icons.scss

@@ -170,10 +170,6 @@
     background-image: image-url("icons/trash.svg");
   }
 
-  &.move-handle {
-    background-image: image-url("icons/move-handle.svg");
-  }
-
   &.mandatory {
     width: 10px;
   }

app/assets/stylesheets/manager.scss

@@ -23,7 +23,6 @@
 .form [data-reach-combobox-token] button {
   border: solid 1px #CCCCCC;
   background-color: transparent;
-  color: #333333;
   border-radius: 4px;
   padding: 8px;
   margin-right: 8px;

app/assets/stylesheets/personnes_impliquees.scss

@@ -19,7 +19,6 @@
 
     [data-reach-combobox-token] button {
       border: solid 1px $border-grey;
-      color: $black;
       margin-top: 0.5 * $default-padding;
       margin-bottom: 0.5 * $default-padding;
       margin-right: 0.5 * $default-padding;

app/assets/stylesheets/procedure_champs_editor.scss

@@ -25,15 +25,9 @@
       box-shadow: 0px 2px 4px -4px;
     }
 
-    .handle.icon {
+    .handle {
-      width: 32px;
-      height: 32px;
-      background-size: 32px;
-      margin-left: 7px;
-      margin-right: 16px;
       align-self: center;
       cursor: grab;
-      opacity: 0.8;
 
       &:hover {
         opacity: 0.4;

app/assets/stylesheets/procedure_form.scss

@@ -22,7 +22,6 @@
 .procedure-form__column--form {
   flex: 10;
   padding: 0 $default-padding;
-  background-color: $light-grey;
 
   input[type=file] {
     background-color: transparent; // Remove white bg set by DSFR
@@ -67,6 +66,11 @@
   }
 }
 
+[data-fr-theme="dark"] .procedure-form__actions {
+  background: var(--background-action-low-blue-france);
+  border-top: 1px solid var(--background-action-low-blue-france-hover);
+}
+
 .procedure-form__actions {
   display: flex;
   padding: $default-spacer $default-padding;

app/assets/stylesheets/sources_particulier_form.scss

@@ -1,26 +0,0 @@
-@import "constants";
-
-#sources-particulier-form {
-  h2 {
-    margin-bottom: 0;
-  }
-
-  h3 {
-    margin-top: 2 * $default-padding;
-  }
-
-  .explication {
-    padding: $default-padding;
-
-    ul {
-      list-style-type: circle;
-      list-style-position: inside;
-      padding-left: $default-padding;
-      margin-bottom: $default-padding;
-    }
-  }
-
-  .form input[type="checkbox"] {
-    margin-bottom: 0;
-  }
-}

app/components/editable_champ/repetition_component/repetition_component.html.haml

@@ -1,5 +1,5 @@
 %fieldset
-  %legend.header-subsection{ legend_params }= @champ.libelle
+  %legend.fr-h5{ legend_params }= @champ.libelle
   - if @champ.description.present?
     .notice{ notice_params }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
 

app/components/profile/api_token_component/api_token_component.html.haml

@@ -51,7 +51,7 @@
       = f.button type: :submit, class: "fr-btn fr-btn--secondary" do
         = t('.add')
 
-  = form_for @api_token, namespace: dom_id(@api_token, :write_access), html: { class: 'form form-ds-fr-white mb-3', data: { turbo: true, controller: 'autosubmit' } } do |f|
+  = form_for @api_token, namespace: dom_id(@api_token, :write_access), html: { class: 'form mb-3', data: { turbo: true, controller: 'autosubmit' } } do |f|
     = f.label :write_access do
       = t('.token_procedures')
     %label.toggle-switch.no-margin

app/components/types_de_champ_editor/champ_component/champ_component.html.haml

@@ -1,7 +1,7 @@
 %li.type-de-champ.flex.column.justify-start{ html_options }
   .type-de-champ-container
     .flex.justify-between.section.head.hr
-      .handle.small.icon-only.icon.move-handle{ title: "Déplacer le champ vers le haut ou vers le bas" }
+      .handle.fr-icon-drag-move-2-line{ title: "Déplacer le champ vers le haut ou vers le bas" }
 
       - if coordinate.used_by_routing_rules?
         .flex.align-center

app/views/administrateurs/attestation_templates/_informations.html.haml

@@ -23,13 +23,13 @@
         .description
           = tag[:description]
 
-%h3.header-subsection Logo de l'attestation
+%h3.fr-h5 Logo de l'attestation
 %p.fr-text--sm.fr-text-mention--grey.fr-mb-0
   Dimensions conseillées : au minimum 500px de largeur ou de hauteur.
 = render Attachment::EditComponent.new(attached_file: @attestation_template.logo, direct_upload: false)
 
 
-%h3.header-subsection.fr-mt-5w Tampon de l'attestation
+%h3.fr-h5.fr-mt-5w Tampon de l'attestation
 %p.fr-text--sm.fr-text-mention--grey.fr-mb-0
   Dimensions conseillées : au minimum 500px de largeur ou de hauteur.
 = render Attachment::EditComponent.new(attached_file: @attestation_template.signature, direct_upload: false)

app/views/administrateurs/attestation_templates/edit.html.haml

@@ -10,7 +10,7 @@
     = render NestedForms::FormOwnerComponent.new
     = form_for @attestation_template,
       url: admin_procedure_attestation_template_path(@procedure),
-      html: { multipart: true, class: 'form form-ds-fr-white procedure-form__column--form' } do |f|
+      html: { multipart: true, class: 'form procedure-form__column--form fr-background-alt--blue-france' } do |f|
 
       %h1.page-title
         Délivrance d’attestation

app/views/administrateurs/dossier_submitted_messages/_informations.html.haml

@@ -1,3 +1,4 @@
+.fr-input-group
   = f.label :message_on_submit_by_usager do
     Message affiché après l'envoi du dossier
-= f.text_area :message_on_submit_by_usager, placeholder: "Merci, votre dossier sera traité dans les plus brefs délais"
+  = f.text_area :message_on_submit_by_usager, placeholder: "Merci, votre dossier sera traité dans les plus brefs délais", class: 'fr-input'

app/views/administrateurs/dossier_submitted_messages/edit.html.haml

@@ -9,7 +9,7 @@
   .procedure-form__columns.container
     = form_for @dossier_submitted_message,
       url: url_for({ controller: 'administrateurs/dossier_submitted_messages', action: :update, id: @procedure.id }),
-      html: { class: 'form procedure-form__column--form' } do |f|
+      html: { class: 'form procedure-form__column--form fr-background-alt--blue-france' } do |f|
 
       %h1.page-title
         Fin du dépot
@@ -18,10 +18,9 @@
 
       = render partial: 'administrateurs/dossier_submitted_messages/informations', locals: { f: f }
 
-
       .procedure-form__actions
         .actions-left
-          = f.submit 'Enregistrer', class: 'button primary send'
+          = f.submit 'Enregistrer', class: 'fr-btn send'
 
     .procedure-form__column--preview
       %h3

app/views/administrateurs/jeton_particulier/show.html.haml

@@ -11,7 +11,9 @@
 .container
   %h1
   = form_with model: @procedure, url: admin_procedure_api_particulier_jeton_path, local: true, html: { class: 'form' } do |f|
-    %p.explication
+    = render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
+      - c.body do
+        %p
           = t('.api_particulier_description_html', app_name: APPLICATION_NAME)
 
     = f.label :api_particulier_token
@@ -19,4 +21,4 @@
       %p= t('.token_description')
     = f.password_field :api_particulier_token, class: 'form-control', required: :required
     .text-right
-      = f.button t('views.shared.actions.save'), class: 'button primary send'
+      = f.button t('views.shared.actions.save'), class: 'fr-btn send'

app/views/administrateurs/mail_templates/edit.html.haml

@@ -14,7 +14,7 @@
     = form_for @mail_template,
       url: admin_procedure_mail_template_path(@procedure, @mail_template.class.const_get(:SLUG)),
       method: :put,
-      html: { class: 'form form-ds-fr-white procedure-form__column--form' } do |f|
+      html: { class: 'form form-ds-fr-white procedure-form__column--form fr-background-alt--blue-france' } do |f|
 
       %h1.page-title= @mail_template.class.const_get(:DISPLAYED_NAME)
       = render partial: 'form', locals: { f: f, tags: @mail_template.tags }

app/views/administrateurs/procedures/_monavis.html.haml

@@ -1,4 +1,6 @@
-%p.explication
+= render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
+  - c.body do
+    %p
       Proposez aux usagers de donner un avis sur votre démarche. Pour ce faire, vous devez précédemment aller sur «
       %a{ :href => "https://monavis.numerique.gouv.fr" } https://monavis.numerique.gouv.fr
       », créer un compte, et référencer la démarche que vous venez de publier.

app/views/administrateurs/procedures/jeton.html.haml

@@ -10,7 +10,9 @@
 .container
   %h1
   = form_with model: @procedure, url: url_for({ controller: 'administrateurs/procedures', action: :update_jeton }) do |f|
-    %p.explication
+    = render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
+      - c.body do
+        %p
           Démarches Simplifiées utilise
           = link_to 'API Entreprise', "https://entreprise.api.gouv.fr/"
           qui permet de récupérer les informations administratives des entreprises et des associations.

app/views/administrateurs/sources_particulier/show.html.haml

@@ -9,13 +9,16 @@
 
 .container#sources-particulier-form.mb-2
   = form_with model: @procedure, url: admin_procedure_api_particulier_sources_path, local: true, html: { class: 'form' } do |f|
-    .explication= t('.explication_html')
+    = render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
+      - c.body do
+        %p
+          = t('.explication_html')
 
     - @available_sources.each do |provider_key, scopes|
       %h2.header-section= t("api_particulier.providers.#{provider_key}.libelle")
 
       - scopes.each do |scope_key, sources|
-        %h3.explication-libelle= t("api_particulier.providers.#{provider_key}.scopes.#{scope_key}.libelle")
+        %h3= t("api_particulier.providers.#{provider_key}.scopes.#{scope_key}.libelle")
         %ul.procedure-admin-api-particulier-sources{ id: "#{provider_key}-#{scope_key}" }
           - sources.each do |source_key, enabled_hash|
             - enabled = (@procedure.api_particulier_sources.dig(provider_key, scope_key)&.include?(source_key)).present?
@@ -25,4 +28,4 @@
                 #{t("api_particulier.providers.#{provider_key}.scopes.#{scope_key}.#{source_key}")}
 
     .text-right
-      = f.button t('views.shared.actions.save'), class: 'button primary send'
+      = f.button t('views.shared.actions.save'), class: 'fr-btn send'

app/views/instructeurs/procedures/email_notifications.html.haml

@@ -9,7 +9,9 @@
     = t('.title')
 
   = form_for @assign_to, url: update_email_notifications_instructeur_procedure_path(@procedure), html: { class: 'form' } do |form|
-    .explication
+    = render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
+      - c.body do
+        %p
           = t('.subtitle')
 
     = form.label :email_notification, t('.for_each_file_submitted.title')

app/views/manager/procedures/show.html.erb

@@ -89,7 +89,7 @@ as well as a link to its edit page.
           <% end %>
         <% end %>
         <% if attribute.name == 'tags' %>
-          <%= form_for procedure, url: add_tags_manager_procedure_path(procedure), html: { class: 'form procedure-form__column--form mt-1' }  do %>
+          <%= form_for procedure, url: add_tags_manager_procedure_path(procedure), html: { class: 'form procedure-form__column--form fr-background-alt--blue-france mt-1' }  do %>
             <%=  hidden_field_tag 'procedure[tags]', nil %>
             <%=  react_component("ComboMultiple",
                   options: Procedure.tags,

app/views/root/patron.html.haml

@@ -35,7 +35,6 @@
     %span.icon.retry
     %span.icon.download
     %span.icon.download-white
-    %span.icon.move-handle
     %span.icon.frown
     %span.icon.meh
     %span.icon.smile
@@ -50,7 +49,7 @@
           %label Mot de passe
           %input{ type: "password", value: "12345678" }
 
-        %h3.header-subsection Bouton radio verticaux
+        %h3.fr-h5 Bouton radio verticaux
         .radios.vertical
           = f.label :archived, value: true do
             = f.radio_button :archived, true
@@ -61,7 +60,7 @@
             Option B
             %p.notice Une autre option, pas mal non plus.
 
-        %h3.header-subsection Interrupteur
+        %h3.fr-h5 Interrupteur
         %label.toggle-switch
           = f.check_box :archived, class: 'toggle-switch-checkbox'
           %span.toggle-switch-control.round