From b47f39eade8b1e50c4adb6382fce660f05e9da49 Mon Sep 17 00:00:00 2001
From: Corinne Durrmeyer <corinne@inseo.fr>
Date: Tue, 17 Dec 2024 17:01:38 +0100
Subject: [PATCH] refactor(autosave): Replace custom styles with DSFR classes

---
 app/assets/stylesheets/autosave.scss          | 16 -------
 .../autosave_footer_component.html.haml       | 42 +++++++++----------
 2 files changed, 20 insertions(+), 38 deletions(-)

diff --git a/app/assets/stylesheets/autosave.scss b/app/assets/stylesheets/autosave.scss
index 39f993bc5cf..1d975b9a98b 100644
--- a/app/assets/stylesheets/autosave.scss
+++ b/app/assets/stylesheets/autosave.scss
@@ -1,15 +1,5 @@
 .autosave {
   position: relative;
-  font-size: 0.9em;
-}
-
-.autosave-explanation {
-  margin-left: 4px;
-}
-
-.autosave-explanation-text,
-.autosave-label {
-  margin-right: 6px;
 }
 
 .autosave-status {
@@ -26,12 +16,6 @@
   }
 }
 
-.autosave-icon {
-  display: inline-block;
-  vertical-align: -1px;
-  margin-right: 4px;
-}
-
 .autosave-retry {
   &:disabled {
     .autosave-retry-label {
diff --git a/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml b/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml
index 1227eb4dbf8..4002cba5278 100644
--- a/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml
+++ b/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml
@@ -1,4 +1,4 @@
-.autosave.autosave-state-idle{ data: { controller: 'autosave-status' } }
+.autosave.autosave-state-failed{ data: { controller: 'autosave-status' } }
   %p.autosave-explanation.fr-text--sm.fr-mb-0
     %span.autosave-explanation-text
       - if annotation?
@@ -10,29 +10,27 @@
       - else
         = t('.brouillon.explanation')
     - if !annotation?
-      = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm', **external_link_attributes
+      = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm fr-ml-1w', **external_link_attributes
 
-  %p.autosave-status.succeeded.fr-mb-0
-    %span.fr-icon-success-fill.autosave-icon{ 'aria-hidden': 'true' }
-    %span.autosave-label
-      - if annotation?
-        = t('.annotations.confirmation_html')
-      - elsif dossier.editing_fork?
-        = t('.en_construction.confirmation_html')
-      - else
-        = t('.brouillon.confirmation_html')
+  %p.autosave-status.succeeded.fr-text--sm.fr-mb-0
+    %span.fr-icon-success-fill.fr-mr-1v{ 'aria-hidden': 'true' }
+    - if annotation?
+      = t('.annotations.confirmation_html')
+    - elsif dossier.editing_fork?
+      = t('.en_construction.confirmation_html')
+    - else
+      = t('.brouillon.confirmation_html')
     - if !annotation?
-      = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm', **external_link_attributes
+      = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm fr-ml-1w', **external_link_attributes
 
-  %p.autosave-status.failed.fr-mb-0
-    %span.fr-icon-warning-fill.autosave-icon{ 'aria-hidden': 'true' }
-    %span.autosave-label
-      - if annotation?
-        = t('.annotations.error_html')
-      - elsif dossier.editing_fork?
-        = t('.en_construction.error_html')
-      - else
-        = t('.brouillon.error_html')
-    %button.fr-btn.fr-btn--tertiary.fr-btn--sm.autosave-retry{ type: :button, data: { action: 'autosave-status#onClickRetryButton', autosave_status_target: 'retryButton' } }
+  %p.autosave-status.failed.fr-text--sm.fr-mb-0
+    %span.fr-icon-warning-fill.fr-mr-1v{ 'aria-hidden': 'true' }
+    - if annotation?
+      = t('.annotations.error_html')
+    - elsif dossier.editing_fork?
+      = t('.en_construction.error_html')
+    - else
+      = t('.brouillon.error_html')
+    %button.fr-btn.fr-btn--tertiary.fr-btn--sm.fr-ml-1w.fr-mt-n1v.autosave-retry{ type: :button, data: { action: 'autosave-status#onClickRetryButton', autosave_status_target: 'retryButton' } }
       %span.autosave-retry-label Réessayer
       %span.autosave-retrying-label Enregistrement en cours…