Fix/ fixed the errors in Menu, BudgetBox and Commitment

src/components/BaseComponents/Menu.vue

@@ -31,7 +31,7 @@
                     <li v-if="userStore.isLoggedIn" class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle username-text text-white " href="#" role="button"
                             data-bs-toggle="dropdown" aria-expanded="false">
-                            <img src="@/assets/icons/person.svg">{{ userStore.firstname }}
+                            <img src="@/assets/icons/person.svg">{{ useUserInfoStore().firstname}}
                         </a>
                         <ul class="dropdown-menu dropdown-username-content">
                             <li><a class="dropdown-item text-white dropdown-username-link" href="#"
@@ -64,7 +64,7 @@ import { useUserInfoStore } from '@/stores/UserStore';
 
 const router = useRouter();
 
-const userStore = useUserInfoStore();
+const userStore : any = useUserInfoStore();
 
 function toHome() {
     router.push('/')

src/components/Budget/BudgetBox.vue

@@ -21,16 +21,17 @@ const props = defineProps({
 // Calculated balance variable
 let balance = props.budget - props.expenses
 // Reactive variable for determining background color
-const iRef = ref(null)
+const iRef = ref<Element | null>(null);
 
 /**
  * Checks if the balance is positive, and depending on the value
  * changes background color to green (positive) or red (negative)
  */
 onMounted(() => {
-  if (balance >= 0) {
+  if (iRef.value !== null && balance >= 0) {
     // By default, the background is set to red
-    iRef.value.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
+    const element = iRef.value as HTMLElement;
+    element.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
   }
 })
 

src/components/Configuration/ConfigurationSteps/Commitment.vue

@@ -12,10 +12,10 @@ emit('changeRouterEvent', '/commitment')
 
 // Reactive variables for form and radio buttons.
 const formRef = ref()
-const lowRef = ref('')
-const mediumRef = ref('')
-const highRef = ref('')
-let errorMsg = ref('');
+const lowRef = ref()
+const mediumRef = ref()
+const highRef = ref()
+let errorMsg = ref();
 
 /**
  * Validates the commitment form radio buttons and updates the commitment choice in the store.
@@ -30,7 +30,7 @@ const onClick = () => {
     if (lowRef.value.checked) choice = 'LITTLE'
     else if (mediumRef.value.checked) choice = 'SOME'
     else if (highRef.value.checked) choice = 'MUCH'
-    useConfigurationStore().setCommitment(choice)
+    useConfigurationStore().commitment(choice)
     router.push('/experience')
   }
   else {