Add initial profile background image handling

dashboard/src/components/ImagePicker.vue

@@ -4,7 +4,7 @@ import { useTemplateRef, ref } from 'vue';
 
 const fileInput = useTemplateRef('fileInput');
 
-const props = defineProps(['src', 'fallbackSrc', 'size', 'maxSize', 'displayHeight']);
+const props = defineProps(['src', 'fallbackSrc', 'size', 'maxSize', 'displayHeight', 'displayWidth']);
 const emits = defineEmits(['changed']);
 defineExpose({
   clear(originalSrc = '') {
@@ -117,7 +117,7 @@ function onError() {
       <input @change="onChanged($event)" type="file" ref="fileInput" style="display: none" accept="image/*"/>
 
       <div ref="image" class="image-picker" @click="onShowIconSelector()">
-        <img :src="internalSrc || src" @error="onError" :style="{ height: displayHeight || null }" />
+        <img :src="internalSrc || src" @error="onError" :style="{ height: displayHeight || null, width: displayWidth || null  }">
         <i class="image-picker-edit-indicator fa fa-pencil-alt"></i>
       </div>
     </div>
@@ -134,7 +134,7 @@ function onError() {
 
 .image-picker > img {
   display: block;
-  height: 320px;
+/*  height: 320px;*/
   border-radius: 10px;
 }
 

dashboard/src/components/Section.vue

@@ -33,6 +33,12 @@ export default {
   margin-bottom: 50px;
 }
 
+body.has-background .section {
+  background-color: rgba(255,255,255,0.2);
+  backdrop-filter: blur(10px);
+  border-radius: 10px;
+}
+
 .section-header {
   display: flex;
   flex-wrap: wrap;