Use SettingsItem in backup schedule config

dashboard/src/components/SystemUpdate.vue

@@ -5,6 +5,7 @@ import { Button, Dialog, ProgressBar, Radiobutton, MultiSelect } 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 UpdaterModel from '../models/UpdaterModel.js';
 import TasksModel from '../models/TasksModel.js';
 import DashboardModel from '../models/DashboardModel.js';
@@ -199,20 +200,16 @@ onMounted(async () => {
 
       <p v-html="$t('settings.updates.description')"></p>
 
-      <div class="info-row">
-        <div class="info-label">{{ $t('settings.updates.version') }}</div>
-        <div class="info-value">v{{ version }} ({{ ubuntuVersion }})
-        </div>
-      </div>
-
-      <div class="info-row">
-        <div class="info-label">{{ $t('settings.updates.schedule') }}</div>
-        <div class="info-value actionable" @click="onShowConfigure()">
+      <SettingsItem>
+        <FormGroup>
+          <label>{{ $t('settings.updates.schedule') }}</label>
           <span v-show="currentPattern !== 'never'">{{ prettyAutoUpdateSchedule(currentPattern) }}</span>
           <span v-show="currentPattern === 'never'">{{ $t('settings.updates.disabled') }}</span>
-          <i class="fa-solid fa-edit text-small" style="margin-left: 10px;"></i>
+        </FormGroup>
+        <div style="display: flex; align-items: center">
+          <Button tool plain @click="onShowConfigure()">{{ $t('main.dialog.edit') }}</Button>
         </div>
-      </div>
+      </SettingsItem>
 
       <ProgressBar :value="percent" v-if="updateBusy" />
       <p v-if="updateBusy">{{ message }}</p>