From b976adeefef3ed99de5294be8a953fbccd324cca Mon Sep 17 00:00:00 2001
From: lepipele <lepipele@users.noreply.github.com>
Date: Thu, 29 Mar 2018 22:27:05 -0500
Subject: [PATCH] Refactoring styles, simplifying the hierarchy

---
 .../Views/Invoice/Checkout-Body.cshtml        | 23 ++++-----
 BTCPayServer/wwwroot/css/normalizer.css       | 50 +++++++++++++++++++
 2 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
index da67f887d..733543e12 100644
--- a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
+++ b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
@@ -160,26 +160,21 @@
             </a>
         </div>
     </div>
+
     <div class="bp-view payment manual-flow" id="copy">
         <div class="manual__step-two__instructions">
             <span i18n="">{{$t("CompletePay_Body", srvModel)}}</span>
         </div>
         <nav v-if="srvModel.isLightning">
             <div class="manual-box flipped" style="margin-bottom: 30px;">
-                <div class="manual-box__amount">
-                    <div class="flipper flipped-initially">
-                        <div class="manual-box__address__label label">{{$t("BOLT 11 Invoice")}}</div>
-                        <div class="manual-box__address__value copy-cursor" ngxclipboard="" id="btcAddress">
-                            <div class="manual-box__address__wrapper">
-                                <div class="manual-box__address__wrapper__logo">
-                                    <img v-bind:src="srvModel.cryptoImage" height="16" />
-                                </div>
-                                <div class="manual-box__address__wrapper__value" id="btcAddressValue" style="overflow:hidden;max-width:240px;">{{srvModel.btcAddress}}</div>
-                            </div>
-                            <div class="copied-label" style="top: 5px;">
-                                <span>{{$t("Copied")}}</span>
-                            </div>
-                        </div>
+                <div class="manual-box__amount copySectionBox">
+                    <label>{{$t("BOLT 11 Invoice")}}</label>
+                    <div class="inputWithIcon">
+                        <input type="text" class="checkoutTextbox" v-bind:value="srvModel.btcAddress" readonly="readonly" />
+                        <img v-bind:src="srvModel.cryptoImage" />
+                    </div>
+                    <div class="copied-label" style="top: 5px;">
+                        <span>{{$t("Copied")}}</span>
                     </div>
                 </div>
                 <div class="manual-box__address">
diff --git a/BTCPayServer/wwwroot/css/normalizer.css b/BTCPayServer/wwwroot/css/normalizer.css
index d2ca885ae..25480e918 100644
--- a/BTCPayServer/wwwroot/css/normalizer.css
+++ b/BTCPayServer/wwwroot/css/normalizer.css
@@ -11290,3 +11290,53 @@ low-fee-timeline {
 .no-bounce * .status-icon__wrapper__outline {
     animation: none !important;
 }
+
+
+/* checkout additions */
+.copySectionBox label {
+    text-transform: uppercase;
+    font-size: 10px;
+    color: #515664;
+    opacity: .5;
+    letter-spacing: .6px;
+    margin-bottom: 14px;
+}
+
+.checkoutTextbox {
+    width: 100%;
+    border: 1px solid #e9e9e9;
+    border-radius: 4px;
+    outline: none;
+    padding: 8px 10px;
+    background: #f6f6f6;
+    box-sizing: border-box;
+    transition: .3s;
+    font-size: 10px;
+    color: #4a4a4a;
+    cursor: copy;
+}
+
+.inputWithIcon .checkoutTextbox {
+    padding-left: 40px;
+}
+
+.inputWithIcon {
+    position: relative;
+}
+
+    .inputWithIcon img {
+        position: absolute;
+        left: 2px;
+        top: 8px;
+        color: #aaa;
+        height: 16px;
+        padding: 0px 6px;
+        border-right: 1px solid #e9e9e9;
+    }
+
+    .inputWithIcon.inputIconBg img {
+        background-color: #aaa;
+        color: #fff;
+        padding: 9px 4px;
+        border-radius: 4px 0 0 4px;
+    }