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>
2024-02-28 13:56:28 +05:30
parent 9f905ce2e6
commit dafedddc1a
219 changed files with 1134 additions and 2511 deletions
--- a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="contact-attribute">
    <div class="title-wrap">
-      <h4 class="text-block-title title">
+      <h4 class="text-sm title">
        <div class="title--icon">
          <emoji-or-icon :icon="icon" :emoji="emoji" />
        </div>
@@ -9,17 +9,22 @@
      </h4>
    </div>
    <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="text"
-          class="input-group-field"
+          class="!h-8 ltr:rounded-r-none rtl:rounded-l-none !mb-0 !text-sm"
          autofocus="true"
          @keyup.enter="onUpdate"
        />
-        <div class="input-group-button">
-          <woot-button size="small" icon="ion-checkmark" @click="onUpdate" />
+        <div>
+          <woot-button
+            size="small"
+            icon="ion-checkmark"
+            class="rounded-l-none rtl:rounded-r-none"
+            @click="onUpdate"
+          />
        </div>
      </div>
    </div>
--- a/app/javascript/dashboard/modules/contact/components/ContactFields.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="contact-fields">
-    <h3 class="block-title title">
+    <h3 class="text-lg title">
      {{ $t('CONTACTS_PAGE.FIELDS') }}
    </h3>
    <attribute
--- a/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
@@ -8,10 +8,10 @@
    />

    <div class="contact--details">
-      <h2 class="block-title contact--name">
+      <h2 class="text-lg contact--name">
        {{ contact.name }}
      </h2>
-      <h3 class="sub-block-title contact--work">
+      <h3 class="text-base contact--work">
        {{ contact.title }}
        <i v-if="company.name" class="icon ion-minus-round" />
        <span class="company-name">{{ company.name }}</span>
--- a/app/javascript/dashboard/modules/contact/components/MergeContact.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
@@ -102,7 +102,7 @@
      :primary-contact-name="primaryContact.name"
      :parent-contact-name="parentContactName"
    />
-    <div class="mt-6 flex justify-end">
+    <div class="mt-6 flex gap-2 justify-end">
      <woot-button variant="clear" @click.prevent="onCancel">
        {{ $t('MERGE_CONTACTS.FORM.CANCEL') }}
      </woot-button>
--- a/app/javascript/dashboard/modules/notes/components/NoteList.vue
+++ b/app/javascript/dashboard/modules/notes/components/NoteList.vue
@@ -12,11 +12,11 @@
      @delete="onDeleteNote"
    />

-    <div v-if="isFetching" class="text-center p-normal fs-default">
+    <div v-if="isFetching" class="text-center p-4 text-base">
      <spinner size="" />
      <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
    </div>
-    <div v-else-if="!notes.length" class="text-center p-normal fs-default">
+    <div v-else-if="!notes.length" class="text-center p-4 text-base">
      <span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
    </div>
  </div>
--- a/app/javascript/dashboard/modules/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -6,6 +6,7 @@
    <input
      ref="searchInput"
      type="search"
+      class="dark:bg-slate-900"
      :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
      :value="searchQuery"
      @focus="onFocus"
@@ -73,7 +74,7 @@ export default {
 <style lang="scss" scoped>
 .input-container {
  transition: border-bottom 0.2s ease-in-out;
-  @apply relative flex items-center py-2 px-4 rounded-sm border border-solid border-slate-100 dark:border-slate-800;
+  @apply relative flex items-center py-2 px-4 h-14 gap-2 rounded-sm border border-solid border-slate-100 dark:border-slate-800;

  input[type='search'] {
    @apply w-full m-0 shadow-none border-transparent active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none;
@@ -96,6 +97,6 @@ export default {
 }

 .helper-label {
-  @apply m-0;
+  @apply m-0 whitespace-nowrap;
 }
 </style>
--- a/app/javascript/dashboard/modules/search/components/SearchInput.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchInput.vue
@@ -8,7 +8,9 @@
    >
      <div class="search-input">
        <fluent-icon icon="search" size="14px" class="search--icon" />
-        <span class="text-ellipsis search-placeholder">
+        <span
+          class="text-ellipsis overflow-hidden whitespace-nowrap search-placeholder"
+        >
          {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
        </span>
      </div>
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
@@ -1,11 +1,13 @@
 <template>
  <router-link :to="navigateTo" class="contact-item">
    <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
-    <div class="contact-details">
-      <h5 class="text-block-title name text-slate-800 dark:text-slate-200">
+    <div class="ml-2 rtl:mr-2 rtl:ml-0">
+      <h5 class="text-sm name text-slate-800 dark:text-slate-200">
        {{ name }}
      </h5>
-      <p class="details-meta">
+      <p
+        class="m-0 text-slate-600 dark:text-slate-200 gap-1 text-sm flex items-center"
+      >
        <span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
          email
        }}</span>
@@ -64,14 +66,4 @@ export default {
 .contact-details {
  @apply ml-2 rtl:mr-2 rtl:ml-0;
 }
-.name {
-  @apply m-0;
-}
-.details-meta {
-  @apply m-0 text-slate-600 dark:text-slate-200 text-sm flex items-center;
-
-  span {
-    @apply ml-1 rtl:mr-1 rtl:ml-0;
-  }
-}
 </style>
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
@@ -5,7 +5,7 @@
    </div>
    <div class="conversation-details">
      <div class="meta-wrap">
-        <div class="flex-container">
+        <div class="flex">
          <woot-label
            class="conversation-id"
            :title="`#${id}`"
@@ -21,16 +21,13 @@
        </div>
      </div>
      <div class="user-details">
-        <h5
-          v-if="name"
-          class="text-block-title name text-slate-800 dark:text-slate-100"
-        >
+        <h5 v-if="name" class="text-sm name text-slate-800 dark:text-slate-100">
          <span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
          {{ name }}
        </h5>
        <h5
          v-if="email"
-          class="text-block-title email text-slate-700 dark:text-slate-200 overflow-hidden whitespace-nowrap text-ellipsis"
+          class="text-sm email text-slate-700 dark:text-slate-200 overflow-hidden whitespace-nowrap text-ellipsis"
        >
          <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
          {{ email }}
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
@@ -60,7 +60,7 @@ export default {
      align-items: center;
      display: flex;
      flex-direction: row;
-      justify-content: start;
+      justify-content: flex-start;

      .logo {
        border-radius: 100%;