From 79b4431ef7594c077c2edf62741af454f0ba4105 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Wed, 2 Mar 2022 21:32:58 +0800
Subject: [PATCH] update billings design

---
 .../bookings/elements/BillingComponent.vue         |  6 +++---
 .../bookings/elements/BillingDocumentComponent.vue | 14 +++++++++-----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/resources/assets/vue/components/bookings/elements/BillingComponent.vue b/resources/assets/vue/components/bookings/elements/BillingComponent.vue
index bfa8b2d9..6e03c040 100644
--- a/resources/assets/vue/components/bookings/elements/BillingComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/BillingComponent.vue
@@ -11,7 +11,7 @@
                                         <div class="row h-100">
                                             <div class="col fs-9 d-flex align-items-center flex-column" style="padding-top: 7px; padding-bottom: 4px;">
                                                 <label class="all-caps w-100 m-b-0" style="font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;">Document Type</label>
-                                                <span class="w-100 fs-14">{{parameters.type}}</span>
+                                                <span class="w-100 fs-14">{{parameters.type.replaceAll('_', ' ')}}</span>
                                             </div>
                                             <div class="col-auto b-l b-grey">
                                                 <div class="row h-100 align-items-center">
@@ -27,10 +27,10 @@
                                             <div class="row text-left no-margin bg-white">
                                                 <div class="col no-padding">
                                                     <div class="row no-margin" v-for="document in documents" :key="document">
-                                                        <div class="col b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 b-a" @click="updateDocumentType(document)">
+                                                        <div class="col b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 b-a" :class="[{'bg-primary-light': document === parameters.type}, {'text-white': document === parameters.type}, {'b-primary': document === parameters.type}, {'hover-primary': document !== parameters.type}, {'pointer': document !== parameters.type}]" @click="updateDocumentType(document)">
                                                             <div class="row align-items-center justify-content-center">
                                                                 <div class="col">
-                                                                    <div class="font-heading fs-10">{{document}}</div>
+                                                                    <div class="font-heading fs-10">{{document.replaceAll('_', ' ')}}</div>
                                                                 </div>
                                                             </div>
                                                         </div>
diff --git a/resources/assets/vue/components/bookings/elements/BillingDocumentComponent.vue b/resources/assets/vue/components/bookings/elements/BillingDocumentComponent.vue
index 64f96d0e..095f574f 100644
--- a/resources/assets/vue/components/bookings/elements/BillingDocumentComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/BillingDocumentComponent.vue
@@ -40,11 +40,15 @@
                         <div class="font-heading text-success bold">{{item.owner.amount}} {{item.owner.fixed_currency.short_code}}</div>
                     </div>
                     <div class="col">
-                        <document-file-viewer-component :file="item.files[0]">
-                            <template slot="button">
-                                <button class="btn btn-success">Download</button>
-                            </template>
-                        </document-file-viewer-component>
+                        <div class="row">
+                            <div class="col-auto">
+                                <document-file-viewer-component :file="item.files[0]">
+                                    <template slot="button">
+                                        <button class="btn btn-success w-100">Download</button>
+                                    </template>
+                                </document-file-viewer-component>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>