From 314fda7877c8a6e86cafd6a9816ca20f850f86e1 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Wed, 3 Mar 2021 22:27:39 +0100
Subject: [PATCH] Update import wallet cells

---
 .../Views/Stores/ImportWalletOptions.cshtml   | 50 +++++++++----------
 .../Views/Stores/_LayoutWalletSetup.cshtml    |  4 +-
 BTCPayServer/wwwroot/main/wallet-setup.css    | 11 ++--
 3 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/BTCPayServer/Views/Stores/ImportWalletOptions.cshtml b/BTCPayServer/Views/Stores/ImportWalletOptions.cshtml
index cd59069d0..85c8df49a 100644
--- a/BTCPayServer/Views/Stores/ImportWalletOptions.cshtml
+++ b/BTCPayServer/Views/Stores/ImportWalletOptions.cshtml
@@ -24,26 +24,26 @@
                 <div class="image">
                     <vc:icon symbol="hardware-wallet"/>
                 </div>
-                <div class="content">
-                    <h4>
-                        <span class="mr-2">Connect hardware&nbsp;wallet</span>
-                        <span class="badge bg-primary">Recommended</span>
-                    </h4>
-                    <p class="mb-0 text-secondary">Import your keys using our Vault application</p>
+                <div class="content d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between mr-2">
+                    <div>
+                        <h4>Connect hardware&nbsp;wallet</h4>
+                        <p class="mb-0 text-secondary">Import your keys using our Vault application</p>
+                    </div>
+                    <small class="d-block text-primary mt-2 mt-lg-0">Recommended</small>
                 </div>
                 <vc:icon symbol="caret-right" />
             </a>
             <noscript>
-                <div class="list-group-item list-group-item-wallet-setup disabled walletsetupcss">
+                <div class="list-group-item list-group-item-wallet-setup disabled">
                     <div class="image">
                         <vc:icon symbol="hardware-wallet"/>
                     </div>
-                    <div class="content">
-                        <h4>
-                            <span class="mr-2">Connect hardware wallet</span>
-                            <span class="badge bg-primary">Recommended</span>
-                        </h4>
-                        <p class="mb-0">Please enable JavaScript for this option to be available</p>
+                    <div class="content d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between mr-2">
+                        <div>
+                            <h4>Connect hardware wallet</h4>
+                            <p class="mb-0">Please enable JavaScript for this option to be available</p>
+                        </div>
+                        <small class="d-block text-primary mt-2 mt-lg-0">Recommended</small>
                     </div>
                 </div>
             </noscript>
@@ -56,12 +56,12 @@
         <div class="image">
             <vc:icon symbol="wallet-file"/>
         </div>
-        <div class="content">
-            <h4>
-                <span class="mr-2">Import wallet file</span>
-                <span class="badge bg-primary">Recommended</span>
-            </h4>
-            <p class="mb-0 text-secondary">Upload a file exported from your wallet</p>
+        <div class="content d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between mr-2">
+            <div>
+                <h4>Import wallet file</h4>
+                <p class="mb-0 text-secondary">Upload a file exported from your wallet</p>
+            </div>
+            <small class="d-block text-primary mt-2 mt-lg-0">Recommended</small>
         </div>
         <vc:icon symbol="caret-right" />
     </a>
@@ -109,12 +109,12 @@
         <div class="image">
             <vc:icon symbol="seed"/>
         </div>
-        <div class="content">
-            <h4>
-                <span class="mr-2">Enter wallet seed</span>
-                <span class="badge bg-danger" data-toggle="tooltip" data-placement="top" title="You really should not type your seed into a device that is connected to the internet.">Not recommended <span class="fa fa-question-circle-o" title="More information..."></span></span>
-            </h4>
-            <p class="mb-0 text-secondary">Provide the 12 or 24 word recovery seed</p>
+        <div class="content d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between mr-2">
+            <div>
+                <h4>Enter wallet seed</h4>
+                <p class="mb-0 text-secondary">Provide the 12 or 24 word recovery seed</p>
+            </div>
+            <small class="d-block text-danger mt-2 mt-lg-0" data-toggle="tooltip" data-placement="top" title="You really should not type your seed into a device that is connected to the internet.">Not recommended <span class="fa fa-question-circle-o" title="More information..."></span></small>
         </div>
         <vc:icon symbol="caret-right" />
     </a>
diff --git a/BTCPayServer/Views/Stores/_LayoutWalletSetup.cshtml b/BTCPayServer/Views/Stores/_LayoutWalletSetup.cshtml
index 0b9062667..ff57f2901 100644
--- a/BTCPayServer/Views/Stores/_LayoutWalletSetup.cshtml
+++ b/BTCPayServer/Views/Stores/_LayoutWalletSetup.cshtml
@@ -22,8 +22,8 @@
     </a>
 </nav>
 
-<div class="row justify-content-md-center mt-5">
-    <main class="col-md-10 col-lg-8 col-xl-6">
+<div class="row justify-content-md-center mt-5 pt-sm-3 pt-md-0">
+    <main class="col-md-10 col-lg-8 col-xl-7">
         @if (TempData.HasStatusMessage())
         {
             <partial name="_StatusMessage"/>
diff --git a/BTCPayServer/wwwroot/main/wallet-setup.css b/BTCPayServer/wwwroot/main/wallet-setup.css
index e2dff2f2e..0b6eca5b7 100644
--- a/BTCPayServer/wwwroot/main/wallet-setup.css
+++ b/BTCPayServer/wwwroot/main/wallet-setup.css
@@ -20,7 +20,7 @@ body {
         top: 0;
         left: 0;
         right: 0;
-        padding: 30px;
+        padding: 24px;
     }
 }
 
@@ -97,11 +97,10 @@ body {
     padding: 1.5rem;
 }
 
-.list-group-item-wallet-setup .content .badge {
-    position: relative;
-    top: -1px;
-    font-size: 60%;
-    color: var(--btcpay-color-white);
+.list-group-item-wallet-setup .content small {
+    font-size: 90%;
+    text-transform: uppercase;
+    white-space: nowrap;
 }
 
 .list-group-item-wallet-setup .image + .content {