Design les modals avec le style des alertes du DSFR

betagouv · Oct 3, 2024 · cba9f7e · cba9f7e
1 parent edc06a7
commit cba9f7e
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 22 deletions.
diff --git a/app/assets/images/icones/alert.svg b/app/assets/images/icones/alert.svg
diff --git a/app/assets/images/icones/info.svg b/app/assets/images/icones/info.svg
diff --git a/app/assets/stylesheets/admin/composants/_flash_messages.scss b/app/assets/stylesheets/admin/composants/_flash_messages.scss
@@ -57,7 +57,9 @@ body.logged_in {
       @include flash-alert;
 
       &::before {
-        background-image: asset-data-url('icones/alert.svg');
+        mask-image: url('icones/alert.svg');
+        background-color: currentColor;
+        mask-repeat: no-repeat;
       }
     }
 

diff --git a/app/assets/stylesheets/admin/composants/_modal.scss b/app/assets/stylesheets/admin/composants/_modal.scss
@@ -4,11 +4,30 @@
     margin-top: 50vh;
 
     .modal-content {
-      padding: 1rem;
       font-size: 0.875rem;
       align-items: center;
       flex-direction: row;
       border-radius: 0.5rem;
+      background-repeat: no-repeat,no-repeat,no-repeat;
+      background-size: 1px 1px,1px 1px,1px 1px,2.5rem 100%;
+      padding: 1rem 2.25rem 1rem 3.5rem;
+      position: relative;
+
+      &::before {
+        content: "";
+        background-color: currentColor;
+        --icon-size: 1.5rem;
+        color: $grey-1000;
+        display: inline-block;
+        height: var(--icon-size);
+        left: 0;
+        margin: 1rem .5rem;
+        mask-size: 100% 100%;
+        position: absolute;
+        top: 0;
+        vertical-align: calc((.75em - var(--icon-size))*.5);
+        width: var(--icon-size);
+      }
 
       .modal-body {
         padding: 0rem;
@@ -27,23 +46,25 @@
     }
   }
 
-  &.modal-danger {
+  &.modal-info {
     .modal-content {
-      background-color: $error-950;
-      border-color: $error-425;
-      color: $error-425;
+      border-color: $info-425;
+      background-image: linear-gradient(0deg,$info-425,$info-425),linear-gradient(0deg,$info-425,$info-425),linear-gradient(0deg,$info-425,$info-425),linear-gradient(0deg,$info-425,$info-425),linear-gradient(0deg,$info-425,$info-425);
 
       &::before {
-        background-image: asset-data-url('icones/error.svg');
-        content: '';
-        height: 4rem;
-        background-repeat: no-repeat;
-        background-size: cover;
-        flex: 0 0 4rem;
+        mask-image: url('icones/info.svg');
       }
     }
-    .bouton-light {
-      color: $error-425;
+  }
+
+  &.modal-alerte {
+    .modal-content {
+      border-color: $warning-425;
+      background-image: linear-gradient(0deg,$warning-425,$warning-425),linear-gradient(0deg,$warning-425,$warning-425),linear-gradient(0deg,$warning-425,$warning-425),linear-gradient(0deg,$warning-425,$warning-425),linear-gradient(0deg,$warning-425,$warning-425);
+
+      &::before {
+        mask-image: url('icones/alert.svg');
+      }
     }
   }
 }

diff --git a/app/views/admin/comptes/_demande_acceptation_cgu_creation_compte.html.erb b/app/views/admin/comptes/_demande_acceptation_cgu_creation_compte.html.erb
@@ -1,7 +1,7 @@
-<p>
 <% if I18n.exists?("#{scope}.titre") %>
   <h2><%= t("#{scope}.titre") %></h2>
 <% end %>
+<p>
 <%= t("#{scope}.information_cgu") %>
 <%= render LienComponent.new(t('lien_cgu'), '/cgu/', externe: true) %>
 </p>

diff --git a/app/views/admin/dashboard/_modal_confirmation_cgu.html.erb b/app/views/admin/dashboard/_modal_confirmation_cgu.html.erb
@@ -1,4 +1,4 @@
-<div class="modal modal--static" tabindex="-1" role="dialog">
+<div class="modal modal-info modal--static" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-body">

diff --git a/app/views/admin/dashboard/_modal_validation_comptes_en_attente.html.erb b/app/views/admin/dashboard/_modal_validation_comptes_en_attente.html.erb
@@ -1,16 +1,16 @@
-<div class="modal modal-danger" id="validation-comptes-en-attente" tabindex="-1" role="dialog">
+<div class="modal modal-alerte" id="validation-comptes-en-attente" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-body">
         <div class='message'>
           <%= md t('.info_comptes_en_attente') %>
         </div>
         <div class='actions'>
-          <a class="bouton bouton-light" href="#" data-dismiss="modal"><%= t('.annuler') %></a>
+          <a class="bouton-secondaire petit-bouton" href="#" data-dismiss="modal"><%= t('.annuler') %></a>
           <% structure = current_compte.structure %>
           <%= link_to 'Voir les demandes',
                       send("admin_#{structure.type.underscore}_path", structure, anchor: "bloc-membres"),
-                      class: "bouton bouton-light" %>
+                      class: "bouton" %>
         </div>
       </div>
     </div>

diff --git a/app/views/nouvelles_structures/_modal_mise_en_garde.html.erb b/app/views/nouvelles_structures/_modal_mise_en_garde.html.erb
@@ -1,4 +1,4 @@
-<div class="modal modal--static" tabindex="-1" role="dialog">
+<div class="modal modal-alerte modal--static" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-body">

diff --git a/config/locales/views/dashboard.yml b/config/locales/views/dashboard.yml
@@ -17,7 +17,8 @@ fr:
       modal_validation_comptes_en_attente:
         annuler: Plus tard
         info_comptes_en_attente: |
-          **Des demandes d'accès sont en attente de validation.** Vous pouvez les confirmer **dans la page de votre structure**.
+          ## Accès en attente de validation
+          Des demandes d'accès sont en attente de validation. Vous pouvez les confirmer dans la page de votre structure.
       index:
         incitation_creation_compte_personnel: |
           Pour des questions relatives au RGPD ainsi que pour plus de fluidité, les accompagnants qui utilisent eva doivent maintenant créer des comptes individuels.</br>