From 9cbb8756d140a5ddad6522dccbf2ac65b2ab1ecc Mon Sep 17 00:00:00 2001
From: Huffle <knaepen.selina@gmail.com>
Date: Wed, 28 May 2025 11:47:11 +0200
Subject: [PATCH] fix select (#133)

closes #117

Reviewed-on: https://gitea.seeseepuff.be/seeseemelk/allowance_planner_2000/pulls/133
---
 .../pages/add-allowance/add-allowance.page.scss    | 10 ++++++++++
 .../pages/edit-allowance/edit-allowance.module.ts  |  4 +++-
 .../pages/edit-allowance/edit-allowance.page.html  |  6 +++---
 .../pages/edit-allowance/edit-allowance.page.scss  | 14 ++++++++++----
 .../pages/edit-allowance/edit-allowance.page.ts    |  2 ++
 .../src/app/pages/edit-task/edit-task.module.ts    |  4 +++-
 .../src/app/pages/edit-task/edit-task.page.html    |  6 +++---
 .../src/app/pages/edit-task/edit-task.page.scss    |  7 ++++++-
 frontend/allowance-planner-v2/src/global.scss      | 10 ++++++++++
 .../allowance-planner-v2/src/theme/variables.scss  |  2 ++
 10 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/frontend/allowance-planner-v2/src/app/pages/add-allowance/add-allowance.page.scss b/frontend/allowance-planner-v2/src/app/pages/add-allowance/add-allowance.page.scss
index 50e2f84..a61673d 100644
--- a/frontend/allowance-planner-v2/src/app/pages/add-allowance/add-allowance.page.scss
+++ b/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;
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.module.ts b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.module.ts
index fa1ceb8..dbe69a1 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.module.ts
+++ b/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]
 })
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html
index f17c6b8..1df6269 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html
+++ b/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">
-        <option *ngFor="let color of possibleColors" [value]="color" [style.--background]="color">{{color}}</option>
-      </select>
+      <mat-select [(value)]="selectedColor" formControlName="color" [style.--color]="selectedColor">
+        <mat-option *ngFor="let color of possibleColors" [value]="color" [style.--background]="color">{{color}}</mat-option>
+      </mat-select>
     </div>
 
     <button type="button" [disabled]="!form.valid" (click)="submit()">
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss
index 78327f8..53f4e84 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss
+++ b/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 {
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts
index 5ee1786..2c2f8eb 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts
+++ b/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;
         }
       });
     }
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.module.ts b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.module.ts
index 97f9e7e..c9f0c84 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.module.ts
+++ b/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]
 })
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html
index 9c7cc1d..d6f324e 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html
+++ b/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>
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss
index 9e3f6ce..51e602e 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.scss
+++ b/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 {
diff --git a/frontend/allowance-planner-v2/src/global.scss b/frontend/allowance-planner-v2/src/global.scss
index 0492bf4..58f1658 100644
--- a/frontend/allowance-planner-v2/src/global.scss
+++ b/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);
 }
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/theme/variables.scss b/frontend/allowance-planner-v2/src/theme/variables.scss
index debd86e..9553777 100644
--- a/frontend/allowance-planner-v2/src/theme/variables.scss
+++ b/frontend/allowance-planner-v2/src/theme/variables.scss
@@ -11,6 +11,8 @@
     --line-color: #CACACA;
 
     --ion-font-family: 'Myfont';
+
+    --test-color: red;
 }
 
 @font-face {