From 00548ea908d60f60532f76f2a36324b076dbb69e Mon Sep 17 00:00:00 2001
From: Jay_Makwana <jaimakwana786@gmail.com>
Date: Mon, 6 Jan 2020 19:03:08 +0530
Subject: [PATCH] refactor payment view

---
 resources/assets/js/views/estimates/View.vue  |  2 +-
 resources/assets/js/views/invoices/View.vue   | 24 +++++++++----------
 resources/assets/sass/pages/payment-view.scss |  5 ++++
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/resources/assets/js/views/estimates/View.vue b/resources/assets/js/views/estimates/View.vue
index 87623c7e..657e322c 100644
--- a/resources/assets/js/views/estimates/View.vue
+++ b/resources/assets/js/views/estimates/View.vue
@@ -125,7 +125,7 @@
           <div class="left">
             <div class="inv-name">{{ estimate.user.name }}</div>
             <div class="inv-number">{{ estimate.estimate_number }}</div>
-            <div :class="'est-status-'+estimate.status.toLowerCase()"class="inv-status">{{ estimate.status }}</div>
+            <div :class="'est-status-'+estimate.status.toLowerCase()" class="inv-status">{{ estimate.status }}</div>
           </div>
           <div class="right">
             <div class="inv-amount" v-html="$utils.formatMoney(estimate.total, estimate.user.currency)" />
diff --git a/resources/assets/js/views/invoices/View.vue b/resources/assets/js/views/invoices/View.vue
index 314487e2..56fefee0 100644
--- a/resources/assets/js/views/invoices/View.vue
+++ b/resources/assets/js/views/invoices/View.vue
@@ -125,19 +125,17 @@
           v-for="(invoice,index) in invoices"
           :to="`/admin/invoices/${invoice.id}/view`"
           :key="index"
-          class="side-invoice"     
+          class="side-invoice"
         >
-        
-        <div class="left">
-          <div class="inv-name">{{ invoice.user.name }}</div>
-          <div class="inv-number">{{ invoice.invoice_number }}</div>
-          <div :class="'inv-status-'+invoice.status.toLowerCase()" class="inv-status">{{ invoice.status }}</div>
-        </div>
-        <div class="right">
-          <div class="inv-amount" v-html="$utils.formatMoney(invoice.due_amount, invoice.user.currency)" />
-          <div class="inv-date">{{ invoice.formattedInvoiceDate }}</div>
-        </div>
-        
+          <div class="left">
+            <div class="inv-name">{{ invoice.user.name }}</div>
+            <div class="inv-number">{{ invoice.invoice_number }}</div>
+            <div :class="'inv-status-'+invoice.status.toLowerCase()" class="inv-status">{{ invoice.status }}</div>
+          </div>
+          <div class="right">
+            <div class="inv-amount" v-html="$utils.formatMoney(invoice.due_amount, invoice.user.currency)" />
+            <div class="inv-date">{{ invoice.formattedInvoiceDate }}</div>
+          </div>
         </router-link>
         <p v-if="!invoices.length" class="no-result">
           {{ $t('invoices.no_matching_invoices') }}
@@ -187,7 +185,7 @@ export default {
     shareableLink () {
       return `/invoices/pdf/${this.invoice.unique_hash}`
     }
-  },  
+  },
   watch: {
     $route (to, from) {
       this.loadInvoice()
diff --git a/resources/assets/sass/pages/payment-view.scss b/resources/assets/sass/pages/payment-view.scss
index e36641d5..aaf1c759 100644
--- a/resources/assets/sass/pages/payment-view.scss
+++ b/resources/assets/sass/pages/payment-view.scss
@@ -32,6 +32,11 @@
             margin-bottom: 98px;
         }
 
+        &.router-link-exact-active {
+            border-left: 3px solid $ls-color-primary;
+            background-color: $ls-color-gray--very-light;
+        }
+
         &:hover {
             background-color: $ls-color-gray--very-light;
         }