From 7c1d0f2e8fa4c0da920d7f2db64443188c16a3bf Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Sun, 19 Jul 2020 15:49:57 +0200
Subject: [PATCH] Recovery seed page improvements

---
 .../Views/Home/RecoverySeedBackup.cshtml      | 76 ++++++++++---------
 .../Views/Shared/_LayoutSimple.cshtml         | 58 --------------
 2 files changed, 41 insertions(+), 93 deletions(-)

diff --git a/BTCPayServer/Views/Home/RecoverySeedBackup.cshtml b/BTCPayServer/Views/Home/RecoverySeedBackup.cshtml
index bdbd40949..519a3e53f 100644
--- a/BTCPayServer/Views/Home/RecoverySeedBackup.cshtml
+++ b/BTCPayServer/Views/Home/RecoverySeedBackup.cshtml
@@ -4,8 +4,18 @@
     ViewData["Title"] = "Your recovery phrase";
 }
 
+<style>
+    @@media (min-width: 476px) { ol#recovery-phrase {max-height:16em;} }
+    @@media (min-width: 768px) { ol#recovery-phrase {max-height:12em;} }
+    @@media (min-width: 1200px) { ol#recovery-phrase {max-height:8em;} }
+    form#recovery-confirmation button { position: absolute; bottom:0; left:50%; width:200px; margin-left:-100px; }
+    form#recovery-confirmation button:not([disabled]) { display: none; }
+    form#recovery-confirmation input:checked ~ button[disabled] { display: none; }
+    form#recovery-confirmation input:checked + button:not([disabled]) { display: inline-block; }
+</style>
+
 <div class="row justify-content-md-center">
-    <div class="col-lg-10">
+    <div class="col-lg-10 text-center">
         <partial name="_StatusMessage" />
 
         <div class="d-flex flex-column align-items-center justify-content-center">
@@ -18,40 +28,8 @@
                 <span class="d-sm-block">The words below are called your recovery phrase.</span>
                 <span class="d-sm-block"><strong>Write them down on a piece of paper in the exact order.</strong></span>
             </p>
-            <p style="max-width:32em;margin-left:auto;margin-right:auto;">
-                They are the only backup of your private keys and allow you to restore your wallet.
-                If you lose or write down the recovery phrase incorrectly you will permanently lose access of your funds.
-                Double-check the spelling and position of each recovery phrase word.
-            </p>
-            @if (!Model.IsStored)
-            {
-                <p class="mt-3 mb-3">
-                    <strong>
-                        The recovery phrase will only be shown before being wiped from the server.
-                    </strong>
-                </p>
-            }
-            <p class="mt-3 mb-0">
-                Do not photograph the recovery seed.
-                Do not keep it a digital format.
-                Do not share them with anybody.
-            </p>
-            @if (!string.IsNullOrEmpty(Model.Passphrase))
-            {
-                <p class="mt-3 mb-0">Please make sure to also write down your passphrase.</p>
-            }
         </div>
-        <style>
-
-            @@media (min-width: 476px) { ol#recovery-phrase {max-height:16em;} }
-            @@media (min-width: 768px) { ol#recovery-phrase {max-height:12em;} }
-            @@media (min-width: 1200px) { ol#recovery-phrase {max-height:8em;} }
-            form#recovery-confirmation button { position: absolute; bottom:0; left:50%; width:200px; margin-left:-100px; }
-            form#recovery-confirmation button:not([disabled]) { display: none; }
-            form#recovery-confirmation input:checked ~ button[disabled] { display: none; }
-            form#recovery-confirmation input:checked + button:not([disabled]) { display: inline-block; }
-        </style>
-        <ol id="recovery-phrase" data-mnemonic="@Model.Mnemonic" class="my-5 d-flex flex-column flex-wrap justify-content-center align-items-center p-0">
+        <ol id="recovery-phrase" data-mnemonic="@Model.Mnemonic" class="my-5 d-flex flex-column flex-wrap justify-content-center align-items-center text-left p-0">
             @foreach (var word in Model.Words)
             {
                 <li class="ml-4 px-3 py-2 text-secondary" style="flex: 0 1;min-width:10em;">
@@ -59,7 +37,35 @@
                 </li>
             }
         </ol>
-        <form id="recovery-confirmation" action="@Model.ReturnUrl" class="d-flex align-items-start justify-content-center" style="padding-bottom: 80px">
+        <div class="lead text-center" style="max-width:36em;margin-left:auto;margin-right:auto;">
+            @if (Model.IsStored)
+            {
+                <p>
+                    The recovery phrase is a backup that allows you to restore your wallet in case of a server crash.
+                    If you lose it or write it down incorrectly, you may permanently lose access to your funds.
+                    Do not photograph it. Do not store it digitally.
+                </p>
+                <p>
+                    <strong>The recovery phrase will also be stored on a server as a hot wallet.</strong>
+                </p>
+            }
+            else
+            {
+                <p>
+                    The recovery phrase allows you to access and restore your wallet.
+                    If you lose it or write it down incorrectly, you will permanently lose access to your funds.
+                    Do not photograph the recovery phrase and do not store it digitally.
+                </p>
+                <p>
+                    <strong>The recovery phrase will permanently be erased from the server.</strong>
+                </p>
+            }
+            @if (!string.IsNullOrEmpty(Model.Passphrase))
+            {
+                <p class="mt-3 mb-0">Please make sure to also write down your passphrase.</p>
+            }
+        </div>
+        <form id="recovery-confirmation" action="@Model.ReturnUrl" class="d-flex align-items-start justify-content-center" style="margin-top:4rem;padding-bottom: 80px">
             <label class="form-check-label lead order-2" for="confirm">I have written down my recovery phrase and stored it in a secure location</label>
             <input type="checkbox" class="mt-2 mr-3 order-1" id="confirm">
             <button type="submit" class="btn btn-primary btn-lg px-5 order-3" id="submit">Done</button>
diff --git a/BTCPayServer/Views/Shared/_LayoutSimple.cshtml b/BTCPayServer/Views/Shared/_LayoutSimple.cshtml
index 3236a604b..a676b11ee 100644
--- a/BTCPayServer/Views/Shared/_LayoutSimple.cshtml
+++ b/BTCPayServer/Views/Shared/_LayoutSimple.cshtml
@@ -21,52 +21,14 @@
             padding: 0 2rem;
         }
 
-        .head-logo {
-            height: 70px;
-            margin-bottom: 1rem;
-        }
-
-        .lead-title {
-            font-family: Montserrat;
-            font-style: normal;
-            font-weight: bold;
-            font-size: 24px;
-            line-height: 1.2;
-            max-width: 17em;
-            letter-spacing: .1em;
-        }
-
-        .lead-login {
-            font-family: Montserrat;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 16px;
-            line-height: 1.8;
-            letter-spacing: 0.1em;
-        }
-
         @@media screen and (min-width: 768px) {
             .content-wrapper {
                 padding: 75px 0;
             }
 
             .col-head {
-                text-align: left;
                 flex-direction: row;
             }
-
-            .lead-title {
-                font-size: 34px;
-            }
-
-            .lead-login {
-                font-size: 18px;
-            }
-
-            .head-logo {
-                height: 80px;
-                margin: 0 30px 0 0;
-            }
         }
     </style>
 </head>
@@ -74,28 +36,8 @@
     <section class="content-wrapper">
         <!-- Dummy navbar-brand, hackish way to keep test AssertNoError passing -->
         <div class="navbar-brand d-none"></div>
-
         <div class="container">
-            <div class="row justify-content-center">
-                <div class="col col-head">
-                    <a asp-controller="Home" asp-action="Index">
-                        <img src="~/img/btcpay-logo.svg" alt="BTCPay Server" class="head-logo" asp-append-version="true"/>
-                    </a>
-                    <h1 class="lead-title text-uppercase m-0">@ViewData["Headline"]</h1>
-                </div>
-            </div>
-
-            <hr class="primary my-4 d-block" />
-
             @RenderBody()
-
-            <hr class="primary my-5 d-block" />
-
-            <div class="row justify-content-center">
-                <div class="col">
-                    <partial name="_BTCPaySupporters"/>
-                </div>
-            </div>
         </div>
     </section>
     @await Html.PartialAsync("_ValidationScriptsPartial")