Convert timezone and language settings to SettingItems

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>