Clipboard icons have been added

without functionality yet

src/app/pay/pay.component.css

@@ -25,7 +25,7 @@
 
 .smaller {
     min-width: 200px;
-    width: 40vw !important;
+    width: 450px !important;
 }
 
 @media (max-width: 800px) {

src/app/payment/payment.component.css

@@ -28,10 +28,6 @@
     to { filter: blur(10px) }
 }
 
-.request {
-    transform: translateY(-40px);
-}
-
 .loader {
     position: absolute;
     display: inline;
@@ -42,7 +38,7 @@
 .main {
     display: grid;
     height: 400px;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: .8fr 1fr;
 }
 
 .qr {
@@ -92,13 +88,50 @@
 /* Data */
 .main .data {
     display: grid;
-    grid-template-columns: 1fr;
+    grid-template-columns: 30px 1fr;
     grid-template-rows: 1fr auto auto auto 1fr;
+    column-gap: 10px;
     row-gap: 10px;
     width: 500px;
 }
 
+.clipboard {
+    cursor: pointer;
+    margin: auto auto;
+    grid-column: 1;
+}
+
+.clipboard-target {
+    grid-row: 2;
+}
+.clipboard-amount {
+    grid-row: 3;
+}
+/*.clipboard:hover {
+    animation: clipboard-clicked .5s linear;
+}
+
+@keyframes clipboard-clicked {
+    30% {
+        transform: scale(1.2);
+    }
+    50% {
+        transform: scale(1.2) rotate(5deg);
+    }
+    70% {
+        transform: scale(1.2) rotate(-5deg);
+    }
+    100% {
+        transform: scale(1);
+    }
+}*/
+
+#target, #amount, #status {
+    grid-column: 2;
+}
+
 #target {
+    user-select: none;
     grid-row: 2;
 }
 
@@ -135,8 +168,7 @@
 #list {
     overflow-y: scroll;
     scroll-behavior: smooth;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+    height: 315px;
     margin: 0;
     padding: 0;
 }

src/app/payment/payment.component.html

@@ -1,7 +1,7 @@
 <!--
     Select payment method
 -->
-<div class="payment request" xyz="stagger-2 fade-100% down-1" *ngIf="this.backend.isInvoiceRequested()">
+<div class="payment" xyz="stagger-2 fade-100% down-1" *ngIf="this.backend.isInvoiceRequested()">
     <h3 id="title">Choose your<br>payment method</h3>
     <p id="price">{{ this.backend.invoice.totalPrice!.toFixed(2) }} {{ this.backend.currencyPrefix() }}</p>
 
@@ -38,28 +38,22 @@
 
     <div class="data">
         <!-- Payment data -->
-        <span id="target" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">Send to
+        <img class="clipboard clipboard-target" src="assets/clipboard.svg" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">
+        <span id="target" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">
+            Send to
             <h3>{{ getReceiveAddress() }}</h3>
         </span>
+
+        <img class="clipboard clipboard-amount" src="assets/clipboard.svg" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">
         <span id="amount" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">Amount
             <h3>{{ this.backend.getAmount() }} {{ this.backend.invoice.paymentMethod }} <span class="price"> | {{ this.backend.invoice.totalPrice!.toFixed(2) }} {{ this.backend.currencyPrefix() }}</span></h3>
         </span>
+
         <span id="status" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">Status
             <h3>
                 {{ status }}
                 <div class="loader" *ngIf="this.status === 'Unconfirmed'">
-                    <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-                       width="32px" height="32px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
-                    <path fill="#f7a12f" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
-                      <animateTransform attributeType="xml"
-                        attributeName="transform"
-                        type="rotate"
-                        from="0 25 25"
-                        to="360 25 25"
-                        dur="1s"
-                        repeatCount="indefinite"/>
-                      </path>
-                    </svg>
+                    <img src="assets/loader.svg">
                   </div>
             </h3>
             <small *ngIf="status === 'Unconfirmed'">Confirmations: {{ this.backend.confirmations }}</small>

src/assets/clipboard.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clipboard" width="30" height="30" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fff" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
+  <rect x="9" y="3" width="6" height="4" rx="2" />
+</svg>

src/assets/loader.svg

@@ -0,0 +1,5 @@
+<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+	<path fill="#f7a12f" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
+		<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
+	</path>
+</svg>