Convert timezone and language settings to SettingItems

dashboard/src/components/AccessControl.vue

@@ -57,7 +57,7 @@ onMounted(async () => {
     </FormGroup>
 
     <div v-if="accessRestrictionOption === ACL_OPTIONS.RESTRICTED">
-      <div style="margin-left: 20px; display: flex;">
+      <div style="margin-left: 20px; display: flex; gap: 10px;">
         <div>
           {{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-key="id" option-label="username" />
         </div>

dashboard/src/components/AppPasswords.vue

@@ -193,7 +193,7 @@ onMounted(async () => {
       <p>{{ $t('profile.appPasswords.description') }}</p>
       <br/>
 
-      <TableView :columns="columns" :model="passwords" :hover="false" :placeholder="$t('profile.appPasswords.noPasswordsPlaceholder')">
+      <TableView :columns="columns" :model="passwords" :placeholder="$t('profile.appPasswords.noPasswordsPlaceholder')">
         <template #creationTime="slotProps">{{ prettyLongDate(slotProps.creationTime) }}</template>
         <template #actions="slotProps">
           <div class="table-actions">

dashboard/src/components/Firewall.vue

@@ -153,7 +153,7 @@ onMounted(async () => {
       </div>
     </Dialog>
 
-    <Section :title="$t('network.firewall.title')">
+    <Section :title="$t('network.firewall.title')" :padding="false">
       <SettingsItem>
         <FormGroup>
           <label>{{ $t('network.firewall.blockedIpRanges') }}</label>

dashboard/src/components/Section.vue

@@ -4,13 +4,17 @@ export default {
   name: 'Section',
   props: {
     title: String,
+    padding: {
+      type: Boolean,
+      default: true,
+    }
   }
 };
 
 </script>
 
 <template>
-  <div class="section">
+  <div class="section" :class="{ 'section-extra-padding': padding }">
     <h2 class="section-header">
       <slot name="header-title">{{ title }}</slot>
       <div><slot name="header-buttons"></slot></div>
@@ -60,4 +64,8 @@ export default {
   border-radius: 10px;
 }
 
+.section-extra-padding .section-body {
+  padding: 10px 25px;
+}
+
 </style>

dashboard/src/components/app/Display.vue

@@ -150,7 +150,7 @@ onMounted(() => {
           <label for="previewIcon">{{ $t('app.display.icon') }}</label>
           <div id="previewIcon" class="app-custom-icon" @click="onShowIconSelector()">
             <img :src="iconUrl" onerror="this.src = '/img/appicon_fallback.png'"/>
-            <i class="picture-edit-indicator fa fa-pencil-alt"></i>
+            <i class="app-custom-icon-edit-indicator fa fa-pencil-alt"></i>
           </div>
           <div class="text-error" v-if="iconError">{{ iconError }}</div>
           <div class="actionable" @click="onResetIcon()">{{ $t('app.display.iconResetAction') }}</div>
@@ -162,3 +162,43 @@ onMounted(() => {
     <Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('app.display.saveAction') }}</Button>
   </div>
 </template>
+
+<style scoped>
+
+.app-custom-icon {
+  position: relative;
+  cursor: pointer;
+  width: 64px;
+  height: 64px;
+  margin-bottom: 5px;
+  background-position: center;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  border: 1px solid gray;
+  border-radius: 3px;
+}
+
+.app-custom-icon > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.app-custom-icon-edit-indicator {
+  position: absolute;
+  bottom: -4px;
+  right: -4px;
+  border-radius: 20px;
+  padding: 5px;
+  color: var(--pankow-text-color);
+  background-color: var(--pankow-input-background-color);
+  transition: all 250ms;
+}
+
+.app-custom-icon:hover > .app-custom-icon-edit-indicator {
+  color: white;
+  background: var(--pankow-color-primary);
+  transform: scale(1.2);
+}
+
+</style>