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/template/EmailInput.vue

@@ -6,7 +6,6 @@ import { getContrastingTextColor } from '@chatwoot/utils';
 
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   components: {
@@ -24,8 +23,7 @@ export default {
     },
   },
   setup() {
-    const { getThemeClass } = useDarkMode();
-    return { v$: useVuelidate(), getThemeClass };
+    return { v$: useVuelidate() };
   },
   data() {
     return {
@@ -46,16 +44,6 @@ export default {
         this.messageContentAttributes.submitted_email
       );
     },
-    inputColor() {
-      return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
-        ${this.getThemeClass('text-black-900', 'dark:text-slate-50')}
-        ${this.getThemeClass('border-black-200', 'dark:border-black-500')}`;
-    },
-    inputHasError() {
-      return this.v$.email.$error
-        ? `${this.inputColor} error`
-        : `${this.inputColor}`;
-    },
   },
   validations: {
     email: {
@@ -88,14 +76,14 @@ export default {
   <div>
     <form
       v-if="!hasSubmitted"
-      class="email-input-group"
+      class="email-input-group h-10 flex my-2 mx-0 min-w-[200px]"
       @submit.prevent="onSubmit"
     >
       <input
         v-model="email"
-        class="form-input"
+        type="email"
         :placeholder="$t('EMAIL_PLACEHOLDER')"
-        :class="inputHasError"
+        :class="{ error: v$.email.$error }"
         @input="v$.email.$touch"
         @keydown.enter="onSubmit"
       />
@@ -116,34 +104,21 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import 'widget/assets/scss/variables.scss';
-
 .email-input-group {
-  display: flex;
-  margin: $space-small 0;
-  min-width: 200px;
-
   input {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-    padding: $space-one;
-    width: 100%;
+    @apply dark:bg-n-alpha-black1 rtl:rounded-tl-[0] ltr:rounded-tr-[0] rtl:rounded-bl-[0] ltr:rounded-br-[0] p-2.5 w-full focus:ring-0 focus:outline-n-brand;
 
     &::placeholder {
-      color: $color-light-gray;
+      @apply text-n-slate-10;
     }
 
     &.error {
-      border-color: $color-error;
+      @apply outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9;
     }
   }
 
   .button {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-    font-size: $font-size-large;
-    height: auto;
-    margin-left: -1px;
+    @apply rtl:rounded-tr-[0] ltr:rounded-tl-[0] rtl:rounded-br-[0] ltr:rounded-bl-[0] rounded-lg h-auto ltr:-ml-px rtl:-mr-px text-xl;
 
     .spinner {
       display: block;