fix select (#133)

closes #117

Reviewed-on: #133

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

@@ -18,6 +18,16 @@ form,
     align-items: center;
 }
 
+input {
+    border: 1px solid var(--ion-color-primary);
+    border-radius: 5px;
+    width: 250px;
+    height: 40px;
+    padding-inline: 10px;
+    display: flex;
+    align-items: center;
+}
+
 label {
     color: var(--ion-color-primary);
     margin-top: 25px;

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

@@ -8,6 +8,7 @@ import { EditAllowancePageRoutingModule } from './edit-allowance-routing.module'
 
 import { EditAllowancePage } from './edit-allowance.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,
     EditAllowancePageRoutingModule,
     ReactiveFormsModule,
-    MatIconModule
+    MatIconModule,
+    MatSelectModule
   ],
   declarations: [EditAllowancePage]
 })

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

@@ -28,9 +28,9 @@
 
     <div class="item" *ngIf="isAddMode || goalId != 0">
       <label>Colour</label>
-      <select formControlName="color">
+      <mat-select [(value)]="selectedColor" formControlName="color" [style.--color]="selectedColor">
-        <option *ngFor="let color of possibleColors" [value]="color" [style.--background]="color">{{color}}</option>
+        <mat-option *ngFor="let color of possibleColors" [value]="color" [style.--background]="color">{{color}}</mat-option>
-      </select>
+      </mat-select>
     </div>
 
     <button type="button" [disabled]="!form.valid" (click)="submit()">

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

@@ -26,17 +26,23 @@ label {
 }
 
 input,
-select {
+mat-select {
+    --color: black;
+    color: var(--color);
     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);
 }
 
-option {
+mat-option {
     --background: white;
-    background-color: var(--background);
     color: var(--background);
-    font-family: var(--ion-font-family);
+    font-family: (--ion-font-family);
 }
 
 button {

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

@@ -15,6 +15,7 @@ export class EditAllowancePage implements OnInit {
   public goalId: number;
   public userId: number;
   public isAddMode: boolean;
+  public selectedColor: string = '';
   public possibleColors: Array<string> = [
     '#6199D9',
     '#D98B61',
@@ -73,6 +74,7 @@ export class EditAllowancePage implements OnInit {
             weight: allowance.weight,
             color: allowance.colour
           });
+          this.selectedColor = this.form.value.color;
         }
       });
     }

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">
+    <mat-select formControlName="assigned">
-      <option *ngFor="let user of users" [value]="user.id">{{ user.name }}</option>
+      <mat-option *ngFor="let user of users" [value]="user.id">{{ user.name }}</mat-option>
-    </select>
+    </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 {

frontend/allowance-planner-v2/src/global.scss

@@ -58,4 +58,14 @@ ion-header.md {
 
 label {
     font-size: 18px;
+}
+
+ion-alert .alert-wrapper.sc-ion-alert-md {
+    background-color: var(--ion-background-color) !important;
+    --background: unset !important;
+    box-shadow: unset;
+}
+
+ion-alert .alert-tappable.sc-ion-alert-md {
+    background-color: var(--test-color);
 }

frontend/allowance-planner-v2/src/theme/variables.scss

@@ -11,6 +11,8 @@
     --line-color: #CACACA;
 
     --ion-font-family: 'Myfont';
+
+    --test-color: red;
 }
 
 @font-face {