From bc3ad7e3c64ebb82a6d329afd845eccd677dde27 Mon Sep 17 00:00:00 2001
From: Frederik Rothenberger <frederik.rothenberger@dfinity.org>
Date: Thu, 21 Sep 2023 15:02:43 +0200
Subject: [PATCH] Add explanation paragraph to recovery method card (#1917)

This PR changes the recovery method card to be consistent with
the passkeys and temp keys cards:
* always show card border
* have a small explanatory text below the title
---
 src/frontend/src/flows/manage/recoveryMethodsSection.json | 3 ++-
 src/frontend/src/flows/manage/recoveryMethodsSection.ts   | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/flows/manage/recoveryMethodsSection.json b/src/frontend/src/flows/manage/recoveryMethodsSection.json
index 8ff40f54b0..89f2502b27 100644
--- a/src/frontend/src/flows/manage/recoveryMethodsSection.json
+++ b/src/frontend/src/flows/manage/recoveryMethodsSection.json
@@ -2,6 +2,7 @@
   "en": {
     "security_warning": "Security Warning",
     "recovery_phrase_enabled": "You enabled a recovery phrase.",
-    "recovery_key_enabled": "You enabled a recovery device."
+    "recovery_key_enabled": "You enabled a recovery device.",
+    "enable_recovery_to_make_secure": "Enable recovery methods to make your Internet Identity more secure."
   }
 }
diff --git a/src/frontend/src/flows/manage/recoveryMethodsSection.ts b/src/frontend/src/flows/manage/recoveryMethodsSection.ts
index a10820243c..81938b2ecb 100644
--- a/src/frontend/src/flows/manage/recoveryMethodsSection.ts
+++ b/src/frontend/src/flows/manage/recoveryMethodsSection.ts
@@ -32,7 +32,9 @@ export const recoveryMethodsSection = ({
   const warnNoRecovery = isNullish(recoveryPhrase) && isNullish(recoveryKey);
   const wrapClasses = [
     "l-stack",
-    ...(warnNoRecovery ? ["c-card", "c-card--narrow", "c-card--warning"] : []),
+    "c-card",
+    "c-card--narrow",
+    ...(warnNoRecovery ? ["c-card--warning"] : []),
   ];
 
   return html`
@@ -54,6 +56,7 @@ export const recoveryMethodsSection = ({
       <div class="t-title">
         <h2>Recovery Methods</h2>
       </div>
+      <p class="t-paragraph t-lead">${copy.enable_recovery_to_make_secure}</p>
       <div class="c-action-list">
         <ul>
           ${isNullish(recoveryPhrase)