From 1567d9fd3757087ad3d34ea0b56a7d6ce4d4916a Mon Sep 17 00:00:00 2001
From: Jay_Makwana <jaimakwana786@gmail.com>
Date: Fri, 15 Nov 2019 19:42:16 +0530
Subject: [PATCH] refactor base modal styles

---
 .../assets/js/components/base/BaseInput.vue     |  2 +-
 .../js/components/base/modal/BaseModal.vue      |  4 ++--
 .../assets/sass/components/base-modal.scss      | 17 ++++++++++++++++-
 .../assets/sass/components/customer-modal.scss  |  9 +++++++--
 .../assets/sass/components/item-modal.scss      |  3 ++-
 .../assets/sass/components/tax-type-modal.scss  |  1 +
 .../assets/sass/components/template-modal.scss  | 17 +++++++++++++++++
 resources/assets/sass/pages/invoices/view.scss  |  2 +-
 8 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/resources/assets/js/components/base/BaseInput.vue b/resources/assets/js/components/base/BaseInput.vue
index 09936d55..bf1bfca9 100644
--- a/resources/assets/js/components/base/BaseInput.vue
+++ b/resources/assets/js/components/base/BaseInput.vue
@@ -20,7 +20,7 @@
       @blur="handleFocusOut"
     >
     <div v-if="showPassword && isAlignLeftIcon" style="cursor: pointer" @click="showPass = !showPass" >
-      <font-awesome-icon :icon="!showPass ?'eye-slash': 'eye'" class="right-icon" />
+      <font-awesome-icon :icon="!showPass ?'eye': 'eye-slash'" class="right-icon" />
     </div>
     <font-awesome-icon v-if="icon && !isAlignLeftIcon" :icon="icon" class="right-icon" />
   </div>
diff --git a/resources/assets/js/components/base/modal/BaseModal.vue b/resources/assets/js/components/base/modal/BaseModal.vue
index 8847942d..8351e17f 100644
--- a/resources/assets/js/components/base/modal/BaseModal.vue
+++ b/resources/assets/js/components/base/modal/BaseModal.vue
@@ -2,8 +2,8 @@
   <transition name="fade">
     <div v-if="modalActive" :class="'size-' + modalSize" class="base-modal">
       <div class="modal-body">
-        <div class="close-icon">
-          <font-awesome-icon class="mr-2" icon="times" @click="closeModal"/>
+        <div class="close-icon" @click="closeModal">
+          <font-awesome-icon icon="times" />
         </div>
         <div class="modal-header p-3">
           <h5 class="modal-heading">{{ modalTitle }}</h5>
diff --git a/resources/assets/sass/components/base-modal.scss b/resources/assets/sass/components/base-modal.scss
index 70a96579..59c815cb 100644
--- a/resources/assets/sass/components/base-modal.scss
+++ b/resources/assets/sass/components/base-modal.scss
@@ -55,14 +55,29 @@
 
     .close-icon {
         position: absolute;
-        padding: 6px 0 0 0;
+        padding: 6px;
         top: 23px;
         right: 15px;
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        width: 20px;
         cursor: pointer;
     }
 
 }
 
 
+@media (max-width: $x-small-breakpoint) {
+    .base-modal {
 
+        .modal-body {
+            height: 100%;
+            overflow: scroll;
+            border-radius: 0px;
+
+        }
+
+    }
+}
 
diff --git a/resources/assets/sass/components/customer-modal.scss b/resources/assets/sass/components/customer-modal.scss
index 76568b9a..5162342c 100644
--- a/resources/assets/sass/components/customer-modal.scss
+++ b/resources/assets/sass/components/customer-modal.scss
@@ -36,11 +36,16 @@
 }
 
 
-@media(max-width: $x-small-breakpoint ) {
+@media (max-width: $x-small-breakpoint) {
 
     .base-modal {
 
         .customer-modal {
+            width: 100vw;
+
+            .required {
+                position: relative;
+            }
 
             .input-label {
                 text-align: left;
@@ -50,4 +55,4 @@
 
     }
 
-}
\ No newline at end of file
+}
diff --git a/resources/assets/sass/components/item-modal.scss b/resources/assets/sass/components/item-modal.scss
index 2bb210dc..66b68939 100644
--- a/resources/assets/sass/components/item-modal.scss
+++ b/resources/assets/sass/components/item-modal.scss
@@ -26,6 +26,7 @@
     .base-modal {
 
         .item-modal {
+            width: 100vw;
 
             .input-label {
                 text-align: left;
@@ -35,4 +36,4 @@
 
     }
 
-}
\ No newline at end of file
+}
diff --git a/resources/assets/sass/components/tax-type-modal.scss b/resources/assets/sass/components/tax-type-modal.scss
index 0b8d1745..d99343de 100644
--- a/resources/assets/sass/components/tax-type-modal.scss
+++ b/resources/assets/sass/components/tax-type-modal.scss
@@ -31,6 +31,7 @@
     .base-modal {
 
         .tax-type-modal {
+            width: 100vw;
 
             .input-label {
                 text-align: left;
diff --git a/resources/assets/sass/components/template-modal.scss b/resources/assets/sass/components/template-modal.scss
index 5d89fb3e..f4408858 100644
--- a/resources/assets/sass/components/template-modal.scss
+++ b/resources/assets/sass/components/template-modal.scss
@@ -38,3 +38,20 @@
         }
     }
 }
+
+@media (max-width: $x-small-breakpoint) {
+
+    .base-modal {
+
+        .template-modal {
+            width: 100vw;
+
+            .template-container {
+                justify-content: center;
+            }
+
+        }
+
+    }
+
+}
diff --git a/resources/assets/sass/pages/invoices/view.scss b/resources/assets/sass/pages/invoices/view.scss
index cb329be3..04a8bcc7 100644
--- a/resources/assets/sass/pages/invoices/view.scss
+++ b/resources/assets/sass/pages/invoices/view.scss
@@ -13,7 +13,7 @@
         position: fixed;
         top: 0;
         width: 300px;
-        z-index: 30;
+        z-index: 25;
         background: #FFFFFF;
     }