add css for main goal

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

@@ -15,7 +15,13 @@
       *ngFor="let goal of allowance$ | async"
     >
       <div class="main" *ngIf="goal.id === 0; else other_goal">
-        <div class="name">Main Goal</div>
+        <div class="name">Main Allowance</div>
+        <div class="progress">{{ goal.progress }} SP</div>
+        <div class="buttons">
+          <button class="add-button">Add</button>
+          <button class="move-button">Move</button>
+          <button class="spend-button">Spend</button>
+        </div>
       </div>
       <ng-template #other_goal>
         <div class="color">

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

@@ -3,6 +3,21 @@
     border-radius: 10px;
     padding: 10px;
     margin-bottom: 20px;
+    margin-left: 10px;
+    margin-right: 10px;
+    color: var(--used-color);
+}
+
+.name {
+    font-size: 20px;
+}
+
+.progress {
+    color: var(--font-color);
+    margin-left: 15px;
+    margin-top: 8px;
+    margin-bottom: 15px;
+    font-size: 16px;
 }
 
 .bar {
@@ -11,9 +26,34 @@
 }
 
 .main-color {
-    --used-color: #7DCB7D;
+    --used-color: var(--ion-color-primary);
 }
 
 .other-color {
     --used-color: rgb(85, 26, 56);
 }
+
+.buttons {
+    display: flex;
+    gap: 10px;
+}
+
+button {
+    height: 30px;
+    padding-inline: 30px;
+    border-radius: 10px;
+    color: white;
+    font-size: 16px;
+}
+
+.add-button {
+    background-color: var(--confirm-button-color);
+}
+
+.move-button {
+    background-color: var(--ion-color-primary);
+}
+
+.spend-button {
+    background-color: var(--negative-amount-color);
+}

frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts

@@ -3,7 +3,6 @@ import { ActivatedRoute } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 import { Allowance } from 'src/app/models/allowance';
 import { AllowanceService } from 'src/app/services/allowance.service';
-import { UserService } from 'src/app/services/user.service';
 
 @Component({
   selector: 'app-allowance',
@@ -13,7 +12,19 @@ import { UserService } from 'src/app/services/user.service';
 })
 export class AllowancePage {
   private id: number;
-  private possibleColors: Array<string> = [];
+  // Move to add/edit page later
+  private possibleColors: Array<string> = [
+    '#6199D9',
+    '#D98B61',
+    '#DBC307',
+    '#13DEB5',
+    '#7DCB7D',
+    '#CF1DBD',
+    '#F53311',
+    '#2F00FF',
+    '#098B0D',
+    '#1BC2E8'
+  ];
   public allowance$: BehaviorSubject<Array<Allowance>> = new BehaviorSubject<Array<Allowance>>([]);
 
   constructor(