fix select (#133)

closes #117

Reviewed-on: #133

frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.module.ts

@@ -8,6 +8,7 @@ import { EditTaskPageRoutingModule } from './edit-task-routing.module';
 
 import { EditTaskPage } from './edit-task.page';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
 
 @NgModule({
   imports: [
@@ -16,7 +17,8 @@ import { MatIconModule } from '@angular/material/icon';
     IonicModule,
     EditTaskPageRoutingModule,
     ReactiveFormsModule,
-    MatIconModule
+    MatIconModule,
+    MatSelectModule
   ],
   declarations: [EditTaskPage]
 })

frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html

@@ -19,9 +19,9 @@
     <input id="reward" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="reward"/>
 
     <label>Assigned</label>
-    <select formControlName="assigned">
-      <option *ngFor="let user of users" [value]="user.id">{{ user.name }}</option>
-    </select>
+    <mat-select formControlName="assigned">
+      <mat-option *ngFor="let user of users" [value]="user.id">{{ user.name }}</mat-option>
+    </mat-select>
 
     <button type="button" [disabled]="!form.valid" (click)="submit()">
       <span *ngIf="isAddMode">Add Task</span>

frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss

@@ -22,10 +22,15 @@ label {
 }
 
 input,
-select {
+mat-select {
     border: 1px solid var(--ion-color-primary);
     border-radius: 5px;
     width: 250px;
+    height: 40px;
+    padding-inline: 10px;
+    display: flex;
+    align-items: center;
+    font-family: (--ion-font-family);
 }
 
 button {