From a54a2cd382359e404e2130c928e31e8e25894713 Mon Sep 17 00:00:00 2001
From: Philipp Walter <philippwalter@pm.me>
Date: Sun, 22 May 2022 11:13:51 +0200
Subject: [PATCH] Improve On-chain and Lightning wallet UI (#24)

---
 src/components/BitcoinWallet.vue       | 14 ++++++++++----
 src/components/LightningWallet.vue     | 23 ++++++++++++++++-------
 src/components/Utility/FeeSelector.vue |  4 ++--
 src/global-styles/custom.scss          |  4 ++--
 4 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/components/BitcoinWallet.vue b/src/components/BitcoinWallet.vue
index 0fd27ea..0648b0c 100644
--- a/src/components/BitcoinWallet.vue
+++ b/src/components/BitcoinWallet.vue
@@ -232,10 +232,11 @@
             <div class="pb-3">
               <a
                 href="#"
-                class="card-link text-muted"
+                class="card-link text-muted d-flex align-items-center"
                 @click.stop.prevent="reset"
               >
                 <svg
+                  class="me-1"
                   width="7"
                   height="13"
                   viewBox="0 0 7 13"
@@ -264,6 +265,7 @@
                   id="input-withdrawal-amount"
                   v-model="withdraw.amountInput"
                   class="neu-input"
+                  placeholder="Amount"
                   type="text"
                   size="lg"
                   autofocus
@@ -298,6 +300,7 @@
               id="input-withdrawal-address"
               v-model="withdraw.address"
               class="mb-2 neu-input"
+              placeholder="Address"
               type="text"
               size="lg"
               min="1"
@@ -320,10 +323,11 @@
             <div class="pt-2 pb-3">
               <a
                 href="#"
-                class="card-link text-muted"
+                class="card-link text-muted d-flex align-items-center"
                 @click.stop.prevent="reset"
               >
                 <svg
+                  class="me-1"
                   width="7"
                   height="13"
                   viewBox="0 0 7 13"
@@ -459,10 +463,11 @@
             <div class="pt-2 pb-3">
               <a
                 href="#"
-                class="card-link text-muted"
+                class="card-link text-muted d-flex align-items-center"
                 @click.stop.prevent="reset"
               >
                 <svg
+                  class="me-1"
                   width="7"
                   height="13"
                   viewBox="0 0 7 13"
@@ -507,10 +512,11 @@
             <div class="pt-2 pb-3">
               <a
                 href="#"
-                class="card-link text-muted"
+                class="card-link text-muted d-flex align-items-center"
                 @click.stop.prevent="reset"
               >
                 <svg
+                  class="me-1"
                   width="7"
                   height="13"
                   viewBox="0 0 7 13"
diff --git a/src/components/LightningWallet.vue b/src/components/LightningWallet.vue
index 027b5cc..95b5e0f 100644
--- a/src/components/LightningWallet.vue
+++ b/src/components/LightningWallet.vue
@@ -272,10 +272,11 @@
           <div class="pb-3">
             <a
               href="#"
-              class="card-link text-muted"
+              class="card-link text-muted d-flex align-items-center"
               @click.stop.prevent="reset"
             >
               <svg
+                class="me-1"
                 width="7"
                 height="13"
                 viewBox="0 0 7 13"
@@ -339,10 +340,11 @@
           <div class="pb-3">
             <a
               href="#"
-              class="card-link text-muted"
+              class="card-link text-muted d-flex align-items-center"
               @click.stop.prevent="reset"
             >
               <svg
+                class="me-1"
                 width="7"
                 height="13"
                 viewBox="0 0 7 13"
@@ -384,10 +386,11 @@
           <div class="pb-3">
             <a
               href="#"
-              class="card-link text-muted"
+              class="card-link text-muted d-flex align-items-center"
               @click.stop.prevent="reset"
             >
               <svg
+                class="me-1"
                 width="7"
                 height="13"
                 viewBox="0 0 7 13"
@@ -410,6 +413,7 @@
                 id="input-sats"
                 v-model.number="receive.amountInput"
                 class="neu-input"
+                placeholder="Amount"
                 type="text"
                 size="lg"
                 autofocus
@@ -444,6 +448,7 @@
             id="input-description"
             v-model="receive.description"
             class="mb-4 neu-input"
+            placeholder="Description (optional)"
             size="lg"
             :disabled="receive.isGeneratingInvoice"
           ></b-input>
@@ -458,10 +463,11 @@
           <div class="pb-3">
             <a
               href="#"
-              class="card-link text-muted"
+              class="card-link text-muted d-flex align-items-center"
               @click.stop.prevent="reset"
             >
               <svg
+                class="me-1"
                 width="7"
                 height="13"
                 viewBox="0 0 7 13"
@@ -530,10 +536,11 @@
           <div class="pb-3">
             <a
               href="#"
-              class="card-link text-muted"
+              class="card-link text-muted d-flex align-items-center"
               @click.stop.prevent="reset"
             >
               <svg
+                class="me-1"
                 width="7"
                 height="13"
                 viewBox="0 0 7 13"
@@ -581,10 +588,11 @@
           <div class="pb-3">
             <a
               href="#"
-              class="card-link text-muted"
+              class="card-link text-muted d-flex align-items-center"
               @click.stop.prevent="reset"
             >
               <svg
+                class="me-1"
                 width="7"
                 height="13"
                 viewBox="0 0 7 13"
@@ -648,10 +656,11 @@
           <div class="pb-3">
             <a
               href="#"
-              class="card-link text-muted"
+              class="card-link text-muted d-flex align-items-center"
               @click.stop.prevent="reset"
             >
               <svg
+                class="me-1"
                 width="7"
                 height="13"
                 viewBox="0 0 7 13"
diff --git a/src/components/Utility/FeeSelector.vue b/src/components/Utility/FeeSelector.vue
index e799046..a4d4ea3 100644
--- a/src/components/Utility/FeeSelector.vue
+++ b/src/components/Utility/FeeSelector.vue
@@ -4,12 +4,12 @@
       <small class="text-muted d-block mb-0">Transaction Fee</small>
       <b-form-checkbox
         v-model="useCustomFee"
-        class=""
+        class="d-flex align-items-center"
         size="sm"
         switch
         :disabled="isDisabled"
       >
-        <small class="text-muted">Custom</small>
+        <small class="text-muted ms-1">Custom</small>
       </b-form-checkbox>
     </div>
     <div v-if="useCustomFee" class="vue-slider-container">
diff --git a/src/global-styles/custom.scss b/src/global-styles/custom.scss
index 04af0aa..178759b 100644
--- a/src/global-styles/custom.scss
+++ b/src/global-styles/custom.scss
@@ -527,8 +527,8 @@ svg.icon-clock {
 
 //wallet
 .wallet-content {
-  height: 22rem;
-  overflow-y: scroll;
+  height: 25rem;
+  overflow-y: auto;
 }
 .wallet-buttons {
   height: 3.5rem;