Design de la pop-up 'compte en attente'

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

Hide file tree

Showing 5 changed files with 31 additions and 16 deletions.
diff --git a/app/assets/images/icones/alert.svg b/app/assets/images/icones/alert.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
@@ -13,6 +13,7 @@
       .modal-body {
         padding: 0rem;
         padding-left: 1rem;
+        margin-left: 2rem;
       }
 
       .message {
@@ -27,19 +28,30 @@
     }
   }
 
-  &.modal-danger {
+  &.modal-alerte {
     .modal-content {
-      background-color: $error-950;
-      border-color: $error-425;
-      color: $error-425;
+      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);
+      background-repeat: no-repeat,no-repeat,no-repeat;
+      background-size: 1px 1px,1px 1px,1px 1px,2.5rem 100%;
+      padding: 1rem 2.25rem .75rem 3.5rem;
+      position: relative;
 
       &::before {
-        background-image: asset-data-url('icones/error.svg');
-        content: '';
-        height: 4rem;
-        background-repeat: no-repeat;
-        background-size: cover;
-        flex: 0 0 4rem;
+        content: "";
+        mask-image: url('icones/alert.svg');
+        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);
       }
     }
     .bouton-light {

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/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>