feat: Add RTL Support to Widget (#11022)

This PR adds RTL support to the web widget for improved right-to-left language compatibility, updates colors, and cleans up code.

Fixes https://linear.app/chatwoot/issue/CW-4089/rtl-issues-on-widget

https://github.com/chatwoot/chatwoot/issues/9791

Other PR: https://github.com/chatwoot/chatwoot/pull/11016

app/javascript/widget/components/HeaderActions.vue

@@ -3,7 +3,6 @@ import { mapGetters } from 'vuex';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import { popoutChatWindow } from '../helpers/popoutHelper';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 import configMixin from 'widget/mixins/configMixin';
 import { CONVERSATION_STATUS } from 'shared/constants/messages';
 
@@ -21,10 +20,6 @@ export default {
       default: true,
     },
   },
-  setup() {
-    const { getThemeClass } = useDarkMode();
-    return { getThemeClass };
-  },
   computed: {
     ...mapGetters({
       conversationAttributes: 'conversationAttributes/getConversationParams',
@@ -83,7 +78,7 @@ export default {
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
-  <div v-if="showHeaderActions" class="actions flex items-center">
+  <div v-if="showHeaderActions" class="actions flex items-center gap-3">
     <button
       v-if="
         canLeaveConversation &&
@@ -94,22 +89,14 @@ export default {
       :title="$t('END_CONVERSATION')"
       @click="resolveConversation"
     >
-      <FluentIcon
-        icon="sign-out"
-        size="22"
-        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
-      />
+      <FluentIcon icon="sign-out" size="22" class="text-n-slate-12" />
     </button>
     <button
       v-if="showPopoutButton"
       class="button transparent compact new-window--button"
       @click="popoutWindow"
     >
-      <FluentIcon
-        icon="open"
-        size="22"
-        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
-      />
+      <FluentIcon icon="open" size="22" class="text-n-slate-12" />
     </button>
     <button
       class="button transparent compact close-button"
@@ -118,28 +105,13 @@ export default {
       }"
       @click="closeWindow"
     >
-      <FluentIcon
-        icon="dismiss"
-        size="24"
-        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
-      />
+      <FluentIcon icon="dismiss" size="24" class="text-n-slate-12" />
     </button>
   </div>
 </template>
 
 <style scoped lang="scss">
-@import 'widget/assets/scss/variables.scss';
-
 .actions {
-  button {
-    margin-left: $space-normal;
-  }
-
-  span {
-    color: $color-heading;
-    font-size: $font-size-large;
-  }
-
   .close-button {
     display: none;
   }