Convert timezone and language settings to SettingItems

dashboard/src/views/SettingsView.vue

@@ -5,8 +5,9 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, watch } from 'vue';
-import { Dropdown } from 'pankow';
+import { SingleSelect } from 'pankow';
 import moment from 'moment-timezone';
+import SettingsItem from '../components/SettingsItem.vue';
 import Section from '../components/Section.vue';
 import CloudronAccount from '../components/CloudronAccount.vue';
 import SystemUpdate from '../components/SystemUpdate.vue';
@@ -20,12 +21,6 @@ const allTimezones = moment.tz.names().map(t => { return { id: t }; });
 const timeZone = ref('');
 const currentTimeZone = ref('');
 
-function prettyTimeZone(timeZone) {
-  const tz = window.timezones.find(function (t) { return t.id === timeZone; });
-  if (!tz) return '';
-  return tz.display;
-}
-
 watch(timeZone, async (newTimeZone, oldTimeZone) => {
   if (!oldTimeZone) return;
 
@@ -87,21 +82,29 @@ onMounted(async () => {
 
 <template>
   <div class="content">
+    <Section :title="$t('settings.title')" :padding="false">
+      <SettingsItem>
+        <FormGroup>
+          <label>{{ $t('settings.timezone.title') }}</label>
+          <div v-html="$t('settings.timezone.description', { timeZone })"></div>
+        </FormGroup>
+        <div style="display: flex; gap: 6px; align-items: center;">
+          <SingleSelect style="min-width: 160px" v-model="timeZone" :options="allTimezones" option-key="id" option-label="id" />
+        </div>
+      </SettingsItem>
 
-    <h1>{{ $t('settings.title') }}</h1>
+      <SettingsItem>
+        <FormGroup>
+          <label>{{ $t('settings.language.title') }}</label>
+          <div>{{ $t('settings.language.description') }}</div>
+        </FormGroup>
+        <div style="display: flex; gap: 6px; align-items: center;">
+          <SingleSelect v-model="language" :options="allLanguages" option-key="id" option-label="display" />
+        </div>
+      </SettingsItem>
+    </Section>
 
     <CloudronAccount />
-
-    <Section :title="$t('settings.timezone.title')">
-      <p v-html="$t('settings.timezone.description', { timeZone })"></p>
-      <Dropdown v-model="timeZone" :options="allTimezones" option-key="id" option-label="id" />
-    </Section>
-
-    <Section :title="$t('settings.language.title')">
-      <p>{{ $t('settings.language.description') }}</p>
-      <Dropdown v-model="language" :options="allLanguages" option-key="id" option-label="display" />
-    </Section>
-
     <SystemUpdate />
     <PrivateRegistry />
   </div>