fix: Update styles for canned responses modal (#6350)

app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue

@@ -1,5 +1,9 @@
 <template>
-  <mention-box :items="items" @mention-select="handleMentionClick" />
+  <mention-box :items="items" @mention-select="handleMentionClick">
+    <template slot-scope="{ item }">
+      <strong>{{ item.label }}</strong> - {{ item.description }}
+    </template>
+  </mention-box>
 </template>
 
 <script>

app/javascript/dashboard/components/widgets/conversation/VariableList.vue

@@ -1,5 +1,12 @@
 <template>
-  <mention-box :items="items" @mention-select="handleVariableClick" />
+  <mention-box :items="items" @mention-select="handleVariableClick">
+    <template slot-scope="{ item }">
+      <span class="text-capitalize variable--list-label">
+        {{ item.description }}
+      </span>
+      ({{ item.label }})
+    </template>
+  </mention-box>
 </template>
 
 <script>
@@ -35,3 +42,8 @@ export default {
   },
 };
 </script>
+<style scoped>
+.variable--list-label {
+  font-weight: var(--font-weight-bold);
+}
+</style>

app/javascript/dashboard/components/widgets/mentions/MentionBox.vue

@@ -13,7 +13,7 @@
       @mouseover="onHover(index)"
     >
       <a class="text-truncate">
-        <strong>{{ item.label }}</strong> - {{ item.description }}
+        <slot :item="item" />
       </a>
     </li>
   </ul>

app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue

@@ -21,18 +21,18 @@
         <div class="medium-12 columns">
           <label :class="{ error: $v.content.$error }">
             {{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
-            <label class="editor-wrap">
-              <woot-message-editor
-                v-model="content"
-                class="message-editor"
-                :class="{ editor_warning: $v.content.$error }"
-                :enable-variables="true"
-                :enable-canned-responses="false"
-                :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
-                @blur="$v.content.$touch"
-              />
-            </label>
           </label>
+          <div class="editor-wrap">
+            <woot-message-editor
+              v-model="content"
+              class="message-editor"
+              :class="{ editor_warning: $v.content.$error }"
+              :enable-variables="true"
+              :enable-canned-responses="false"
+              :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
+              @blur="$v.content.$touch"
+            />
+          </div>
         </div>
         <div class="modal-footer">
           <div class="medium-12 columns">
@@ -137,5 +137,17 @@ export default {
   .ProseMirror-menubar {
     display: none;
   }
+
+  .ProseMirror-woot-style {
+    min-height: 20rem;
+
+    p {
+      font-size: var(--font-size-default);
+    }
+  }
+
+  .message-editor {
+    border: 1px solid var(--s-200);
+  }
 }
 </style>

app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue

@@ -18,18 +18,18 @@
         <div class="medium-12 columns">
           <label :class="{ error: $v.content.$error }">
             {{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }}
-            <label class="editor-wrap">
-              <woot-message-editor
-                v-model="content"
-                class="message-editor"
-                :class="{ editor_warning: $v.content.$error }"
-                :enable-variables="true"
-                :enable-canned-responses="false"
-                :placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')"
-                @blur="$v.content.$touch"
-              />
-            </label>
           </label>
+          <div class="editor-wrap">
+            <woot-message-editor
+              v-model="content"
+              class="message-editor"
+              :class="{ editor_warning: $v.content.$error }"
+              :enable-variables="true"
+              :enable-canned-responses="false"
+              :placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')"
+              @blur="$v.content.$touch"
+            />
+          </div>
         </div>
         <div class="modal-footer">
           <div class="medium-12 columns">
@@ -149,5 +149,17 @@ export default {
   .ProseMirror-menubar {
     display: none;
   }
+
+  .ProseMirror-woot-style {
+    min-height: 20rem;
+
+    p {
+      font-size: var(--font-size-default);
+    }
+  }
+
+  .message-editor {
+    border: 1px solid var(--s-200);
+  }
 }
 </style>