chore: Remove old buttons from Vue2 design (#11159)

2025-04-01 06:21:38 +05:30
parent cc4d54becf
commit f20a18b03f
21 changed files with 133 additions and 574 deletions
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
@@ -1,7 +1,7 @@
 <script>
 import ConversationCard from 'dashboard/components/widgets/conversation/ConversationCard.vue';
 import { mapGetters } from 'vuex';
-import Spinner from 'shared/components/Spinner.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';

 export default {
  components: {
@@ -47,28 +47,25 @@ export default {
 </script>

 <template>
-  <div class="contact-conversation--panel">
-    <div v-if="!uiFlags.isFetching" class="contact-conversation__wrap">
-      <div
-        v-if="!previousConversations.length"
-        class="no-label-message px-4 p-3"
-      >
-        <span>
-          {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
-        </span>
-      </div>
-      <div v-else class="contact-conversation--list">
-        <ConversationCard
-          v-for="conversation in previousConversations"
-          :key="conversation.id"
-          :chat="conversation"
-          :hide-inbox-name="false"
-          hide-thumbnail
-          class="compact"
-        />
-      </div>
+  <div v-if="!uiFlags.isFetching" class="">
+    <div v-if="!previousConversations.length" class="no-label-message px-4 p-3">
+      <span>
+        {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
+      </span>
    </div>
-    <Spinner v-else />
+    <div v-else class="contact-conversation--list">
+      <ConversationCard
+        v-for="conversation in previousConversations"
+        :key="conversation.id"
+        :chat="conversation"
+        :hide-inbox-name="false"
+        hide-thumbnail
+        class="compact"
+      />
+    </div>
+  </div>
+  <div v-else class="flex items-center justify-center py-5">
+    <Spinner />
  </div>
 </template>

@@ -79,6 +76,7 @@ export default {

 ::v-deep .conversation {
  @apply pr-0;
+
  .conversation--details {
    @apply pl-2;
  }
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
@@ -53,9 +53,11 @@ const closeMacroPreview = () => {

 <template>
  <div
-    class="relative flex items-center justify-between leading-4 rounded-md button secondary clear"
+    class="relative flex items-center justify-between leading-4 rounded-md h-10 pl-3 pr-2"
  >
-    <span class="overflow-hidden whitespace-nowrap text-ellipsis">
+    <span
+      class="overflow-hidden whitespace-nowrap text-ellipsis font-medium text-n-slate-12"
+    >
      {{ macro.name }}
    </span>
    <div class="flex items-center gap-1 justify-end">
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -9,8 +9,12 @@ import { useVuelidate } from '@vuelidate/core';
 import countries from 'shared/constants/countries.js';
 import { isPhoneNumberValid } from 'shared/helpers/Validators';
 import parsePhoneNumber from 'libphonenumber-js';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 export default {
+  components: {
+    NextButton,
+  },
  props: {
    contact: {
      type: Object,
@@ -401,16 +405,19 @@ export default {
        />
      </div>
    </div>
-    <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-      <div class="w-full">
-        <woot-submit-button
-          :loading="inProgress"
-          :button-text="$t('CONTACT_FORM.FORM.SUBMIT')"
-        />
-        <button class="button clear" @click.prevent="onCancel">
-          {{ $t('CONTACT_FORM.FORM.CANCEL') }}
-        </button>
-      </div>
+    <div class="flex flex-row justify-start w-full gap-2 px-0 py-2">
+      <NextButton
+        type="submit"
+        :label="$t('CONTACT_FORM.FORM.SUBMIT')"
+        :is-loading="inProgress"
+      />
+      <NextButton
+        faded
+        slate
+        type="reset"
+        :label="$t('CONTACT_FORM.FORM.CANCEL')"
+        @click.prevent="onCancel"
+      />
    </div>
  </form>
 </template>
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
@@ -4,12 +4,14 @@ import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 import { mapGetters } from 'vuex';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 export default {
  components: {
    Thumbnail,
    Spinner,
    EmptyState,
+    NextButton,
  },
  props: {
    notifications: {
@@ -49,17 +51,22 @@ export default {

 <template>
  <section
-    class="flex-grow flex-shrink h-full px-4 py-8 overflow-hidden bg-white dark:bg-slate-900"
+    class="flex-grow flex-shrink h-full px-4 py-8 overflow-hidden bg-n-background"
  >
-    <woot-submit-button
-      v-if="notificationMetadata.unreadCount"
-      class="button nice success button--fixed-top"
-      :button-text="$t('NOTIFICATIONS_PAGE.MARK_ALL_DONE')"
-      :loading="isUpdating"
-      @click="onMarkAllDoneClick"
-    />
-
-    <table class="woot-table notifications-table">
+    <div class="flex w-full items-center justify-between gap-2 mb-4">
+      <h6 class="text-xl font-medium text-n-slate-12">
+        {{ $t('NOTIFICATIONS_PAGE.HEADER') }}
+      </h6>
+      <NextButton
+        v-if="notificationMetadata.unreadCount"
+        type="submit"
+        sm
+        :label="$t('NOTIFICATIONS_PAGE.MARK_ALL_DONE')"
+        :is-loading="isUpdating"
+        @click="onMarkAllDoneClick"
+      />
+    </div>
+    <table class="woot-table notifications-table overflow-auto">
      <tbody v-show="!isLoading">
        <tr
          v-for="notificationItem in notifications"
--- a/app/javascript/dashboard/routes/dashboard/notifications/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
@@ -8,8 +8,8 @@ export const routes = [
    path: frontendURL('accounts/:accountId/notifications'),
    component: SettingsWrapper,
    props: {
-      headerTitle: 'NOTIFICATIONS_PAGE.HEADER',
-      icon: 'alert',
+      headerTitle: '',
+      icon: '',
      showNewButton: false,
      showSidemenuIcon: false,
    },
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -1,10 +1,12 @@
 <script>
 import { useAdmin } from 'dashboard/composables/useAdmin';
 import BackButton from '../../../components/widgets/BackButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 export default {
  components: {
    BackButton,
+    NextButton,
  },
  props: {
    headerTitle: {
@@ -70,15 +72,14 @@ export default {
        {{ headerTitle }}
      </span>
    </h1>
-    <router-link
-      v-if="showNewButton && isAdmin"
-      :to="buttonRoute"
-      class="button success button--fixed-top rounded-[5px] flex gap-2"
-    >
-      <fluent-icon icon="add-circle" />
-      <span class="button__content">
-        {{ buttonText }}
-      </span>
+    <!-- TODO: Remove this when we are not using this -->
+    <router-link v-if="showNewButton && isAdmin" :to="buttonRoute">
+      <NextButton
+        teal
+        icon="i-lucide-circle-plus"
+        class="button--fixed-top"
+        :label="buttonText"
+      />
    </router-link>
  </div>
 </template>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
@@ -4,10 +4,14 @@ import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
 import { required } from '@vuelidate/validators';
 import router from '../../../../index';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';

 export default {
+  components: {
+    NextButton,
+  },
  setup() {
    return { v$: useVuelidate() };
  },
@@ -115,9 +119,10 @@ export default {
    </div>

    <div class="w-full">
-      <woot-submit-button
-        :loading="uiFlags.isCreating"
-        :button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
+      <NextButton
+        type="submit"
+        :label="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
+        :is-loading="uiFlags.isCreating"
      />
    </div>
  </form>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
@@ -1,8 +1,12 @@
 <script>
 import { useAlert } from 'dashboard/composables';
 import twitterClient from '../../../../../api/channel/twitterClient';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 export default {
+  components: {
+    NextButton,
+  },
  data() {
    return { isRequestingAuthorization: false };
  },
@@ -31,11 +35,11 @@ export default {
  >
    <div class="login-init h-full text-center">
      <form @submit.prevent="requestAuthorization">
-        <woot-submit-button
-          icon="brand-twitter"
-          button-text="Sign in with Twitter"
+        <NextButton
          type="submit"
-          :loading="isRequestingAuthorization"
+          icon="i-ri-twitter-x-fill"
+          label="Sign in with Twitter"
+          :is-loading="isRequestingAuthorization"
        />
      </form>
      <p>{{ $t('INBOX_MGMT.ADD.TWITTER.HELP') }}</p>