fix: views's modal variant and position

app/src/composables/useAutoModal.ts

@@ -19,11 +19,11 @@ export function useAutoModal() {
       centered: true,
       okOnly: !cancelable,
       ...(markdown
-        ? { headerBgVariant: 'warning', headerClass: 'text-black' }
+        ? { headerVariant: 'warning' }
         : {
             hideHeader: true,
-            bodyBgVariant: 'warning',
-            bodyClass: ['fw-bold', 'rounded-top', 'text-black'],
+            bodyVariant: 'warning',
+            bodyClass: ['fw-bold', 'rounded-top'],
           }),
       ...props_,
     }

app/src/views/app/AppInfo.vue

@@ -507,9 +507,9 @@ async function uninstall() {
 
     <BModal
       id="uninstall-modal"
+      centered
       :title="$t('confirm_uninstall', { name: id })"
-      header-bg-variant="warning"
-      header-class="text-black"
+      header-variant="warning"
       :body-class="{ 'd-none': !app.supportsPurge }"
       @ok="uninstall"
     >

app/src/views/domain/DomainInfo.vue

@@ -223,9 +223,9 @@ async function setAsDefaultDomain() {
 
     <BModal
       id="delete-modal"
+      centered
       :title="$t('confirm_delete', { name: props.name })"
-      header-bg-variant="warning"
-      header-class="text-black"
+      header-variant="warning"
       :body-class="{ 'd-none': !isMainDynDomain }"
       @ok="deleteDomain"
     >

app/src/views/update/SystemUpdate.vue

@@ -179,15 +179,15 @@ async function performSystemUpgrade() {
     <BModal
       v-if="preUpgrade"
       id="apps-pre-upgrade"
+      centered
       :model-value="true"
       :title="$t('app.upgrade.confirm.title')"
-      header-bg-variant="warning"
-      header-class="text-black"
+      header-variant="warning"
       :ok-title="$t('system_upgrade_btn')"
       ok-variant="success"
       :cancel-title="$t('cancel')"
       @ok="performAppsUpgrade(preUpgrade.apps.map((app) => app.id))"
-      @cancel="preUpgrade = undefined"
+      @hide="preUpgrade = undefined"
     >
       <h3>
         {{ $t('app.upgrade.confirm.apps') }}

app/src/views/user/UserInfo.vue

@@ -114,9 +114,9 @@ function deleteUser() {
     <BModal
       v-if="user"
       id="delete-modal"
+      centered
       :title="$t('confirm_delete', { name })"
-      header-bg-variant="warning"
-      header-class="text-black"
+      header-variant="warning"
       @ok="deleteUser"
     >
       <BFormGroup>