Component: The Rest of the PrimeVue buttons (#7649)

## Summary

Automated initial change, cleaned up manually.

Please check the screenshot changes.

Includes a11y updates to icon buttons.

Doesn't hit the buttons in Desktop.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7649-WIP-Component-The-Rest-of-the-PrimeVue-buttons-2ce6d73d365081d68e06f200f1321267)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

src/platform/settings/components/ColorPaletteMessage.vue

@@ -13,25 +13,30 @@
           option-value="id"
         />
         <Button
-          icon="pi pi-file-export"
-          text
+          size="icon"
+          variant="textonly"
           :title="$t('g.export')"
           @click="colorPaletteService.exportColorPalette(activePaletteId)"
-        />
+        >
+          <i class="pi pi-file-export" />
+        </Button>
         <Button
-          icon="pi pi-file-import"
-          text
+          size="icon"
+          variant="textonly"
           :title="$t('g.import')"
           @click="importCustomPalette"
-        />
+        >
+          <i class="pi pi-file-import" />
+        </Button>
         <Button
-          icon="pi pi-trash"
-          severity="danger"
-          text
+          size="icon"
+          variant="destructive-textonly"
           :title="$t('g.delete')"
           :disabled="!colorPaletteStore.isCustomPalette(activePaletteId)"
           @click="colorPaletteService.deleteCustomColorPalette(activePaletteId)"
-        />
+        >
+          <i class="pi pi-trash" />
+        </Button>
       </div>
     </div>
   </Message>
@@ -39,10 +44,10 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import Button from 'primevue/button'
 import Message from 'primevue/message'
 import Select from 'primevue/select'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'

src/platform/settings/components/ExtensionPanel.vue

@@ -20,12 +20,9 @@
           </li>
         </ul>
         <div class="flex justify-end">
-          <Button
-            :label="$t('g.reloadToApplyChanges')"
-            outlined
-            severity="danger"
-            @click="applyChanges"
-          />
+          <Button variant="destructive" @click="applyChanges">
+            {{ $t('g.reloadToApplyChanges') }}
+          </Button>
         </div>
       </Message>
     </template>
@@ -65,11 +62,12 @@
       >
         <template #header>
           <Button
-            icon="pi pi-ellipsis-h"
-            text
-            severity="secondary"
+            size="icon"
+            variant="muted-textonly"
             @click="menu?.show($event)"
-          />
+          >
+            <i class="pi pi-ellipsis-h" />
+          </Button>
           <ContextMenu ref="menu" :model="contextMenuItems" />
         </template>
         <template #body="slotProps">
@@ -86,7 +84,6 @@
 
 <script setup lang="ts">
 import { FilterMatchMode } from '@primevue/core/api'
-import Button from 'primevue/button'
 import Column from 'primevue/column'
 import ContextMenu from 'primevue/contextmenu'
 import DataTable from 'primevue/datatable'
@@ -99,6 +96,7 @@ import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBox.vue'
 import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useExtensionStore } from '@/stores/extensionStore'
 import type { ComfyExtension } from '@/types/comfy'

src/platform/settings/components/ServerConfigPanel.vue

@@ -16,17 +16,12 @@
             </li>
           </ul>
           <div class="flex justify-end gap-2">
-            <Button
-              :label="$t('serverConfig.revertChanges')"
-              outlined
-              @click="revertChanges"
-            />
-            <Button
-              :label="$t('serverConfig.restart')"
-              outlined
-              severity="danger"
-              @click="restartApp"
-            />
+            <Button variant="secondary" @click="revertChanges">
+              {{ $t('serverConfig.revertChanges') }}
+            </Button>
+            <Button variant="destructive" @click="restartApp">
+              {{ $t('serverConfig.restart') }}
+            </Button>
           </div>
         </Message>
         <Message v-if="commandLineArgs" severity="secondary" pt:text="w-full">
@@ -36,11 +31,12 @@
           <div class="flex items-center justify-between">
             <p>{{ commandLineArgs }}</p>
             <Button
-              icon="pi pi-clipboard"
-              severity="secondary"
-              text
+              size="icon"
+              variant="muted-textonly"
               @click="copyCommandLineArgs"
-            />
+            >
+              <i class="pi pi-clipboard" />
+            </Button>
           </div>
         </Message>
       </div>
@@ -67,7 +63,6 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Message from 'primevue/message'
 import { onBeforeUnmount, watch } from 'vue'
@@ -75,6 +70,7 @@ import { useI18n } from 'vue-i18n'
 
 import FormItem from '@/components/common/FormItem.vue'
 import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import type { ServerConfig } from '@/constants/serverConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'