chore: Update buttons in conversation screens - 2 (#11134)

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue

@@ -1,47 +1,50 @@
-<script>
+<script setup>
 import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import Button from 'dashboard/components-next/button/Button.vue';
 
-export default {
-  name: 'ArticleSearchResultItem',
-  props: {
-    id: {
-      type: Number,
-      default: 0,
-    },
-    title: {
-      type: String,
-      default: 'Untitled',
-    },
-    url: {
-      type: String,
-      default: '',
-    },
-    category: {
-      type: String,
-      default: '',
-    },
-    locale: {
-      type: String,
-      default: '',
-    },
+const props = defineProps({
+  id: {
+    type: Number,
+    default: 0,
   },
-  emits: ['insert', 'preview'],
-  methods: {
-    handleInsert(e) {
-      e.stopPropagation();
-      this.$emit('insert', this.id);
-    },
-    handlePreview(e) {
-      e.stopPropagation();
-      this.$emit('preview', this.id);
-    },
-    async handleCopy(e) {
-      e.stopPropagation();
-      await copyTextToClipboard(this.url);
-      useAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
-    },
+  title: {
+    type: String,
+    default: 'Untitled',
   },
+  url: {
+    type: String,
+    default: '',
+  },
+  category: {
+    type: String,
+    default: '',
+  },
+  locale: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['insert', 'preview']);
+
+const { t } = useI18n();
+
+const handleInsert = e => {
+  e.stopPropagation();
+  emit('insert', props.id);
+};
+
+const handlePreview = e => {
+  e.stopPropagation();
+  emit('preview', props.id);
+};
+
+const handleCopy = async e => {
+  e.stopPropagation();
+  await copyTextToClipboard(props.url);
+  useAlert(t('CONTACT_PANEL.COPY_SUCCESSFUL'));
 };
 </script>
 
@@ -65,24 +68,23 @@ export default {
         {{ category || $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.UNCATEGORIZED') }}
       </p>
       <div class="flex gap-0.5">
-        <woot-button
+        <Button
           :title="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.COPY_LINK')"
-          variant="hollow"
-          color-scheme="secondary"
-          size="tiny"
-          icon="copy"
+          faded
+          slate
+          xs
+          type="reset"
+          icon="i-lucide-copy"
           class="invisible group-hover:visible"
           @click="handleCopy"
         />
-        <woot-button
-          class="insert-button"
-          variant="smooth"
-          color-scheme="secondary"
-          size="tiny"
+        <Button
+          xs
+          faded
+          slate
+          :label="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.INSERT_ARTICLE')"
           @click="handleInsert"
-        >
-          {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.INSERT_ARTICLE') }}
-        </woot-button>
+        />
       </div>
     </div>
   </button>

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue

@@ -1,42 +1,37 @@
-<script>
+<script setup>
 import IframeLoader from 'shared/components/IframeLoader.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
-export default {
-  name: 'ArticleView',
-  components: {
-    IframeLoader,
-  },
-  props: {
-    url: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['back', 'insert'],
-  methods: {
-    onBack(e) {
-      e.stopPropagation();
-      this.$emit('back');
-    },
-    onInsert(e) {
-      e.stopPropagation();
-      this.$emit('insert');
-    },
+defineProps({
+  url: {
+    type: String,
+    default: '',
   },
+});
+
+const emit = defineEmits(['back', 'insert']);
+
+const onBack = e => {
+  e.stopPropagation();
+  emit('back');
+};
+
+const onInsert = e => {
+  e.stopPropagation();
+  emit('insert');
 };
 </script>
 
 <template>
   <div class="h-full w-full flex flex-col flex-1 overflow-hidden">
     <div class="py-1">
-      <woot-button
-        variant="link"
-        size="small"
-        icon="chevron-left"
+      <Button
+        link
+        xs
+        :label="$t('HELP_CENTER.ARTICLE_SEARCH.BACK_RESULTS')"
+        icon="i-lucide-chevron-left"
         @click="onBack"
-      >
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK_RESULTS') }}
-      </woot-button>
+      />
     </div>
     <div class="-ml-4 h-full overflow-y-auto">
       <div class="w-full h-full min-h-0">
@@ -45,24 +40,22 @@ export default {
     </div>
 
     <div class="flex justify-end gap-2 py-2">
-      <woot-button
-        variant="hollow"
-        size="small"
-        is-expanded
-        color-scheme="secondary"
-        icon="chevron-left"
+      <Button
+        faded
+        slate
+        sm
+        type="reset"
+        icon="i-lucide-chevron-left"
+        :label="$t('HELP_CENTER.ARTICLE_SEARCH.BACK')"
         @click="onBack"
-      >
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK') }}
-      </woot-button>
-      <woot-button
-        size="small"
-        is-expanded
-        icon="arrow-download"
+      />
+      <Button
+        sm
+        type="submit"
+        icon="i-lucide-arrow-down-to-dot"
+        :label="$t('HELP_CENTER.ARTICLE_SEARCH.INSERT_ARTICLE')"
         @click="onInsert"
-      >
-        {{ $t('HELP_CENTER.ARTICLE_SEARCH.INSERT_ARTICLE') }}
-      </woot-button>
+      />
     </div>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, onMounted } from 'vue';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
   title: {
@@ -49,13 +50,7 @@ useKeyboardEvents(keyboardEvents);
       <h3 class="text-base text-slate-900 dark:text-slate-25">
         {{ title }}
       </h3>
-      <woot-button
-        variant="clear"
-        size="tiny"
-        color-scheme="secondary"
-        icon="dismiss"
-        @click="onClose"
-      />
+      <Button ghost xs slate icon="i-lucide-x" @click="onClose" />
     </div>
 
     <div class="relative">