add app icon

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

@@ -30,7 +30,8 @@ button {
     color: white;
     padding: 10px;
     width: 250px;
-    margin-top: 100px;
+    margin-top: auto;
+    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);
       })
-    }, 100);
+    }, 50);
   }
 
   canFinishGoal(allowance: Allowance): boolean {

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

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

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

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

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

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

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

@@ -18,12 +18,8 @@
       <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="text">
+          <div class="name">{{ task.name }}</div>
-            <div class="name">
+          <div class="assigned">{{ usernames[task.assigned ? task.assigned : 0] }}</div>
-              {{ 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,8 +31,6 @@ mat-icon {
     align-items: center;
     border-bottom: 1px solid var(--line-color);
     padding: 5px;
-    padding-block: 10px;
-    font-size: 18px;
 }
 
 .item {
@@ -43,6 +41,7 @@ mat-icon {
 }
 
 .name {
+    margin-left: 10px;
     color: var(--font-color);
 }
 
@@ -50,7 +49,6 @@ mat-icon {
     margin-left: auto;
     margin-right: 15px;
     color: var(--positive-amount-color);
-    font-size: 22px;
 }
 
 .negative {
@@ -58,28 +56,21 @@ mat-icon {
 }
 
 button {
-    height: 45px;
+    width: 57px;
+    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;
-    height: 30px;
+    width: 75px;
 }
 
 .assigned {
     color: var(--line-color);
     margin-left: 3px;
-    font-size: 15px;
+    font-size: 12px;
-}
-
-.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);
       });
-    }, 100);
+    }, 50);
   }
 
   createTask() {

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

@@ -38,7 +38,6 @@
 
 ion-title {
     color: var(--ion-color-primary);
-    font-size: 24px;
 }
 
 ion-header {
@@ -48,14 +47,3 @@ ion-header {
 button {
     font-size: 16px;
 }
-
-ion-header.md {
-    ion-toolbar:first-child {
-        --padding-top: 27px;
-        height: 66px;
-    }
-}
-
-label {
-    font-size: 18px;
-}