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

closes #118
closes #119

Reviewed-on: #128

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-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,