profile: improve layout and wording of the confirmation message

app/assets/stylesheets/new_design/card.scss

@@ -21,6 +21,14 @@
     }
   }
 
+  &.warning {
+    border-top: 8px solid $orange;
+
+    .card-title {
+      color: $orange;
+    }
+  }
+
   &.feedback {
     max-width: 600px;
     margin: 30px auto;

app/assets/stylesheets/new_design/profil.scss

@@ -12,4 +12,8 @@
   p {
     margin: 16px auto;
   }
+
+  .email-address {
+    font-weight: bold;
+  }
 }

app/views/root/patron.html.haml

@@ -157,6 +157,11 @@
         Titre de la carte mise en avant
       %p Et voici le contenu de la carte
 
+    .card.warning
+      .card-title
+        Titre de la carte d’avertissement
+      %p Et voici le contenu de la carte
+
     .card.feedback
       .card-title
         Titre de la carte pour demander un avis

app/views/users/profil/show.html.haml

@@ -7,12 +7,16 @@
 
   .card
     .card-title Coordonnées
-    %p Votre email est actuellement #{current_user.email}
+    %p
+      Votre email est actuellement
+      %span.email-address= current_user.email
     - if current_user.unconfirmed_email.present?
-      %p
-        Un email a été envoyé à #{current_user.unconfirmed_email}.
-        %br
-        Merci de vérifier vos emails et de cliquer sur le lien d’activation pour finaliser la validation de votre nouvelle adresse.
+      .card.warning
+        .card-title
+          Changement en attente :
+          %span.email-address= current_user.unconfirmed_email
+        %p
+          Pour finaliser votre changement d’adresse, vérifiez vos emails et cliquez sur le lien de confirmation.
 
     = form_for @current_user, url: update_email_path, method: :patch, html: { class: 'form' } do |f|
       = f.email_field :email, value: nil, placeholder: 'Nouvelle adresse email', required: true