improve severity on history clear

src/components/queue/dialogs/QueueClearHistoryDialog.vue

@@ -5,13 +5,13 @@
     <header
       class="flex items-center justify-between border-b border-interface-stroke px-4 py-4"
     >
-      <p class="m-0 text-[14px] font-normal leading-none">
+      <h2 class="m-0 text-sm font-normal text-text-primary">
         {{ t('sideToolbar.queueProgressOverlay.clearHistoryDialogTitle') }}
-      </p>
+      </h2>
       <IconButton
         type="transparent"
         size="sm"
-        class="size-6 bg-transparent text-text-secondary hover:bg-secondary-background hover:opacity-100"
+        class="size-4 bg-transparent text-text-secondary hover:bg-secondary-background hover:opacity-100"
         :aria-label="t('g.close')"
         @click="onCancel"
       >
@@ -19,28 +19,28 @@
       </IconButton>
     </header>
 
-    <div class="flex flex-col gap-4 px-4 py-4 text-[14px] text-text-secondary">
-      <p class="m-0">
+    <div class="flex flex-col gap-6 px-4 py-4">
+      <div class="text-sm text-text-secondary">
         {{
           t('sideToolbar.queueProgressOverlay.clearHistoryDialogDescription')
         }}
-      </p>
-      <p class="m-0">
+        <br /><br />
         {{ t('sideToolbar.queueProgressOverlay.clearHistoryDialogAssetsNote') }}
-      </p>
+      </div>
     </div>
 
     <footer class="flex items-center justify-end px-4 py-4">
-      <div class="flex items-center gap-4 text-[14px] leading-none">
-        <TextButton
-          class="min-h-[24px] px-1 py-1 text-[14px] leading-[1] text-text-secondary hover:text-text-primary"
-          type="transparent"
+      <div class="flex items-center gap-4">
+        <Button
+          class="h-6 px-1 py-1 text-sm"
+          severity="secondary"
+          text
           :label="t('g.cancel')"
           @click="onCancel"
         />
-        <TextButton
-          class="min-h-[32px] px-4 py-2 text-[12px] font-normal leading-[1]"
-          type="secondary"
+        <Button
+          class="h-10 px-4 py-2 text-sm font-normal"
+          severity="danger"
           :label="t('g.clear')"
           :disabled="isClearing"
           @click="onConfirm"
@@ -51,11 +51,11 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
-import TextButton from '@/components/button/TextButton.vue'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useQueueStore } from '@/stores/queueStore'

src/locales/en/main.json

@@ -734,9 +734,9 @@
       "jobsFailed": "{count} job failed | {count} jobs failed",
       "cancelJobTooltip": "Cancel job",
       "clearQueueTooltip": "Clear queue",
-      "clearHistoryDialogTitle": "Clear your job queue history?",
-      "clearHistoryDialogDescription": "All the finished or failed jobs below will be removed from this Job queue panel.",
-      "clearHistoryDialogAssetsNote": "Assets generated by these jobs won’t be deleted and can always be viewed from the assets panel."
+      "clearHistoryDialogTitle": "Clear your history?",
+      "clearHistoryDialogDescription": "All jobs below will be removed.",
+      "clearHistoryDialogAssetsNote": "None of your outputs will be deleted."
     },
     "workflowTab": {
       "confirmDeleteTitle": "Delete workflow?",