style(forms): convert various legacy admin forms to dsfr

app/components/procedure/search_component/search_component.html.haml

@@ -1,11 +1,10 @@
-= form_tag(search_admin_procedures_path, data: { turbo: true }, method: :post, class: 'form') do
+= form_tag(search_admin_procedures_path, data: { turbo: true }, method: :post) do
-  = label_tag :query, 'Rechercher une procédure'
+  .fr-input-group
+    = label_tag :query, class: "fr-label" do
+      Rechercher une démarche
+      %span.fr-hint-text Saisissez au moins 3 lettres
 
-  .notice
+    = text_field_tag :query, params[:query], required: true, placeholder: 'politique de la ville', minlength: "3", class: "fr-input"
-    %p Entrez au minimum 3 lettres
-
-
-  = text_field_tag :query, params[:query], required: true, placeholder: 'politique de la ville', minlength: "3"
 
   = submit_tag 'Rechercher', class: 'fr-btn'
 

app/views/administrateurs/procedure_administrateurs/_add_admin_form.html.haml

@@ -1,9 +1,13 @@
 = form_for procedure.administrateurs.new(user: User.new),
   url: { controller: 'procedure_administrateurs' },
-  html: { class: 'form', id: "new_administrateur"  },
+  html: { id: "new_administrateur" },
   data: { turbo: true, turbo_force: :server } do |f|
-  = f.label :email do
+  .fr-input-group
+    = f.label :email, class: "fr-label" do
       Ajouter un administrateur
-  %p.notice Renseignez l’email d’un administrateur déjà enregistré sur #{APPLICATION_NAME} pour lui permettre de modifier « #{procedure.libelle} ».
+      %span.fr-hint-text
-  = f.email_field :email, placeholder: 'marie.dupont@exemple.fr', autofocus: true, required: true, disabled: disabled_as_super_admin
+        = "Renseignez l’email d’un administrateur déjà enregistré sur #{APPLICATION_NAME} pour lui permettre de modifier « #{procedure.libelle} ». Exemple : marie.dupont@exemple.fr"
-  = f.submit 'Ajouter comme administrateur', class: 'button primary send', disabled: disabled_as_super_admin
+
+    = f.email_field :email, required: true, class: "fr-input", autofocus: true, disabled: disabled_as_super_admin
+
+  = f.submit 'Ajouter comme administrateur', class: 'fr-btn', disabled: disabled_as_super_admin

app/views/administrateurs/procedure_administrateurs/index.html.haml

@@ -13,7 +13,6 @@
       %th= 'État'
     %tbody#administrateurs
       = render(Procedure::ProcedureAdministrateurs::AdministrateurComponent.with_collection(@procedure.administrateurs.order('users.email'), procedure: @procedure))
-    %tfoot
+
-      %tr
+  .fr-mt-4w
-        %th{ colspan: 4 }
     = render 'add_admin_form', procedure: @procedure, disabled_as_super_admin: administrateur_as_manager?

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

@@ -11,5 +11,6 @@
   %br
   Une fois en possession du code généré sur le site MonAvis, vous pouvez le coller dans le champ ci-dessous :
 
-= f.label :monavis_embed, "Mon avis"
+.fr-input-group
-= f.text_area :monavis_embed, rows: '6', placeholder: '<a href="https://monavis.numerique.gouv.fr/Demarches/123456?&view-mode=formulaire-avis&nd_mode=en-ligne-enti%C3%A8rement&nd_source=button&key=cd4a872d4"><img src="https://monavis.numerique.gouv.fr/monavis-static/bouton-bleu.png" alt="Je donne mon avis" title="Je donne mon avis sur cette démarche" /></a>', class: 'form-control'
+  = f.label :monavis_embed, "Mon avis", class: "fr-label"
+  = f.text_area :monavis_embed, rows: '6', placeholder: '<a href="https://monavis.numerique.gouv.fr/Demarches/123456?&view-mode=formulaire-avis&nd_mode=en-ligne-enti%C3%A8rement&nd_source=button&key=cd4a872d4"><img src="https://monavis.numerique.gouv.fr/monavis-static/bouton-bleu.png" alt="Je donne mon avis" title="Je donne mon avis sur cette démarche" /></a>', class: 'fr-input'

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

@@ -9,7 +9,7 @@
 
 .container
   %h1
-  = form_with model: @procedure, url: url_for({ controller: 'administrateurs/procedures', action: :update_jeton }), html: { class: 'form' } do |f|
+  = form_with model: @procedure, url: url_for({ controller: 'administrateurs/procedures', action: :update_jeton }) do |f|
     %p.explication
       Démarches Simplifiées utilise
       = link_to 'API Entreprise', "https://entreprise.api.gouv.fr/"
@@ -18,7 +18,7 @@
       = link_to 'API Entreprise', "https://api.gouv.fr/les-api/api-entreprise/demande-acces"
       propre à votre démarche.
 
-    = f.label :api_entreprise_token, "Jeton"
+    .fr-input-group
-    = f.password_field :api_entreprise_token, value: @procedure.read_attribute(:api_entreprise_token), class: 'form-control'
+      = f.label :api_entreprise_token, "Jeton", class: 'fr-label'
-    .text-right
+      = f.password_field :api_entreprise_token, value: @procedure.read_attribute(:api_entreprise_token), class: 'fr-input'
-      = f.button 'Enregistrer', class: 'button primary send'
+    = f.button 'Enregistrer', class: 'fr-btn'

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

@@ -11,5 +11,4 @@
   %h1
   = form_for @procedure, url: url_for({ controller: 'administrateurs/procedures', action: :update_monavis }), html: { class: 'form', multipart: true } do |f|
     = render partial: 'monavis', locals: { f: f }
-    .text-right
+    = f.button 'Enregistrer', class: 'fr-btn'
-      = f.button 'Enregistrer', class: 'button primary send'

config/locales/fr.yml

@@ -309,6 +309,7 @@ fr:
         invite_to_edit_line1: Vous pouvez inviter quelqu’un à remplir ce dossier avec vous.
         invite_to_edit_line2: Cette personne aura le droit de modifier votre dossier.
         email: Adresse mail
+        email_hint: "Exemple : camilya.martin@exemple.fr"
         invite_message: Ajouter un message à la personne invitée (optionnel)
         send_invitation: Envoyer une invitation
         invite_to_participate: "Personnes invitées à participer à ce dossier"