feat: Update UI for edit contact modal (#1833)

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>

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')"
     />

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')"

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="