feat: update colors for v4 (#10660)

Porting changes from https://github.com/chatwoot/chatwoot/pull/10552

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>

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

@@ -1,6 +1,6 @@
 <script>
 // [TODO] The popout events are needlessly complex and should be simplified
-import { defineAsyncComponent, defineModel } from 'vue';
+import { defineAsyncComponent, defineModel, useTemplateRef } from 'vue';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -80,12 +80,15 @@ export default {
       default: false,
     });
 
+    const replyEditor = useTemplateRef('replyEditor');
+
     return {
       uiSettings,
       popoutReplyBox,
       updateUISettings,
       isEditorHotKeyEnabled,
       fetchSignatureFlagFromUISettings,
+      replyEditor,
     };
   },
   data() {
@@ -553,6 +556,9 @@ export default {
         this.$store.dispatch('draftMessages/delete', { key });
       }
     },
+    getElementToBind() {
+      return this.replyEditor;
+    },
     getKeyboardEvents() {
       return {
         Escape: {
@@ -1081,7 +1087,7 @@ export default {
     :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
     @primary-action="onClickSelfAssign"
   />
-  <div class="reply-box" :class="replyBoxClass">
+  <div ref="replyEditor" class="reply-box" :class="replyBoxClass">
     <ReplyTopPanel
       :mode="replyType"
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"