From fb55c76829f3a04e77f6672874646f75ed9927ca Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Thu, 22 Apr 2021 12:07:13 +0200
Subject: [PATCH] views: cleanup link_sent HTML and CSS

This prepares for re-using the CSS in the reset_link_sent page.
---
 app/assets/stylesheets/link-sent.scss        | 44 +++++++++++++-------
 app/views/users/sessions/link_sent.html.haml | 24 +++++------
 2 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/app/assets/stylesheets/link-sent.scss b/app/assets/stylesheets/link-sent.scss
index 778d330b1..3671aa07c 100644
--- a/app/assets/stylesheets/link-sent.scss
+++ b/app/assets/stylesheets/link-sent.scss
@@ -7,24 +7,36 @@
   text-align: center;
   max-width: 600px;
 
-  b {
+  section {
+    text-align: left;
+    margin: 3 * $default-padding auto;
+  }
+
+  p,
+  ol {
+    margin-top: $default-padding;
+    margin-bottom: $default-padding;
+  }
+
+  .link-sent-info {
+    color: #000000;
+    background-color: $yellow;
+    padding: 0 $default-padding;
+    border: 1px solid transparent; // prevent margin collapse of first paragraph
+  }
+
+  .link-sent-help {
+    border-top: 1px solid $grey;
+    padding-top: $default-padding;
+    margin-bottom: $default-padding;
+  }
+
+  .link-sent-help-title {
     font-weight: bold;
   }
 
-  p {
-    text-align: left;
-    margin: 6 * $default-spacer auto;
-  }
-
-  p.mail {
-    color: #000000;
-    background-color: $yellow;
-    padding: $default-padding;
-  }
-
-  p.help {
-    border-top: 1px solid $grey;
-    padding-top: 6 * $default-spacer;
-    margin-bottom: 2 * $default-spacer;
+  .link-sent-help-list {
+    list-style-position: outside;
+    padding-left: $default-padding;
   }
 }
diff --git a/app/views/users/sessions/link_sent.html.haml b/app/views/users/sessions/link_sent.html.haml
index 37961886c..7e2babdf2 100644
--- a/app/views/users/sessions/link_sent.html.haml
+++ b/app/views/users/sessions/link_sent.html.haml
@@ -7,16 +7,16 @@
   = image_tag('user/confirmation-email.svg')
   %h1 Encore une petite étape :)
 
-  %p.mail
-    Ouvrez votre boite email <b>#{@email}</b> puis cliquez sur le lien d'activation du message <b>Connexion sécurisée à #{APPLICATION_NAME}</b>.
-    %br
-    %br
-    <b>Attention</b>, ce message peut mettre jusqu'à <b>15 minutes</b> pour arriver.
+  %section.link-sent-info
+    %p
+      Ouvrez votre boite email <strong>#{@email}</strong> puis cliquez sur le lien d’activation du message <strong>Connexion sécurisée à #{APPLICATION_NAME}</strong>.
+    %p
+      <strong>Attention</strong>, ce message peut mettre jusqu’à <strong>15 minutes</strong> pour arriver.
 
-  %p.help
-    Si vous voyez cette page trop souvent, consultez notre aide : #{link_to FAQ_CONFIRMER_COMPTE_CHAQUE_CONNEXION_URL, FAQ_CONFIRMER_COMPTE_CHAQUE_CONNEXION_URL, target: '_blank', rel: 'noopener' }
-    %br
-    %br
-    En cas de difficultés, nous restons joignables
-    = succeed '.' do
-      = link_to("via ce formulaire", contact_admin_url)
+  %section.link-sent-help
+    %p
+      Si vous voyez cette page trop souvent, consultez notre aide : #{link_to FAQ_CONFIRMER_COMPTE_CHAQUE_CONNEXION_URL, FAQ_CONFIRMER_COMPTE_CHAQUE_CONNEXION_URL, target: '_blank', rel: 'noopener' }
+    %p
+      En cas de difficultés, nous restons joignables
+      = succeed '.' do
+        = link_to("via ce formulaire", contact_admin_url)