feat: Remove Foundation in favor of Tailwind (#8984)

* feat: Remove foundation

* chore: Minor fix

* Minor fix

* Update _forms.scss

* chore: More changes

* chore: Minor fix

* chore: Clean up

* fix: font-weight

* chore: More changes

* chore: Setting page

* chore: Editor fix

* chore: Reports page

* chore: More changes

* chore: Minor changes

* chore: More fixes

* chore: More changes

* chore: More changes

* chore: More changes

* chore: Minor fix

* chore: More changes

* chore: More changes

* chore: More changes

* chore: More changes

* chore: Clean up

* chore: Minor fix

* chore: Clean ups

* chore: Rename basic file

* chore: Remove unused files

* chore: Fix expanded input

* Fix campaign rendering

* chore: Clean up

* chore: More changes

* chore: Remove unused files

* fix: Overflow issue

* chore: Minor fix

* chore: Clean up

* chore: Minor fix

* chore: Remove unused files

* chore: Minor fix

* chore: Minor fix

* fix: autoprefixer start/end value has mixed support

* chore: Minor fix

* chore: Remove unused files

* chore: Minor fix

* chore: Minor fix

* chore: Minor fix

* Add responsive design to label settings

* fix inbox view

* chore: Minor fix

* w-60% to w-2/3

* chore: Fix team

* chore: Fix button

* w-[34%] to w-1/3

* chore: Fix border

* Add support mobile views in team page

* chore: fix snackbar

* chore: clean up

* chore: Clean up

* fix: loading state alignment

* fix: alert styles

* chore: Minor fix

* fix: spacing for agent bot row

* fix: layout

* fix: layout for SLA

* fix: checkbox

* fix: SLA checkbox spacing

* Update inbox settings pages

* fix macros listing page layout

* fix canned responses

* chore: Fix bot page

* chore: fix automation page

* chore: fix agents page

* chore: fix canned response editor

* chore: Fix settings table

* chore: fix settings layout

* chore: Minor fix

* fix: canned response table layou

* fix: layout for table header for webhooks

* fix: webhook row layout

* fix: dashboard app modal layout

* fix: add title to canned response truncated shortcode

* fix: dashboard apps row layuot

* fix: layouts hooks

* fix: body color

* fix: delete action color in portal locales

* fix: text color for campagin title

* fix: success button color

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="-mt-px text-sm">
     <button
-      class="flex items-center select-none w-full bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
+      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
       @click="$emit('click')"
     >
       <div class="flex justify-between mb-0.5">

app/javascript/dashboard/components/ChannelSelector.vue

@@ -1,10 +1,12 @@
 <template>
   <button
-    class="sm:w-[50%] md:w-[34%] lg:w-[25%] channel"
+    class="sm:w-[50%] md:w-1/3 lg:w-1/4 bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
     @click="$emit('click')"
   >
-    <img :src="src" :alt="title" />
-    <h3 class="channel__title">
+    <img :src="src" :alt="title" class="w-[50%] my-4 mx-auto" />
+    <h3
+      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
+    >
       {{ title }}
     </h3>
   </button>
@@ -31,32 +33,8 @@ export default {
     filter: grayscale(100%);
   }
 
-  &.channel:hover {
+  &:hover {
     @apply border-transparent shadow-none cursor-not-allowed;
   }
 }
-
-.channel {
-  @apply bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800;
-
-  &:hover {
-    @apply border-woot-500 dark:border-woot-500 shadow-md z-50;
-  }
-
-  &.disabled {
-    @apply opacity-60;
-  }
-
-  img {
-    @apply w-[50%] my-4 mx-auto;
-  }
-
-  .channel__title {
-    @apply text-slate-800 dark:text-slate-100 text-base text-center capitalize;
-  }
-
-  p {
-    @apply text-slate-600 dark:text-slate-300 w-full text-sm;
-  }
-}
 </style>

app/javascript/dashboard/components/ChatList.vue

@@ -16,7 +16,7 @@
     >
       <div class="flex max-w-[85%] justify-center items-center">
         <h1
-          class="text-xl break-words overflow-hidden whitespace-nowrap text-ellipsis text-black-900 dark:text-slate-100 mb-0"
+          class="text-xl break-words overflow-hidden whitespace-nowrap font-medium text-ellipsis text-black-900 dark:text-slate-100 mb-0"
           :title="pageTitle"
         >
           {{ pageTitle }}
@@ -143,7 +143,10 @@
           <div v-if="chatListLoading" class="text-center">
             <span class="spinner mt-4 mb-4" />
           </div>
-          <p v-if="showEndOfListMessage" class="text-center text-muted p-4">
+          <p
+            v-if="showEndOfListMessage"
+            class="text-center text-slate-400 dark:text-slate-300 p-4"
+          >
             {{ $t('CHAT_LIST.EOF') }}
           </p>
           <intersection-observer

app/javascript/dashboard/components/CustomAttribute.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="py-3 px-4">
     <div class="flex items-center mb-1">
-      <h4 class="text-block-title flex items-center m-0 w-full error">
+      <h4 class="text-sm flex items-center m-0 w-full error">
         <div v-if="isAttributeTypeCheckbox" class="checkbox-wrap">
           <input
             v-model="editedValue"
@@ -12,7 +12,7 @@
         </div>
         <div class="flex items-center justify-between w-full">
           <span
-            class="attribute-name"
+            class="attribute-name w-full text-slate-800 dark:text-slate-100 font-medium text-sm mb-0"
             :class="{ error: $v.editedValue.$error }"
           >
             {{ label }}
@@ -32,19 +32,24 @@
     </div>
     <div v-if="notAttributeTypeCheckboxAndList">
       <div v-show="isEditing">
-        <div class="input-group small">
+        <div class="mb-2 w-full flex items-center">
           <input
             ref="inputfield"
             v-model="editedValue"
             :type="inputType"
-            class="input-group-field"
+            class="!h-8 ltr:rounded-r-none rtl:rounded-l-none !mb-0 !text-sm"
             autofocus="true"
             :class="{ error: $v.editedValue.$error }"
             @blur="$v.editedValue.$touch"
             @keyup.enter="onUpdate"
           />
-          <div class="input-group-button">
-            <woot-button size="small" icon="checkmark" @click="onUpdate" />
+          <div>
+            <woot-button
+              size="small"
+              icon="checkmark"
+              class="rounded-l-none rtl:rounded-r-none"
+              @click="onUpdate"
+            />
           </div>
         </div>
         <span
@@ -306,7 +311,6 @@ export default {
   @apply my-0 mr-2 ml-0;
 }
 .attribute-name {
-  @apply w-full text-slate-800 dark:text-slate-100;
   &.error {
     @apply text-red-400 dark:text-red-500;
   }

app/javascript/dashboard/components/Modal.vue

@@ -62,9 +62,9 @@ export default {
   computed: {
     modalContainerClassName() {
       let className =
-        'modal-container bg-white dark:bg-slate-800 skip-context-menu';
+        'modal-container rtl:text-right shadow-md rounded-sm max-h-full overflow-auto relative w-[37.5rem] bg-white dark:bg-slate-800 skip-context-menu';
       if (this.fullWidth) {
-        return `${className} modal-container--full-width`;
+        return `${className} items-center rounded-none flex h-full justify-center w-full`;
       }
 
       return `${className} ${this.size}`;
@@ -109,26 +109,43 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
-.modal-container--full-width {
-  align-items: center;
-  border-radius: 0;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  width: 100%;
-}
-
-.modal-mask.right-aligned {
-  justify-content: flex-end;
-
+<style lang="scss">
+.modal-mask {
+  @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;
   .modal-container {
-    border-radius: 0;
-    height: 100%;
-    width: 30rem;
+    &.medium {
+      @apply max-w-[80%] w-[56.25rem];
+    }
+    // .content-box {
+    //   @apply h-auto p-0;
+    // }
+    .content {
+      @apply p-8;
+    }
+    form,
+    .modal-content {
+      @apply pt-4 pb-8 px-8 self-center;
+      a {
+        @apply p-4;
+      }
+    }
   }
 }
 .modal-big {
-  width: 60%;
+  @apply w-full;
+}
+.modal-mask.right-aligned {
+  @apply justify-end;
+  .modal-container {
+    @apply rounded-none h-full w-[30rem];
+  }
+}
+.modal-enter,
+.modal-leave {
+  @apply opacity-0;
+}
+.modal-enter .modal-container,
+.modal-leave .modal-container {
+  transform: scale(1.1);
 }
 </style>

app/javascript/dashboard/components/ModalHeader.vue

@@ -3,7 +3,7 @@
     <img v-if="headerImage" :src="headerImage" alt="No image" />
     <h2
       ref="modalHeaderTitle"
-      class="text-slate-800 text-lg dark:text-slate-100"
+      class="text-slate-800 text-lg font-semibold dark:text-slate-50"
     >
       {{ headerTitle }}
     </h2>

app/javascript/dashboard/components/SettingsSection.vue

@@ -1,19 +1,21 @@
 <template>
   <div
-    class="ml-0 mr-0 flex pt-0 pr-4 pb-4 pl-0"
+    class="ml-0 mr-0 flex py-8 w-full xl:w-3/4 flex-col xl:flex-row"
     :class="{
-      'pt-4 border-b border-solid border-slate-50 dark:border-slate-700/30':
+      'border-b border-solid border-slate-50 dark:border-slate-700/30':
         showBorder,
     }"
   >
-    <div class="w-[30%] min-w-0 max-w-[30%] pr-12">
+    <div class="w-full xl:w-1/4 min-w-0 xl:max-w-[30%] pr-12">
       <p
         v-if="title"
         class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
       >
         {{ title }}
       </p>
-      <p class="text-sm mb-2">
+      <p
+        class="text-sm mb-2 text-slate-700 dark:text-slate-300 leading-5 tracking-normal mt-2"
+      >
         <slot v-if="subTitle" name="subTitle">
           {{ subTitle }}
         </slot>
@@ -23,7 +25,7 @@
         {{ note }}
       </p>
     </div>
-    <div class="w-[50%] min-w-0 max-w-[50%]">
+    <div class="w-full xl:w-1/2 min-w-0 xl:max-w-[50%]">
       <slot />
     </div>
   </div>

app/javascript/dashboard/components/Snackbar.vue

@@ -1,11 +1,17 @@
 <template>
   <div>
-    <div class="ui-snackbar">
-      <div class="ui-snackbar-text">
+    <div
+      class="shadow-sm bg-slate-800 dark:bg-slate-700 rounded-[4px] items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
+    >
+      <div class="text-white dark:text-white text-sm font-medium">
         {{ message }}
       </div>
-      <div v-if="action" class="ui-snackbar-action">
-        <router-link v-if="action.type == 'link'" :to="action.to">
+      <div v-if="action">
+        <router-link
+          v-if="action.type == 'link'"
+          :to="action.to"
+          class="text-woot-500 dark:text-woot-500 cursor-pointer font-medium hover:text-woot-600 dark:hover:text-woot-600 select-none"
+        >
           {{ action.message }}
         </router-link>
       </div>

app/javascript/dashboard/components/SnackbarContainer.vue

@@ -1,5 +1,9 @@
 <template>
-  <transition-group name="toast-fade" tag="div" class="ui-snackbar-container">
+  <transition-group
+    name="toast-fade"
+    tag="div"
+    class="left-0 my-0 mx-auto max-w-[25rem] overflow-hidden absolute right-0 text-center top-4 z-[9999]"
+  >
     <woot-snackbar
       v-for="snackMessage in snackMessages"
       :key="snackMessage.key"

app/javascript/dashboard/components/index.js

@@ -18,7 +18,6 @@ import Label from './ui/Label';
 import LoadingState from './widgets/LoadingState';
 import Modal from './Modal';
 import ModalHeader from './ModalHeader';
-import ReportStatsCard from './widgets/ReportStatsCard';
 import SidemenuIcon from './SidemenuIcon';
 import Spinner from 'shared/components/Spinner';
 import SubmitButton from './buttons/FormSubmitButton';
@@ -46,7 +45,6 @@ const WootUIKit = {
   LoadingState,
   Modal,
   ModalHeader,
-  ReportStatsCard,
   SidemenuIcon,
   Spinner,
   SubmitButton,

app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js

@@ -2,7 +2,7 @@ import { frontendURL } from '../../../../helper/URLHelper';
 
 const campaigns = accountId => ({
   parentNav: 'campaigns',
-  routes: ['settings_account_campaigns', 'one_off'],
+  routes: ['ongoing_campaigns', 'one_off'],
   menuItems: [
     {
       icon: 'arrow-swap',
@@ -10,7 +10,7 @@ const campaigns = accountId => ({
       key: 'ongoingCampaigns',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/ongoing`),
-      toStateName: 'settings_account_campaigns',
+      toStateName: 'ongoing_campaigns',
     },
     {
       key: 'oneOffCampaigns',

app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js

@@ -34,7 +34,7 @@ const primaryMenuItems = accountId => [
     label: 'CAMPAIGNS',
     featureFlag: FEATURE_FLAGS.CAMPAIGNS,
     toState: frontendURL(`accounts/${accountId}/campaigns`),
-    toStateName: 'settings_account_campaigns',
+    toStateName: 'ongoing_campaigns',
     roles: ['administrator'],
   },
   {

app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue

@@ -45,7 +45,7 @@
 
     <div
       v-if="globalConfig.createNewAccountFromDashboard"
-      class="modal-footer delete-item"
+      class="flex justify-end items-center p-8 gap-2"
     >
       <button
         class="button success large expanded nice"

app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue

@@ -2,7 +2,7 @@
   <woot-button
     v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
     variant="link"
-    class="current-user"
+    class="items-center flex rounded-full"
     @click="handleClick"
   >
     <thumbnail
@@ -38,12 +38,3 @@ export default {
   },
 };
 </script>
-
-<style scoped lang="scss">
-.current-user {
-  align-items: center;
-  display: flex;
-  border-radius: 50%;
-  border: 2px solid var(--white);
-}
-</style>

app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mb-4">
     <button
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 p-0 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
           isNotificationPanelActive,
@@ -16,7 +16,7 @@
       />
       <span
         v-if="unreadCount"
-        class="text-black-900 bg-yellow-300 absolute -top-0.5 -right-1 p-1 text-xxs min-w-[1rem] rounded-full"
+        class="text-black-900 bg-yellow-300 absolute -top-0.5 -right-1 text-xxs min-w-[1rem] rounded-full"
       >
         {{ unreadCount }}
       </span>

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue

@@ -53,7 +53,7 @@
           </span>
           <span
             v-if="showChildCount"
-            class="bg-slate-50 dark:bg-slate-700 rounded text-xxs font-medium mx-1 py-0 px-1"
+            class="bg-slate-50 dark:bg-slate-700 rounded-full min-w-[18px] justify-center items-center flex text-xxs font-medium mx-1 py-0 px-1"
             :class="
               isCountZero
                 ? `text-slate-300 dark:text-slate-500`

app/javascript/dashboard/components/ui/Label.vue

@@ -1,18 +1,25 @@
 <template>
-  <div :class="labelClass" :style="labelStyle" :title="description">
+  <div
+    class="ltr:mr-1 rtl:ml-1 mb-1"
+    :class="labelClass"
+    :style="labelStyle"
+    :title="description"
+  >
     <span v-if="icon" class="label-action--button">
       <fluent-icon :icon="icon" size="12" class="label--icon cursor-pointer" />
     </span>
     <span
       v-if="['smooth', 'dashed'].includes(variant) && title && !icon"
       :style="{ background: color }"
-      class="label-color-dot"
+      class="label-color-dot flex-shrink-0"
     />
-    <span v-if="!href">{{ title }}</span>
+    <span v-if="!href" class="whitespace-nowrap text-ellipsis overflow-hidden">
+      {{ title }}
+    </span>
     <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
     <button
       v-if="showClose"
-      class="label-close--button"
+      class="label-close--button p-0"
       :style="{ color: textColor }"
       @click="onClick"
     >
@@ -104,7 +111,7 @@ export default {
 
 <style scoped lang="scss">
 .label {
-  @apply inline-flex items-center font-medium gap-1 mr-1 rtl:ml-1 rtl:mr-0 mb-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-slate-75 dark:border-slate-600 h-6;
+  @apply inline-flex items-center font-medium text-xs rounded-[4px] gap-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-slate-75 dark:border-slate-600 h-6;
 
   &.small {
     @apply text-xs py-0.5 px-1 leading-tight h-5;

app/javascript/dashboard/components/ui/PreviewCard.vue

@@ -1,6 +1,18 @@
 <template>
-  <div class="preview-card--wrap" :class="{ 'active-card': active }">
-    <div class="header--wrap" :class="{ active: active }">
+  <div
+    class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
+    :class="{
+      'bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400':
+        active,
+    }"
+  >
+    <div
+      class="flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600"
+      :class="{
+        'bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700':
+          active,
+      }"
+    >
       <div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
       <fluent-icon
         v-if="active"
@@ -56,21 +68,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.preview-card--wrap {
-  @apply flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600;
-
-  .header--wrap {
-    @apply flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600;
-  }
-
-  .active {
-    @apply bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700;
-  }
-}
-
-.active-card {
-  @apply bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400;
-}
-</style>

app/javascript/dashboard/components/ui/Switch.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="toggle-button"
+    class="toggle-button p-0"
     :class="{ active: value, small: size === 'small' }"
     role="switch"
     :aria-checked="value.toString()"

app/javascript/dashboard/components/ui/Tabs/TabsItem.vue

@@ -7,7 +7,7 @@
   >
     <a @click="onTabClick">
       {{ name }}
-      <div v-if="showBadge" class="badge">
+      <div v-if="showBadge" class="badge min-w-[20px]">
         <span>
           {{ getItemCount }}
         </span>

app/javascript/dashboard/components/ui/Wizard.vue

@@ -13,18 +13,23 @@
     >
       <div class="flex items-center">
         <h3
-          class="overflow-hidden whitespace-nowrap text-ellipsis leading-tight"
+          class="text-slate-800 dark:text-slate-100 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mb-1.5 text-ellipsis leading-tight"
         >
           {{ item.title }}
         </h3>
-        <span v-if="isOver(item)" class="completed">
+        <span
+          v-if="isOver(item)"
+          class="text-green-500 dark:text-green-500 ml-1"
+        >
           <fluent-icon icon="checkmark" />
         </span>
       </div>
       <span class="step">
         {{ items.indexOf(item) + 1 }}
       </span>
-      <p>{{ item.body }}</p>
+      <p class="text-slate-600 dark:text-slate-300 text-sm m-0 pl-6">
+        {{ item.body }}
+      </p>
     </div>
   </transition-group>
 </template>
@@ -60,3 +65,40 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.wizard-box {
+  .item {
+    @apply cursor-pointer after:bg-slate-75 before:bg-slate-75 dark:after:bg-slate-600 dark:before:bg-slate-600 py-4 pr-4 pl-6 relative before:h-4 before:top-0 last:before:h-0 first:before:h-0 last:after:h-0 before:content-[''] before:absolute before:w-0.5 after:content-[''] after:h-full after:absolute after:top-5 after:w-0.5;
+
+    &.active {
+      h3 {
+        @apply text-woot-500 dark:text-woot-500;
+      }
+
+      .step {
+        @apply bg-woot-500 dark:bg-woot-500;
+      }
+    }
+
+    &.over {
+      &::after {
+        @apply bg-woot-500 dark:bg-woot-500;
+      }
+
+      .step {
+        @apply bg-woot-500 dark:bg-woot-500;
+      }
+
+      & + .item {
+        &::before {
+          @apply bg-woot-500 dark:bg-woot-500;
+        }
+      }
+    }
+
+    .step {
+      @apply bg-slate-75 dark:bg-slate-600 rounded-2xl font-medium w-4 left-4 leading-4 z-[999] absolute text-center text-white dark:text-white text-xxs top-5;
+    }
+  }
+}
+</style>

app/javascript/dashboard/components/widgets/AttachmentsPreview.vue

@@ -15,7 +15,7 @@
           📄
         </span>
       </div>
-      <div class="max-w-[60%] min-w-[50%] overflow-hidden text-ellipsis">
+      <div class="max-w-3/5 min-w-[50%] overflow-hidden text-ellipsis">
         <span
           class="h-4 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap"
         >

app/javascript/dashboard/components/widgets/BackButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="header-section flex items-center text-base font-normal mr-4 ml-2 cursor-pointer text-woot-500 dark:text-woot-500"
+    class="header-section flex items-center text-base font-normal mr-4 ml-2 p-0 cursor-pointer text-woot-500 dark:text-woot-500"
     @click.capture="goBack"
   >
     <fluent-icon icon="chevron-left" />

app/javascript/dashboard/components/widgets/InboxName.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 font-medium bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
+    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap font-medium bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
   >
     <fluent-icon
       class="mr-0.5 rtl:ml-0.5 rtl:mr-0"

app/javascript/dashboard/components/widgets/LoadingState.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="flex items-center justify-center p-8">
     <h6
-      class="block text-base text-center w-100 text-slate-800 dark:text-slate-300"
+      class="flex items-center gap-2 text-base text-center w-100 text-slate-800 dark:text-slate-300"
     >
-      <span class="mr-3">{{ message }}</span>
+      <span class="text-base font-medium text-slate-800 dark:text-slate-100">
+        {{ message }}
+      </span>
       <span class="spinner" />
     </h6>
   </div>

app/javascript/dashboard/components/widgets/ReportStatsCard.vue

@@ -1,57 +0,0 @@
-<template>
-  <div
-    class="small-2 report-card"
-    :class="{ active: selected }"
-    @click="onClick(index)"
-  >
-    <h3 class="heading">
-      <span>{{ heading }}</span>
-      <fluent-icon
-        v-if="infoText"
-        v-tooltip="infoText"
-        size="14"
-        icon="info"
-        class="info-icon"
-      />
-    </h3>
-    <div class="metric-wrap">
-      <h4 class="metric">
-        {{ point }}
-      </h4>
-      <span v-if="trend !== 0" :class="trendClass">{{ trendValue }}</span>
-    </div>
-    <p class="desc">
-      {{ desc }}
-    </p>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    heading: { type: String, default: '' },
-    infoText: { type: String, default: '' },
-    point: { type: [Number, String], default: '' },
-    trend: { type: Number, default: null },
-    index: { type: Number, default: null },
-    desc: { type: String, default: '' },
-    selected: Boolean,
-    onClick: { type: Function, default: () => {} },
-  },
-  computed: {
-    trendClass() {
-      if (this.trend > 0) {
-        return 'metric-trend metric-up';
-      }
-
-      return 'metric-trend metric-down';
-    },
-    trendValue() {
-      if (this.trend > 0) {
-        return `+${this.trend}%`;
-      }
-
-      return `${this.trend}%`;
-    },
-  },
-};
-</script>

app/javascript/dashboard/components/widgets/SettingIntroBanner.vue

@@ -2,7 +2,7 @@
   <div
     class="bg-slate-25 dark:bg-slate-900 pt-4 pb-0 px-8 border-b border-solid border-slate-50 dark:border-slate-800/50"
   >
-    <h2 class="text-2xl text-slate-800 dark:text-slate-100">
+    <h2 class="text-2xl text-slate-800 dark:text-slate-100 mb-1 font-medium">
       {{ headerTitle }}
     </h2>
     <p

app/javascript/dashboard/components/widgets/TableFooter.vue

@@ -98,9 +98,7 @@ export default {
   },
   computed: {
     pageFooterIconClass() {
-      return this.isRTLView
-        ? 'margin-right-minus-slab'
-        : 'margin-left-minus-slab';
+      return this.isRTLView ? '-mr-3' : '-ml-3';
     },
     isFooterVisible() {
       return this.totalCount && !(this.firstIndex > this.totalCount);

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -9,6 +9,7 @@
       <img
         v-show="shouldShowImage"
         :src="src"
+        draggable="false"
         :class="thumbnailClass"
         @load="onImgLoad"
         @error="onImgError"

app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue

@@ -225,8 +225,11 @@ export default {
 
 <style lang="scss">
 .audio-wave-wrapper {
-  min-height: 5rem;
-  height: 5rem;
+  @apply h-20 min-h-[5rem];
+
+  .video-js {
+    @apply bg-transparent max-h-60 min-h-[3rem] pt-4 px-0 pb-0 resize-none;
+  }
 }
 .video-js .vjs-control-bar {
   background-color: transparent;

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -104,7 +104,7 @@
           class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-slate-900 dark:text-slate-50 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
         >
           <fluent-icon icon="cloud-backup" size="40" />
-          <h4 class="page-sub-title text-slate-900 dark:text-slate-50">
+          <h4 class="text-2xl break-words text-slate-900 dark:text-slate-50">
             {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
           </h4>
         </div>

app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -146,6 +146,6 @@ export default {
   }
 }
 .button--note {
-  @apply text-yellow-600 dark:text-yellow-600;
+  @apply text-yellow-600 dark:text-yellow-600 bg-transparent dark:bg-transparent;
 }
 </style>

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

@@ -25,13 +25,12 @@
       v-if="bulkActionCheck"
       :src="currentContact.thumbnail"
       :badge="inboxBadge"
-      class="columns"
       :username="currentContact.name"
       :status="currentContact.availability_status"
       size="40px"
     />
     <div
-      class="px-0 py-3 border-b group-hover:border-transparent border-slate-50 dark:border-slate-800/75 columns"
+      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-slate-50 dark:border-slate-800/75 w-[calc(100%-40px)]"
     >
       <div class="flex justify-between">
         <inbox-name v-if="showInboxName" :inbox="inbox" />
@@ -51,7 +50,7 @@
         </div>
       </div>
       <h4
-        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis overflow-hidden whitespace-nowrap w-[60%] text-slate-900 dark:text-slate-100"
+        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis font-medium overflow-hidden whitespace-nowrap w-[calc(100%-70px)] text-slate-900 dark:text-slate-100"
       >
         {{ currentContact.name }}
       </h4>

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

@@ -5,9 +5,7 @@
     <div
       class="flex-1 w-full min-w-0 flex flex-col md:flex-row items-center justify-center"
     >
-      <div
-        class="flex justify-start items-center mr-4 rtl:mr-0 rtl:ml-4 min-w-0 w-[inherit]"
-      >
+      <div class="flex justify-start items-center min-w-0 w-fit max-w-full">
         <back-button
           v-if="showBackButton"
           :back-url="backButtonUrl"
@@ -20,9 +18,11 @@
           :status="currentContact.availability_status"
         />
         <div
-          class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0 w-[inherit] overflow-hidden"
+          class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0 w-fit overflow-hidden"
         >
-          <div class="flex items-center flex-row gap-1 m-0 p-0 w-[inherit]">
+          <div
+            class="flex items-center flex-row gap-1 m-0 p-0 w-fit max-w-full"
+          >
             <woot-button
               variant="link"
               color-scheme="secondary"
@@ -30,7 +30,7 @@
               @click.prevent="$emit('contact-panel-toggle')"
             >
               <span
-                class="text-base leading-tight text-slate-900 dark:text-slate-100"
+                class="text-base leading-tight font-medium text-slate-900 dark:text-slate-100"
               >
                 {{ currentContact.name }}
               </span>
@@ -66,7 +66,7 @@
         </div>
       </div>
       <div
-        class="header-actions-wrap items-center flex flex-row flex-grow justify-end mt-3 lg:mt-0 rtl:relative rtl:left-6"
+        class="header-actions-wrap items-center flex flex-row flex-grow justify-end mt-3 lg:mt-0"
         :class="{ 'justify-end': isContactPanelOpen }"
       >
         <more-actions :conversation-id="currentChat.id" />

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

@@ -8,7 +8,10 @@
       />
       <form class="w-full" @submit.prevent="onSubmit">
         <div class="w-full">
-          <div v-if="currentChat.meta.sender && currentChat.meta.sender.email">
+          <div
+            v-if="currentChat.meta.sender && currentChat.meta.sender.email"
+            class="flex items-center gap-2"
+          >
             <input
               id="contact"
               v-model="selectedType"
@@ -20,7 +23,7 @@
               $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_CONTACT')
             }}</label>
           </div>
-          <div v-if="currentChat.meta.assignee">
+          <div v-if="currentChat.meta.assignee" class="flex items-center gap-2">
             <input
               id="assignee"
               v-model="selectedType"
@@ -32,7 +35,7 @@
               $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_AGENT')
             }}</label>
           </div>
-          <div>
+          <div class="flex items-center gap-2">
             <input
               id="other_email_address"
               v-model="selectedType"

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

@@ -601,8 +601,8 @@ export default {
         @apply text-woot-400 dark:text-woot-400;
       }
 
-      .text-block-title {
-        @apply text-slate-700 dark:text-slate-700;
+      .attachment-name {
+        @apply text-slate-700 dark:text-slate-200;
       }
 
       .download.button {

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

@@ -547,6 +547,8 @@ export default {
 
 <style scoped lang="scss">
 .modal-mask {
+  @apply absolute;
+
   &::v-deep {
     .ProseMirror-woot-style {
       @apply max-h-[25rem];

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

@@ -1,9 +1,9 @@
 <template>
-  <div class="columns onboarding-wrap">
+  <div class="onboarding-wrap">
     <div class="onboarding">
       <div class="scroll-wrap">
         <div class="features-item">
-          <h1 class="page-title">
+          <h1 class="text-2xl text-slate-900 dark:text-slate-50">
             <span>{{
               $t('ONBOARDING.TITLE', {
                 installationName: globalConfig.installationName,
@@ -30,7 +30,7 @@
           </p>
         </div>
         <div class="features-item">
-          <h2 class="block-title text-black-900 dark:text-slate-200">
+          <h2 class="text-lg text-black-900 dark:text-slate-200">
             <span class="emoji">💬</span>
             <span class="conversation--title">{{
               $t('ONBOARDING.ALL_CONVERSATION.TITLE')
@@ -41,7 +41,7 @@
           </p>
         </div>
         <div class="features-item">
-          <h2 class="block-title text-black-900 dark:text-slate-200">
+          <h2 class="text-lg text-black-900 dark:text-slate-200">
             <span class="emoji">👥</span>
             {{ $t('ONBOARDING.TEAM_MEMBERS.TITLE') }}
           </h2>
@@ -53,7 +53,7 @@
           </router-link>
         </div>
         <div class="features-item">
-          <h2 class="block-title text-black-900 dark:text-slate-200">
+          <h2 class="text-lg text-black-900 dark:text-slate-200">
             <span class="emoji">📥</span>{{ $t('ONBOARDING.INBOXES.TITLE') }}
           </h2>
           <p class="intro-body">
@@ -64,7 +64,7 @@
           </router-link>
         </div>
         <div class="features-item">
-          <h2 class="block-title text-black-900 dark:text-slate-200">
+          <h2 class="text-lg text-black-900 dark:text-slate-200">
             <span class="emoji">🔖</span>{{ $t('ONBOARDING.LABELS.TITLE') }}
           </h2>
           <p class="intro-body">

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

@@ -1202,10 +1202,28 @@ export default {
 }
 
 .reply-box {
+  transition:
+    box-shadow 0.35s cubic-bezier(0.37, 0, 0.63, 1),
+    height 2s cubic-bezier(0.37, 0, 0.63, 1);
+
   @apply relative border-t border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;
 
+  &.is-focused {
+    box-shadow:
+      0 1px 3px 0 rgba(0, 0, 0, 0.1),
+      0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
   &.is-private {
-    @apply bg-yellow-50 dark:bg-yellow-200;
+    @apply bg-yellow-100 dark:bg-yellow-800;
+
+    .reply-box__top {
+      @apply bg-yellow-100 dark:bg-yellow-800;
+
+      > input {
+        @apply bg-yellow-100 dark:bg-yellow-800;
+      }
+    }
   }
 }
 .send-button {
@@ -1214,6 +1232,10 @@ export default {
 
 .reply-box__top {
   @apply relative py-0 px-4 -mt-px border-t border-solid border-slate-50 dark:border-slate-700;
+
+  textarea {
+    @apply shadow-none border-transparent bg-transparent m-0 max-h-60 min-h-[3rem] pt-4 pb-0 px-0 resize-none;
+  }
 }
 
 .emoji-dialog {

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

@@ -5,10 +5,11 @@
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
         </label>
-        <div class="input-group-field">
+        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
           <woot-input
             v-model.trim="$v.toEmailsVal.$model"
             type="text"
+            class="[&>input]:mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
             :class="{ error: $v.toEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
             @blur="onBlur"
@@ -21,9 +22,10 @@
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
         </label>
-        <div class="input-group-field">
+        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
           <woot-input
             v-model.trim="$v.ccEmailsVal.$model"
+            class="[&>input]:mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
             type="text"
             :class="{ error: $v.ccEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
@@ -48,10 +50,11 @@
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
         </label>
-        <div class="input-group-field">
+        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
           <woot-input
             v-model.trim="$v.bccEmailsVal.$model"
             type="text"
+            class="[&>input]:mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
             :class="{ error: $v.bccEmailsVal.$error }"
             :placeholder="
               $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')
@@ -150,14 +153,11 @@ export default {
   @apply text-sm text-red-500 dark:text-red-500;
 }
 .input-group {
-  @apply border-b border-solid border-slate-75 dark:border-slate-700 my-1;
+  @apply border-b border-solid border-slate-75 dark:border-slate-700 my-1 flex items-center gap-2;
 
   .input-group-label {
     @apply border-transparent bg-transparent text-xs font-semibold pl-0;
   }
-  .input-group-field::v-deep input {
-    @apply mb-0 border-transparent;
-  }
 }
 
 .input-group.error {

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <div class="templates__list-search">
+    <div class="templates__list-search gap-1">
       <fluent-icon icon="search" class="search-icon" size="16" />
       <input
         ref="search"
@@ -17,7 +17,7 @@
           @click="$emit('onSelect', template)"
         >
           <div>
-            <div class="flex-between">
+            <div class="flex items-center justify-between mb-2.5">
               <p class="label-title">
                 {{ template.name }}
               </p>
@@ -97,10 +97,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.flex-between {
-  @apply flex justify-between mb-2.5;
-}
-
 .templates__list-search {
   @apply items-center flex bg-slate-25 dark:bg-slate-900 mb-2.5 py-0 px-2.5 rounded-md border border-solid border-slate-100 dark:border-slate-700;
 
@@ -109,7 +105,7 @@ export default {
   }
 
   .templates__search-input {
-    @apply bg-transparent border-0 text-xs h-auto m-0;
+    @apply bg-transparent border-0 text-xs h-9 m-0;
   }
 }
 .template__list-container {

app/javascript/dashboard/components/widgets/conversation/bubble/File.vue

@@ -4,7 +4,7 @@
       <fluent-icon icon="document" class="file--icon" size="32" />
     </div>
     <div class="meta">
-      <h5 class="text-block-title">
+      <h5 class="attachment-name text-slate-700 dark:text-slate-400">
         {{ decodeURI(fileName) }}
       </h5>
       <a
@@ -62,7 +62,7 @@ export default {
     margin-right: $space-slab;
   }
 
-  .text-block-title {
+  .attachment-name {
     margin: 0;
     color: $color-white;
     font-weight: $font-weight-bold;

app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="meta">
       <h5
-        class="text-block-title overflow-hidden whitespace-nowrap text-ellipsis"
+        class="text-sm text-slate-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
       >
         {{ name }}
       </h5>

app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue

@@ -5,11 +5,11 @@
     show
     :on-close="onClose"
   >
-    <div class="column content">
+    <div class="content">
       <p>
         <b>{{ $t('TRANSLATE_MODAL.ORIGINAL_CONTENT') }}</b>
       </p>
-      <p v-dompurify-html="content" />
+      <p v-dompurify-html="content" class="mb-0" />
       <br />
       <hr />
       <div v-if="translationsAvailable">

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

@@ -20,9 +20,7 @@
           <div
             class="flex items-start flex-col justify-center ml-2 rtl:ml-0 rtl:mr-2"
           >
-            <h3
-              class="sub-block-title inline-block leading-[1.4] m-0 p-0 capitalize"
-            >
+            <h3 class="text-base inline-block leading-[1.4] m-0 p-0 capitalize">
               <span
                 class="text-slate-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
               >
@@ -37,7 +35,7 @@
           </div>
         </div>
         <div
-          class="items-center text-slate-700 dark:text-slate-100 flex font-semibold justify-start min-w-0 p-1 w-auto text-block-title"
+          class="items-center text-slate-700 dark:text-slate-100 flex font-semibold justify-start min-w-0 p-1 w-auto text-sm"
         >
           <span
             class="text-slate-700 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
@@ -147,7 +145,7 @@
       </div>
       <div class="items-center flex h-16 justify-center w-full py-2 px-6">
         <div
-          class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-block-title"
+          class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-sm"
         >
           <span class="count">
             {{ `${activeImageIndex + 1} / ${allAttachments.length}` }}

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue

@@ -5,7 +5,7 @@
         <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
       </svg>
     </div>
-    <div class="header flex-between">
+    <div class="header flex items-center justify-between">
       <span>{{ $t('BULK_ACTION.AGENT_SELECT_LABEL') }}</span>
       <woot-button
         size="tiny"
@@ -26,7 +26,9 @@
       <div v-else class="agent__list-container">
         <ul v-if="!selectedAgent">
           <li class="search-container">
-            <div class="agent-list-search flex-between">
+            <div
+              class="agent-list-search h-8 flex justify-between items-center gap-2"
+            >
               <fluent-icon icon="search" class="search-icon" size="16" />
               <input
                 ref="search"
@@ -45,7 +47,9 @@
                 :username="agent.name"
                 size="22px"
               />
-              <span class="reports-option__title">{{ agent.name }}</span>
+              <span class="my-0 text-slate-800 dark:text-slate-75">
+                {{ agent.name }}
+              </span>
             </div>
           </li>
         </ul>
@@ -205,7 +209,7 @@ export default {
       }
 
       .agent--search_input {
-        @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset];
+        @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset] w-full;
       }
     }
   }
@@ -231,7 +235,7 @@ ul {
 }
 
 .agent-list-item {
-  @apply flex items-center p-2.5 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-900;
+  @apply flex items-center p-2.5 gap-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-900;
   span {
     @apply text-sm;
   }

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bulk-action__container">
-    <div class="flex-between">
-      <label class="bulk-action__panel flex-between">
+    <div class="flex items-center justify-between">
+      <label class="bulk-action__panel flex items-center justify-between">
         <input
           ref="selectAllCheck"
           type="checkbox"
@@ -18,14 +18,13 @@
           }}
         </span>
       </label>
-      <div class="bulk-action__actions flex-between">
+      <div class="bulk-action__actions flex gap-1 items-center">
         <woot-button
           v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
           size="tiny"
           variant="smooth"
           color-scheme="secondary"
           icon="tag"
-          class="margin-right-smaller"
           @click="toggleLabelActions"
         />
         <woot-button
@@ -34,7 +33,6 @@
           variant="smooth"
           color-scheme="secondary"
           icon="repeat"
-          class="margin-right-smaller"
           @click="toggleUpdateActions"
         />
         <woot-button
@@ -43,7 +41,6 @@
           variant="smooth"
           color-scheme="secondary"
           icon="person-assign"
-          class="margin-right-smaller"
           @click="toggleAgentList"
         />
         <woot-button

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue

@@ -5,7 +5,7 @@
         <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
       </svg>
     </div>
-    <div class="header flex-between">
+    <div class="header flex items-center justify-between">
       <span>{{ $t('BULK_ACTION.LABELS.ASSIGN_LABELS') }}</span>
       <woot-button
         size="tiny"
@@ -17,7 +17,9 @@
     </div>
     <div class="labels-list">
       <header class="labels-list__header">
-        <div class="label-list-search flex-between">
+        <div
+          class="label-list-search h-8 flex justify-between items-center gap-2"
+        >
           <fluent-icon icon="search" class="search-icon" size="16" />
           <input
             ref="search"
@@ -138,7 +140,7 @@ export default {
   }
 
   .label--search_input {
-    @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset];
+    @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset] w-full;
   }
 }
 

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue

@@ -5,7 +5,7 @@
         <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
       </svg>
     </div>
-    <div class="header flex-between">
+    <div class="header flex items-center justify-between">
       <span>{{ $t('BULK_ACTION.TEAMS.TEAM_SELECT_LABEL') }}</span>
       <woot-button
         size="tiny"
@@ -19,7 +19,9 @@
       <div class="team__list-container">
         <ul>
           <li class="search-container">
-            <div class="agent-list-search flex-between">
+            <div
+              class="agent-list-search h-8 flex justify-between items-center gap-2"
+            >
               <fluent-icon icon="search" class="search-icon" size="16" />
               <input
                 ref="search"
@@ -33,15 +35,21 @@
           <template v-if="filteredTeams.length">
             <li v-for="team in filteredTeams" :key="team.id">
               <div class="team__list-item" @click="assignTeam(team)">
-                <span class="reports-option__title">{{ team.name }}</span>
+                <span
+                  class="my-0 ltr:ml-2 rtl:mr-2 text-slate-800 dark:text-slate-75"
+                >
+                  {{ team.name }}
+                </span>
               </div>
             </li>
           </template>
           <li v-else>
             <div class="team__list-item">
-              <span class="reports-option__title">{{
-                $t('BULK_ACTION.TEAMS.NO_TEAMS_AVAILABLE')
-              }}</span>
+              <span
+                class="my-0 ltr:ml-2 rtl:mr-2 text-slate-800 dark:text-slate-75"
+              >
+                {{ $t('BULK_ACTION.TEAMS.NO_TEAMS_AVAILABLE') }}
+              </span>
             </div>
           </li>
         </ul>
@@ -106,7 +114,7 @@ export default {
       }
 
       .agent--search_input {
-        @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset];
+        @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent w-full h-[unset];
       }
     }
   }

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue

@@ -5,7 +5,7 @@
         <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
       </svg>
     </div>
-    <div class="header flex-between">
+    <div class="header flex items-center justify-between">
       <span>{{ $t('BULK_ACTION.UPDATE.CHANGE_STATUS') }}</span>
       <woot-button
         size="tiny"

app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue

@@ -5,7 +5,7 @@
     class="label-container mt-0.5 mx-2 mb-0"
   >
     <div
-      class="labels-wrap flex items-end min-w-0 flex-shrink"
+      class="labels-wrap flex items-end min-w-0 flex-shrink gap-y-1 flex-wrap"
       :class="{ expand: showAllLabels }"
     >
       <woot-label
@@ -15,6 +15,7 @@
         :description="label.description"
         :color="label.color"
         variant="smooth"
+        class="!mb-0 max-w-[calc(100%-0.5rem)]"
         small
         :class="{ hidden: !showAllLabels && index > labelPosition }"
       />
@@ -96,23 +97,11 @@ export default {
 .labels-wrap {
   &.expand {
     @apply h-auto overflow-visible flex-row flex-wrap;
-
-    .label {
-      @apply mb-1;
-    }
-
-    .show-more--button {
-      @apply mb-1;
-    }
   }
 
   .secondary {
     @apply border border-solid border-slate-100 dark:border-slate-700;
   }
-
-  .label {
-    @apply mb-0;
-  }
 }
 
 .hidden {

app/javascript/dashboard/components/widgets/forms/Input.vue

@@ -3,7 +3,6 @@
     <span v-if="label">{{ label }}</span>
     <input
       class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600"
-      :class="{ 'input-margin': error }"
       :value="value"
       :type="type"
       :placeholder="placeholder"
@@ -70,9 +69,6 @@ export default {
   @apply mt-0.5 text-xs not-italic text-slate-600 dark:text-slate-400;
 }
 
-.input-margin {
-  margin-bottom: 2px !important;
-}
 .message {
   margin-top: 0 !important;
 }

app/javascript/dashboard/components/widgets/forms/PhoneInput.vue

@@ -13,7 +13,7 @@
       </div>
       <span
         v-if="activeDialCode"
-        class="flex bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-normal text-base leading-normal py-2 pl-2 pr-0"
+        class="flex bg-white dark:bg-slate-900 font-medium text-slate-800 dark:text-slate-100 font-normal text-base leading-normal py-2 pl-2 pr-0"
       >
         {{ activeDialCode }}
       </span>
@@ -254,7 +254,7 @@ export default {
 <style scoped lang="scss">
 .phone-input--wrap {
   .phone-input {
-    @apply flex items-center justify-start mb-4 rounded-md border border-solid border-slate-200 dark:border-slate-600;
+    @apply flex items-center dark:bg-slate-900 justify-start mb-4 rounded-md border border-solid border-slate-200 dark:border-slate-600;
 
     &.has-error {
       @apply border border-solid border-red-400 dark:border-red-400;
@@ -262,7 +262,11 @@ export default {
   }
 
   .phone-input--field {
-    @apply mb-0 rounded-tl-none rounded-bl-none border-0;
+    @apply mb-0 rounded-tl-none rounded-bl-none border-0 w-full dark:bg-slate-900 text-base px-1.5;
+
+    &::placeholder {
+      @apply font-normal;
+    }
   }
 
   .country-dropdown {

app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue

@@ -64,8 +64,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.modal-container .modal-footer {
-  padding: var(--space-normal) var(--space-medium);
-}
-</style>

app/javascript/dashboard/components/widgets/modal/DeleteModal.vue

@@ -6,7 +6,7 @@
       :header-content="message"
       :header-content-value="messageValue"
     />
-    <div class="modal-footer delete-item">
+    <div class="flex justify-end items-center gap-2 p-8">
       <woot-button variant="clear" class="action-button" @click="onClose">
         {{ rejectText }}
       </woot-button>