Improve compatibility with old browsers (#136 )

Reviewed-on: #136
fix toolbar (#135 )
2025-05-29 13:54:52 +02:00 · 2025-05-28 12:02:43 +02:00 · 2025-05-28 11:47:11 +02:00 · 2025-05-28 10:27:11 +02:00 · 2025-05-28 10:19:23 +02:00 · 2025-05-28 10:00:18 +02:00
51 changed files with 153 additions and 63 deletions
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -1,3 +1,4 @@
 *.db3
 *.db3-*
+*.db3.*
 /allowance_planner
--- a/backend/allowance_planner.db3.backup.3
+++ b/backend/allowance_planner.db3.backup.3
--- a/backend/main.go
+++ b/backend/main.go
@@ -43,6 +43,11 @@ type ServerConfig struct {
 	Started chan bool
 }

+const DefaultDomain = "localhost:8080"
+
+// The domain that the server is reachable at.
+var domain = DefaultDomain
+
 func getUsers(c *gin.Context) {
 	users, err := db.GetUsers()
 	if err != nil {
@@ -706,5 +711,10 @@ func main() {
 		config.Datasource = "allowance_planner.db3"
 		log.Printf("Warning: No DB_PATH set, using default of %s", config.Datasource)
 	}
+	domain = os.Getenv("DOMAIN")
+	if domain == "" {
+		domain = DefaultDomain
+		log.Printf("Warning: No DOMAIN set, using default of %s", domain)
+	}
 	start(context.Background(), &config)
 }
--- a/backend/web.go
+++ b/backend/web.go
@@ -3,6 +3,7 @@ package main
 import (
 	"errors"
 	"github.com/gin-gonic/gin"
+	"log"
 	"net/http"
 	"strconv"
 )
@@ -26,11 +27,22 @@ func loadWebEndpoints(router *gin.Engine) {
 	router.GET("/completeAllowance", renderCompleteAllowance)
 }

+func redirectToPage(c *gin.Context, page string) {
+	redirectToPageStatus(c, page, http.StatusSeeOther)
+}
+
+func redirectToPageStatus(c *gin.Context, page string, status int) {
+	scheme := c.Request.URL.Scheme
+	target := scheme + domain + page
+	c.Redirect(status, target)
+}
+
 func renderLogin(c *gin.Context) {
 	if c.Query("user") != "" {
-		c.SetCookie("user", c.Query("user"), 3600, "/", "localhost", false, true)
+		log.Println("Set cookie for user:", c.Query("user"))
+		c.SetCookie("user", c.Query("user"), 3600, "", "", false, true)
 	}
-	c.Redirect(http.StatusFound, "/")
+	redirectToPage(c, "/")
 }

 func renderIndex(c *gin.Context) {
@@ -68,7 +80,7 @@ func renderCreateTask(c *gin.Context) {
 		return
 	}

-	c.Redirect(http.StatusFound, "/")
+	redirectToPageStatus(c, "/", http.StatusFound)
 }

 func renderCompleteTask(c *gin.Context) {
@@ -85,7 +97,7 @@ func renderCompleteTask(c *gin.Context) {
 		return
 	}

-	c.Redirect(http.StatusFound, "/")
+	redirectToPageStatus(c, "/", http.StatusFound)
 }

 func renderCreateAllowance(c *gin.Context) {
@@ -122,7 +134,7 @@ func renderCreateAllowance(c *gin.Context) {
 		return
 	}

-	c.Redirect(http.StatusFound, "/")
+	redirectToPageStatus(c, "/", http.StatusFound)
 }

 func renderCompleteAllowance(c *gin.Context) {
@@ -144,11 +156,12 @@ func renderCompleteAllowance(c *gin.Context) {
 		return
 	}

-	c.Redirect(http.StatusFound, "/")
+	redirectToPageStatus(c, "/", http.StatusFound)
 }

 func getCurrentUser(c *gin.Context) *int {
 	currentUserStr, err := c.Cookie("user")
+	log.Println("Cookie string:", currentUserStr)
 	if errors.Is(err, http.ErrNoCookie) {
 		renderNoUser(c)
 		return nil
@@ -172,7 +185,7 @@ func getCurrentUser(c *gin.Context) *int {

 func unsetUserCookie(c *gin.Context) {
 	c.SetCookie("user", "", -1, "/", "localhost", false, true)
-	c.Redirect(http.StatusFound, "/")
+	redirectToPageStatus(c, "/", http.StatusFound)
 }

 func renderNoUser(c *gin.Context) {
--- a/backend/web.gohtml
+++ b/backend/web.gohtml
@@ -3,9 +3,11 @@
 <head>
 	<title>Allowance Planner 2000</title>
 	<style>
+		<!--
 		tr:hover {
 			background-color: #f0f0f0;
 		}
+		-->
 	</style>
 </head>
 <body>
@@ -27,7 +29,7 @@
 	{{if ne .CurrentUser 0}}
 		<h2>Allowances</h2>
 		<form action="/createAllowance" method="post">
-			<table border="1">
+			<table border=1>
 				<thead>
 				<tr>
 					<th>Name</th>
@@ -43,7 +45,7 @@
 						<td></td>
 						<td><label><input type="number" name="target" placeholder="Target"></label></td>
 						<td><label><input type="number" name="weight" placeholder="Weight"></label></td>
-						<td><button>Create</button></td>
+						<td><input type="submit" value="Create"></td>
 					</tr>
 				{{range .Allowances}}
 					{{if eq .ID 0}}
@@ -103,7 +105,7 @@
 							<td><label><input type="text" name="name" placeholder="Name"></label></td>
 							<td></td>
 							<td><label><input type="number" name="reward" placeholder="Reward"></label></td>
-							<td><button>Create</button></td>
+							<td><input type="submit" value="Create"></td>
 						</tr>
 				</tbody>
 			</table>
--- a/frontend/allowance-planner-v2/android/app/src/main/res/drawable-land-hdpi/splash.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/drawable-land-hdpi/splash.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/drawable-land-ldpi/splash.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/drawable-land-ldpi/splash.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/drawable-land-mdpi/splash.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/drawable-land-mdpi/splash.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/drawable-land-xhdpi/splash.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/drawable-land-xhdpi/splash.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/drawable-land-xxhdpi/splash.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/drawable-land-xxhdpi/splash.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/drawable-land-xxxhdpi/splash.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/drawable-land-xxxhdpi/splash.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/drawable-port-hdpi/splash.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/drawable-port-hdpi/splash.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/drawable-port-ldpi/splash.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/drawable-port-ldpi/splash.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/drawable-port-mdpi/splash.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/drawable-port-mdpi/splash.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/drawable-port-xhdpi/splash.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/drawable-port-xhdpi/splash.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/drawable-port-xxhdpi/splash.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/drawable-port-xxhdpi/splash.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/drawable-port-xxxhdpi/splash.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/drawable-port-xxxhdpi/splash.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/drawable/splash.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/drawable/splash.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/ic_launcher_background"/>
-    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <background>
+        <inset android:drawable="@mipmap/ic_launcher_background" android:inset="16.7%" />
+    </background>
+    <foreground>
+        <inset android:drawable="@mipmap/ic_launcher_foreground" android:inset="16.7%" />
+    </foreground>
 </adaptive-icon>
--- a/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/ic_launcher_background"/>
-    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <background>
+        <inset android:drawable="@mipmap/ic_launcher_background" android:inset="16.7%" />
+    </background>
+    <foreground>
+        <inset android:drawable="@mipmap/ic_launcher_foreground" android:inset="16.7%" />
+    </foreground>
 </adaptive-icon>
--- a/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-hdpi/ic_launcher_background.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-hdpi/ic_launcher_background.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-ldpi/ic_launcher_background.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-ldpi/ic_launcher_background.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-ldpi/ic_launcher_foreground.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-ldpi/ic_launcher_foreground.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-mdpi/ic_launcher_background.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-mdpi/ic_launcher_background.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png
--- a/frontend/allowance-planner-v2/android/app/src/main/res/values/strings.xml
+++ b/frontend/allowance-planner-v2/android/app/src/main/res/values/strings.xml
@@ -1,7 +1,7 @@
 <?xml version='1.0' encoding='utf-8'?>
 <resources>
-    <string name="app_name">allowance-planner-v2</string>
-    <string name="title_activity_main">allowance-planner-v2</string>
+    <string name="app_name">Allowance Planner V2</string>
+    <string name="title_activity_main">Allowance Planner V2</string>
    <string name="package_name">io.ionic.starter</string>
    <string name="custom_url_scheme">io.ionic.starter</string>
 </resources>
--- a/frontend/allowance-planner-v2/src/assets/icon-background.png
+++ b/frontend/allowance-planner-v2/src/assets/icon-background.png
--- a/frontend/allowance-planner-v2/src/assets/icon-foreground.png
+++ b/frontend/allowance-planner-v2/src/assets/icon-foreground.png
--- a/frontend/allowance-planner-v2/assets/splash.png
+++ b/frontend/allowance-planner-v2/assets/splash.png
--- a/frontend/allowance-planner-v2/capacitor.config.ts
+++ b/frontend/allowance-planner-v2/capacitor.config.ts
@@ -2,7 +2,7 @@ import type { CapacitorConfig } from '@capacitor/cli';

 const config: CapacitorConfig = {
  appId: 'io.ionic.starter',
-  appName: 'allowance-planner-v2',
+  appName: 'Allowance Planner V2',
  webDir: 'www'
 };

--- 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;
@@ -30,8 +40,7 @@ button {
    color: white;
    padding: 10px;
    width: 250px;
-    margin-top: auto;
-    margin-bottom: 50px;
+    margin-top: 100px;
 }

 button:disabled,
--- a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts
@@ -36,7 +36,7 @@ export class AllowancePage implements ViewWillEnter {
        allowance[0].name = 'Main Allowance';
        this.allowance$.next(allowance);
      })
-    }, 50);
+    }, 100);
  }

  canFinishGoal(allowance: Allowance): boolean {
--- 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]
 })
--- 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
@@ -7,11 +7,6 @@
      <ion-title *ngIf="isAddMode">Create Goal</ion-title>
      <ion-title *ngIf="!isAddMode && goalId != 0">Edit Goal</ion-title>
      <ion-title *ngIf="!isAddMode && goalId == 0">Edit Allowance</ion-title>
-      <button
-        *ngIf="!isAddMode && goalId !=0"
-        class="remove-button"
-        (click)="deleteAllowance()"
-      >Delete Goal</button>
    </div>
  </ion-toolbar>
 </ion-header>
@@ -33,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()">
@@ -43,5 +38,10 @@
      <span *ngIf="!isAddMode && goalId != 0">Update Goal</span>
      <span *ngIf="!isAddMode && goalId == 0">Update Allowance</span>
    </button>
+    <button
+      *ngIf="!isAddMode && goalId !=0"
+      class="remove-button"
+      (click)="deleteAllowance()"
+    >Delete Goal</button>
  </form>
 </ion-content>
--- 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
@@ -4,10 +4,8 @@
 }

 .remove-button {
-    background-color: var(--ion-color-primary);
-    margin-right: 15px;
-    width: 100px;
-    margin-bottom: 0;
+    margin-top: 10px;
+    background-color: var(--negative-amount-color);
 }

 form {
@@ -28,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 {
@@ -47,8 +51,7 @@ button {
    color: white;
    padding: 10px;
    width: 250px;
-    margin-top: auto;
-    margin-bottom: 50px;
+    margin-top: 100px;
 }

 button:disabled,
--- 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;
        }
      });
    }
--- 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]
 })
--- 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
@@ -6,11 +6,6 @@
      </div>
      <ion-title *ngIf="isAddMode">Create Task</ion-title>
      <ion-title *ngIf="!isAddMode">Edit Task</ion-title>
-      <button
-        *ngIf="!isAddMode"
-        class="remove-button"
-        (click)="deleteTask()"
-      >Delete task</button>
    </div>
  </ion-toolbar>
 </ion-header>
@@ -24,13 +19,18 @@
    <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>
      <span *ngIf="!isAddMode">Update Task</span>
    </button>
+    <button
+      *ngIf="!isAddMode"
+      class="remove-button"
+      (click)="deleteTask()"
+    >Delete task</button>
  </form>
 </ion-content>
--- 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
@@ -4,10 +4,8 @@
 }

 .remove-button {
-    background-color: var(--ion-color-primary);
-    margin-right: 15px;
-    width: 95px;
-    margin-bottom: 0;
+    margin-top: 10px;
+    background-color: var(--negative-amount-color);
 }

 form {
@@ -24,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 {
@@ -36,8 +39,7 @@ button {
    color: white;
    padding: 10px;
    width: 250px;
-    margin-top: auto;
-    margin-bottom: 50px;
+    margin-top: 100px;
 }

 button:disabled,
--- a/frontend/allowance-planner-v2/src/app/pages/history/history.page.scss
+++ b/frontend/allowance-planner-v2/src/app/pages/history/history.page.scss
@@ -8,6 +8,7 @@

 .left {
    width: 70%;
+    font-size: 18px;
 }

 .date {
--- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html
+++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html
@@ -18,8 +18,12 @@
      <div class="task" *ngFor="let task of tasks$ | async">
        <button (click)="completeTask(task.id)">Done</button>
        <div (click)="updateTask(task.id)" class="item">
-          <div class="name">{{ task.name }}</div>
-          <div class="assigned">{{ usernames[task.assigned ? task.assigned : 0] }}</div>
+          <div class="text">
+            <div class="name">
+              {{ task.name }}
+              <span class="assigned">{{ usernames[task.assigned ? task.assigned : 0] }}</span>
+            </div>
+          </div>
          <div
            class="reward"
            [ngClass]="{ 'negative': task.reward < 0 }"
--- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
+++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
@@ -31,6 +31,8 @@ mat-icon {
    align-items: center;
    border-bottom: 1px solid var(--line-color);
    padding: 5px;
+    padding-block: 10px;
+    font-size: 18px;
 }

 .item {
@@ -41,7 +43,6 @@ mat-icon {
 }

 .name {
-    margin-left: 10px;
    color: var(--font-color);
 }

@@ -49,6 +50,7 @@ mat-icon {
    margin-left: auto;
    margin-right: 15px;
    color: var(--positive-amount-color);
+    font-size: 22px;
 }

 .negative {
@@ -56,21 +58,28 @@ mat-icon {
 }

 button {
-    width: 57px;
-    height: 30px;
+    height: 45px;
    border-radius: 10px;
    color: white;
    background: var(--confirm-button-color);
+    padding-inline: 15px;
 }

 .add-button {
    background-color: var(--ion-color-primary);
    margin-right: 15px;
-    width: 75px;
+    height: 30px;
 }

 .assigned {
    color: var(--line-color);
    margin-left: 3px;
-    font-size: 12px;
+    font-size: 15px;
+}
+
+.text {
+    display: flex;
+    align-items: center;
+    width: 60%;
+    margin-left: 10px;
 }
--- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts
@@ -33,7 +33,7 @@ export class TasksPage implements ViewWillEnter {
      this.taskService.getTaskList().subscribe(tasks => {
        this.tasks$.next(tasks);
      });
-    }, 50);
+    }, 100);
  }

  createTask() {
--- a/frontend/allowance-planner-v2/src/global.scss
+++ b/frontend/allowance-planner-v2/src/global.scss
@@ -38,6 +38,7 @@

 ion-title {
    color: var(--ion-color-primary);
+    font-size: 24px;
 }

 ion-header {
@@ -46,4 +47,25 @@ ion-header {

 button {
    font-size: 16px;
+}
+
+ion-header.md {
+    ion-toolbar:first-child {
+        --padding-top: 30px;
+        --padding-bottom: 15px;
+    }
+}
+
+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);
 }
Author	SHA1	Message	Date
Sebastiaan de Schaetzen	5a20e76df2	Improve compatibility with old browsers (#136 ) All checks were successful Backend Deploy / build (push) Successful in 3m16s Details Backend Build and Test / build (push) Successful in 3m22s Details Reviewed-on: #136	2025-05-29 13:54:52 +02:00
Huffle	02c5c6ea68	fix toolbar (#135 ) All checks were successful Backend Build and Test / build (push) Successful in 3m44s Details Backend Deploy / build (push) Successful in 20s Details closes #134 Reviewed-on: #135	2025-05-28 12:02:43 +02:00
Huffle	9cbb8756d1	fix select (#133 ) All checks were successful Backend Build and Test / build (push) Successful in 3m9s Details Backend Deploy / build (push) Successful in 20s Details closes #117 Reviewed-on: #133	2025-05-28 11:47:11 +02:00
Huffle	604b92b3b3	AP-116 (#131 ) All checks were successful Backend Build and Test / build (push) Successful in 3m17s Details Backend Deploy / build (push) Successful in 18s Details closes #130 Reviewed-on: #131	2025-05-28 10:27:11 +02:00
Huffle	c7236394d9	add app logo (#129 ) Some checks failed Backend Deploy / build (push) Successful in 17s Details Backend Build and Test / build (push) Failing after 2m53s Details closes #116 Reviewed-on: #129	2025-05-28 10:19:23 +02:00
Huffle	720ef83c2e	change font size and move add and delete button in edit screens (#128 ) All checks were successful Backend Deploy / build (push) Successful in 18s Details Backend Build and Test / build (push) Successful in 2m35s Details closes #118 closes #119 Reviewed-on: #128	2025-05-28 10:00:18 +02:00
Huffle	5b1d107cac	make done button bigger (#127 ) All checks were successful Backend Deploy / build (push) Successful in 20s Details Backend Build and Test / build (push) Successful in 2m39s Details closes #122 Reviewed-on: #127	2025-05-28 09:31:07 +02:00
Huffle	662257ebc5	fix statusbar (#126 ) All checks were successful Backend Deploy / build (push) Successful in 24s Details Backend Build and Test / build (push) Successful in 2m59s Details closes #123 Reviewed-on: #126	2025-05-28 09:18:29 +02:00
Huffle	ad48882bca	icon (#115 ) All checks were successful Backend Build and Test / build (push) Successful in 3m16s Details Backend Deploy / build (push) Successful in 22s Details Reviewed-on: #115	2025-05-27 19:13:23 +02:00