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/ReplyEmailHead.vue

@@ -1,8 +1,12 @@
 <script>
 import { validEmailsByComma } from './helpers/emailHeadHelper';
 import { useVuelidate } from '@vuelidate/core';
+import ButtonV4 from 'dashboard/components-next/button/Button.vue';
 
 export default {
+  components: {
+    ButtonV4,
+  },
   props: {
     ccEmails: {
       type: String,
@@ -116,14 +120,14 @@ export default {
             @blur="onBlur"
           />
         </div>
-        <woot-button
+        <ButtonV4
           v-if="!showBcc"
-          variant="clear"
-          size="small"
+          :label="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC')"
+          ghost
+          xs
+          primary
           @click="handleAddBcc"
-        >
-          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC') }}
-        </woot-button>
+        />
       </div>
       <span v-if="v$.ccEmailsVal.$error" class="message">
         {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.ERROR') }}
@@ -156,10 +160,10 @@ export default {
 
 <style lang="scss" scoped>
 .input-group-wrap .message {
-  @apply text-sm text-red-500 dark:text-red-500;
+  @apply text-sm text-n-ruby-8;
 }
 .input-group {
-  @apply border-b border-solid border-slate-75 dark:border-slate-700 my-1 flex items-center gap-2;
+  @apply border-b border-solid border-n-weak my-1 flex items-center gap-2;
 
   .input-group-label {
     @apply border-transparent bg-transparent text-xs font-semibold pl-0;
@@ -167,9 +171,9 @@ export default {
 }
 
 .input-group.error {
-  @apply border-b-red-500 dark:border-b-red-500;
+  @apply border-n-ruby-8;
   .input-group-label {
-    @apply text-red-500 dark:text-red-500;
+    @apply text-n-ruby-8;
   }
 }
 </style>