refactor(autosave): Replace custom styles with DSFR classes

demarches-simplifiees · Dec 19, 2024 · b47f39e · b47f39e
1 parent 88f1a83
commit b47f39e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 38 deletions.
diff --git 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
@@ -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…