From d6391be4db7cb3a920b253d915f1324874709027 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Sat, 27 Feb 2021 12:33:12 +0530
Subject: [PATCH] feat: Update UI for edit contact modal (#1833)

---
 app/javascript/dashboard/components/Modal.vue | 26 +++++++++++++++++--
 .../conversation/contact/ContactForm.vue      |  6 ++---
 .../conversation/contact/CreateContact.vue    |  2 +-
 .../conversation/contact/EditContact.vue      |  2 +-
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index 88138cf86..6332bd118 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -2,7 +2,7 @@
   <transition name="modal-fade">
     <div
       v-if="show"
-      class="modal-mask"
+      :class="modalClassName"
       transition="modal"
       @click="onBackDropClick"
     >
@@ -30,6 +30,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    modalType: {
+      type: String,
+      default: 'centered',
+    },
   },
   computed: {
     modalContainerClassName() {
@@ -39,6 +43,14 @@ export default {
       }
       return className;
     },
+    modalClassName() {
+      const modalClassNameMap = {
+        centered: '',
+        'right-aligned': 'right-aligned',
+      };
+
+      return `modal-mask ${modalClassNameMap[this.modalType] || ''}`;
+    },
   },
   mounted() {
     document.addEventListener('keydown', e => {
@@ -60,7 +72,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .modal-container--full-width {
   align-items: center;
   border-radius: 0;
@@ -69,4 +81,14 @@ export default {
   justify-content: center;
   width: 100%;
 }
+
+.modal-mask.right-aligned {
+  justify-content: flex-end;
+
+  .modal-container {
+    border-radius: 0;
+    height: 100%;
+    width: 48rem;
+  }
+}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index dfa7b205f..a1beaa13e 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -1,7 +1,7 @@
 <template>
   <form class="contact--form" @submit.prevent="handleSubmit">
     <div class="row">
-      <div class="medium-9 columns">
+      <div class="columns">
         <label :class="{ error: $v.name.$error }">
           {{ $t('CONTACT_FORM.FORM.NAME.LABEL') }}
           <input
@@ -37,14 +37,14 @@
     <div class="row">
       <woot-input
         v-model.trim="phoneNumber"
-        class="medium-6 columns"
+        class="columns"
         :label="$t('CONTACT_FORM.FORM.PHONE_NUMBER.LABEL')"
         :placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
       />
     </div>
     <woot-input
       v-model.trim="companyName"
-      class="medium-6 columns"
+      class="columns"
       :label="$t('CONTACT_FORM.FORM.COMPANY_NAME.LABEL')"
       :placeholder="$t('CONTACT_FORM.FORM.COMPANY_NAME.PLACEHOLDER')"
     />
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
index b81eeddc2..27cca73a4 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
@@ -1,5 +1,5 @@
 <template>
-  <woot-modal :show.sync="show" :on-close="onCancel">
+  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
     <div class="column content-box">
       <woot-modal-header
         :header-title="$t('CREATE_CONTACT.TITLE')"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
index b6bf2c8bd..afb2144ec 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
@@ -1,5 +1,5 @@
 <template>
-  <woot-modal :show.sync="show" :on-close="onCancel">
+  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
     <div class="column content-box">
       <woot-modal-header
         :header-title="