fix(forms): display label for photo fields (#1987)

---------

Co-authored-by: Simon <simon@aam-digital.com>

src/app/child-dev-project/children/model/child.ts

@@ -109,7 +109,7 @@ export class Child extends Entity {
 
   @DatabaseField({
     dataType: "file",
-    label: $localize`:Label for the filename of a photo of a child:Photo Filename`,
+    label: $localize`:Label for the file field of a photo of a child:Photo`,
     editComponent: "EditPhoto",
   })
   photo: string;

src/app/features/file/edit-photo/edit-photo.component.html

@@ -1,17 +1,8 @@
-<input
-  type="file"
-  style="display: none"
-  (change)="onFileSelected($event.target['files'][0])"
-  accept="image/*"
-  #fileUpload
-/>
-<img
-  [src]="imgPath"
-  alt="profile photo"
-  class="child-pic"
-  (click)="openPopup()"
-/>
-<div>
+<img [src]="imgPath" alt="Image" class="image" (click)="openPopup()" />
+
+<div class="img-controls">
+  <label class="img-label">{{ label }}</label>
+
   <button
     *ngIf="formControl.value && formControl.enabled"
     type="button"
@@ -32,4 +23,11 @@
   >
     <fa-icon icon="upload"></fa-icon>
   </button>
+  <input
+    type="file"
+    style="display: none"
+    (change)="onFileSelected($event.target['files'][0])"
+    accept="image/*"
+    #fileUpload
+  />
 </div>

src/app/features/file/edit-photo/edit-photo.component.scss

@@ -1,13 +1,26 @@
-.child-pic {
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.image {
   width: 150px;
   height: 150px;
   border-radius: 50%;
   object-fit: cover;
   cursor: pointer;
+  background: lightgrey;
+  display: block;
 }
 
-:host {
+.img-controls {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  align-items: end;
+  height: 48px;
+}
+
+.img-label {
+  margin: auto;
+  color: rgba(0, 0, 0, 0.6);
 }