fix(merge):

Fixed merge conflict

src/App.vue

@@ -2,6 +2,7 @@
 import NavBarComponent from '@/components/NavBarComponent.vue'
 import { RouterView, useRoute } from 'vue-router'
 import { computed } from 'vue'
+import HelpComponent from '@/components/HelpComponent.vue'
 
 const route = useRoute()
 
@@ -14,6 +15,106 @@ const showNavBar = computed(() => {
         route.path.startsWith('/konfigurasjon')
     )
 })
+
+const showHelp = computed(() => {
+    return !(
+        route.path == '/' ||
+        route.path == '/registrer' ||
+        route.path == '/logginn' ||
+        route.path == '/forgotPassword' ||
+        route.path.startsWith('/konfigurasjon')
+    )
+})
+
+const helpMessages = computed(() => {
+    let messages = []
+
+    if (route.path == '/hjem') {
+        messages.push('Heisann, jeg er Spare!')
+        messages.push('Jeg skal hjelpe deg med å spare penger 💵')
+        messages.push('Du kan legge til sparemål og spareutfordringer!')
+        messages.push('Sammen kan vi spare penger og nå dine mål! 🚀')
+    } else if (route.path == '/profil') {
+        messages.push('Du har kommet til profilen din 🐷')
+        messages.push('Her kan du se en oversikt over dine profilinstillinger ⚙️')
+        messages.push('Du kan også se dine fullførte sparemål og utfordringer!')
+        messages.push('Du kan redigere profilen din ved å trykke på "Rediger bruker" 💎')
+    } else if (route.path == '/profil/rediger') {
+        messages.push('️Her kan du se og redigere dine profil-instillinger 🪄')
+        messages.push('For å lagre endringene dine, trykk på "Lagre endringer" i høyre hjørne')
+        messages.push(
+            'Husk at passordet ditt må være minst 8 tegn langt, og inneholde minst ett tall, en stor bokstav, en liten bokstav, og et spesialtegn'
+        )
+    } else if (route.path == '/sparemaal') {
+        messages.push('Du har kommet til sparemålene dine 🎯')
+        messages.push(
+            'Et sparemål kan være noe du ønsker å spare penger til, for eksempel en ferie 🏖️ eller en ny sykkel 🚴🏻'
+        )
+        messages.push(
+            'Du kan lage nye sparemål ved å trykke på knappen "Opprett et nytt sparemål".'
+        )
+        messages.push(
+            'Du kan også endre rekkefølgen på sparemålene dine ved å trykke på "Endre rekkefølge".'
+        )
+        messages.push(
+            'Når du har fullført et sparemål, vil det dukke opp under "Fullførte sparemål".'
+        )
+        messages.push('Lykke til med målene dine! 🎀')
+    } else if (route.path == '/spareutfordringer') {
+        messages.push('Du har kommet til spareutfordringene dine 💰')
+        messages.push(
+            'En spareutfordring er en måte å bli kvitt dårlige vaner, samtidig spare penger for å nå dine mål ✨'
+        )
+        messages.push('Du kan opprette en ny utfordring ved å trykke på "Opprett en ny utfordring"')
+        messages.push(
+            'Du kan også endre rekkefølgen på utfordringene dine ved å trykke på "Endre rekkefølge".'
+        )
+        messages.push(
+            'Når du har fullført en utfordring, vil den dukke opp under "Fullførte utfordringer".'
+        )
+        messages.push('Lykke til med utfordringene dine 🏆')
+    } else if (route.path.startsWith('/sparemaal/oversikt')) {
+        messages.push('Her har du en oversikt over sparemålet ditt 🗽')
+        messages.push('Du kan redigere målet, markere det som ferdig eller slette det')
+        messages.push(
+            'Du kan også se hvor mye du har spart av målet ditt, og hvor mye du har igjen'
+        )
+    } else if (route.path.startsWith('/spareutfordringer/oversikt')) {
+        messages.push('Her har du en oversikt over spareutfordringen din 🏔️')
+        messages.push('Du kan redigere utfordringen, markere det som ferdig eller slette det')
+        messages.push(
+            'Du kan også se hvor mye du har spart av utfordringen din, og hvor mye du har igjen'
+        )
+    } else if (route.path.startsWith('/sparemaal/rediger')) {
+        messages.push('Her kan du opprette et nytt sparemål 🌸')
+        messages.push(
+            'Tittel er navnet på sparemålet, og beskrivelse er en kort forklaring på hva sparemålet går ut på.'
+        )
+        messages.push(
+            'Kroner spart er hvor mye du har spart til nå, og av målbeløp er hvor mye du ønsker å spare.'
+        )
+        messages.push('Forfallsdato er datoen du ønsker å ha nådd sparemålet ditt.')
+        messages.push('Lykke til med sparingen! 🌴')
+    } else if (route.path.startsWith('/spareutfordring/rediger')) {
+        messages.push('Her kan du opprette en ny utfordring ☕️')
+        messages.push(
+            'Tittel er navnet på utfordringen, og beskrivelse er en kort forklaring på hva utfordringen går ut på.'
+        )
+        messages.push(
+            'Pris per sparing er hvor mye du sparer hver gang du sparer, og antall sparinger er hvor mange ganger du har spart.'
+        )
+        messages.push(
+            'Av målbeløp er hvor mye du har spart til nå, og forfallsdato er når utfordringen skal være fullført.'
+        )
+        messages.push('Du kan selvsagt endre på dette senere!')
+        messages.push('Lykke til med utfordringen din! 🎉')
+    } else {
+        messages.push('Hei! Jeg er Spare 🐷')
+        messages.push('Jeg er her for å hjelpe deg med sparingen din 💰')
+        messages.push('Kom igang nå 🔥')
+    }
+    return messages
+})
 </script>
 
 <template>
@@ -21,6 +122,7 @@ const showNavBar = computed(() => {
 
     <main class="mb-10">
         <RouterView />
+        <HelpComponent v-if="showHelp" :speech="helpMessages" />
     </main>
 </template>
 

src/components/HelpComponent.vue

+<template>
+    <div class="fixed bottom-5 left-5">
+        <div @click="isModalOpen = true" class="hover:cursor-pointer">
+            <img
+                alt="Hjelp"
+                class="w-1/12 transition-transform duration-300 ease-in-out hover:scale-110"
+                src="@/assets/hjelp.png"
+            />
+        </div>
+    </div>
+    <ModalComponent v-if="isModalOpen" @close="isModalOpen = false">
+        <InteractiveSpare
+            :speech="speech"
+            :png-size="15"
+            direction="right"
+            @emit:close="isModalOpen = false"
+        />
+
+        <div class="-mb-5 mt-8 text-xs text-gray-500">
+            <p class="justify-center items-center">Trykk for å se hva Spare har å si!</p>
+            <a
+                @click="isModalOpen = false"
+                class="underline hover:bg-transparent font-normal text-gray-500 cursor-pointer transition-none hover:transition-none hover:p-0"
+            >
+                Skip
+            </a>
+        </div>
+    </ModalComponent>
+</template>
+
+<script setup lang="ts">
+import InteractiveSpare from '@/components/InteractiveSpare.vue'
+import { ref } from 'vue'
+import ModalComponent from '@/components/ModalComponent.vue'
+
+const isModalOpen = ref(false)
+
+defineProps(['speech'])
+</script>

src/components/InteractiveSpare.vue

 <template>
-    <ModalComponent :is-modal-open="isModalOpen" @close="isModalOpen = false">
-        <template v-slot:input>
-            <div
-                class="spareDiv flex items-center mr-10 max-w-[60vh] cursor-pointer"
-                :class="{
-                    'flex-row': direction === 'right',
-                    'flex-row-reverse': direction === 'left'
-                }"
-                @click="nextSpeech"
-            >
-                <!-- Image -->
-                <img
-                    :src="spareImageSrc"
-                    :style="{ width: pngSize + 'rem', height: pngSize + 'rem' }"
-                    :class="['object-contain', ...imageClass]"
-                    alt="Spare"
-                    class="w-dynamic h-dynamic object-contain"
-                />
-
-                <!-- Speech Bubble -->
-                <div
-                    v-if="currentSpeech"
-                    :class="`mb-40 inline-block relative w-64 bg-white p-4 rounded-3xl border border-gray-600 tri-right round ${bubbleDirection}`"
-                >
-                    <div class="text-left leading-6">
-                        <p class="speech m-0">{{ currentSpeech }}</p>
-                    </div>
-                </div>
-            </div>
-            <div class="-mb-5 mt-8 text-xs text-gray-500">
-                <p class="justify-center items-center">Trykk for å se hva Spare har å si!</p>
-                <a
-                    @click="clearSpeeches"
-                    class="underline hover:bg-transparent font-normal text-gray-500 cursor-pointer transition-none hover:transition-none hover:p-0"
-                >
-                    Skip
-                </a>
+    <div
+        class="spareDiv flex items-center mr-10 max-w-[60vh] cursor-pointer"
+        :class="{
+            'flex-row': direction === 'right',
+            'flex-row-reverse': direction === 'left'
+        }"
+        @click="nextSpeech"
+    >
+        <!-- Image -->
+        <img
+            :src="spareImageSrc"
+            :style="{ width: pngSize + 'rem', height: pngSize + 'rem' }"
+            :class="['object-contain', ...imageClass]"
+            alt="Spare"
+            class="w-dynamic h-dynamic object-contain"
+        />
+
+        <!-- Speech Bubble -->
+        <div
+            :class="`mb-40 inline-block relative w-64 bg-white p-4 rounded-3xl border border-gray-600 tri-right round ${bubbleDirection}`"
+        >
+            <div class="text-left leading-6">
+                <p class="speech m-0">{{ currentSpeech }}</p>
             </div>
-        </template>
-    </ModalComponent>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps, ref, watch } from 'vue'
+import { computed, defineProps, ref } from 'vue'
 import spareImageSrc from '@/assets/spare.png'
-import ModalComponent from '@/components/ModalComponent.vue'
 
 interface Props {
-    speech: string[] | null
+    speech?: Array<string>
     direction: 'left' | 'right'
     pngSize: number
-    isModalOpen: boolean
 }
 
 const props = defineProps<Props>()
-
 const speech = ref<string[]>(props.speech || [])
-const isModalOpen = ref(props.isModalOpen)
-
-// Watch the speech prop for changes
-watch(
-    () => props.speech,
-    (newVal) => {
-        if (newVal) {
-            // Check if the new value is not null
-            speech.value = newVal // Update the reactive speech array
-            currentSpeechIndex.value = 0 // Reset the speech index
-            isModalOpen.value = true // Open the modal if new speech is available
-        } else {
-            speech.value = [] // Clear the speech array if null is received
-            isModalOpen.value = false // Close the modal if there's no speech
-        }
-    }
-)
-
 const currentSpeechIndex = ref(0)
 const currentSpeech = computed(() => speech.value[currentSpeechIndex.value])
 
-const nextSpeech = () => {
-    if (speech.value.length > 0) {
-        // Remove the currently displayed speech first
-        speech.value.splice(currentSpeechIndex.value, 1)
+const emit = defineEmits(['emit:close'])
 
-        // Check if there are any speeches left after removal
-        if (speech.value.length > 0) {
-            // Move to the next speech or reset to the beginning if the current index is out of range
-            currentSpeechIndex.value = currentSpeechIndex.value % speech.value.length
-        } else {
-            // If no speeches left, reset index to indicate no available speech
-            currentSpeechIndex.value = -1
-            // Close the modal if there are no speeches left
-            modalClosed()
-        }
+const nextSpeech = () => {
+    if (currentSpeechIndex.value < speech.value.length - 1) {
+        currentSpeechIndex.value++
+    } else {
+        emit('emit:close')
     }
 }
 
@@ -105,16 +62,6 @@ const imageClass = computed(() => {
 const bubbleDirection = computed(() => {
     return props.direction === 'right' ? 'btm-left-in' : 'btm-right-in'
 })
-
-const clearSpeeches = () => {
-    currentSpeechIndex.value = -1
-    modalClosed()
-}
-
-const modalClosed = () => {
-    isModalOpen.value = false
-    currentSpeechIndex.value = -1
-}
 </script>
 <style scoped>
 /* CSS talk bubble */

src/components/ModalComponent.vue

@@ -17,6 +17,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+
 defineProps({
     title: String,
     message: String,
@@ -26,4 +28,8 @@ defineProps({
         required: false
     }
 })
+
+onMounted(() => {
+    console.log('ModalComponent mounted')
+})
 </script>

src/components/SpareComponent.vue

+<template>
+    <div>
+        <!-- This is the clickable image that will trigger the modal to open -->
+        <div
+            class="flex items-center"
+            :class="{
+                'flex-row scale-x-[-1]': imageDirection === 'right',
+                'flex-row-reverse': imageDirection === 'left'
+            }"
+        >
+            <a @click="isModalOpen = true" class="hover:bg-transparent z-20">
+                <img
+                    alt="Spare"
+                    class="md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"
+                    src="@/assets/spare.png"
+                />
+            </a>
+        </div>
+
+        <!-- InteractiveSpare modal component -->
+        <ModalComponent v-if="isModalOpen" @close="isModalOpen = false">
+            <InteractiveSpare
+                :speech="speech"
+                :png-size="pngSize!"
+                direction="left"
+                @emit:close="isModalOpen = false"
+            />
+
+            <div class="-mb-5 mt-8 text-xs text-gray-500">
+                <p class="justify-center items-center">Trykk for å se hva Spare har å si!</p>
+                <a
+                    @click="isModalOpen = false"
+                    class="underline hover:bg-transparent font-normal text-gray-500 cursor-pointer transition-none hover:transition-none hover:p-0"
+                >
+                    Skip
+                </a>
+            </div>
+        </ModalComponent>
+    </div>
+</template>
+
+<script setup lang="ts">
+import InteractiveSpare from '@/components/InteractiveSpare.vue'
+import { defineProps, ref, watchEffect } from 'vue'
+import ModalComponent from '@/components/ModalComponent.vue'
+
+const isModalOpen = ref(false)
+
+const props = defineProps({
+    speech: Array<string>,
+    pngSize: Number,
+    direction: String,
+    imageDirection: String,
+    show: {
+        type: Boolean,
+        default: false,
+        required: false
+    }
+})
+watchEffect(() => {
+    isModalOpen.value = props.show
+})
+</script>

src/views/ConfigAccountNumberView.vue

@@ -5,6 +5,20 @@
         <h1 class="mb-8 lg:mb-12 text-4xl font-bold">
             Legg til kontonummer for sparekonto og brukskonto
         </h1>
+        <div class="absolute bottom-0 md:bottom-40 left-0 w-40 h-40 md:w-52 md:h-52 ml-4">
+            <SpareComponent
+                :speech="[
+                    'Her skriver du inn kontonummer for sparekonto og brukskonto. 🪩',
+                    'Sparekonto er kontoen du vil legge alle dine oppsparte penger på!',
+                    'Brukskonto er kontoen du ønsker at pangene skal gå ut fra',
+                    'Du kan endre dette senere hvis du ønsker det!'
+                ]"
+                :png-size="10"
+                :direction="'right'"
+                :imageDirection="'right'"
+            ></SpareComponent>
+            <p class="text-xs absolute left-0 md:ml-3 ml-1 mt-2">Trykk på meg for hjelp ❗️</p>
+        </div>
         <div
             class="flex flex-col items-center justify-center bg-white rounded-lg p-8 shadow-lg w-full md:w-[45%]"
         >
@@ -50,6 +64,7 @@ import { computed, ref } from 'vue'
 import { useUserConfigStore } from '@/stores/userConfigStore'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
+import SpareComponent from '@/components/SpareComponent.vue'
 
 const MAX_DIGITS = 11
 const userConfigStore = useUserConfigStore()

src/views/ConfigBiometricView.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="flex flex-col gap-5">
             <button @click="userStore.bioRegister()">Legg til nå!</button>
-            <button @click="router.push('konfigurasjonSteg1')">Jeg gjør det senere</button>
+            <button @click="router.push({ name: 'configurations1' })">Jeg gjør det senere</button>
         </div>
     </div>
 </template>

src/views/ConfigFamiliarWithSavingsView.vue

@@ -3,6 +3,17 @@
         <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
             Hvor kjent er du med sparing fra før?
         </h1>
+        <div class="absolute bottom-0 md:bottom-40 left-0 w-40 h-40 md:w-52 md:h-52 ml-4">
+            <SpareComponent
+                :speech="[
+                    'Her kan du fylle inn hvor kjent du er med sparing fra før, slik at vi kan hjelpe deg på best mulig måte! 💡'
+                ]"
+                :png-size="10"
+                :direction="'right'"
+                :imageDirection="'right'"
+            ></SpareComponent>
+            <p class="text-xs absolute left-0 md:ml-3 ml-1 mt-2">Trykk på meg for hjelp ❗️</p>
+        </div>
         <div class="grid grid-cols-1 gap-8 mb-16 sm:gap-14 sm:mb-20 md:grid-cols-3">
             <div
                 :class="{
@@ -51,6 +62,7 @@ import { ref } from 'vue'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
 import { useUserConfigStore } from '@/stores/userConfigStore'
+import SpareComponent from '@/components/SpareComponent.vue'
 
 const selectedOption = ref<string | null>(null)
 const userConfigStore = useUserConfigStore()

src/views/ConfigHabitChangeView.vue

@@ -3,6 +3,17 @@
         <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
             Hvor store vaneedringer er du villig til å gjøre?
         </h1>
+        <div class="absolute bottom-0 md:bottom-40 left-0 w-40 h-40 md:w-52 md:h-52 ml-4">
+            <SpareComponent
+                :speech="[
+                    'Her kan du velge hvor mye innsats du er villig til å legge inn for å endre vanene dine! 📚'
+                ]"
+                :png-size="10"
+                :direction="'right'"
+                :imageDirection="'right'"
+            ></SpareComponent>
+            <p class="text-xs absolute left-0 md:ml-3 ml-1 mt-2">Trykk på meg for hjelp ❗️</p>
+        </div>
         <div class="grid grid-cols-1 gap-8 mb-16 sm:gap-14 sm:mb-20 md:grid-cols-3">
             <div
                 :class="{
@@ -51,6 +62,7 @@ import { ref } from 'vue'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
 import { useUserConfigStore } from '@/stores/userConfigStore'
+import SpareComponent from '@/components/SpareComponent.vue'
 
 const selectedOption = ref<string | null>(null)
 const userConfigStore = useUserConfigStore()

src/views/ConfigSpendingItemsAmountView.vue

@@ -3,6 +3,18 @@
         <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
             Hvor mye bruker du per kjøp på ...
         </h1>
+        <div class="absolute bottom-0 md:bottom-40 left-0 w-40 h-40 md:w-52 md:h-52 ml-4">
+            <SpareComponent
+                :speech="[
+                    'Her kan du skrive inn hvor mye penger du bruker per kjøp på ulike ting. 🍔',
+                    'For eksempel koster en kopp kaffe ☕️ kanskje 30 kr, mens en kinobillett 🎟️ koster 100 kr.'
+                ]"
+                :png-size="10"
+                :direction="'right'"
+                :imageDirection="'right'"
+            ></SpareComponent>
+            <p class="text-xs absolute left-0 md:ml-3 ml-1 mt-2">Trykk på meg for hjelp ❗️</p>
+        </div>
         <div class="w-full flex justify-center">
             <div :class="[showSecondBox ? 'md:grid md:grid-cols-2 md:gap-4 sm:gap-8 mb-6' : '']">
                 <div
@@ -79,6 +91,7 @@ import { computed, ref } from 'vue'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
 import { useUserConfigStore } from '@/stores/userConfigStore'
+import SpareComponent from '@/components/SpareComponent.vue'
 
 const userConfigStore = useUserConfigStore()
 

src/views/ConfigSpendingItemsTotalAmountView.vue

@@ -3,6 +3,18 @@
         <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
             Hvor mye bruker du per uke på ...
         </h1>
+        <div class="absolute bottom-0 md:bottom-40 left-0 w-40 h-40 md:w-52 md:h-52 ml-4">
+            <SpareComponent
+                :speech="[
+                    'Her skal du skrive inn hvor mye du bruker per uke på ulike kategorier. 🗓️',
+                    'Hvis du kjøper kaffe hver dag, kan du skrive inn hvor mye du bruker på kaffe per uke.'
+                ]"
+                :png-size="10"
+                :direction="'right'"
+                :imageDirection="'right'"
+            ></SpareComponent>
+            <p class="text-xs absolute left-0 md:ml-3 ml-1 mt-2">Trykk på meg for hjelp ❗️</p>
+        </div>
         <div class="w-full flex justify-center">
             <div :class="[showSecondBox ? 'md:grid md:grid-cols-2 md:gap-4 sm:gap-8 mb-6' : '']">
                 <div
@@ -79,6 +91,7 @@ import { computed, ref } from 'vue'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
 import { useUserConfigStore } from '@/stores/userConfigStore'
+import SpareComponent from '@/components/SpareComponent.vue'
 
 const userConfigStore = useUserConfigStore()
 

src/views/ConfigSpendingItemsView.vue

 <template>
     <div class="flex flex-col items-center justify-center min-h-screen text-center">
         <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">Hva bruker du mye penger på?</h1>
+        <div class="absolute bottom-0 md:bottom-40 left-0 w-40 h-40 md:w-52 md:h-52 ml-4">
+            <SpareComponent
+                :speech="[
+                    'Her kan du velge hva du bruker mye penger på, slik at vi kan hjelpe deg med å spare penger! 💸',
+                    'Hvis du ikke finner noe som passer, kan du skrive inn egne kategorier i \'Annet ...\' feltet',
+                    'Du må minst velge en kategori!'
+                ]"
+                :png-size="10"
+                :direction="'right'"
+                :imageDirection="'right'"
+            ></SpareComponent>
+            <p class="text-xs absolute left-0 md:ml-3 ml-1 mt-2">Trykk på meg for hjelp ❗️</p>
+        </div>
         <div class="flex flex-wrap justify-center gap-8 mb-8">
             <div
                 class="flex flex-col items-center justify-center bg-white rounded-lg sm:p-8 shadow-lg sm:w-full md:w-[45%]"
@@ -68,6 +81,7 @@ import { computed, ref } from 'vue'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
 import { useUserConfigStore } from '@/stores/userConfigStore'
+import SpareComponent from '@/components/SpareComponent.vue'
 
 const userConfigStore = useUserConfigStore()
 const selectedOptions = ref<string[]>([])

src/views/HomeView.vue

@@ -9,7 +9,9 @@
                 :imageDirection="'right'"
                 class="mt-24"
             ></SpareComponent>
-            <div class="flex flex-row gap-2 items-center mx-auto my-4 md:flex-col md:gap-4 md:m-8">
+            <div
+                class="flex flex-row gap-2 items-center mx-auto mt-4 mb-20 md:flex-col md:gap-4 md:m-8"
+            >
                 <ButtonAddGoalOrChallenge :buttonText="'Legg til sparemål'" :type="'goal'" />
                 <ButtonAddGoalOrChallenge
                     :buttonText="'Legg til spareutfordring'"
@@ -39,16 +41,18 @@ import { useChallengeStore } from '@/stores/challengeStore'
 import SavingsPath from '@/components/SavingsPath.vue'
 import router from '@/router'
 import GeneratedChallengesModal from '@/components/GeneratedChallengesModal.vue'
+import SpareComponent from '@/components/SpareComponent.vue'
 
 const showModal = ref(false)
 
 const goalStore = useGoalStore()
 const challengeStore = useChallengeStore()
-const isModalOpen = ref(false)
 const speech = ref<string[]>([])
-const showWelcome = ref<boolean>(false)
 
 const challenges = ref<Challenge[]>([])
+const goals = ref<Goal[]>([])
+const showWelcome = ref<boolean>(false)
+
 const goal = ref<Goal | null | undefined>(null)
 const isMounted = ref(false)
 
@@ -69,12 +73,10 @@ onMounted(async () => {
 const firstLoggedInSpeech = () => {
     const isFirstLogin = router.currentRoute.value.query.firstLogin === 'true'
     if (isFirstLogin) {
-        speech.value = [
-            'Hei, jeg er Spare!',
-            'Jeg skal hjelpe deg med å spare penger.',
-            'Du får varsel når jeg har noe å si!'
-        ]
-        isModalOpen.value = true
+        showWelcome.value = true
+        speech.value.push('Hei, jeg er Spare!')
+        speech.value.push('Jeg skal hjelpe deg med å spare penger.')
+        speech.value.push('Trykk på meg for å høre hva jeg har å si 🐷')
         router.replace({ name: 'home', query: { firstLogin: 'false' } })
     }
 }
@@ -87,19 +89,3 @@ const SpareSpeech = () => {
     ]
 }
 </script>
-
-<style>
-@keyframes jump {
-    0%,
-    100% {
-        transform: translateY(0);
-    }
-    50% {
-        transform: translateY(-10px);
-    }
-}
-
-.jump {
-    animation: jump 0.6s infinite ease-in-out;
-}
-</style>

src/views/ManageProfileView.vue

@@ -251,5 +251,3 @@ const saveChanges = async () => {
         </div>
     </div>
 </template>
-
-<style scoped></style>

src/views/UserGoalsView.vue

@@ -97,5 +97,3 @@ const changeOrder = async () => {
         />
     </div>
 </template>
-
-<style scoped></style>

src/views/ViewChallengeView.vue

@@ -4,12 +4,12 @@ import { computed, onMounted, ref } from 'vue'
 import ProgressBar from '@/components/ProgressBar.vue'
 import authInterceptor from '@/services/authInterceptor'
 import type { Challenge } from '@/types/challenge'
-import InteractiveSpare from '@/components/InteractiveSpare.vue'
+import SpareComponent from '@/components/SpareComponent.vue'
 
 const router = useRouter()
 
 const challengeInstance = ref<Challenge>({
-    title: 'Test titel',
+    title: 'Tittel',
     perPurchase: 20,
     saved: 0,
     target: 100,
@@ -29,8 +29,6 @@ const isCompleted = computed(() => challengeInstance.value.completedOn != null)
 
 const motivation = ref<string[]>([])
 
-const isModalOpen = ref(false)
-
 const calculateSpeech = () => {
     if (completion.value === 0) {
         return motivation.value.push(
@@ -142,12 +140,13 @@ const completeChallenge = () => {
                 </button>
             </div>
         </div>
-        <InteractiveSpare
-            :png-size="10"
+        <SpareComponent
             :speech="motivation"
-            direction="left"
-            :isModalOpen="isModalOpen"
-        />
+            :png-size="15"
+            :imageDirection="'left'"
+            :direction="'right'"
+            class="mb-5"
+        ></SpareComponent>
     </div>
 </template>
 

src/views/ViewGoalView.vue

@@ -4,7 +4,7 @@ import { computed, onMounted, ref } from 'vue'
 import ProgressBar from '@/components/ProgressBar.vue'
 import authInterceptor from '@/services/authInterceptor'
 import type { Goal } from '@/types/goal'
-import InteractiveSpare from '@/components/InteractiveSpare.vue'
+import SpareComponent from '@/components/SpareComponent.vue'
 
 const router = useRouter()
 
@@ -20,11 +20,6 @@ const completion = computed(() => (goalInstance.value.saved / goalInstance.value
 const isCompleted = computed(() => goalInstance.value.completedOn != null)
 
 const motivation = ref<string[]>([])
-const isModalOpen = ref(false)
-
-const openInteractiveSpare = () => {
-    isModalOpen.value = true
-}
 
 const calculateSpeech = () => {
     if (completion.value === 0) {
@@ -45,7 +40,7 @@ const calculateSpeech = () => {
         )
     } else if (completion.value >= 100) {
         return motivation.value.push(
-            `Fantastisk! Du har nådd målet ditt! Du har spart ${goalInstance.value.saved}kr av ${goalInstance.value.target}kr.`
+            `!Fantastisk Du har nådd målet ditt! Du har spart ${goalInstance.value.saved}kr av ${goalInstance.value.target}kr.`
         )
     }
 }
@@ -131,21 +126,13 @@ const completeGoal = () => {
                 </button>
             </div>
         </div>
-        <div class="flex items-center">
-            <a @click="openInteractiveSpare" class="hover:bg-transparent z-20">
-                <img
-                    alt="Spare"
-                    class="scale-x-[-1] md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"
-                    src="@/assets/spare.png"
-                />
-            </a>
-        </div>
-        <InteractiveSpare
-            :png-size="10"
+        <SpareComponent
             :speech="motivation"
-            direction="left"
-            :isModalOpen="isModalOpen"
-        />
+            :png-size="15"
+            :imageDirection="'left'"
+            :direction="'right'"
+            class="mb-5"
+        ></SpareComponent>
     </div>
 </template>
 

src/views/ViewProfileView.vue

 <script lang="ts" setup>
 import authInterceptor from '@/services/authInterceptor'
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import type { Profile } from '@/types/profile'
 import CardTemplate from '@/components/CardTemplate.vue'
-import InteractiveSpare from '@/components/InteractiveSpare.vue'
 import type { Challenge } from '@/types/challenge'
 import type { Goal } from '@/types/goal'
 import CardGoal from '@/components/CardGoal.vue'
 import router from '@/router'
+import SpareComponent from '@/components/SpareComponent.vue'
 import { useUserStore } from '@/stores/userStore'
 
 const profile = ref<Profile>()
 const completedGoals = ref<Goal[]>([])
 const completedChallenges = ref<Challenge[]>([])
-const isModalOpen = ref(false)
+const speech = ref<string[]>([])
 
 const updateUser = async () => {
     authInterceptor('/profile')
@@ -44,19 +44,20 @@ onMounted(async () => {
         .catch((error) => {
             return console.log(error)
         })
-})
 
+    openSpare()
+})
 const updateBiometrics = async () => {
     await useUserStore().bioRegister()
     await updateUser()
 }
 
-const welcome = computed(() => {
-    return [`Velkommen, ${profile.value?.firstName} ${profile.value?.lastName} !`]
-})
-
-const openInteractiveSpare = () => {
-    isModalOpen.value = true
+const openSpare = () => {
+    speech.value = [
+        `Velkommen, ${profile.value?.firstName} ${profile.value?.lastName} !`,
+        'Her kan du finne en oversikt over dine profilinstillinger!',
+        'Du kan også se dine fullførte sparemål og utfordringer!'
+    ]
 }
 </script>
 
@@ -109,21 +110,13 @@ const openInteractiveSpare = () => {
             </div>
 
             <div class="flex flex-col">
-                <InteractiveSpare
-                    :png-size="10"
-                    :speech="welcome"
-                    direction="left"
-                    :isModalOpen="isModalOpen"
-                />
-                <div class="flex items-center">
-                    <a @click="openInteractiveSpare" class="hover:bg-transparent z-20">
-                        <img
-                            alt="Spare"
-                            class="scale-x-[-1] md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"
-                            src="@/assets/spare.png"
-                        />
-                    </a>
-                </div>
+                <SpareComponent
+                    :speech="speech"
+                    :png-size="15"
+                    :imageDirection="'left'"
+                    :direction="'right'"
+                    class="mb-5"
+                ></SpareComponent>
                 <div class="flex flex-row justify-between mx-4">
                     <p class="font-bold">Fullførte sparemål</p>
                     <a class="hover:p-0 cursor-pointer" v-text="'Se alle'" />
@@ -147,5 +140,3 @@ const openInteractiveSpare = () => {
         </div>
     </div>
 </template>
-
-<style scoped></style>