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

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

@@ -3,9 +3,12 @@ import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import Modal from '../../Modal.vue';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
   components: {
     Modal,
+    NextButton,
   },
   props: {
     show: { type: Boolean, default: false },
@@ -66,13 +69,20 @@ export default {
         :placeholder="confirmPlaceHolderText"
         @blur="v$.value.$touch"
       />
-      <div class="button-wrapper">
-        <woot-button color-scheme="alert" :is-disabled="v$.value.$invalid">
-          {{ confirmText }}
-        </woot-button>
-        <woot-button class="clear" @click.prevent="closeModal">
-          {{ rejectText }}
-        </woot-button>
+      <div class="flex items-center justify-end gap-2">
+        <NextButton
+          faded
+          slate
+          type="reset"
+          :label="rejectText"
+          @click.prevent="closeModal"
+        />
+        <NextButton
+          ruby
+          type="submit"
+          :label="confirmText"
+          :disabled="v$.value.$invalid"
+        />
       </div>
     </form>
   </Modal>

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

@@ -1,9 +1,11 @@
 <script>
 import Modal from '../../Modal.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     Modal,
+    NextButton,
   },
   props: {
     title: {
@@ -55,12 +57,8 @@ export default {
     <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header :header-title="title" :header-content="description" />
       <div class="flex flex-row justify-end gap-2 py-4 px-6 w-full">
-        <woot-button variant="clear" @click="cancel">
-          {{ cancelLabel }}
-        </woot-button>
-        <woot-button @click="confirm">
-          {{ confirmLabel }}
-        </woot-button>
+        <NextButton faded type="reset" :label="cancelLabel" @click="cancel" />
+        <NextButton type="submit" :label="confirmLabel" @click="confirm" />
       </div>
     </div>
   </Modal>

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

@@ -1,5 +1,6 @@
 <script setup>
 import Modal from '../../Modal.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
   onClose: { type: Function, default: () => {} },
@@ -22,23 +23,8 @@ const show = defineModel('show', { type: Boolean, default: false });
       :header-content-value="messageValue"
     />
     <div class="flex items-center justify-end gap-2 p-8">
-      <woot-button variant="clear" class="action-button" @click="onClose">
-        {{ rejectText }}
-      </woot-button>
-      <woot-button
-        color-scheme="alert"
-        class="action-button"
-        variant="smooth"
-        @click="onConfirm"
-      >
-        {{ confirmText }}
-      </woot-button>
+      <Button faded slate type="reset" :label="rejectText" @click="onClose" />
+      <Button ruby type="submit" :label="confirmText" @click="onConfirm" />
     </div>
   </Modal>
 </template>
-
-<style lang="scss" scoped>
-.action-button {
-  max-width: var(--space-giga);
-}
-</style>