Redirect to tabs when user is selected

frontend/allowance-planner-v2/src/app/pages/allowance/allowance-routing.module.ts

@@ -4,7 +4,7 @@ import { AllowancePage } from './allowance.page';
 
 const routes: Routes = [
   {
-    path: '',
+    path: ':id',
     component: AllowancePage,
   }
 ];

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

@@ -6,14 +6,14 @@
 }
 
 .title {
-    margin-top: 40%;
+    margin-top: 150px;
     color: var(--ion-color-primary);
     font-size: 40px;
 }
 
 .selection {
     gap: 10%;
-    margin-top: 20%;
+    margin-top: 100px;
     color: var(--ion-color-primary);
 }
 
@@ -27,4 +27,5 @@
     height: 130px;
     border: 1px solid var(--ion-color-primary);
     border-radius: 10px;
+    background-color: var(--ion-color-secondary);
 }

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { User } from 'src/app/models/user';
 import { StorageService } from 'src/app/services/storage.service';
 import { UserService } from 'src/app/services/user.service';
@@ -12,7 +13,11 @@ import { UserService } from 'src/app/services/user.service';
 export class UserLoginPage implements OnInit {
   public users: Array<User> = [];
 
-  constructor(private userService: UserService, private storageService: StorageService) { }
+  constructor(
+    private userService: UserService,
+    private storageService: StorageService,
+    private router: Router
+  ) { }
 
   ngOnInit() {
     this.userService.getUserList().subscribe(users => {
@@ -22,5 +27,6 @@ export class UserLoginPage implements OnInit {
 
   selectUser(id: number) {
     this.storageService.set('user-id', id);
+    this.router.navigate(['/tabs/allowance', id]);
   }
 }