chore: Upgrade Tailwind CSS to 3.3.2 (#7380)

app/javascript/packs/widget.js

@@ -38,8 +38,8 @@ Vue.use(VueFormulate, {
     isValidPhoneNumber: ({ value }) => isPhoneNumberValidWithDialCode(value),
   },
   classes: {
-    outer: 'mb-4 wrapper',
-    error: 'text-red-400 mt-2 text-xs font-medium',
+    outer: 'mb-2 wrapper',
+    error: 'text-red-400 mt-2 text-xs leading-3 font-medium',
   },
 });
 // Event Bus

app/javascript/shared/components/Branding.vue

@@ -7,7 +7,7 @@
       :href="brandRedirectURL"
       rel="noreferrer noopener nofollow"
       target="_blank"
-      class="branding--link justify-center"
+      class="branding--link justify-center items-center leading-3"
     >
       <img
         class="branding--image"

app/javascript/shared/components/Button.vue

@@ -34,9 +34,9 @@ export default {
   },
   computed: {
     buttonClassName() {
-      let className = 'text-white py-3 px-4 rounded shadow-sm';
+      let className = 'text-white py-3 px-4 rounded shadow-sm leading-4';
       if (this.type === 'clear') {
-        className = 'flex mx-auto mt-4 text-xs w-auto text-black-600';
+        className = 'flex mx-auto mt-4 text-xs leading-3 w-auto text-black-600';
       }
 
       if (this.type === 'blue' && !Object.keys(this.buttonStyles).length) {

app/javascript/widget/components/ChatHeader.vue

@@ -19,19 +19,19 @@
       />
       <div>
         <div
-          class="font-medium text-base flex items-center"
+          class="font-medium text-base leading-4 flex items-center"
           :class="$dm('text-black-900', 'dark:text-slate-50')"
         >
           <span v-dompurify-html="title" class="mr-1" />
           <div
             :class="
-              `h-2 w-2 rounded-full leading-4
+              `h-2 w-2 rounded-full
               ${isOnline ? 'bg-green-500' : 'hidden'}`
             "
           />
         </div>
         <div
-          class="text-xs mt-1"
+          class="text-xs mt-1 leading-3"
           :class="$dm('text-black-700', 'dark:text-slate-400')"
         >
           {{ replyWaitMessage }}

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -17,7 +17,7 @@
     </div>
     <h2
       v-dompurify-html="introHeading"
-      class="mt-5 text-3xl mb-3 font-normal"
+      class="mt-5 text-3xl mb-3 leading-8 font-normal"
       :class="$dm('text-slate-900', 'dark:text-slate-50')"
     />
     <p

app/javascript/widget/components/Form/Input.vue

@@ -1,6 +1,10 @@
 <template>
   <label class="block">
-    <div v-if="label" class="mb-2 text-xs font-medium" :class="labelClass">
+    <div
+      v-if="label"
+      class="mb-2 text-xs leading-3 font-medium"
+      :class="labelClass"
+    >
       {{ label }}
     </div>
     <input
@@ -11,12 +15,12 @@
       :value="value"
       @change="onChange"
     />
-    <div v-if="error" class="text-red-400 mt-2 text-xs font-medium">
+    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
       {{ error }}
     </div>
     <div
       v-if="!error && helpText"
-      class="text-red-400 mt-2 text-xs font-medium"
+      class="text-red-400 mt-2 text-xs leading-3 font-medium"
     >
       {{ helpText }}
     </div>

app/javascript/widget/components/Form/TextArea.vue

@@ -1,6 +1,10 @@
 <template>
   <label class="block">
-    <div v-if="label" class="mb-2 text-xs font-medium" :class="labelClass">
+    <div
+      v-if="label"
+      class="mb-2 text-xs leading-3 font-medium"
+      :class="labelClass"
+    >
       {{ label }}
     </div>
     <textarea
@@ -10,7 +14,7 @@
       :value="value"
       @change="onChange"
     />
-    <div v-if="error" class="text-red-400 mt-2 text-xs font-medium">
+    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
       {{ error }}
     </div>
   </label>

app/javascript/widget/components/PreChat/Form.vue

@@ -46,7 +46,7 @@
     />
 
     <custom-button
-      class="font-medium my-5"
+      class="font-medium mt-2 mb-5"
       block
       :bg-color="widgetColor"
       :text-color="textColor"
@@ -180,7 +180,7 @@ export default {
       return contactAttributes;
     },
     inputStyles() {
-      return `mt-2 border rounded w-full py-2 px-3 text-slate-700 outline-none`;
+      return `mt-1 border rounded w-full py-2 px-3 text-slate-700 outline-none`;
     },
     isInputDarkOrLightMode() {
       return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
@@ -306,6 +306,7 @@ export default {
     .formulate-input-wrapper {
       display: flex;
       align-items: center;
+      line-height: $space-normal;
 
       label {
         margin-left: 0.2rem;

app/javascript/widget/components/TeamAvailability.vue

@@ -12,7 +12,7 @@
               : $t('TEAM_AVAILABILITY.OFFLINE')
           }}
         </div>
-        <div class="text-xs leading-4 mt-1">
+        <div class="text-xs leading-3 mt-1">
           {{ replyWaitMessage }}
         </div>
       </div>

app/javascript/widget/components/dropdown/DropdownMenuItem.vue

@@ -21,7 +21,7 @@ export default {
     },
     textClass: {
       type: String,
-      default: 'text-sm',
+      default: 'text-sm leading-3',
     },
     icon: {
       type: Boolean,