Merge pull request #10026 from colinux/usager-form-improvements

ETQ Usager : légères améliorations de lisibilité et d'espacement sur le formulaire

app/assets/stylesheets/02_utils.scss

@@ -145,9 +145,11 @@
 
 // who known
 .highlighted {
-  background-color: var(--background-contrast-yellow-moutarde); // from fr-badge--new
-  color: var(--text-action-high-grey);
-  background-clip: content-box;
+  background-color: var(
+    --background-contrast-yellow-moutarde
+  ); // from fr-badge--new
+  color: var(--text-label-yellow-tournesol);
+  padding: 0 0.5rem;
 }
 
 .overflow-y-visible {

app/assets/stylesheets/forms.scss

@@ -50,7 +50,12 @@
   }
 
   // Don't cumulate margin-bottoms for inlined elements (radio...), because .fr-fieldset has already its own
-  .fr-fieldset__element > .fr-fieldset > .fr-fieldset__element.fr-fieldset__element--inline {
+  // This is important because of multilpe conditional hidden elements to not take additional space,
+  // but we need the usual margin when there are an error or conditional spinner is visible.
+  // scss-lint:disable SingleLinePerSelector
+  .fr-fieldset__element
+    > .fr-fieldset:not(.fr-fieldset--error):not(:has(+ .spinner))
+    > .fr-fieldset__element.fr-fieldset__element--inline {
     margin-bottom: 0;
   }
 
@@ -67,13 +72,6 @@
     border-bottom: 2px solid $border-grey;
   }
 
-  @mixin notice-text-style {
-    font-size: 16px;
-    color: $dark-grey;
-  }
-
-
-
   label:not(.fr-label),
   legend.form-label {
     font-size: 18px;
@@ -96,9 +94,9 @@
   }
 
   .notice {
-    @include notice-text-style;
     margin-top: - $default-spacer;
     margin-bottom: $default-padding;
+    color: var(--text-mention-grey);
 
     p {
       margin-bottom: $default-spacer;
@@ -113,7 +111,7 @@
     position: relative;
 
     .updated-at {
-      @include notice-text-style;
+      font-size: 0.875rem;
       float: right;
       margin-left: $default-spacer;
       visibility: hidden;
@@ -122,6 +120,7 @@
     &:hover .updated-at,
     .updated-at.highlighted {
       visibility: visible;
+      margin-bottom: 4px;
     }
 
     &.editable-champ-checkbox {
@@ -490,15 +489,6 @@
     justify-content: space-between;
   }
 
-  .send-notice {
-    @include notice-text-style;
-    margin-bottom: $default-padding;
-  }
-
-  .send-wrapper + .send-notice {
-    margin-top: - $default-padding;
-  }
-
   .inline-champ {
     margin-left: $default-spacer;
     margin-right: $default-spacer;

app/components/editable_champ/champ_label_content_component/champ_label_content_component.en.yml

@@ -2,6 +2,6 @@
 en:
   changes_to_save: "modifications to submit"
   modified_at: "modified on %{datetime}"
-  check_content_rebased: The type of this field or its description has been modified by the administration. Check its content.
+  check_content_rebased: "Information: field updated by administration. Check its content."
   optional_champ: (optional)
   recommended_size: The recommended maximum size is %{size} characters.

app/components/editable_champ/champ_label_content_component/champ_label_content_component.fr.yml

@@ -2,6 +2,6 @@
 fr:
   changes_to_save: "modification à déposer"
   modified_at: "modifié le %{datetime}"
-  check_content_rebased: Le type de ce champ ou sa description ont été modifiés par l'administration. Vérifier son contenu.
+  check_content_rebased: "Information : champ actualisé par l'administration. Vérifier son contenu."
   optional_champ: (facultatif)
   recommended_size: La taille maximale conseillée est de %{size} caractères.

app/components/editable_champ/checkbox_component/checkbox_component.html.haml

@@ -5,4 +5,5 @@
       'true',
       'false'
     %label.fr-label{ for: @champ.input_id, id: @champ.labelledby_id }
+      %span
         = render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at