From 63094e811241f9cd5a74408d2158db32ee877dfe Mon Sep 17 00:00:00 2001
From: Mohit Panjwani <mohit.panjvani@gmail.com>
Date: Tue, 22 Dec 2020 13:46:15 +0530
Subject: [PATCH] re-style template selection modals

---
 .../js/components/base/modal/BaseModal.vue     |  1 +
 .../components/base/modal/EstimateTemplate.vue | 18 +++++++-----------
 .../components/base/modal/InvoiceTemplate.vue  | 18 +++++++-----------
 3 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/resources/assets/js/components/base/modal/BaseModal.vue b/resources/assets/js/components/base/modal/BaseModal.vue
index 9bf6fb2b..ebcae76b 100644
--- a/resources/assets/js/components/base/modal/BaseModal.vue
+++ b/resources/assets/js/components/base/modal/BaseModal.vue
@@ -15,6 +15,7 @@
     </sw-modal>
   </div>
 </template>
+
 <script>
 import { XIcon } from '@vue-hero-icons/solid'
 import { mapActions, mapGetters } from 'vuex'
diff --git a/resources/assets/js/components/base/modal/EstimateTemplate.vue b/resources/assets/js/components/base/modal/EstimateTemplate.vue
index 83167770..eb64284f 100644
--- a/resources/assets/js/components/base/modal/EstimateTemplate.vue
+++ b/resources/assets/js/components/base/modal/EstimateTemplate.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="template-modal">
     <div class="px-8 py-8 sm:p-6">
-      <div class="flex flex-wrap justify-start p-1 overflow-x-auto sw-scroll">
+      <div class="grid grid-cols-3 gap-2 p-1 overflow-x-auto sw-scroll">
         <div
           v-for="(template, index) in modalData"
           :key="index"
@@ -9,15 +9,10 @@
             'border border-solid border-primary-500':
               selectedTemplate === template.id,
           }"
-          class="relative m-2 border border-gray-200 border-solid flex flex-col"
+          class="relative flex flex-col m-2 border border-gray-200 border-solid cursor-pointer hover:border-primary-300"
+          @click="selectedTemplate = template.id"
         >
-          <img
-            :src="template.path"
-            alt="template-image"
-            height="200"
-            width="140"
-            @click="selectedTemplate = template.id"
-          />
+          <img :src="template.path" alt="template-image" />
           <img
             v-if="selectedTemplate === template.id"
             class="absolute z-10 w-5 h-5 text-primary-500"
@@ -26,9 +21,10 @@
           />
           <span
             :class="[
-              'w-full p-0.5 bg-primary-100 text-xs text-center font-thin',
+              'w-full p-1 bg-gray-200 text-sm text-center absolute bottom-0 left-0',
               {
-                'text-primary-500': selectedTemplate === template.id,
+                'text-primary-500 bg-primary-100':
+                  selectedTemplate === template.id,
                 'text-gray-600': selectedTemplate != template.id,
               },
             ]"
diff --git a/resources/assets/js/components/base/modal/InvoiceTemplate.vue b/resources/assets/js/components/base/modal/InvoiceTemplate.vue
index f6ecf84e..4cc8aaad 100644
--- a/resources/assets/js/components/base/modal/InvoiceTemplate.vue
+++ b/resources/assets/js/components/base/modal/InvoiceTemplate.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="template-modal">
     <div class="px-8 py-8 sm:p-6">
-      <div class="flex flex-wrap justify-start p-1 overflow-x-auto sw-scroll">
+      <div class="grid grid-cols-3 gap-2 p-1 overflow-x-auto sw-scroll">
         <div
           v-for="(template, index) in modalData"
           :key="index"
@@ -9,15 +9,10 @@
             'border border-solid border-primary-500':
               selectedTemplate === template.id,
           }"
-          class="relative m-2 border border-gray-200 border-solid flex flex-col"
+          class="relative flex flex-col m-2 border border-gray-200 border-solid cursor-pointer hover:border-primary-300"
+          @click="selectedTemplate = template.id"
         >
-          <img
-            :src="template.path"
-            alt="template-image"
-            height="200"
-            width="140"
-            @click="selectedTemplate = template.id"
-          />
+          <img :src="template.path" alt="template-image" />
           <img
             v-if="selectedTemplate === template.id"
             class="absolute z-10 w-5 h-5 text-primary-500"
@@ -26,9 +21,10 @@
           />
           <span
             :class="[
-              'w-full p-0.5 bg-primary-100 text-xs text-center font-thin',
+              'w-full p-1 bg-gray-200 text-sm text-center absolute bottom-0 left-0',
               {
-                'text-primary-500': selectedTemplate === template.id,
+                'text-primary-500 bg-primary-100':
+                  selectedTemplate === template.id,
                 'text-gray-600': selectedTemplate != template.id,
               },
             ]"