Use SettingsItem for dashboard domain setup

dashboard/src/components/DashboardDomain.vue

@@ -1,10 +1,11 @@
 <script setup>
 
 import { ref, onMounted } from 'vue';
-import { Button, ProgressBar, Dropdown } from 'pankow';
+import { Button, ProgressBar, SingleSelect, InputGroup } from 'pankow';
 import { prettyLongDate } from 'pankow/utils';
 import { TASK_TYPES } from '../constants.js';
 import Section from '../components/Section.vue';
+import SettingsItem from '../components/SettingsItem.vue';
 import TasksModel from '../models/TasksModel.js';
 import DomainsModel from '../models/DomainsModel.js';
 import DashboardModel from '../models/DashboardModel.js';
@@ -65,7 +66,7 @@ async function onSubmit() {
   lastTask.value.percent = 0;
   lastTask.value.message = 'Preparing dashboard domain';
 
-  const [error] = await dashboardModel.prepareDomain({ domain: newDomain.value });
+  const [error] = await dashboardModel.prepareDomain(newDomain.value);
   if (error) return console.error(error);
 
   await refreshTasks();
@@ -88,20 +89,26 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Section :title="$t('domains.changeDashboardDomain.title')">
+  <Section :title="$t('domains.changeDashboardDomain.title')" :padding="false">
     <template #header-buttons>
       <Button tool icon="fa-solid fa-align-left" v-tooltip="$t('domains.renewCerts.showLogsAction')" :menu="taskLogsMenu" :disabled="!taskLogsMenu.length"/>
     </template>
 
-    <p v-html="$t('domains.changeDashboardDomain.description')"></p>
-
-    <div v-if="lastTask.active">
+    <div v-if="lastTask.active" style="padding: 0 10px">
       <ProgressBar :value="lastTask.percent" />
       <div>{{ lastTask.message }}</div>
     </div>
 
-    <Dropdown v-model="newDomain" :options="domains" option-key="domain" option-label="domain" />
-
-    <Button @click="onSubmit()" :loading="lastTask.active" :disabled="lastTask.active">{{ $t('domains.changeDashboardDomain.changeAction') }}</Button>
+    <SettingsItem>
+      <div style="display: flex; align-items: center">
+        <div v-html="$t('domains.changeDashboardDomain.description')"></div>
+      </div>
+      <div style="display: flex; align-items: center">
+        <InputGroup>
+          <SingleSelect v-model="newDomain" :options="domains" option-key="domain" option-label="domain" />
+          <Button @click="onSubmit()" :loading="lastTask.active" :disabled="lastTask.active">{{ $t('domains.changeDashboardDomain.changeAction') }}</Button>
+        </InputGroup>
+      </div>
+    </SettingsItem>
   </Section>
 </template>