From 720ef83c2e189cbc74421f5c2bd23fb0eada494b Mon Sep 17 00:00:00 2001
From: Huffle <knaepen.selina@gmail.com>
Date: Wed, 28 May 2025 10:00:18 +0200
Subject: [PATCH] change font size and move add and delete button in edit
 screens (#128)

closes #118
closes #119

Reviewed-on: https://gitea.seeseepuff.be/seeseemelk/allowance_planner_2000/pulls/128
---
 .../app/pages/add-allowance/add-allowance.page.scss  |  3 +--
 .../pages/edit-allowance/edit-allowance.page.html    | 10 +++++-----
 .../pages/edit-allowance/edit-allowance.page.scss    |  9 +++------
 .../src/app/pages/edit-task/edit-task.page.html      | 10 +++++-----
 .../src/app/pages/edit-task/edit-task.page.scss      |  9 +++------
 .../src/app/pages/history/history.page.scss          |  1 +
 .../src/app/pages/tasks/tasks.page.html              |  8 ++++++--
 .../src/app/pages/tasks/tasks.page.scss              | 12 ++++++++++--
 frontend/allowance-planner-v2/src/global.scss        |  5 +++++
 9 files changed, 39 insertions(+), 28 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 b819a5f..50e2f84 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
@@ -30,8 +30,7 @@ button {
     color: white;
     padding: 10px;
     width: 250px;
-    margin-top: auto;
-    margin-bottom: 50px;
+    margin-top: 100px;
 }
 
 button:disabled,
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 e615ac8..f17c6b8 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
@@ -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>
@@ -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>
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 d0d5f34..78327f8 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
@@ -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 {
@@ -47,8 +45,7 @@ button {
     color: white;
     padding: 10px;
     width: 250px;
-    margin-top: auto;
-    margin-bottom: 50px;
+    margin-top: 100px;
 }
 
 button:disabled,
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 54b2a15..9c7cc1d 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
@@ -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>
@@ -32,5 +27,10 @@
       <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>
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 41248d2..9e3f6ce 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
@@ -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 {
@@ -36,8 +34,7 @@ button {
     color: white;
     padding: 10px;
     width: 250px;
-    margin-top: auto;
-    margin-bottom: 50px;
+    margin-top: 100px;
 }
 
 button:disabled,
diff --git a/frontend/allowance-planner-v2/src/app/pages/history/history.page.scss b/frontend/allowance-planner-v2/src/app/pages/history/history.page.scss
index e0c79ea..c34e68c 100644
--- 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 {
diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html
index beac10a..03d1920 100644
--- 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 }"
diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
index 5fe9ed1..1e04d51 100644
--- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
+++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
@@ -32,6 +32,7 @@ mat-icon {
     border-bottom: 1px solid var(--line-color);
     padding: 5px;
     padding-block: 10px;
+    font-size: 18px;
 }
 
 .item {
@@ -42,7 +43,6 @@ mat-icon {
 }
 
 .name {
-    margin-left: 10px;
     color: var(--font-color);
 }
 
@@ -50,6 +50,7 @@ mat-icon {
     margin-left: auto;
     margin-right: 15px;
     color: var(--positive-amount-color);
+    font-size: 22px;
 }
 
 .negative {
@@ -73,5 +74,12 @@ button {
 .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;
 }
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/global.scss b/frontend/allowance-planner-v2/src/global.scss
index b7eb37e..0492bf4 100644
--- 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 {
@@ -53,4 +54,8 @@ ion-header.md {
         --padding-top: 27px;
         height: 66px;
     }
+}
+
+label {
+    font-size: 18px;
 }
\ No newline at end of file