From 8a3bb0c38e372194aacb60224e92ce0e14ae8f3a Mon Sep 17 00:00:00 2001
From: Colin Darie <colin@darie.eu>
Date: Tue, 21 Feb 2023 12:30:09 +0100
Subject: [PATCH] fix(instructeurs): combobox layout in "personnes impliquees"
 tab

Closes #8527
---
 .../stylesheets/personnes_impliquees.scss     |  2 +-
 .../dossiers/_envoyer_dossier_block.html.haml | 19 +++++++++----------
 .../_envoyer_dossier_block.html.haml_spec.rb  |  4 ++--
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/personnes_impliquees.scss b/app/assets/stylesheets/personnes_impliquees.scss
index 5fb6ae3fc..64e982129 100644
--- a/app/assets/stylesheets/personnes_impliquees.scss
+++ b/app/assets/stylesheets/personnes_impliquees.scss
@@ -10,7 +10,7 @@
   }
 
   [data-react-component-value^="ComboMultiple"] {
-    margin-bottom: $default-fields-spacer;
+    margin-bottom: 0;
 
     [data-reach-combobox-token-list] {
       padding: 0.5 * $default-padding;
diff --git a/app/views/instructeurs/dossiers/_envoyer_dossier_block.html.haml b/app/views/instructeurs/dossiers/_envoyer_dossier_block.html.haml
index 1ab77bf97..b60bf1c32 100644
--- a/app/views/instructeurs/dossiers/_envoyer_dossier_block.html.haml
+++ b/app/views/instructeurs/dossiers/_envoyer_dossier_block.html.haml
@@ -6,14 +6,13 @@
 - else
   %p.tab-paragrah.mb-1
     Le destinataire suivra automatiquement le dossier
-  = form_for dossier, url: send_to_instructeurs_instructeur_dossier_path(dossier.procedure, dossier), method: :post, html: { class: 'form recipients-form' } do |f|
-    .flex.justify-start.align-start
-      = hidden_field_tag :recipients, nil
-      = react_component("ComboMultiple",
-        options: potential_recipients.map{|r| [r.email, r.id]},
-        selected: [], disabled: [],
-        group: '.recipients-form',
-        name: 'recipients',
-        label: 'Emails')
+  = form_for dossier, url: send_to_instructeurs_instructeur_dossier_path(dossier.procedure, dossier), method: :post, html: { class: 'form recipients-form fr-mb-4w' } do |f|
+    = hidden_field_tag :recipients, nil
+    = react_component("ComboMultiple",
+      options: potential_recipients.map{|r| [r.email, r.id]},
+      selected: [], disabled: [],
+      group: '.recipients-form',
+      name: 'recipients',
+      label: 'Emails')
 
-      = f.submit "Envoyer", class: "button large send gap-left"
+    = f.submit "Envoyer", class: "fr-btn fr-mt-2w"
diff --git a/spec/views/instructeur/dossiers/_envoyer_dossier_block.html.haml_spec.rb b/spec/views/instructeur/dossiers/_envoyer_dossier_block.html.haml_spec.rb
index c094c5f16..60d6f44ef 100644
--- a/spec/views/instructeur/dossiers/_envoyer_dossier_block.html.haml_spec.rb
+++ b/spec/views/instructeur/dossiers/_envoyer_dossier_block.html.haml_spec.rb
@@ -14,14 +14,14 @@ describe 'instructeurs/dossiers/envoyer_dossier_block.html.haml', type: :view do
     let(:potential_recipients) { [instructeur] }
 
     it { is_expected.to match(/data-react-props.*#{instructeur.email}/) }
-    it { is_expected.to have_css(".button.send") }
+    it { is_expected.to have_css(".fr-btn") }
   end
 
   context "there is no other instructeur for the procedure" do
     let(:potential_recipients) { [] }
 
     it { is_expected.not_to have_css("select") }
-    it { is_expected.not_to have_css(".button.send") }
+    it { is_expected.not_to have_css(".fr-btn") }
     it { is_expected.to have_content("Vous êtes le seul instructeur assigné sur cette démarche") }
   end
 end