change font size and move add and delete button in edit screens (#128)

closes #118
closes #119

Reviewed-on: #128

frontend/allowance-planner-v2/package.json

@@ -47,6 +47,7 @@
     "@angular/cli": "^19.0.0",
     "@angular/compiler-cli": "^19.0.0",
     "@angular/language-service": "^19.0.0",
+    "@capacitor/assets": "^3.0.5",
     "@capacitor/cli": "7.2.0",
     "@ionic/angular-toolkit": "^12.0.0",
     "@types/jasmine": "~5.1.0",

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-top: 100px;
-    margin-bottom: 50px;
 }
 
 button:disabled,

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 {

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>

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-top: 10px;
-    margin-right: 15px;
+    background-color: var(--negative-amount-color);
-    width: 100px;
-    margin-bottom: 0;
 }
 
 form {
@@ -47,8 +45,7 @@ button {
     color: white;
     padding: 10px;
     width: 250px;
-    margin-top: auto;
+    margin-top: 100px;
-    margin-bottom: 50px;
 }
 
 button:disabled,

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>

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-top: 10px;
-    margin-right: 15px;
+    background-color: var(--negative-amount-color);
-    width: 95px;
-    margin-bottom: 0;
 }
 
 form {
@@ -36,8 +34,7 @@ button {
     color: white;
     padding: 10px;
     width: 250px;
-    margin-top: auto;
+    margin-top: 100px;
-    margin-bottom: 50px;
 }
 
 button:disabled,

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

@@ -8,6 +8,7 @@
 
 .left {
     width: 70%;
+    font-size: 18px;
 }
 
 .date {

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="text">
-          <div class="assigned">{{ usernames[task.assigned ? task.assigned : 0] }}</div>
+            <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 }"

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: 45px;
-    height: 30px;
     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;
 }

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() {

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,15 @@ ion-header {
 
 button {
     font-size: 16px;
+}
+
+ion-header.md {
+    ion-toolbar:first-child {
+        --padding-top: 27px;
+        height: 66px;
+    }
+}
+
+label {
+    font-size: 18px;
 }